Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Babylon.js で簡単 WebXR

Babylon.js で簡単 WebXR

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

B8a848a5d23adf51f4f5373da52c2804?s=128

ms-yuhara

May 06, 2022
Tweet

More Decks by ms-yuhara

Other Decks in Technology

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 デモの体験とコードの確認から始めてみましょう 😊