Babylon.js EditorでWebXR (VR) コンテンツを作る方法です。

1. 2020/4/27 WebXR Tech Tokyo #0 @Cluster
Limes (@WheetTweet)
Babylon.js Editorを使った
WebXRアプリの開発⽅法

2. ⾃⼰紹介
■ 産業向けXR適⽤を進めている社会⼈
■ 2013年よりVR系の活動開始。2014年頃より、⼦育
てで外向き活動削減。少しずつ再開中。Unityだけで
なく、システム構成に関わる技術全体に興味あり
■ Microsoft MVP (Unity :2016/10-2018/7)
■ (Windows Mixed Reality :2018/7-)
■ Blog : Cross Road
■ https://www.crossroad-tech.com/

3. 本⽇の概要
■ WebXRのうち、とくにVRに絞ってお話
■ ほぼGUI操作でWebXR (VR) コンテンツを作る⽅法

4. WebXR(VR)コンテンツ開発⽅法の例
https://unity.com/
https://www.unrealengine.com/
https://www.youtube.com/channel/UCm1ec-SgYpZO_4dCE_7h48g/featured
https://aframe.io/
https://facebook.github.io/react-360/
https://threejs.org/
https://developers.google.com/vr/develop/web/vrview-web
https://blogs.windows.com/windowsdeveloper/2019/04/30/babylon-js-4-0-is-here/#zTvCK8y8mgMsDQHv.97

5. babylon.jsとは︖
■ Webブラウザで3DCGを描画するためのフレームワーク
■ PBRが使えるなど、表現⼒が⾼い
■ WebXRへの対応が進んでいる
(1) https://campusalbano.se/view/2rU8PVbbXWgeQ0sko0yOQA/open
(2)https://www.babylonjs.com/
(3) https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-
webvr-experiences-with-babylon-js-on-all-platforms/
(1) (2) (3)

6. babylon.js での開発⽅法
テキストエディタでコードを書く babylon.js Editor を使う

7. Babylon.js Editorとは︖
■ Unityに似た開発ツール
– オブジェクトにスクリプトをアタッチ
– Particle、マテリアルをGUIで制御
– Play and Stop、デバッグ. etc..
■ VR機能は標準ではないが、簡単に導⼊可能
■ 導⼊⼿順はこちら
https://doc.babylonjs.com/resources/getting_started

8. EditorでVRコンテンツを作るには︖
1. NEW Scriptでスクリプトを作成
2. Start()関数に、VR⽤のコードを１⾏追記
3. Play!

9. Editorからpublishする
■ 「Export Project Templete」を選択
ビルドして (⼿順説明あり)、サーバに置けばコンテンツ完成︕

10. Editorで作ったコンテンツを⽤意しました。
■ ⾬の中 (Particle System) で暖炉 (Partcile System) を⾒るだけの
コンテンツです。
■ 床の反射はPBR (Physical Based Rendering) が効いています。
https://flushpot1125.github.io/rainyroom-demo/
選択すると
VRモードに切替

11. 動画を再⽣して終わります