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

軽率に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

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

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

にー兄さん

More Decks by にー兄さん

Other Decks in Programming

Featured

Transcript