WebXR Tech Tokyo #3で発表した資料です。 イベントURL https://vrtokyo.connpass.com/event/189470/ この発表に関する詳細を書いたブログ記事 https://www.crossroad-tech.com/entry/babylonjs-webxr-vr1

1. WebXRに対応したbabylon.jsを
Oculus Quest2で動かしてみたお話
| Limes
| 2020.10.28

2. 本⽇の概要 2
・WebXRとbabylon.js
・VRアプリ向けの基本的なコードの書き⽅
・Oculus Quest2での動作確認例

3. 3Babylon.jsとは
• Webブラウザで3DCGを描画するためのフレームワーク
• Graph Editorにより、ローコード開発も可能
• WebXRへの対応が進んでいる
(1) https://campusalbano.se/view/2rU8PVbbXWgeQ0sko0yOQA/op
en
(2) https://doc.babylonjs.com/resources/using_grapheditor#list-of-
all-available-nodes
(3) https://www.davrous.com/2017/07/07/from-zero-to-hero-
creating-webvr-experiences-with-babylon-js-on-all-platforms/
(1) (2) (3)

4. 4WebXRとは？
https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Fundamentals
意訳：WebXRはVRヘッドセットやAR向けの
グラスなどをWebで使⽤するためのAPI
意訳：WebXRはシーン描画のための
スケジューリングなどは担当するが、直接的な
3Dモデル描画などの機能は持たない

5. 5WebXRとは？
https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Fundamentals
意訳：3D graphicsの描画をするには、WebGL
を直接たたくのはお勧めせず、フレームワークの
使⽤が良い。
フレームワークの例
A-Frame, Babylon.js, Three.js
Game toolkitsの例
PlayCanvas

6. Babylon.jsでWebXR対応のコードを書く⽅法 6
・Babylon.js公式Docsで関連情報が多数ある
https://doc.babylonjs.com/how_to/introduction_to_webxr
https://doc.babylonjs.com/how_to/webxr_controllers_support#motion-controllers
https://doc.babylonjs.com/how_to/webxr_selected_features
・WebXRの機能をある程度カバーして簡単化した
WebXRExperienceHelperを使うのがお勧め
https://doc.babylonjs.com/how_to/webxr_experience_helpers#the-webxr-default-experience-helper

7. Babylon.jsでWebXR対応のコードを書く⽅法 7
//WebXRを使うための初期宣⾔
const xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
これが⼊っていれば、VRのフルスクリーンになるためのボタンが表⽰される。
基本的には、これを書くだけ。
PlayGround (Babylon.jsコミュニティ提供の動作検証環境)に書くの
が⼀番簡単

8. Oculus Quest2での動作例 8
ビデオを再⽣します。
・テレポート
・コントローラを別のメッシュに変更
https://www.youtube.com/watch?v=Sl58SK4d6_8&feature=youtu.be

9. 調査中 9
・ES6の⽂法で書く⽅法（なぜかinitializing XR error)
・コントローラ⼊⼒の制御

10. 10
細かい説明はブログで公開予定のため、本⽇はこれで終わ
ります。
https://www.crossroad-tech.com/entry/babylonjs-
webxr-vr1
ご静聴ありがとうございました。