Babylon.js で簡単 WebXR

Babylon.js で WebXR を簡単に実現できるよ、という紹介です。

Transcript

1. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.js で簡単 WebXR 日本マイクロソフト株式会社 Senior Escalation Engineer 原 佑介 (Yusuke Hara)
2. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. 自己紹介 2. WebXR とは 3. Babylon.js で実現する WebXR 4. まとめ
3. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 自己紹介 o マイクロソフトのブラウザー (Edge と IE) をサポートする人 o XR 好き、ゲーム好き o Vsinger (特に花譜とヰ世界情 緒) が好き o Twitter @ms_yuhara
4. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebXR とは o ブラウザーを通した VR および AR 体験の総称が WebXR o W3C による標準化を目指している仕様として WebXR Device API (2022/04/26 時点で Candidate Recommendation) がある o AR, Gamepads, Hit Test, DOM Overlays, Layers, Hand Input など関連 モジュールの策定も進められている o Babylon.js ではこれらの標準仕様にもとづいて WebXR を実装
5. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebXR Device API の対応状況 o Chromium ベースの Edge と Chrome は標準対応 o VR は Meta Quest (Oculus) Browser もしくは HoloLens 2 の Edge が強い o AR は Android の Chrome が強い o Safari は現時点で非対応 o Mozilla の WebXR Viewer で一部使える
6. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.js で実現する WebXR (VR) // 以下の 1 行を追加するだけで 3D シーンが WebXR 対応に！ const xrHelper = scene.createDefaultXRExperienceAsync(); // 床のメッシュを定義すると既定でテレポートも有効に！ const xrHelper = scene.createDefaultXRExperienceAsync({ floorMeshes: [ground] });
7. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ハンド トラッキング (Hand Input) とは o 多関節ハンド ポーズをトラッキングする機 能を定義したWebXR Device API を拡張する 仕様 o 指先と手首以外の Joint は関連付けられた ボーンを持つ o Joint のインデックスやボーンの部分にメッ シュを作成することで WebXR の空間上に 手を模したオブジェクトを表示することが できる
8. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.js でハンド トラッキング // Features Manager で機能を有効にするだけ！ const featuresManager = xrHelper.baseExperience.featuresManager; featuresManager.enableFeature(BABYLON.WebXRFeatureName.HAND_TRACKING, "latest", { xrInput: xrHelper.input, // ハンドをコントローラーとして扱える！ jointMeshes: { enablePhysics: true // フラグをオンにするだけで物理演算も組み込める！ } });
9. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.js で実現する WebXR (AR) // Session Mode を immersive-ar に変更するだけで AR 対応に！ const xrHelper = scene.createDefaultXRExperienceAsync({ uiOptions: { sessionMode: "immersive-ar" }, optionalFeatures: true // オプション機能をすべて有効にする });
10. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebXR 関連モジュールへ豊富に対応 // オプション機能を個別に有効にする場合はやっぱり Features Manager const hitTest = featuresManager.enableFeature(BABYLON.WebXRHitTest, "latest"); // イベント ハンドラーで結果を受け取れる hitTest.onHitTestResultObservable.add((results) => { // ... }); // Plane Detection API のような試験的な機能にも対応！ featuresManager.enableFeature(BABYLON.WebXRPlaneDetector, "latest");
11. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 まとめ o Babylon.js を使うとシンプルなコードで 3D シーンを簡単に WebXR 対 応コンテンツにできる！ o 標準仕様 (WebXR Device API) にもとづくので簡単にクロス ブラウ ザー対応コンテンツにできる！ o Babylon.js 5.0 では WebXR Layers や Lightning Estimation、Image Tracking にも対応！ o デモの体験とコードの確認から始めてみましょう 😊