軽率に足を踏み入れる WebXR実験的機能の世界/dive-into-webxr-device-api-experimental-features

XR Kaigi 2022のコミュニティオーガナイズドセッション（WebXR Tech Tokyo＋Babylon.js勉強会）で登壇した資料です

Transcript

1. 軽率に足を踏み入れる
   WebXR実験的機能の世界
   にー兄さん(@ninisan_drumath)
   XR Kaigi 2022 コミュニティオーガナイズドセッション
   

   View Slide

2. 発表資料は公開します👍
   スクショ等のSNS共有OKです📸
   

   View Slide

3. にー兄さん(@ninisan_drumath)
   エンジニア（学生）
   ロケーションベースAR / Unity / WebAR /
   Babylon.js / Azure Kinect
   最新技術を使ったデモンストレーションが好き
   - 筑波大学 情報科学類
   - 株式会社ホロラボ アルバイト
   - Microsoft 学生アンバサダー
   - Iwaken Lab
   

   View Slide

4. アジェンダ
   - WebXR Device APIと実験的機能
   - WebXR実験的機能を使う準備
   - Raw Camera Access ModuleとImmersalによるWebVPS
   - Depth Sensing Moduleによる深度値の取得
   - おわりに
   

   View Slide

5. WebXR Device APIとその実験的機能
   

   View Slide

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

   View Slide

7. WebXR Device APIの機能群
   Moduleという単位で機能が提供されている
   - Hit Test
   - Plane Detection
   - Hand Tracking
   - Light Estimation
   - DOM Overlay
   - etc ……
   

   View Slide

8. 実験的機能
   Moduleの中でも
   - 安定版としてリリースされていないもの
   - ごく一部の環境のみで動作するもの
   ここでは、これらを実験的機能と呼ぶ
   （とはいえWebXR Device API自体がまだ広く普及していない……）
   

   View Slide

9. WebXR実験的機能を使う準備
   

   View Slide

10. まずはWebXR Device API実験的機能を使う準備
    まずWebXR Device APIが使える必要がある
    セキュリティの観点からhttps配信が必須になる
    動作するデバイスも必要
    →ARCore対応AndroidのGoogle Chromeがあると良い
    WebGLライブラリと組み合わせるのが吉
    → 個人的には Babylon.jsがおすすめ
    

    View Slide

11. Babylon.jsとWebXR
    Babylon.jsは高機能なWebGLライブラリ
    特にWebGL APIに詳しくなくても使えるし
    Babylon.js自体の表現力も高い
    WebXR Device APIを使いやすくラップしたAPIを提供
    詳しくは本を書きましたのでぜひ（宣伝）→
    https://doc.babylonjs.com/
    const xr = await scene.createDefaultXRExperienceAsync();
    

    View Slide

12. デモプロジェクトのご紹介
    

    View Slide

13. いままで制作してきたWebARのデモをご紹介
    WebXR Device APIの最新機能を使ったデモを2種類
    - Raw Camera Access ModuleとImmersalによるWebVPS
    - Depth Sensing Moduleによる深度値の取得
    

    View Slide

14. Raw Camera Access Moduleと
    ImmersalによるWebVPS
    

    View Slide

15. Raw Camera Access Module
    WebARアプリからカメラ情報にアクセスできるAPI
    ARCore対応AndroidデバイスのChromeで動作（2022年現在）
    カメラのRGB画像をWebGLTextureとして取得したり、
    カメラの内部パラメータを取得したりするのに使用
    詳しくは記事をご参照ください→
    https://zenn.dev/drumath2237/articles/52d62638c7d06f
    

    View Slide

16. WebVPSのデモンストレーション
    ImmersalというVPSを使用
    カメラ画像とパラメータが必要だったので
    Raw Camera Accessによって取得している
    GitHubでプロジェクトを公開してます
    https://github.com/drumath2237/immersal-babylon-webxr
    

    View Slide

17. Depth Sensing Moduleによる深度値の取得
    

    View Slide

18. Depth Sensing Module
    WebARアプリから深度値を取得できるAPI
    ARCore対応AndroidのChromeで動作（2022年現在）
    カメラ画角における深度値を取得できる
    CPU / GPUモードの2種類があり、得られるデータが違う
    

    View Slide

19. 深度値取得のデモンストレーション
    Depth Sensingで取得した深度値配列を
    Depth画像としてCanvasに描画している
    GitHubでプロジェクトを公開してます
    https://github.com/drumath2237/webxr-depth-testbed-babylon
    

    View Slide

20. おわりに
    

    View Slide

21. まとめ
    - WebXR Device APIはブラウザが提供するWebXRに関する機能
    - そのなかに実験的な機能がある
    - 2つの事例を紹介
    - Raw Camera Access
    - Depth Sensing
    

    View Slide

22. 参考文献
    WebXR Proposals
    https://storage.googleapis.com/chromium-webxr-test/r1067245/proposals/index.html
    Immersive Web Developer Home
    https://immersiveweb.dev/
    WebXR Samples
    https://immersive-web.github.io/webxr-samples/
    Raw Camera Accessのexplaner
    https://github.com/immersive-web/raw-camera-access/blob/main/explainer.md
    Depth Sensingのexplaner
    https://github.com/immersive-web/depth-sensing/blob/main/explainer.md
    

    View Slide