📱

<model-viewer>を使ってTwitter Cardsに3Dモデルを埋め込みつつ #WebAR で現実世界に重畳する

2021/12/09に公開

WebAR

@ikkou a.k.a HEAVEN chan です。Day 1 に続き、空白を埋めるべく別エントリを投下します。
ちなみに一部重複があるものの、全日 25 日が埋まっています！嬉しい！ありがとうございます！

ところで本エントリは深夜 2 時過ぎ、まさに 公開直前というタイミングで書き連ねた内容が全て消える という事故が発生した直後に涙を流しながら書き直しています。

本筋とは直接関係のない前日譚

というプロローグパート、もちろん WebXR 関連の小噺が消失前には存在していましたが、書き直す気力がないので端折って紹介します。

Day 1 で触れた、Nreal Light の Nebula で WebXR Device API が動かせる! を実機検証するためにナウい組み合わせの Nreal Light 黒 DevKit と SIM フリー版 Xperia 1 III を調達した
黒 DevKit は Day 9 のネタとして取り扱える余裕をもって着弾した
SIM フリー版 Xperia 1 III で日本向けの Nebula 2.00.00.154 は動作しなかった
SIM フリー版 Xperia 1 III で US 向けの Nebula 2.02.00.2111081602 は MR モードも Air Casting も問題なく動作した
Nreal Light で WebXR Device API を動作できる『FarePlay for NReal』のストアページには コンシューマー版でしか動作しない という注意書きが記されている
コンシューマー版でしか動作しない旨は自身が Day 1 で触れていた
結果として求める実機検証はできず、およそ 30 万円弱という決済のみが残った
FarePlay for NReal は iOS における『XR Viewer』のような存在
Nebula 内蔵のブラウザで WebXR Device API が動く日を待っている ← イマココ

XR 用途の Android 端末を買うなら Xperia 1 III がオススメ?

後先を考えずに調達してしまった Xperia 1 III ですが、2021-12-09 現在、この Xperia 1 III は次に挙げる条件を全て満たせる数少ない Android 端末です。

ARCore に対応している ( ※ ARCore supported devices に掲載されている )
Nreal Light に対応している ( ※ Nebula が動作する / 検証済み )
VIVE Flow に対応している
Xperia View に対応している

Android 端末における WebXR Device API の対応には ARCore 対応が求められるので、WebXR という文脈でも検討候補に入れる価値はあると考えています。ちとお高いですが……。

以上、前日譚でした。引き続き 書き直された 本編をお楽しみください。

<model-viewer>を使ってTwitter Cardsに3Dモデルを埋め込みつつWebARで現実世界に重畳する?

たまに覗くと新しい機能が追加されている印象のある <model-viewer> ですが、実は head 要素内の meta 要素に所定の内容を仕込むと、Twitter Cardsとして3Dモデルを表示、さらに AR としても重畳できるようになっています。

https://modelviewer.dev/

なんとなく素敵な機能に見えますが、2021-12-09 時点ではまだちょっとしたトラップがあります。早速、次のツイートを Twitter アプリではなくブラウザで、つまり iOS であれば Safari で、Android であれば Chrome でアクセスしてください。

ブラウザ共通の挙動

iOS/Android 共通で次の挙動になります。

本来意図されているであろう Player Card ではなく Summary Card で表示される
- meta 要素の content 属性には summary ではなく player を指定している
  - Card validator で確認しても player tag found と表示されている
サムネイルの上の再生ボタン ▶️ をタップすると Player Card 表示として 3D モデルが大きく表示される
3D モデルはグリグリ動かせる
端末が「ダークモード」の場合、3D モデルの背景色は「ダークモード」の色になる
ヘルメット部分に映り込む environment-image は正常に適用されている

ブラウザ別の挙動

一部の挙動は iOS/Android 間で異なり、iOS もバージョンによって異なります。
結論から言うと WebAR として 3D モデルを表示できません でした。

iPhone 11 Pro Max / iOS 14.7 / Safari 15

右下の AR マークをタップしても何も起こらない
- 本来であれば AR Quick Look が起動する
  - <model-viewer> のページでは正常に動作する
3D モデルのテクスチャは正常に表示される

iPhone 13 Pro / iOS 15.1.1 / Safari 15

右下の AR マークをタップしても何も起こらない ( iOS 14.7 と同様)
3D モデルの胸元のテクスチャが正常に表示される剥がれ落ちている ( ※ 3D モデルによる )
- iOS 15 系に含まれる WebGL のバグとのこと

Xperia 1 III / Android 11 / Chrome 96.0.4664.45

右下の AR マークをタップすると「このコンテンツはブロックされました。サイト所有者に連絡して問題を解決してください。」と表示され、AR で表示できない
3D モデルのテクスチャは正常に表示される

参考: Windows 11 / Chrome 96.0.4664.93

右下の AR マークは表示されない ( PC モードでは AR 表示できないので正しい挙動 )
3D モデルのテクスチャは正常に表示される

それでは次にアプリ版の Twitter クライアントで試してみましょう。先ほどと同じように次の URL にアクセスし、上部に表示される「アプリを開く」からアプリ版の Twitter を起動してください。もちろん Twitter アプリがインストールされていることが前提となります。

アプリ版の挙動

ブラウザ版と異なり Player Card で表示される
サムネイルの上の再生ボタン ▶️ をタップしたときの挙動は iOS/Android 間で異なる

iOS 版特有の挙動

アプリ内ブラウザ (WebView) で 3D モデルが大きく表示される
ブラウザ版と同じように胸元のテクスチャが剥がれ落ちる ( ※ 3D モデルによる )
右下の AR マークをタップすると AR Quick Look は起動するが、テクスチャが全て剥がれ落ちた真っ黒の 3D モデルとして表示され、WebAR を起動できない
- テクスチャに問題がないと思われる 3D モデルでも AR Quick Look 起動後にオブジェクトタブでローディングが続く現象が起きるパターンもある

Android 版特有の挙動

Chrome が立ち上がり、3D モデルが大きく表示される
右下の AR マークをタップすると Scene Viewer が起動して WebAR で 3D モデルを重畳できる

ブラウザ版とアプリ版を通しての所感

1 ソースで iOS/Android の両方に対応できるのが <model-viewer> を推せるポイントの 1 つですが、今回紹介した Twitter Cards としての embed に関しては、少なくとも 2021-12-09 現在はまだまだ不安定なものである と言えます。

実際、公式アカウントでも現段階では Android でなら WebAR が動作するよ! という言い方をしています。iOS でも正常に動作するようになるかは it's up to Apple now to fix the rest. つまり Apple 次第というのはなかなか趣き深いですね……!!

<model-viewer>を使ってTwitter Cardsに3Dモデルを埋め込みつつWebARで現実世界に重畳する方法

<model-viewer> 公式ジェネレーターの『3D Twitter card generator』を使用します。

このジェネレーターによって吐き出される関連する meta 要素は次の通りです。

<meta name="twitter:card" content="player"/>
<meta name="twitter:site" content="modelviewer"/>
<meta name="twitter:player:width" content="480"/>
<meta name="twitter:player:height" content="480"/>
<meta name="twitter:player" content="https://modelviewer.dev/examples/twitter/player.html?src=https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb&poster=https://modelviewer.dev/shared-assets/models/NeilArmstrongPoster.webp&alt=Neil%20Armstrong%27s%20Spacesuit%20from%20the%20Smithsonian%20Digitization%20Programs%20Office%20and%20National%20Air%20and%20Space%20Museum&environmentImage=https://modelviewer.dev/shared-assets/environments/moon_1k.hdr"/>
<meta property="og:title" content="3D model-viewer embed"/>
<meta property="og:description" content="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum"/>
<meta property="og:image" content="https://modelviewer.dev/shared-assets/models/NeilArmstrong.png"/>

<meta http-equiv="refresh" content="0; url='https://modelviewer.dev/'"/>

この中で og:title はジェネレーター内に指定項目がありません。ジェネレーターが吐き出したものをそのまま使うと「3D model-viewer embed」と表示されてしまうので、必要に応じて適切な内容に書き換えてください。

また、やたら長い長い URL があります。これは CORS 対策で modelviewer.dev 経由で 3D モデル本体、サムネイルとなる WebP と PNG 画像、その Alt テキスト ( これは og:description と同一 )、そして必要に応じて environment-image を始めとする Extra property を呼び出しています。

<meta name="twitter:player" content="https://modelviewer.dev/examples/twitter/player.html?src=https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb&poster=https://modelviewer.dev/shared-assets/models/NeilArmstrongPoster.webp&alt=Neil%20Armstrong%27s%20Spacesuit%20from%20the%20Smithsonian%20Digitization%20Programs%20Office%20and%20National%20Air%20and%20Space%20Museum&environmentImage=https://modelviewer.dev/shared-assets/environments/moon_1k.hdr"/>

もしも CSS で Styling したい場合はこの Extra property で指定してください。

Note that the properties use the JavaScript names, not the attribute names (e.g. environmentImage rather than environment-image). This works not just for the <model-viewer> properties, but you can also specify style and put all of your desired CSS on the value side.

現場からは以上です！

プロダクション環境で使うにはまだ厳しい印象ですが、興味がある方はぜひ試してみてください！

明日 Day 10 はいとーさんによる『実務で使うWebARのチェックポイント』です！お楽しみに！