Zenn
📝

Apple Vision Pro (visionOS 2.0) における WebXR Device API とその周辺の現状確認

2024/09/17に公開
WebXR
Vision Pro
visionOS
tech

@ikkou です。ウェブにおける XR である WebXR を長らく推しています。この記事は「Apple Vision Pro (visionOS 1.0.2) における WebXR Device API とその周辺の現状確認」の続編です。

祝 visionOS 2.0 リリース 🎉

日本時間の2024年9月17日(火) 深夜2時過ぎに visionOS 2.0 がリリースされました！

https://www.apple.com/jp/newsroom/2024/09/visionos-2-for-apple-vision-pro-is-available-today/

筆者は Apple Developer Program に加入しているので WWDC24 で visionOS 2 が発表された6月11日の未明から visionOS 2 Developer Beta の各バージョンに触れてきましたが、例によって NDA 厳守なので記事化は控えてきました。めでたく Beta Program の影響を受けない visionOS 2 の正式版が公開されたので、これまでに確認していることを踏まえて visionOS 2 にアップデートした直後の Apple Vision Pro における WebXR Device API とその周辺の現状をまとめます。

前提となる検証環境


Developer Beta ではなく正式版の visionOS 2.0 をインストールした


visionOS 2.0 (22N320) インストール後

  • Apple Vision Pro Model A2117
  • visionOS 2.0 (22N320)
  • 日本語
  • Safari on Vision Pro の UserAgent
    • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15
      • 振る舞いとしては macOS 10.15.7 の Safari 18.0 扱い

何も設定を変更していない標準状態の Safari on Vision Pro はフラグの変更なしで WebXR Device API に対応していて WebVR のための immersive-vr は動作するが WebAR のための immersive-ar は動作しない

見出しがすべてです:)
なにもしなくても WebXR Device API を必要とする WebVR コンテンツが動作します🎉🎉🎉

百聞は一 “体験” にしかず、WebKit が用意している Chess Garden にアクセスしてみましょう。


LAUNCH VR EXPERIENCE をタップすると WebVR モードに遷移する


WebXR Hand Input Module でチェスの駒を操作できる

WebXR Device API そして WebXR Hand Input Module の動作確認にうってつけです！

WebXR Device API のデフォルト対応

visionOS 1 系において、Safari on Vision Pro における WebXR 関連の WebKit Feature Flags は次のものが用意されていました。

  • HTML <model> element
  • WebXR Device API
  • WebXR Hand Input Module
  • WebXR Augmented Module
  • WebXR Gamepad Module

visionOS 1 系では、これらの機能をユーザー自身で明示的に有効化する必要がありましたが、visionOS 2.0 では、この内の WebXR Device API, WebXR Hand Input Module, WebXR Gamepad Module の 3 つはデフォルトで有効化されました。言い換えるとユーザー自身で明示的にフラグを有効化する必要がなくなりました！

visionOS 1 系 visionOS 2.0
HTML <model> element
 有効化が必要 有効化が必要
WebXR Device API 有効化が必要 有効化されている
WebXR Hand Input Module 有効化が必要 有効化されている
WebXR Augmented Module 有効化が必要
※有効化しても動作しない		 有効化が必要
※有効化しても動作しない
WebXR Gamepad Module 有効化が必要 有効化されている

visionOS 1 系だった人は visionOS 2.0 にアップデートが完了したタイミングから自動的に WebXR Device API が有効化されているので、アップデート直後に WebXR Device API が有効化されていなければ動作しない WebXR Samples の Immersive VR Session にアクセスしたとしても、正常に動作します。

visionOS 1 系の Safari on Vision Pro で WebXR Device API が動作するだけでも “待ちに待った” 状況でしたが、ユーザー自身による変更が必要である以上はまだ “当たり前” とは言い切れませんでした。しかし visionOS 2.0 で有効化されていることが標準的な状態となったため、Safari on Vision Pro にとっての WebXR は “当たり前” と言っても過言ではないはずです。

WebXR Device API が有効化されることで、WebVR のための immersive-vr が動作するようになります。また、WebXR Hand Input Module が有効化されることで、ハンドトラッキングも動作するので、WebXR Samples の Immersive VR Session with hands も正常に動作します。

WebXR Device API と直接関係ない HTML <model> element については後述します。

有効化しても動作しない WebXR Augmented Module

WebVR のための immersive-vr に対して WebAR のための immersive-ar を動作させるフラグとして WebXR Augmented Module が用意されていますが、このフラグは有効化しても何も変わりません。フラグは立つものの動作しません。これは visionOS 1 系から変わっていない挙動です。

これはとてもアンハッピーな状況です。

WebXR に強い 8th Wall は「Basketball Arcade」という WebXR コンテンツを「Apple Vision Pro に対応した公式サンプル」として提供しています。

https://www.8thwall.com/niantic/basketball

スマートフォンや Meta Quest 3 などでアクセスすると現実空間にバスケットボールのゴールが現れる WebAR コンテンツとして体験できますが、Apple Vision Pro でアクセスすると 100% Virtual な WebVR コンテンツとして表示されてしまいます。Apple Vision Pro の美麗なパススルーであれば最高の WebAR コンテンツとなるはずですが、カメラアクセスが閉ざされている関係から落とし所としての WebVR になっているのではないかと考えています。

WebXR Device API とは直接関係しない Apple 独自の機能

1. AR Quick Look

AR Quick Look は iPhone、iPad、Apple Vision Pro上で USDZ ファイルを 3D 表示できる機能です。フラグの変更は必要とせず、Safari の標準機能として組み込まれていますが、macOS には対応していません。

WebXR としての AR Quick Look の 使い方

AR Quick Look はネイティブアプリでも動作しますが、WebXR として使用する場合はサムネイルとして指定する画像を rel="ar" 属性を付与した a 要素で囲うだけです。この rel="ar" 属性がない場合は AR Quick Look の対象として認識されません。

<a href="item.usdz" rel="ar">
    <img src="item_thumbnail.png">
</a>

本記事での詳細は省きますが、AR Quick Look は Apple Pay の組み込みやカスタムアクションに対応しています。Apple の公式サイトにはシンプルな表示から凝った表示まで一通り網羅されているので必見です。

https://developer.apple.com/jp/augmented-reality/quick-look/

また、AR Quick Look を利用した見応えのある日本発のコンテンツという観点では @tasklong さんの「えきべん3Dミュージアム」が推せます。

visionOS 2.0 で導入された Surface snapping


WWDC24 visionOS向けQuick Lookの新機能 10:31 より引用

visionOS 2.0 から AR Quick Look に Surface snapping 機能が追加されました。この Surface snapping は オブジェクトを平面に接地するときに「コツッ」という音を提示 します。実際の音は「visionOS向けQuick Lookの新機能」の 9:50 頃に確認できます。言われなければ気付かなかったかもしれませんが、小粒でありながらリアルさが増します。特に変更は不要で、これまでのコンテンツを含めて visionOS 2.0 では標準機能となります。

2. HTML <model> element

HTML <model> element は WebXR Device API と同じように W3C で策定されている仕様のひとつです。Editor は Apple の中の人でステータスは Draft Community Group Report です。

https://immersive-web.github.io/model-element/

登場は意外と古く visionOS がその存在を明らかにされる 2 年前の 2021 年に iPhone 向けの iOS 14.5 に含まれる機能として登場しました。リリース当時はまだ挙動に怪しいところが多く、文字通り “実験的な” 機能でした。palan さんの bagelee に当時の様子が記されています。

https://bagelee.com/programming/3d-model-safari/

誤解を恐れずに言うと HTML <model> element は外部ライブラリを必要とせず WebKit だけで動作する <model-viewer> です。


HTML <model> element はユーザー自身で明示的にフラグを有効化する必要がある

visionOS 1 系, 2.0 ともに HTML <model> element はユーザー自身で明示的にフラグを有効化する必要がありますが、有効化することで 3D モデルフォーマットの USDZ ファイル *.usdz と GLB ファイル *.glb を表示できます。

HTML <model> element の使い方

immersive-web / model-element の explainer.md では次のように説明されています。

もっともシンプルな例では source 要素で USDZ ファイルの example.usdz と GLB ファイルの example.glb を読み込んでいます。これは画像を表示する picture 要素や動画を表示する video 要素と同じような使い方です。この例では 3D モデルが画像と同じように平面で表示されます。

<model style="width: 400px; height: 300px">
    <source src="assets/example.usdz" type="model/vnd.usdz+zip">
    <source src="assets/example.glb" type="model/gltf-binary">
</model>

model 要素にはさまざまなオプションがあり、もし 3D モデルにアニメーション要素が含まれる場合、autoplay 属性を付与することで自動的に再生されます。また、interactive 属性を付与することでモデルを回転させたり、拡大・縮小できたりします。

さらに picture 要素を入れ子することで、3D モデルが表示できなかった場合のフォールバックとして複数の代替要素を指定できます。

<model style="width: 400px; height: 300px" autoplay interactive>
    <source src="fake.typ1" type="imaginary/type-1">
    <source src="fake.typ2" type="imaginary/type-2">
    <picture>
        <source src="animated-version.mp4" type="video/mp4">
        <source src="animated-version.webp" type="image/webp">
        <img src="animated-version.gif"/>
    </picture>
</model>

Apple Vision Pro で動作するデモ

実際に動作するシンプルなデモを用意したので HTML <model> element を有効化した Apple Vision Pro でアクセスしてみてください。フォールバックに画像を指定しているので HTML <model> element を有効化 していない Apple Vision Pro はもちろん、Safari や Chrome でアクセスすると1枚の画像が表示されます。

https://loud-six-scraper.glitch.me/

3. 空間メディアの表示

Apple Vision Pro 特有の機能として空間写真 (Spatial photo) の撮影が挙げられます。

visionOS 2.0 の写真アプリではサムネイルをタップして右上のイマーシブアイコンをタップすると空間写真も空間ビデオも画面いっぱいに没入感を増します。

iPhone 16 の登場で空間ビデオも空間写真もより裾野が広がることが予想されますが、visionOS 2.0 ではこの「空間写真」を Web に表示できます。

空間写真 (Spatial photo) の表示方法

ありふれた Element.requestFullscreen() メソッドを利用することで Safari on visionOS でも同様の挙動を実現できます。

<picture>
    <source srcset="path/to/image.heic" type="image/heic">
    <img src="path/to/image.jpg" id="fullscreenTarget">
</picture>

fullscreenTarget.addEventListener('click', event => {
    fullscreenTarget.requestFullscreen();
});

.heic ファイルを指定した source 要素とサムネイルとなる画像を指定した img 要素を囲った picture を click　イベントで requestFullscreen を発火させるだけです。この例の場合、サムネイルをタップすると空間写真が単体で表示され、右上のイマーシブアイコンをタップすると画面いっぱいに表示されます。

パノラマ画像の表示方法

「空間写真」と同じように「パノラマ写真」も画面いっぱいに表示できます。

<img src="path/to/panorama.jpg" id="fullscreenTarget">

fullscreenTarget.addEventListener('click', event => {
    fullscreenTarget.requestFullscreen();
});

この例も空間写真と同じように、サムネイルをタップすると空間写真が単体で表示され、右上のイマーシブアイコンをタップすると画面いっぱいに表示されます。

以上、Apple Vision Pro (visionOS 2) における WebXR Device API とその周辺の現状確認でした。

まずは immersive-vr がついに標準対応になったことに歓喜しつつ、次のステップは Apple Vision Pro の真価を発揮できる immersive-ar の対応待ちでしょう。いわゆる XR デバイスにおける WebXR 周辺の土壌は引き続き Meta Quest 系が優勢を保っていますが、WebKit ベースである Apple Vision Pro の今後にも期待せざるを得ません。プライバシーの観点から Apple が WebAR においてもカメラアクセスを許可する可能性はそう高いとは思えませんが、こうなんとかできないものですかね……!!

現場からは以上です！

Discussion