この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の23日目です。
前回は「Okamoto S」さんの[WebXR] UnityとiPhone LiDAR、THETAを使った崖下を覗ける360°WebGLアプリを作ってみるでした。
Babylon.jsというフレームワークはWebXRに対応しており、immersive-vrモードでVRコンテンツを作ることができます。VRで代表的な機能の1つに、コントローラ操作でオブジェクトを掴むというのがあると思います。こういう機能です。
youtu.be (これは2019年に作ったWebVR形式での結果であり、今回のWebXR形式のものとは異なります)
しかしBabylon.jsは公式ドキュメントでは、WebXRでものを掴むという機能について明示的に書かれていません。そこで、今回はBabylon.jsのWebXRでものを掴む方法をまとめました。
1. すでに提供されている、ものを掴む相当のサンプルコード
Babylon.jsには、Playgroundという仕組みがあります。これは、最低限のコードを書くと動作を確認できる仕組みです。誰かが登録すると内容が公開されるので他の人も使えますし、修正するとURLの末尾が変わるので前のバージョンに戻って検証することもできます。
Playgroundを調べると、このようなコードがありました。
このコードをOculus Quest2で実行してWebXRモードで表示し、squeezeボタン (Quest2の左コントローラの中指で押すボタン) を押すと、rayが当たっているオブジェクトを引き寄せることができます。
ただ、色々な機能が入っていてコードが長いので、シンプルにものを掴むという処理を確認したいとき、Babylon.jsに慣れていないとどこを使って良いかがわかりづらいかもしれません。
また、他の例としてBabylon.jsの公式フォーラムでは「WebXR grab an Object」というタイトルで方法が議論されています。
ここではものを掴む方法を実現するためのサンプルコードが紹介されていました。
WebXR - Grab an Object Playground
しかし、これを開いてみると
Uncaught SyntaxError: Unexpected token ')'
というエラーが出て真っ白の画面が出ます。どこかの ")" が合っていないのだと思いますが、何箇所か見てもよくわかりませんでした。
こちらのサンプルコードは実行はできるのですが、ものを掴んだ後に離すことができませんでした。
WebXR - Grab an Object Playground ver2
2. もっとシンプルなものを掴む機能の実装方法
ということで、自分がすぐに読める方法でオブジェクトを握る、離す機能を作ってみました。
ソースコードはこちらです。Quest2のWebブラウザでこのコードにアクセスすると確認できます。
Simple grab objects WebXR and Babylon.js
また、ソースコードの中でこのようなコードが書いてあります。
box.isPickable = true;
meshについて、isPickableをtrueにするとrayを飛ばして掴むことができますが、falseにするとrayが当たっても掴むことができなくなります。
3. おわりに
今回紹介した方法であればBabylon.jsのWebXR形式で任意のオブジェクトを掴んで移動させることができるようになります。rayを調節すれば近くにあるものだけ掴むなどの制限をつけることも可能です。
次回はnomnommornさんの「WebAR技術選定から活用事例まで」です。