WebXR Depth Sensing Moduleについて調査
にー兄さんWebXR Depth APIについてのページ
いつの間にかWebXR Incubationがdefaultの状態でも実行できるようになっていた
しかもCPUもGPUも使える。そうだったんだなぁ
にー兄さんChromium90~ってことは前からすでに実行できていたのかな？
にー兄さんW3Cのspecificationはこちら
こっちのほうがAPIの使い方など詳細に書いてあるイメージ
にー兄さんdataフォーマット
ushortかfloat32か選べるらしい
ushort（uint16）の場合はGPUの場合Alphaチャンネルの値
float32だとrチャネルに値が書き込まれているらしい
にー兄さんとくにGPUでの処理に興味がある
WebGLBindingsからWebGLTextureを取ってくる仕様はraw camera accessでも見ましたね
にー兄さん久しぶりに再開する
にー兄さんいったん"depth-sensing"をrequiredFeaturesに入れて、scene.createDefaultXRExperienceしてみた
これにのっとって
すると、やはりdepthのセンシングをどうやるのか、どのフォーマットをサポートするのかを渡さないといけないらしい
にー兄さんごり押しでcreateDefaultXRExperience({})の中のuiOptionsに
depthSensingの情報を入れてみたが、うまくいかないみたい
理由はEnterXRの時点で、optionの情報がoptionalFeaturesとrequiredFeaturesだけに削られているからみたいだ
つまりcreatedefaultXRExperienceから有効化するのは無理っぽい
にー兄さんenterXRを自分で呼び出す方法でも上記の問題が発生するのと、なぜかuserのアクティベーションが必要だよというエラーメッセージが表示される
にー兄さんwebxrFeatureManager.enableFeature()を使うことで、オプションと一緒にfeatureを有効化できる気がする
ただ、ここで有効化できるのはfeatureManagerにaddFeatureされたものであり、
featureはIWebXRFeatureをインターフェースを実装しているクラスである必要がある
つまりdepth sensingなどというfeatureはまだ実装されていないためenableできない
なのでWebXRDepthSensingというfeatureを実装するおkとにした
にー兄さん本当にできるのかという疑問は残るが、実装さえすれば有効化できそうである
depthSensingディクショナリを追加してくれっていうエラーが出るということは、すくなくともdepthSensing系の実装が考慮されているということなので、これさえ乗り越えて有効化しさえすればなんとか動かせるのでは
にー兄さんそういえば試しにこんな感じで書いてみる
するとこうなる
undefinedではない
Depth Sensingが有効であれば使えるなこれは
にー兄さんちなみにWebXR Incubationがdefaultでも同じ表記になったので、これは仏のChrome for ancroidでも使えそうな気配
にー兄さん5時間くらい粘ったらBabylon.jsでWebXR Depth Sensing Moduleを有効にできた
にー兄さん次のコードで実現可能、だが
ここまでの流れを見ればこれだけではできなきことはもうわかっている
にー兄さんwebxrEnterExitUI.jsの_enterXRWithButtonIndexのコードを直接編集している
ここはもともと、最後のoptionsは
{
requiredFeature:this.options.requiredFeatures,
optinalFeatures:this.options.optionalFeatres
}
といった具合になぜか絞り込みが行われていて、そのせいでdepthSensingオプションが省かれてしまっていたため、うまくdepth Sensingが有効にならなかったということだ
にー兄さんそういえば、自分の環境では
- cpu-optimized
- luminance-alpha
しか動作しなかった
GPUやfloat32ではdepthUsageなどがエラーになるという感じ
あれ、GPU前に動作しなかったっけなぁと思ってGoogleが出してるProposalのサンプル見て見たら
GPUとか言っていながらcpu-optimized使ってたわ（）
にー兄さんこれ、現状はcreateDefaultXRExperienceを使うから起きていると思うので、
XR系の初期化処理を自分で何とかすれば回避できるかもしれない
にー兄さん現行のBabylon.jsではcreateDefaultXRExperienceを使うとdepth-sensingが使えないことが分かった
ということは逆にcreate～～でやっている処理の最後に呼び出されているenterXRAsyncを呼び出せばdepth-sensingを起動した状態でWebXRモードを起動できるよねという結論になって実装したコードが以下
const xrHelper = await WebXRExperienceHelper.CreateAsync(this.scene);
enterExitButton.onPointerDownObservable.add(() => {
const handler = async (): Promise<void> => {
// user activationのために待機
await new Promise((resolve) => setTimeout(resolve, 100));
await xrHelper.enterXRAsync('immersive-ar', 'unbounded', undefined, {
requiredFeatures: ['depth-sensing'],
depthSensing: {
usagePreference: ['cpu-optimized'],
dataFormatPreference: ['luminance-alpha'],
},
} as any);
};
handler().catch(null);
enterExitButton.isVisible = false;
});
xrHelper.sessionManager.onXRSessionEnded.add(() => {
enterExitButton.isVisible = true;
});
enterExitButtonはBabylonjs のGUIボタンであり、それを押すとXRモードに移行するんだけど、
WebXRモードの起動みたいな、全画面表示をするとかそういう
ユーザの操作性に関わる処理にはuser activationなるものが必要らしい
これはユーザが少なくとも1回以上は画面にタッチしたりインタラクションをした状態でないと
全画面モードに移行はできないよということらしい
これをクリアするために、ユーザのタッチイベントによってuser activationをさせてからWebXRモードに移行する必要があるため、待機してる
詳しくは以下
にー兄さんサンプルに載っているコードを参考にすれば、距離の測定はすぐにできた
にー兄さん取り急ぎ画面中央部分のdepth推定を反映するデモを作成
にー兄さんやっぱりdepth推定だったらdepth画像表示したいよね......という欲があった
色々試行錯誤したので時間がかかったけど、なんとかリアルタイムでdepth画像を表示することに成功！！！
こういう画が欲しかったので満足です
にー兄さんあとはドキュメントとコードを整えてGithub公開したいですね
にー兄さんWebXRでdepth推定によるオクルージョンとか実現出来たらかなりアツいよねぇ～という感じではあるんだけど、
個人的に未来では、「オクルージョンとか普通でしょ？だってARオブジェクトが常に手前に表示されたらおかしいじゃん」みたいな世界観になってほしいね
そういう未来を作れるように一歩一歩着実に歩んでいかねば
にー兄さんﾂｲｰﾖ
にー兄さんGitHubも公開できたので、クローズ