今こそ軽率に理解したい WebXR Device APIと Babylon.jsの話 にー兄さん@ninisan_drumath XR Kaigi 2023

アジェンダ - はじめに - WebXRについて - WebXR Device APIについて - DeviceAPI関連 気になるトピックたち - Babylon.jsとWebXR - おわりに

はじめに

にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / Iwaken Lab. Unity / ロケーションベースAR / WebAR / Babylon.js / Azure Kinect 最新技術を使った検証開発や デモンストレーションが好き

スライドは公開予定 SNS投稿もOK 感想等もお待ちしてます！

本日の話： - WebXR Device APIとは何かを知る - Babylon.jsでのWebXRを知る

ターゲット - WebXR（Device API）に興味がある方 - WebXRの使用を検討しているXRエンジニアの方 - WebXRについて知りたいBabylon.jsユーザの方　など Webの知識を扱いますが、深く理解している必要はありません XRに関係する基礎知識・経験があるとわかりやすいです

WebXRについて

WebとXR 今回はXR = ざっくりVR と ARのことを指す - Webブラウザ上 で XR - XRデバイス上 で Webブラウジング 両方考えられるが前者をWebXRと呼ぶことが多い

モバイルデバイスのWebXR 1/2 機能性から、必然的にWebARの事例が多い ライブラリも様々、基盤技術も様々 - AR.js - A-Frame - palanAR - 8thwall - Zapworks - model-viewer - WebXR Device API WebXR Device API以外はブラウザ対応状況も悪くない（詳細後述）

モバイルデバイスのWebXR 2/2 ライブラリによってブラウザ対応状況や 機能性に差がある AR.jsは基本３DoF、マーカーコンテンツなど 8thwallやZapworksのように６DoFが可能なライブラリもある WebXR Device APIは６DoF可能だがSafariの対応がかなり微妙 デファクトスタンダードとなる選択肢がないので 技術選定はちょっと大変

HMD, グラスにおけるWebXR Quest Pro, Quest3やPICO4など HMDでも標準ブラウザで対応してる 一部デバイスではカラーパススルーによるWebARも実現 → Quest系は力が入っていそう AR系はHoloLensやMagicLeapなど対応デバイスあり Think Reality A3, VRXやLynx R1は Wolvicブラウザによる対応

WebXR Device API

WebブラウザにおけるAR/VRの標準機能 Webブラウザが提供しているXRに関する機能群 →WebXR Device API モバイルデバイスやQuest, HoloLensなどのHMDでも ブラウザが対応していれば動作する W3Cの中のImmersive WebというWG が標準化を行っている https://immersiveweb.dev/

WebXR Device APIの機能群 Moduleという単位で機能が提供されている - Hit Test - Plane Detection - Hand Tracking - Light Estimation - DOM Overlay - etc …… Immersive Webのサンプルページ ：https://immersive-web.github.io/webxr-samples/

例）WebXR Hit Test Module 現実世界の形状と レイの交差判定ができるModule W3CのWorking Draftが公開されてる https://www.w3.org/TR/webxr-hit-test-1/ Web APIとしての仕様を DSLやJavaScriptを使って説明

Moduleの一覧 構想初期のものも含めてリストが公開 https://www.w3.org/immersive-web/list_spec.html 中には気になるものも……👀 Working Draftがあるものもあれば GitHubページだけで終わっているものも

各ブラウザの対応状況 Immersive Webのページで 対応表が公開されている https://immersiveweb.dev/#supporttable Safari on visionOSの 項目もある！

DeviceAPI関連 個人的気になるトピックたち

MetaとWebXR 1/2 Meta Connect 2023にて発表 Quest3や生成AIのセッションに混ざって WebXRのセッションがあった！ アーカイブはYoutubeで視聴可能 https://www.youtube.com/watch?v=M2QTwirp-B8 https://www.metaconnect.com/en/sessions

MetaとWebXR 2/2 Meta Questブラウザ（旧Oculusブラウ ザ）で使えるModuleの話も WebXRでシーンメッシュや Depthが取得可能になるとのこと VRHMDのカラーパススルーによる WebARで現実とのインタラクション

Safari on Apple VisionProにおけるWebXR対応 WWDC 2023にて Safari on VisionOSのWebXR対応が発表 フラグを有効化する必要ありとのこと VRモード、ハンドインプットに対応予定 まだ情報が少ないので今後期待 Meet Safari for spatial computing https://developer.apple.com/videos/play/wwdc2023/10279/

Wolvicブラウザ Firefox Realityの後継XR向けブラウザ Quest系, Vive Focus, PICO系, ThinkReality A3, VRK, Lynx-R1など Lynx-R1の標準ブラウザとして採用 GitHubリポジトリ https://github.com/Igalia/wolvic Zennにて紹介記事も書きました→ https://wolvic.org/en/ https://zenn.dev/drumath2237/articles/6cbb30879eafef

Babylon.jsとWebXR

A bit about Babylon.js Babylon.js(https://www.babylonjs.com/) WebGLフレームワーク・Web 3Dエンジン 類似ライブラリ: Three.js, PlayCanvasなど Webで動くリアルタイム3Dアプリケーションを開発できる TypeScriptフルサポート リポジトリ(https://github.com/BabylonJS/Babylon.js) Star数は⭐21.7K(Three.jsは95.8K)

Babylon.jsとWebXR 1/2 Three.js, PlayCanvas同様に Babylon.jsもWebXRをサポート！ 内部でWebXR Device APIを使用 機能的にも充実しており ドキュメントやサンプルも揃っている https://doc.babylonjs.com/features/featuresDeepDive/w ebXR/introToWebXR

Babylon.jsとWebXR 2/2 Device API：Moduleとして機能を提供 Babylon.js：FeatureとしてModuleをラップ ほんの数行のコードでWebAR化などが可能 （シンプルなWebVRは1行だけ） await scene.createDefaultXRExperienceAsync({ uiOptions: { sessionMode: "immersive-ar", }, });

demo time!

Device APIとBabylon.js APIとの関係 Babylon.js APIがDevice APIをラップ ユーザコードは生のDevice APIを 触らなくてよい Babylon.jsオブジェクトへの変換や より使いやすいAPIを提供

（考察）破壊的変更の伝播を防ぐ役割も レイヤーが挟まることで、 WebAPIの破壊的変更を吸収 する役割がありそう 破壊的変更を伝播させないこ とで後方互換性を保てる WebXRはDraftな機能である ことが多いので特に重要なの ではないか

参照関係のイメージ詳細

WebXR Session Manager：XRSessinの管理 SessionManagerがXRSessionを管理するAPIを提供 XRSession自体もここから取得可能 ネイティブAPI（WebXR Device API）と直接繋がる場所 ユーザが直接触れる機会は少ない WebXRの起動・停止処理をカスタマイズできる

WebXR Feature Manager：WebXR Featureの管理 Feature Managerは 複数のFeatureを 生成・管理するための サービスロケータ

WebXR Feature moduleのラッパークラス 2023/11時点で21個のfeatureが実装 enableFeatureメソッドでfeatureを初期化・取得 1. xr-anchor-system 2. xr-background-remover 3. xr-hit-test 4. xr-mesh-detection 5. xr-physics-controller 6. xr-plane-detection 7. xr-controller-pointer-selection 8. xr-controller-teleportation 9. xr-feature-points 10. xr-hand-tracking 11. xr-image-tracking 12. xr-near-interaction 13. xr-dom-overlay 14. xr-controller-movement 15. xr-light-estimation 16. xr-eye-tracking 17. xr-walking-locomotion 18. xr-layers 19. xr-depth-sensing 20. xr-space-warp 21. xr-raw-camera-access const xr = await scene.createDefaultXRExperienceAsync(); const featureManager = xr.baseExperience.featuresManager; const handTracking = featureManager.enableFeature( BABYLON.WebXRFeatureName.HAND_TRACKING, "latest", { jointMeshes: { enablePhysics: true }, } as BABYLON.IWebXRHandTrackingOptions ) as BABYLON.WebXRHandTracking;

WebXR Featureを自作する WebXR Featureは自作できる ドキュメントにも記載されている https://doc.babylonjs.com/features/featuresDeepDive/webXR/ webXRFeaturesManager#writing-a-new-feature 今後も新たなModuleがリリースされる 過去のPRを参考に実装してみると Device APIへの理解が深まる

これからのBabylon.js WebXRについて思うこと WebXR Device APIはまだDraftな機能ばかり Device API以外の選択肢も一応あるが、 標準・公式の機能として頑張ってほしい モバイルだけではなくHMDやグラスの台頭により WebXRのクロスデバイス性はとても優秀なるのではないか

おわりに

まとめ WebXR Device APIはブラウザ標準のXR機能 moduleという単位で機能を提供しており デバイス・ブラウザによって対応状況が違う Device APIの気になるトピックを紹介 Babylon.jsのWebXR機能はDevice APIのラッパー 複数の管理クラスにより便利なAPIを提供

参考 Immersive Web Developer Home https://immersiveweb.dev/ WebXR Samples https://immersive-web.github.io/webxr-samples/ List of specifications in Immersive Web Working/Community Group https://www.w3.org/immersive-web/list_spec.html Building Mixed Reality Experiences with WebXR https://www.facebook.com/watch/?v=192278430553908 Empowering MR Development in WebXR: Immersive Web Emulator v1.2 & Reality Accelerator Toolkit Beta https://developer.oculus.com/blog/reality-accelerator-toolkit-beta-web-emulator-12-meta-quest/ Meet Safari for spatial computing https://developer.apple.com/videos/play/wwdc2023/10279/ Welcome to Wolvic https://wolvic.org/en/ Babylon.js https://www.babylonjs.com/ Babylon.js Documentation WebXR https://doc.babylonjs.com/features/featuresDeepDive/webXR/introToWebXR