あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know

XR Kaigi 2024での登壇資料です
https://www.xrkaigi.com/event/9316/module/booth/308916/263783

Transcript

1. あなたの知らない WebXR Device APIの話を 軽率にご紹介 にー兄さん@ninisan_drumath XR Kaigi 2024
2. にー兄さん Babylon.jsとWebXR Device APIの宣教師 ソフトウェアエンジニア 株式会社ホロラボ Microsoft MVP (Web) Babylon.js勉強会運営 Iwaken Lab. SNS @ninisan_drumath @drumath2237
3. アジェンダ 1. はじめに 2. WebXR/WebXR Device API 3. 個人的面白いWebXR Device APIトピックス 4. Apple Vision Pro 5. Meta Quest 6. Wolvic 7. Meta Immersive Web Emulator Runtime 8. おわりに
4. はじめに
5. 本日の話 昨年に引き続きWebXR Device APIの話です XR Kaigi 2024のテーマは「More Immersive, More Spatial」 WebXRの話でも、特に非モバイル向けにフォーカス 個人的に面白いと思う話題をピックアップ 本日のゴール： 「WebXR Device APIってこんなことできるんだ！」と感じてもらう
6. WebXR/WebXR Device API について整理
7. WebXRとは Webブラウザ上で動作するXR体験 いいところ👍 ユーザ：アプリのインストール不要でXRコンテンツを楽しめる 開発者：ストアを介さずにXRアプリをリリース・アプデできる クロスデバイス性
8. WebXRの実現手段 WebXRを実現する手段はいくつか 存在する（→） 中には包含関係にあるものもある 「これを使っておけばよし」 という選択肢はなく それぞれメリットデメリットがある 特に商用利用の場合は 要件に応じて適切な技術選定が必要 8thwall / Niantic Studio Three.js Babylon.js PlayCanvas palanAR Zapworks MyWebAR A-Frame AR.js Unity WebXR Export
9. WebXR Device APIとは WebXRのAPIにおける”標準仕様” W3CのImmersive Web WGが策定 https://immersiveweb.dev/ ブラウザの標準機能として実装されてい るため、 サードパーティを必要としな い Three.js・Babylon.js・PlayCanvasな どを使う場合は 内部的にWebXR Device APIを使う構成 になっている WebXR
10. モバイルWebARにおけるARエンジン事情 Device APIはiOSではほぼ動かない という厳しい問題がある WebARの実現のためにDevice APIを使い、iOSサポートをしないか もしくは別の選択肢をとる必要が出てくる →World Tracking(= 6DoF)が可能な手段であれば、 8thwallやZapworksなどが選択肢になる 1. 正確にはiOSのバージョンによってはWebXR機能を有効化できたり、Safariではない専用アプリを使うことも可能 ↩︎ [1]
11. Babylon.jsと8thwallの比較
12. HMDとDevice API HMDの場合はiOSほど制限のある環境は今のところない 主要なHMD環境は少なくともWebXRを起動できるようなブラウザを搭載 (e.g. Quest, VisionPro, PICO, HoloLens…) WebXR Device APIを気兼ねなく使える 8thwallのMetaversal Deploymentのような モバイルでは非DeviceAPIだったツールも 独自エンジンとDeviceAPIを切り替えられるようにしている（すごい） 非モバイルデバイスの状況はDeviceAPIが目指す理想状態に近い
13. 個人的面白いWebXR Device APIトピックス
14. ここからはDevice APIのトピックのご紹介 Apple Vision Pro Meta Quest3 Wolvic Meta IWERについて
15. Apple Vision Pro
16. Safari on visionOS Vision Proに搭載されているブラウザはSafari Safari on visionOSではWebXR Device APIが使える visionOS 2.0からフラグの有効化不要で WebXRアプリの実行が可能に WWDC 2024でもWebXRに関係するセッションが２つ Build immersive web experiences with WebXR Optimize for the spatial web
17. Safari on visionOSで使え る機能 VRモードは使用可能 ARモードは使用不可能 プライバシーの観点からカメラの アクセスができない状況 Hand Input（ハンドトラッキング） が使用可能 Immersive Webのサポートテーブル でも同様の記述 『News from WWDC24:WebKit in Safari 18 beta』より引用 https://webkit.org/blog/15443/news-from-wwdc24- webkit-in-safari-18-beta/
18. Meta Quest
19. Meta QuestとDevice APIの概要 Meta Quest3をはじめとするデバイスではMeta Questブラウザを搭載 もちろんMeta QuestブラウザはWebXR Device API対応 WebXR Incubation Flagの有効化は必要なものもある Meta Questブラウザは多くのWebXR Moduleを実装している モバイルでは動かないような機能もいくつかあり、触っていて楽しい
20. Mesh Detection WebXR Mesh Detection Module　　 https://immersive- web.github.io/real-world-meshing/ 空間の形状を取得できる機能 事前にスキャンしてあるメッシュを取得 できる形なため メッシュは動的に変わらない WebXR SamplesのProposal欄にサンプ ルがあるので、気軽に試すには良い WebXR SampleのAR Mesh Detectionが動作している様子
21. Body Tracking WebXR Body Tracking Module https://cabanier.github.io/webxr- body-tracking/ Quest3の場合、 手と頭から全身骨格の姿勢を推定する ユニークな機能 WebXR Samplesにはサンプルがない が、 個人的に試せるものを公開しています https://drumath2237.github.io/babylon- body-tracking-testbed/ Quest3 WebXR Body Tracking testbed (Babylon.js) Quest3 WebXR Body Tracking testbed (Babylon.js) にー兄さん にー兄さん
22. Depth Sensing WebXR Depth Sensing Module https://www.w3.org/TR/webxr- depth-sensing-1/ Depth画像を取得できる機能 オクルージョンや衝突判定などに活用で きる XR体験のプレゼンスがぐっと上がる仕 組みなので注目している Chrome for Andoroidにも実装されて いるが、 画像フォーマット定義に齟齬 があるようでそのままでは動かない可能 性もある depth quest depth quest にー兄さん にー兄さん
23. Wolvic
24. Wolvicブラウザ XRデバイス向けブラウザ Igalia主導のもとオープンソースで開発 されている https://github.com/Igalia/wolvic Firefox Realityというブラウザの後継 Immersive Webのサポートテーブルに も記載
25. Wolvicに期待する部分 Androidベース・SnapdragonSpaces系端末に広く対応 Quest系, Vive Focus, PICO系 ThinkReality A3 / Lynx R1 新しいXRデバイスが出てきている PICO 4 Ultra QONOQ Devices MiRZA Quest 3S Meta Orion
26. Chromium版アップデート WolvicはGecko版とChromium版が走っており、 とうとうChromium版でAR Moduleが利用可能に！
27. Meta Immersive Web Emulator Runtime (IWER)
28. WebXR開発のデバッグは大変 うまく環境を作れればホットリロードやデバッガなどの恩恵を受けられる → ネイティブアプリよりもイテレーションを回しやすい しかし実機デバッグのためには… HTTP通信のセットアップ コンソール確認用の工夫 などが必要になってくる
29. Immersive Web Emulator Meta社が提供するImmersive Web Emulator拡張機能 開発者ツールに新しくタブが追加される PCブラウザでもWebXRモードへ移行す ることが可能になる ヘッドセットやコントローラの位置 トリガー入力などをGUIで操作可能
30. Immersive Web Emulator Runtime(以下IWER) Immersive Web Emulatorでやっていた WebXRサポートのエミュレーションをアプリに組み込めるようになった
31. ツールの導入 npmからインストール CDN経由で使うことも可能 Three.jsやBabylon.jsのコードで XRDevice のセットアップ・インストール これだけでPCからWebXRモードへ移行可能になる npm i iwer import { XRDevice, metaQuest3 } from 'iwer'; const xrDevice = new XRDevice(metaQuest3); xrDevice.installRuntime();
32. IWERの面白い部分 IWERのAPIは3Dライブラリ非依存 シミュレーションするデバイスの設定や 操作を XRDevice クラスに集約している 出来合いのデバイス設定が提供されていて カスタマイズも可能 xrDevice.ipd = 0.063; xrDevice.fovy = Math.PI / 2; const leftController = xrDevice.hands.left; // nullチェック略 leftController.position.set(0, 0, 0); import { metaQuest3, metaQuest2, metaQuestPro } from "iwer";
33. 実際にBabylon.jsで触ってみる 見る iwer test iwer test 共有 共有
34. Action Recording & Playback(beta) XRSessionやXRFrameの情報を記録・再生できる機能も 記録データはJSONとして保存されるらしいが、 log出力する関数がある（文字列として受け取れない？） キャプチャしたデータをなんらかして取り出し、Playerで再生 const recorder = new ActionRecorder(xrSession, refSpace); // ... onFrame(xrFrame) { if (recording) { recorder.recordFrame(xrFrame); } } recorder.log(); player = xrDevice.createActionPlayer(refSpace, capture); player.play();
35. おわりに
36. まとめ WebXRを実現する方法はいくつか存在する WebXR Device APIはブラウザにおけるWebXRの標準仕様 Safari on visionOS、Questブラウザ、Wolvicの現状と 気になるポイントをご紹介 IWERはWebXRの動作をシミュレーションする機能をアプリに提供する
37. WebXR Device APIへの期待 Webという環境はユーザにも開発者にも魅力的なプラットフォームである 今後もさまざまなXRデバイスがリリースされていくなかで 標準化された規格があると安心 ARグラスやHMDがもっと普及した未来に向けて、 WebXRの世界も前進できるとうれしい
38. 参考文献 Immersive Web Developer Home https://immersiveweb.dev/ Apple Vision Pro (visionOS 2.0) における WebXR Device API とその周辺の現状確認 https://zenn.dev/ikkou/articles/337f584f7581da News from WWDC24:WebKit in Safari 18 beta https://webkit.org/blog/15443/news-from-wwdc24-webkit-in-safari-18-beta/ Build immersive web experiences with WebXR https://developer.apple.com/videos/play/wwdc2024/10066 Optimize for the spatial web https://developer.apple.com/videos/play/wwdc2024/10065 Introducing Immersive Web Emulation Runtime (IWER) for Faster WebXR Iteration https://developers.meta.com/horizon/blog/immersive-web-emulation-runtime-iwer-webxr-meta-quest-developer/ Immersive Web Emulation Runtime🔓 Unlock WebXR Emulation Everywhere https://meta-quest.github.io/immersive-web-emulation-runtime/