軽率にBabylon.jsへ WebXR Featureを実装して OSSコミットした

Babylon.js勉強会 vol.2でLT登壇した資料です

Transcript

1. 軽率にBabylon.jsへ
   WebXR Featureを実装して
   OSSコミットした
   にー兄さん@ninisan_drumath
   Babylon.js勉強会 vol.2
   

   View Slide

2. にー兄さん(@ninisan_drumath)
   ソフトウェアエンジニア
   株式会社ホロラボ所属
   Unity / ロケーションベースAR / WebAR /
   Babylon.js / Azure Kinect
   最新技術を使った検証開発や
   デモンストレーションが好き
   唐突な
   うちの猫たち→
   

   View Slide

3. アジェンダ
   - 貢献した内容について
   - 機能がリリースされるまでの過程
   - 得られた知見・考察
   - おわりに
   

   View Slide

4. 貢献した内容について
   

   View Slide

5. 実装内容をスライド1枚で
   Babylon.jsのWebXR Feature を実装・追加
   WebXRアプリで
   深度推定情報へのアクセスが可能になった
   当該PR：
   https://github.com/BabylonJS/Babylon.js/pull/13563
   

   View Slide

6. （予備知識）Babylon.jsとWebXR
   デフォルトでWebXR Device APIを利用
   ブラウザが提供しているネイディブなWebXR
   Device API：Moduleとして機能を提供
   Babylon.js：FeatureとしてModuleをラップ
   ほんの数行のコードでWebAR化などが可能
   await scene.createDefaultXRExperienceAsync({
   uiOptions: {
   sessionMode: "immersive-ar",
   },
   });
   

   View Slide

7. WebXR Depth Sening Module
   Device APIで提供されるModuleの1種
   https://www.w3.org/TR/webxr-depth-sensing-1/
   カメラ画角における深度(推定)情報を提供
   まだ対応デバイスが少ない(Android Chromeのみ)
   Zennに解説記事を上げています
   今回はこのModuleを
   Babylon.jsへ対応させた
   

   View Slide

8. 機能がリリースされるまでの過程
   

   View Slide

9. キッカケ
   深度推定のデモをForumに投稿
   メンテナのRaananWさん・sebavanさ
   んから
   機能追加の依頼を受ける
   

   View Slide

10. 実は既にissueになっていた
    マイルストンが
    5.0→6.0→Future
    と移動している......😇
    

    View Slide

11. 調査・実装・議論
    Babylon.js自体の開発ははじめてだったの
    で調査から開始
    docsにあるガイドラインなどを参考に
    実装を進めた
    今回はAPI仕様から作っていったので
    「どういうデータを」「どのように」
    提供すべきか、かなり悩んだ
    間が空いてしまっていたりして
    4か月くらいかかってしまった
    

    View Slide

12. マージとdocs執筆
    ひととおり実装し、
    レビューを受けて修正し、
    最終的にマージ
    今回は新機能の追加だったので
    ドキュメントの加筆も行った
    （API docs は自動生成）
    ドキュメントページ
    https://doc.babylonjs.com/features/featuresDeepDiv
    e/webXR/webXRARFeatures#depth-sensing
    

    View Slide

13. リリース！
    

    View Slide

14. 得られた知見・考察
    

    View Slide

15. 独自型の利用についての考察
    レビューの中で
    「WebAPIのデータをそのまま返さないように」
    という指摘が多かった
    これには以下の二つの理由があると考えた
    - ユーザが使いやすいように
    - 後方互換性のため
    

    View Slide

16. ユーザの使いやすさ
    Depth画像に関するデータはArrayBufferやWebGLTextureとして生成
    →本APIではRawTexture形式に加工して提供
    Babylon.jsを使ってるユーザにとって馴染みのある
    データ形式にすることで使いやすくなる
    逆に、WebAPIのデータをそのまま渡すだけでは
    本APIを使用せずに自前で実装してるのと変わらない
    

    View Slide

17. 後方互換性
    Babylon.jsレイヤーが間に挟まることで、
    WebAPIの破壊的変更を吸収する役割
    がある？
    破壊的変更を伝搬させないことで後方互
    換性を保つ狙い？
    WebXRはDraftな機能であることが多い
    ので特に重要なのではないか
    ユーザプログラム
    Web APIs
    Babylon.js APIs
    利用
    ラップ
    破壊的
    変更
    変更がユーザ
    まで
    影響しない
    

    View Slide

18. おわりに
    

    View Slide

19. まとめ・感想
    Forumの投稿がキッカケで、Babylon.jsへ新機能の追加実装を行った
    その過程でライブラリ開発者としての視点を得ることができた
    推しのライブラリに貢献できるのはとても嬉しい
    これからも続けたい
    

    View Slide

20. 参考文献
    当該PR
    https://github.com/BabylonJS/Babylon.js/pull/13563
    WebXR Depth Sensing Moduleについて
    https://zenn.dev/drumath2237/articles/02cee175fc7b8d
    WebXR Depth Sensing Module
    https://www.w3.org/TR/2022/WD-webxr-depth-sensing-1-20220419/
    Writing a new feature
    https://doc.babylonjs.com/features/featuresDeepDive/webXR/webXRFeaturesManager#writing-a-new-feat
    ure
    Contribute to Babylon.js
    https://doc.babylonjs.com/contribute/toBabylon
    

    View Slide