Babylon.jsのWebXR形式で掴む機能を実装する方法

Babylon.jsというフレームワークはWebXRに対応しており、immersive-vrモードでVRコンテンツを作ることができます。VRで代表的な機能の１つに、コントローラ操作でオブジェクトを掴むというのがあると思います。こういう機能です。

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」というタイトルで方法が議論されています。

ここではものを掴む方法を実現するためのサンプルコードが紹介されていました。

しかし、これを開いてみると

 Uncaught SyntaxError: Unexpected token ')'

というエラーが出て真っ白の画面が出ます。どこかの ")" が合っていないのだと思いますが、何箇所か見てもよくわかりませんでした。

こちらのサンプルコードは実行はできるのですが、ものを掴んだ後に離すことができませんでした。

ということで、自分がすぐに読める方法でオブジェクトを握る、離す機能を作ってみました。

ソースコードはこちらです。Quest2のWebブラウザでこのコードにアクセスすると確認できます。

また、ソースコードの中でこのようなコードが書いてあります。

    box.isPickable = true;

meshについて、isPickableをtrueにするとrayを飛ばして掴むことができますが、falseにするとrayが当たっても掴むことができなくなります。

今回紹介した方法であればBabylon.jsのWebXR形式で任意のオブジェクトを掴んで移動させることができるようになります。rayを調節すれば近くにあるものだけ掴むなどの制限をつけることも可能です。

次回はnomnommornさんの「WebAR技術選定から活用事例まで」です。