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

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

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

貢献した内容について

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

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

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

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

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

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

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

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

リリース！

得られた知見・考察

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

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

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

おわりに

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

参考文献 当該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