Babylon.js を使っていろんな端末で WebXR の Session features を試す

Babylon.js を使って いろんな端末で WebXR の Session features を試す 2024/04/28 Babylon.js 勉強会 vol.3 Shilaca @shilaca_

自己紹介 Shilaca X: @shilaca_ 株式会社STYLY フロントエンドエンジニア Web技術が好きで、 趣味で WebGL や WebXR を触ったりしている Three.js はよく使ってる Babylon.js を触り始めたのは最近 2

WebXR と Session features とは？ 3

WebXR とは - 今回は WebXR Device API のことを指す - W3C により標準化が進められている Web API - VR や AR 体験をシミュレートするために必要なレンダリングプロセスの 管理やセンシング機器からのデータを提供する API - 現在のステータスは Draft だが、Babylon.js をはじめ Three.js や PlayCanvas などでは対応が進んでいる https://www.w3.org/TR/webxr/ 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 4

• https://www.w3.org/TR/webxr/

Session features※1 とは WebXR Device API の XR セッションを リクエストする時に指定するセッション機能 指定した機能はセッション中、有効になる Hand Tracking や Hit Test などがある デバイスごとに機能が使えたり使えなかったりする （WebXR 自体も端末により VR のみ使えたり、両方使えなかったりする） ※1 https://developer.mozilla.org/en-US/docs/Web/API/XRSystem/requestSession#session_features 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 5

• https://developer.mozilla.org/en-US/docs/Web/API/XRSystem/requestSession#session_features

Babylon.js で WebXR する! 6

Babylon.js で WebXR する! VR モードは1行追加するだけ🎉 createDefaultXRExperienceAsync は XR セッションに必要な機能の初期化に 加え、XR セッション使う基本的な機能の 初期化も行ってくれる 最低限の初期化だけでいい場合は WebXRExperienceHelper.CreateAsync() を使用する 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 7

Babylon.js で Session features 有効化する WebXR Feature Manager を使う .enableFeature() で 使いたい機能を有効化できる WebXRFeatureName に Babylon.js の FeatureManager で有効化で きる機能名が定義されている 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 8

Babylon.js の Feature Manager の使い方 有効化した機能はどれも同じように .onXxxxObservable で データを受け取ることができる 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 9

今回試したデバイスたち 10

今回試したデバイスたち Apple Vision Pro https://www.apple.com/jp/newsroom/2023/06 /introducing-apple-vision-pro/ https://www.android.com/ 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ Meta Quest 3 https://www.meta.com/jp/quest/quest-3/ PICO 4 https://www.picoxr.com/jp/products/pico4 iOS (v17.4.1) は WebXR 非対応・・・😭 11

• https://www.apple.com/jp/newsroom/2023/06/introducing-apple-vision-pro/
• https://www.meta.com/jp/quest/quest-3/
• https://www.picoxr.com/jp/products/pico4
• https://www.android.com/

各デバイスで WebXR 及び Features を 有効化する 12

Apple Vision Pro の場合 Settings > Apps > Safari > Advanced > Feature Flags > Experimental XR Features Advanced と Feature Flags は スクロールしないと見えない位置にある 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 13

Meta Quest 3 の場合 Meta Quest Browser を開く chrome://flags へアクセス 「webxr」で検索して 関連 flag を enabled にする ※ Android と PICO 4 は特に設定する必要はありませんでしたが、 何かあった場合は chromium で動いているので同じ方法でいけます。 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 14

とりあえず各デバイスの Session features の サポート状況を確認する 15

Feature Name 各デバイスで サポートされている Session features W3C で定義されている Session features と Babylon.js の FeaturesManager に実装されている 機能のみ確認 BabylonNative や referenceSpace に 関するものなどは省いています 2024/04/21 時点の結果です visionOS: v1.1.2 Meta Quest Browser: v32.3 PICO Browser: v3.3.42 Android Chrome: v124.0.6367.54 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ Vision Pro Quest 3 PICO 4 Android Babylon.js Native VR VR, AR VR, AR AR xr-anchor-system anchors ❌ ✅ ❌ ✅ xr-depth-sensing depth-sensing ❌ ✅ ❌ ✅ xr-dom-overlay dom-overlay ❌ ❌ ❌ ✅ xr-hand-tracking hand-tracking ✅ ✅ ❌ ❌ xr-hit-test hit-test ❌ ✅ ❌ ✅ xr-image-tracking image-tracking ❌ ❌ ❌ ✅ xr-layers layers ❌ ✅ ✅ ❌ xr-light-estimation light-estimation ❌ ❌ ❌ ✅ xr-mesh-detection mesh-detection ❌ ✅ ❌ ❌ xr-plane-detection plane-detection ❌ ✅ ❌ ✅ xr-raw-camera-acc ess camera-access ❌ ❌ ❌ ✅ xr-space-warp space-warp ❌ ✅ ❌ ❌ 16

Feature Name 実際に試してみる 以下の項目を実際に 動かしてみることに - hand-tracking - plane-detection - mesh-detection 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ Vision Pro Quest 3 PICO 4 Android Babylon.js Native VR VR, AR VR, AR AR xr-anchor-system anchors ❌ ✅ ❌ ✅ xr-depth-sensing depth-sensing ❌ ✅ ❌ ✅ xr-dom-overlay dom-overlay ❌ ❌ ❌ ✅ xr-hand-tracking hand-tracking ✅ ✅ ❌ ❌ xr-hit-test hit-test ❌ ✅ ❌ ✅ xr-image-tracking image-tracking ❌ ❌ ❌ ✅ xr-layers layers ❌ ✅ ✅ ❌ xr-light-estimation light-estimation ❌ ❌ ❌ ✅ xr-mesh-detection mesh-detection ❌ ✅ ❌ ❌ xr-plane-detection plane-detection ❌ ✅ ❌ ✅ xr-raw-camera-acc ess camera-access ❌ ❌ ❌ ✅ xr-space-warp space-warp ❌ ✅ ❌ ❌ 17

Hand Tracking Vision Pro と Quest 3 どちらも精度は良い！ ⬆ Vision Pro 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ ⬆ Quest 3 18

Plane Detection Quest 3 はスペースの plane を表示 Android はリアルタイムで平面検出 ⬆ Quest 3 ⬆ Android 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 19

Mesh Detection Quest 3 のみ Plane Detection 同様に スペースで設定した Mesh を 取得できる 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 20

各デバイスで試してみた所感 WebXR で遊ぶなら Quest がいろいろ対応していて楽しい 🎉 Android も思いの外 動く 🎉 VisionOS が VR にしか対応していないのが残念・・・ hit-test, plane-detection などの実空間にアクセスできるものや light-estimation あたりまで対応してくれたら ネイティブにも負けないコンテンツが作れそう Apple 製品の AR 対応、来て欲しい・・・iOS も含めて 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 21

実際に Babylon.js を使ってみてどうだったか 簡単に WebXR が初期化できるのが良い 🎉 （当たり前だけど、 vanilla で書くと結構大変） 丁寧に Native のコードが Wrap されているので、 機能が分かれていても同じような使用感なのが嬉しい 🎉 WebXR に限らずカメラなど使いそうな機能が一通り用意されているのも良い 🎉 とはいえ、Babylon.js に限らないけど WebXR 系は example が少ないので 使い方がわかりにくい・・・ 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 22

⭐ お手持ちのデバイスで体験できます！ QRコードのURL: https://webxr-babylon.shilaca.me/ ソースコード: https://github.com/shilaca/webxr-babylon 現地にいる方で興味のある方は Quest 3 を持ってきているので声をかけてください！ 📢 宣伝 株式会社STYLY では XR に関心のあるエンジニア募集中！ https://styly.inc/ja/recruit/ （とりあえず DM でも OK です） 2024/04/28 Babylon.js 勉強会 vol.3 @shilaca_ 23

• https://webxr-babylon.shilaca.me/
• https://github.com/shilaca/webxr-babylon
• https://styly.inc/ja/recruit/