Zenn
📝

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

2024/02/07に公開
WebXR
#
WebVR
#
WebAR
#
visionpro
#
visionOS
tech

@ikkou です。ウェブにおける XR である WebXR を長らく推しています。

㊗ Apple Vision Pro 発売 🎉

先日 2024/02/02 に US で Apple Vision Pro が発売されました！

昨年 6 月の WWDC23 にあわせて発表された Apple Vision Pro ですが、その時点で Safari on Vision Pro の WebXR Device API 対応が示唆されていました。

https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/

その後、Apple Vision Proデベロッパラボで 2 度ほど実機に触り、実際の挙動を確認していましたが、例によって NDA 厳守なので Simulator の話もともかく実機の話は控えていました。が、めでたく発売日を迎えて実機を以て触れられるので Simulator では確認できない部分も含めて WebXR Device API と関連する API/Module の対応状況をまとめます。

前提となる検証環境

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

見出しがすべてです:)

Safari on Vision Pro の WebKit Feature Flags には Experimental XR Features として HTML <model> element, WebXR Device API, WebXR Hand Input Module が、その他のフラグとして WebXR Augmented Module, WebXR Gamepad Module が用意されていますが、いずれも有効化されていません。


初期状態の WebKit Feature Flags の上部に区分けられている Experimental XR Features


初期状態の WebKit Feature Flags

この状態で WebXR Samples を確認しても当然 WebXR Device API のサポートは確認できません。


WebXR Samples で確認すると Sorry, your browser does not support WebXR. と表示されている

これは Mac の Safari と同じ挙動です。ちなみに Mac の Chrome で確認すると、Chrome 自体が WebXR Device API に標準対応しているため、WebXR Device API は動作しているが WebVR のための immersive-vr と WebAR のための immersive-ar ともに動作していない状態になります。


Mac の Safari で WebXR Samples を確認したときの状態


Mac の Chrome で WebXR Samples を確認したときの状態

これらのフラグを有効化します。まず WebXR Device API を有効化することで WebXR Device API そのものと WebVR のための immersive-vr が有効化されます。これは Safari 史上初めての状態です。

この流れで設定画面の最下段にある WebXR Augmented Module も有効化します。期待される挙動は WebAR のための immersive-ar の有効化ですが、残念ながら少なくとも visionOS 1.0.2 時点の Safari on Vision Pro で immersive-ar は使えません。


WebXR Device API と関連する API/Module を有効化する


Safari on Vision Pro で immersive-vr が有効化されている

WebXR Device API, immersive-vr, immersive-ar に加え、WebXR Hand Input Module と WebXR Gamepad Module の有効化状態は WebXR Samples の Report でまとめて確認できます。


WebXR Samples の Report で各フラグの有効化状態を一覧で確認できる

この状態で WebXR Samples の Immersive VR Session を開くと Enter VR となり Safari on Vision Pro で immersive-vr な WebVR が動作していることを確認できます。手元の環境では 100 FPS 出ています。


Immersive VR Session で 100 FPS 出ていることを確認できる

そして WebXR Samples の Immersive AR Session は当然動作しません。AR NOT FOUND となります。

Apple はこの Apple Vision Pro を AR, VR, XR, MR ではなく Spatial Computing と説明していますが、いずれは immersive-ar な WebAR も動作するようになることを願っています。

Spatial computing: Refer to your app as a spatial computing app. Don’t describe your app experience as augmented reality (AR), virtual reality (VR), extended reality (XR), or mixed reality (MR).

Ref. https://developer.apple.com/visionos/submit/

HTML <model> element を有効化すると AR Quick Look とは違う形で USDZ ファイルを表示できるようになる

HTML <model> element は iOS 14.5 でリリースされた現時点では Safari 独自の model 要素を有効化するためのフラグです。

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

Experimental Features のひとつとして登場した HTML <model> element フラグですが、iOS 17.3 でも変わらず、そして Safari on Vision Pro でも Experimental Features に位置しています。

昨年末に公開した #WebXR ( WebVR/WebAR ) の現状確認 2023 Winter の記事中でも HTML <model> Element のアップデートに触れていますが、USDZ ファイルをより簡単な記述で表示できるようになります。

<model interactive>
  <!-- source で USDZ ファイルと GLB ファイルを指定する -->
  <source src="/path/to/model.usdz" type="model/vnd.usdz+zip" />
  <source src="/path/to/model.glb" type="model/gltf-binary" />
  <!-- 非対応ブラウザ用の Polyfill として画像を指定する -->
  <picture>
    <img src="assets/FlightHelmet.png" />
  </picture>
</model>

実際の挙動は The Immersive Web Working Group/Community Group の An example model Element で確認できます。

まず、フラグを有効化していない状態では Polyfill に指定している画像が表示されます。参考としてMac の Safari でも同じ状態になります。


Safari on Vision Pro で HTML <model> element を有効化していない状態


Mac の Safari で HTML <model> element を有効化していない状態

次に、フラグを有効化します。2D 画像化されてしまうスクリーンショットでは有効化する前と変わりませんが、Apple Vision Pro 実機では 3D として表示されています。

この感動はテキストでは伝えられませんが、2 枚目のように少し角度をつけて見ると分かりやすくなります。

HTML <model> Element の有効化によって実現できる model 要素の表示はまさに Vision Pro のためと言っても過言では有りません。なかなか感動するので、実機をお持ちの方はぜひ確認してみてください！

AR Quick Look はどうなったのか?

USDZ ファイルを簡単に表示する仕組みとしては model 要素以前から AR Quick Look があります。

この AR Quick Look は Vision Pro でも動作します。iPhone では平面を検出した状態での AR 表示と 3D モデルだけを表示するオブジェクト表示の 2 パターンで USDZ ファイルを表示できますが、Vision Pro の場合はいわゆる Volume 表示となります。


Apple 公式の Quick Look でスニーカーの USDZ ファイルを表示している状態

WebXR Hand Input Module を有効化すると immersive-vr 中にハンドトラッキングが動作する

WebXR Samples の Immersive VR Session with hands が動作するようになります。ハンドトラッキングは Simulator で動作を確認できず、Vision Pro 実機での確認が必要な挙動のひとつです。


左手で「ぐわし」、右手で「ピース」している状態

WebXR Gamepad Module を有効化しても対象となるコントローラーは使えない

WebXR Gamepad Module は主として Meta Quest や HTC VIVE といった VR デバイスにおけるコントローラーのボタンやトリガーを取得するための Module です。そして Vision Pro はそれらのコントローラーには対応していません。おそらく今後対応することもないでしょう。

つまり、現時点では WebXR Gamepad Module を有効化しても、移動や操作を WebXR Gamepad Module に依存している WebXR コンテンツを有意に体験することはできないと認識しています。

Gamepad API は使える

前述の通り VR 系のコントローラーを対象とする WebXR Gamepad Module は有効化しても Vision Pro で使えるコントローラーが存在しないため、少なくとも現時点では実質使えないに等しいです。ただし、Xbox 360 コントローラーなどを対象とした Gamepad API は使えます。

Apple の公式サイトに「PlayStation のワイヤレスゲームコントローラを Apple 製デバイスに接続する」というページがある通り、現在の iPhone には PlayStation のワイヤレスゲームコントローラを接続できます。もちろん Vision Pro も接続できます。


普段使っている PlayStation 5 DualSense ワイヤレスコントローラーを Vision Proに接続している状態

Vision Pro で Mozilla Hubs を起動することはできますが、そのままでは前後左右に動くこともできません。しかし、Mozilla Hubs は Gamepad API に対応しているので、PlayStation 5 DualSense ワイヤレスコントローラーを繋ぐことによって前後左右に動けるようになりました。


Vision Pro に接続したコントローラーによって最初のリスポーン地点から動いていることがわかる

以上、WebXR Device API と関連する API/Module の対応状況でした。

これまでは主に VR デバイスを中心としていた WebXR Device API を伴う WebXR の世界ですが、Vision Pro の登場により一定の変化が想定されます。今までできなかったことができるようになり、そして今までできていなかったことが Vision Pro ではできない、何かしらの対応が必要になる、ということも考えられます。

これは WeBXR 関連のフレームワークやライブラリ、サービスでも発生することなので、そういったものはまた別の記事としてまとめます。

現場からは以上です！

Discussion