この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の2日目です。
前回はHEAVEN ちゃん (@ikkou) | Twitter さんの#WebXR ( WebVR/WebAR ) の現状確認 2021 Winterでした。
Babylon.jsというフレームワークはWebXRに対応しており、immersive-vrモードであれば標準的なテレポート移動ができます。しかしBabylon.jsは公式ドキュメントの情報は充実しているのですが、基本的に日本語の情報がありません。また、以前WebVRでのテレポート移動について書いたことがありますが、WebVRとWebXRでは少し形式が変わっています。
そこで、今回はBabylon.jsのWebXRでテレポート移動する方法をまとめました。
1. テレポート移動について書かれた公式ドキュメント
タイトルからは連想しづらいですが、ここに書いてあります。
テレポートまでの時間、テレポート場所に表示させるサークル図形の色を変更、direct teleportation (移動先を直線で示すテレポート移動)、parabolic teleportation (移動先を放物線で示すテレポート移動) 、テレポート対象のメッシュ指定方法など、色々な観点で書かれています。
2. WebXR形式でテレポート移動を実装する方法
まず、Babylon.jsでWebXRに対応させるには２種類のどちらかのコードを最初に書く必要があります。
実際は１つめの書き方でよいです。helperよりcreateDefaultXRExperienceAsyncの方が設定がシンプルで、createDefaultXRExperienceAsyncで全てできるようになっているためです。
Note that you don't have to use the experience helper. Everything can be done outside of those helper on your own.
ということで、以後はcreateDefaultXRExperienceAsyncを使うことを前提に進めます。
テレポート移動はcreateDefaultXRExperienceAsyncを宣言した時点で有効になっています。あとはテレポート対象のメッシュを指定すると、テレポート機能が使えるようになります。
テレポート対象のメッシュを指定する方法は２つあります。
(1) 最初のcreateDefaultXRExperienceAsyncの中で指定する
このように、floorMeshesを使って、対象のメッシュを指定します。
gist.github.com
Babylon.jsの場合、scene.createDefaultEnvironment();で宣言すると、このように地面を表示させることができます。紫色の部分です。もちろん自分で読み込んだmeshを地面とすることもできます。
(2) addFloorMesh、removeFloorMeshで指定する
任意の3Dモデルを読み込み、その中の一部のメッシュを地面として指定した場合、およびシーン実行中に指定したい場合に使います。
基本的な使い方は以下の通りです。
ただし、任意の3Dモデルを読み込んでその中の一部のメッシュを地面として指定した場合は注意が必要です。Babylon.jsのimportMeshAsyncは非同期なので、createDefaultXRExperienceAsync()の中でfloorMeshesで指定しても (UnityでのGameObject.Find、Babylon.jsではgetMeshByNameを使います)、読み込みが間に合わずにnullが返ってきてしまいます。
そのため、メッシュ読み込み後にaddFloorMeshを実施する必要がありますが、このようなときはImportMeshAsyncではなくて、assetManagerという関数を使います。
使い方の例です。
動作させた例です。今月後半に書く予定のPWAのオフライン起動のことも入っていますが、addFloorMeshで指定した床に対してテレポート移動ができていることが確認できます。
ちなみに、そもそもテレポート機能を無効にしたい場合は、このように宣言します。
gist.github.com
メッシュを指定しなければテレポートの放物線やサークル図形は現れないので、removeFloorMeshで指定を解除するやり方でも同じことになりますね。
3. おわりに
今回紹介した方法であればBabylon.jsのWebXR形式でテレポート移動ができるようになります。あとはドキュメントを参考にしてサークル図形の色、テレポートまでの時間などの微調整を試していただければと思います。
次回はやのせん@VR/メタバース教育 (@yanosen_jp) | Twitter さんの「「VIVE FlowでWebXR」について手短に」です。
