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

今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / und...

今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs

XR Kaigi 2023にて登壇した資料になります。

にー兄さん

November 25, 2023
Tweet

More Decks by にー兄さん

Other Decks in Programming

Transcript

  1. アジェンダ - はじめに - WebXRについて - WebXR Device APIについて -

    DeviceAPI関連 気になるトピックたち - Babylon.jsとWebXR - おわりに
  2. にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / Iwaken Lab. Unity / ロケーションベースAR /

    WebAR / Babylon.js / Azure Kinect 最新技術を使った検証開発や デモンストレーションが好き
  3. WebとXR 今回はXR = ざっくりVR と ARのことを指す - Webブラウザ上 で XR

    - XRデバイス上 で Webブラウジング 両方考えられるが前者をWebXRと呼ぶことが多い
  4. モバイルデバイスのWebXR 1/2 機能性から、必然的にWebARの事例が多い ライブラリも様々、基盤技術も様々 - AR.js - A-Frame - palanAR

    - 8thwall - Zapworks - model-viewer - WebXR Device API WebXR Device API以外はブラウザ対応状況も悪くない(詳細後述)
  5. WebXR Device APIの機能群 Moduleという単位で機能が提供されている - Hit Test - Plane Detection

    - Hand Tracking - Light Estimation - DOM Overlay - etc …… Immersive Webのサンプルページ :https://immersive-web.github.io/webxr-samples/
  6. 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/
  7. 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
  8. 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)
  9. 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;
  10. 参考 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