WebXR Tech Tokyo #6 in Cluster で発表した登壇資料です。

1. 1
Babylon.js EditorでWebXRコンテンツを
開発するときのプレビュー確認機能について
| Limes
| 2021.5.24

2. 本⽇の概要 2
・WebXRとBabylon.jsとBabylon.js Editor
・WebXRアプリ開発⽅法の注意点
・新しく搭載される予定のプレビュー実⾏機能について

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

5. 5
WebXRとは？
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. 6
Babylon.js Editorとは？
・GUI上で3DCGオブジェ
クトを配置、オブジェクト
別にスクリプトアタッチし
て制御しながらコンテンツ
開発ができるツール
・まだ正式リリースではな
い(2021/5/21時点で4.0.0-
rc.3)

7. 7
Babylon.js Editorとは？
・最近話題のPLATEAUの
3DCGオブジェクトも表⽰
できる
(Blenderなどでglb形式に
変換が必要)
3D都市モデル「PLATEAU」から取得するファイルの構成と、Blenderで読み込んで確認する⽅法 -
CrossRoad (crossroad-tech.com)

8. Babylon.jsでWebXRコンテンツを開発するときの注意点 8
・https対応のページであることが必要
メリット デメリット
GitHub pagesを利⽤ GitHubにソースコードを公開すれ
ば、https対応のページが使える
ソースコードを公開したくないと
きは使いづらい
Playgroundを利⽤ ソースコードを公開すればhttps対
応のページが使える
同上
⾃分でコードを書いて
ローカルサーバに⽴てる
プライベート環境で検証できる httpsを使うための秘密鍵と認証局
の証明書が必要（オレオレ可）
Playground : Babylon.js専⽤の動作検証サイト。CodePenのようなもの
誰でも閲覧、更新できて公式Docmentationの検索対象になる
Babylon.js Playground (babylonjs.com)

9. Babylon.js Editor でWebXRコンテンツを作るときの課題 9
Editorからプレビュー実⾏できる内蔵サーバがhttpsに
対応していない
サーバ配置⽤にビルド、エクスポートしてからhttpsに必
要な秘密鍵、認証局の証明書を準備すれば可能だが、都度
エクスポートすると、開発効率が落ちる。

10. Babylon.js Editor のhttps対応サーバ機能 10
Editorの開発者の⽅と相談して要件や画⾯遷移を決めまし
た。
最終的にEditorの変更が⼤きいということで、コーディン
グのほとんどは開発者の⽅に対応いただきました。。
（まだ正式リリースされていません。スライド末尾に
Githubからの⼊⼿、環境構築⽅法を記載しています）
アプリの画⾯デザインを簡単に作るためのAdobeXDのTipsについて - CrossRoad
(crossroad-tech.com)

11. Babylon.js Editor のhttps対応サーバ機能 11
設定画⾯
秘密鍵と証明書の設定
https対応の有効
と無効の切替

12. 12
Babylon.js EditorによるWebXRコンテンツのプレビュー実⾏例
(1) Editorからhttpsサーバを起動。
(2) 任意の端末から、
https://<Editorが動いているPCのIPアドレス>:<設定したポート番号>
にアクセス
(3) HMDアイコンが表⽰され、immersive-vrまたはimmersive-arモード
で実⾏できる。

13. 13
Babylon.js EditorによるWebXRコンテンツのプレビュー実⾏例
以下はPCのFirefoxとWebXR Emulatorでの動作実⾏例
参考：WebXR API Emulator ‒ 🦊 Firefox (ja) 向け拡張機能を⼊⼿ (mozilla.org)

14. 14
今後の予定
リリースに合わせて、WebXRコンテンツのテンプレートを作成、提供予定
現在、VRコントローラの⼊⼒に関するテンプレートを作成中
テンプレートは起動直後
の画⾯で指定可能

15. 15
drumath2237/babylonjs-editor-webxr-app: trials to develop WebXR App in BabylonJs Editor
(github.com)
httpsサーバ対応機能を試したい場合、Babylon.js EditorのGitHubから
4.0.0-rc.3のソースコード⼀式をダウンロードし、ビルドしてElectron形
式の実⾏ファイルを⽣成する必要があります。
参考情報
テンプレートサイト作成の参考にさせていただきました。
Babylon.js EditorでWebXRコンテンツを開発し、Github pagesに
⾃動アップロードできるサンプルコード (にー兄さん提供）
Tags · BabylonJS/Editor (github.com)
ソースコード置き場所
$ node ./script/install.js
$ npm run build
→electron-packagesフォルダ以下に実⾏ファイルが⽣
成される

16. 16
ご静聴ありがとうございました。