BabylonJS＋Vite-ts＋WebXR環境を作ってみる
にー兄さん目的
- HoloLens2の新しいOSアプデによってChromium Edgeが入った
- WebARを試したい
- Babylon.js + Vite-tsの環境構築を試したい
にー兄さんプロジェクトはyarn create @vitejs/app --template vanilla-tsで作成した
にー兄さんWebXRをローカルでデバッグするためにはhttps配信が必要になる
Viteでhttpsを有効にするにはconfigでpemファイルを指定する必要がある
https.createServerに渡せるoptionは以下を参照
にー兄さんpemファイルの作成は次を参照。Windwosの場合はwslから作成する
にー兄さんBabylonJSのWebXRのARに関するドキュメントにあるサンプルは
HoloLensで試すとたまに1個め以外全部エラーになっちゃう（どうして
コンソールの内容見ていないのでなんでかわからないな
にー兄さんVite-ts+Babylonの環境構築はすぐできた
- @babylonjs/core
- sass
- @types/babylonjs ←これいるかわからない
をインストすればおｋ
にー兄さん型宣言はtsで開発するなら必要ですね
あと今回はHolographic Button使いたかったので@babylonjs/guiも入れてます
にー兄さんなぜかBabylonJsのWebARが、公式のサンプル含め全然実行できなかった
自分のデバイスが悪いのだろうか......
ARモードへ移行するボタンがこんな感じに変化してしまう
にー兄さんスマホをchromeをリモートデバッグしてみると、
こんな感じのメッセージが
なお、最初のtrueはimmersive-arがサポートされているかの真偽値で、サポートされていると出ている
にー兄さん寝て起きたらHoloLens上では実行できるようになっていた（どうして
たぶんスマホでデバッグしているときに色々変えていたのが原因だと思う。
いちおう3Dのボタンは出るようになっていたが、なぜかHoloLensのアクションでは
クリックすることができなかった
にー兄さんただなぜかFirefox Realityでは白い画面のままだった、なぜだろう
にー兄さんChromium Edge on HoloLens2でＢabylonJsのHandTrackingのサンプルが動いて、
メッシュがちゃんと表示されていた
なんならクリックもできたかも？
にー兄さん個々の記事はQuestコントローラ入力を自作クラスで定義してるらしい
最悪これを参考にしながらHoloLens版を作るべきかなって思う
わんちゃんハンドトラッキング使えたので、人差し指と親指の先端の近さでOnPressを呼び出す感じ？
にー兄さんBabylonJSのHand Tracking with physicsサンプルは
最初はハンドトラッキングもできているが5秒も経たずになぜか機能しなくなる
というかな画面に何も映らなくなる
その映像を撮ったので後で載せようと思う
にー兄さん↑に引き続き色々試してみた
WebGL2のせいかとか思って変えてみたりしたけどたぶん違いそう
hand tracking with physicsサンプルでは他のメッシュデータもあるのだが、
プリミティブであっても一定時間映ると重くなって落ちる、みたいな症状がみられた
逆にhand meshだけをずっと映していればたぶんアプリは落ちない
大丈夫なのかなこれで......
にー兄さんついにWebARを実行できた
ボタンを押したかっただけなので、もしかしたらHandTrackingはいらない...？かもしれない
できるだけSampleと環境を合わせてみたり色々した結果、babylonjsのバージョンが違うことに気づき、
現行バージョンの4.2.0ではなくプレビューである5.0.0にしたところ動作した。
逆にplaygroundは5.0.0普通に使ってるんだなぁ
とにかく実行できてよかった
にー兄さんリポジトリはこちら
ドキュメントなどは明日整える