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

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

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

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

にー兄さん

April 01, 2023
Tweet

More Decks by にー兄さん

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. リリース!

    View full-size slide

  14. 得られた知見・考察

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. おわりに

    View full-size slide

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

    View full-size 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 full-size slide