CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

【2021/5/16追記】WebXR対応のbabylon.jsでVRアプリを開発するときのTipsやサンプルコード

以前WebXRの書き方でbabylon.jsでARを試した例をまとめたことがあります。

www.crossroad-tech.com

今回は、Oculus Quest2が届いたこともあり、VRを試してみました。検証に使ったPlayGroundのbabylon.jsのバージョンは、4.2.0-beta17です。

1. WebXRとは?

前回の記事でも少し書きましたが、babylon.jsのドキュメントを元に少し説明を補足します。

WebXRとは、W3C (World Wide Web Consortium) によって策定中の仕組みです。以下のページをみると、WebXR Device APIとして、具体的なAPIの仕様に関する情報が公開されています。

引用元: Babylon.jsを使ってWebXRのARモードを試す方法 - CrossRoad

以下は公式HPの説明です。 "This page is not complete."とあるので、細部が変わる可能性はありますが、大枠はこの通りと思います。

WebXR is an API for web content and apps to use to interface with mixed reality hardware such as VR headsets and glasses with integrated augmented reality features.
//省略
WebXR is not a rendering technology, and provides no features for actually managing 3D data or rendering it to the display. This is an important fact to keep in mind; while WebXR manages the timing, scheduling, and the various points of view relevant when drawing the scene, it does not actually know how to load and manage models, render and texture them, and so forth. That part is entirely up to you. Fortunately, WebGL and the various WebGL-based frameworks and libraries are available to make it much easier to deal with all of that. //省略
These frameworks are good for general-purpose programming as well as for game development when you want to do the logic yourself. They're designed for creating and animating 3D scenes regardless of context.
A-Frame (specifically designed for creating WebXR-based apps)
Babylon.js
Three.js

引用元:https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Fundamentals

このように、WebXRとはVRやAugmented Reality (AR)コンテンツをWebで動かすための共通のAPIです。3Dモデルを描画するなどの機能は持っておらず、シーン描画に必要なスケジューリングなどを担います。グラフィカルな表現はWebGLフレームワーク (A-Frame、babylon.js、Three.jsなど) を使うことを勧めています。

babylon.jsのDocumentationには、WebXRを使う方法がいろいろと書かれています。今回はVRに関するドキュメントを参考にしました。

2. WebXRとbabylon.jsについて

babylon.jsは全体的にドキュメントが丁寧ですが、WebXRについてもいくつかドキュメントが出ています。

WebXR | Babylon.js Documentation

PC、モバイル、Oculus QuestでのWebXR対応状況、古いブラウザに対応させるためのしかけ(Polyfill)の基本的な使い方、WebVR (WebXR規格の登場によって deprecatedになったWeb上でのVR) とのコードの書き方の差異などが書かれています。

WebXR Experience Helpers | Babylon.js Documentation

WebXRを使うためにbabylon.js側で処理をまとめた仕組みがあること、それらの使い方の説明が書かれています。
なぜかはわかりませんが、babylon.jsでWebXRを使うには2つの書き方があります。

# クラス 役割 記述例
1 WebXRExperienceHelper.CreateAsync セッション初期化,カメラ設定, feature managerの設定 (hittestなどの設定調整のようですが詳細不明です) js const xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
2 scene.createDefaultXRExperienceAsync セッション初期化,カメラ設定, 入力設定 (コントローラ初期化含む), XRモード遷移用のボタン表示 js var defaultXRExperience = await scene.createDefaultXRExperienceAsync( /* optional configuration options */ );

babylon.js内のサンプルコードをみている感じだと、(2)のscene.createDefaultXRExperienceAsyncが最も多く使われているようです。

なお、以前のWebXRのARを試した時も(2) の書き方でした。

そこで、しばらくは(2)の書き方で調べてみます。

3. WebXRのVRモードの動作確認例

babylon.jsのコミュニティが提供しているPlayGround (webページ上でサンプルコードを書くと、その結果が保存され、誰でもアクセスできる仕組み)に書いて動作をみてみました。

それぞれリンクをクリックするとソースコードを確認できます。immersive-VR表示になるかは、お使いのブラウザがWebXR対応しているかによります。

■VRモード切り替え、コントローラ表示、テレポート移動

https://www.babylonjs-playground.com/#F41V6N#134

■VRモード切り替え、コントローラ表示、テレポート移動、右手だけcylinderメッシュを重ねて表示

https://www.babylonjs-playground.com/#F41V6N#139

■VRモード切り替え、コントローラ表示、テレポート移動、右手だけcylinderメッシュを重ねて表示、右手のcylinderメッシュのマテリアルを変更

https://www.babylonjs-playground.com/#F41V6N#141

■VRモード切り替え、コントローラ表示、テレポート移動、右手だけcylinderメッシュを重ねて表示、右手のcylinderメッシュをglowlayerで青色に発光

https://www.babylonjs-playground.com/#F41V6N#875

■VRモード切り替え、コントローラ表示、テレポート移動、右手だけcylinderメッシュを重ねて表示、右手のcylinderメッシュをglowlayerで青色に発光、左手もcylinderメッシュにしてglowlayerで赤色に発光

https://www.babylonjs-playground.com/#F41V6N#145

テレポートとメッシュ発光の動作確認結果です。Oculus Quest2で動かしました。

youtu.be

4. 調査予定の項目

4.1 ES6での書き方

個人的にはES6の書き方にした方が、他のライブラリとも合わせやすいので調べているのですが、今のところ"Error Initializing XR"というエラーが出てうまく動いていません。

この辺りをもう少し細かく読んでみます。

WebXR Features Manager | Babylon.js Documentation

4.2 コントローラのボタン入力の受付

先ほど紹介したコードは、コントローラのボタン入力が取れていません。まだあまり調べられていないのですが、以下の辺りを読みながら調べる予定です。

How to add controller oculus quest in WebXR - #7 by Sandy_AW - Questions - Babylon.js

WebXR | Babylon.js Documentation
(後半のWebXRとWebVRのマイグレーションのサンプルコード付近)

PlayGroundで公開されているテニスラケット動作のサンプル


2021/5/16追記 :こちらに整理しました。

www.crossroad-tech.com


4.3 Babylon.js Editor v4での使い方

4.1が解決したら試します。Babylon.js EditorはGUIベースでコンテンツ開発ができるので、こっちで開発できるとWebXRコンテンツの開発がやりやすくなると思います。

5. おわりに

WebXRはこれから盛り上がってきそうな気がしているので、調査予定に書いた項目が検証できたらまた更新します。