1. The document discusses the merits and demerits of using Babylon.js to develop WebVR apps for the Oculus Quest. 2. Some merits of Babylon.js include being able to support different VR headsets without SDKs, no build time as it uses Javascript, and smaller project sizes. 3. Some demerits are that it can be harder for those unfamiliar with Javascript, developing environments are still evolving, and there is less VR development tips available especially in Japanese. These demerits can be addressed through methods like getting familiar with Javascript, using debug layers, and contributions from the community are increasing Japanese resources.

1. Babylon.jsでOculus Quest
向けWebVRアプリを作るときの
メリットとデメリット
2019/8/18
Limes (@WheetTweet)

2. 自己紹介
・XR関係あれこれをやっている社会人大学院生
・OcuFes#0-3参加、2014年頃より、子育てで外向き
活動削減。 落ち着いてきたので、少しずつ活動再開
・Microsoft MVP (Unity :2016/10-2018/7)
(Windows Mixed Reality :2018/7-)
・Blog : Cross Road
https://www.crossroad-tech.com/

3. xR Tech Tokyoとわたし
・１回目のxR Tech Tokyoで発表
・14,15(+英語版),16回目のブログ記事公開

4. 本日の発表内容
今日は、Unity以外でVRアプリを開発する方法例の
１つとして、Babylon.jsを紹介します。
また、Babylon.jsを使って開発するときのメリット、デメリット
をお話しします。
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. 本日の議題
1. Babylon.jsとは？
2. Oculus Questとは？
3. Babylon.jsでOculus Questアプリを作る手順
4. VRアプリ開発にBabylon.jsを使うメリットとデメリット
5. おわりに

6. 1.Babylon.jsとは？
・Webブラウザで3DCGを描画するためのフレームワーク
・PBRが使えるなど、表現力が高い
・WebVRにも標準対応している
(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)

7. 2. Oculus Questとは？
・オールインワン型のVRヘッドセット。2019/5/21発売
https://blog.hubspot.com/news-trends/oculus-quest-changing-vr
https://youtu.be/Rh-DO0Cb0Ms

8. 3. Babylon.jsでOculus Quest
アプリを作る手順
1. 環境準備
https://code.visualstudio.com/
https://atom.io/
https://www.google.com/intl/ja_ALL/chrome/
https://www.mozilla.org/en-US/firefox/new/
Text Editor or
Browser or others
othersor
or

9. 3. Babylon.jsでOculus Quest
アプリを作る手順
2. コードを書く

10. 3. Babylon.jsでOculus Quest
アプリを作る手順
3. サーバ環境を作る
・ローカル環境の場合：ExpressやWebsock
(node.jsのパッケージ)だと簡単
・インターネット環境の場合：Playground,Github Pages, etc..
Playgound：Babylon.jsコミュニティが準備したサーバ。
コードが公開されるが最小限のコードで動作確認可能。
Github Pages：Github上にサイトを作るサービス。
[簡単な例] https://github.com/flushpot1125/babylonjs-oculus-quest-controller-input
[Playgroundの例] https://www.babylonjs-playground.com/#B4C2AH

11. 3. Babylon.jsでOculus Quest
アプリを作る手順
4. Oculus Questのブラウザからサイトにアクセス

12. 4. VRアプリ開発にBabylon.jsを
使うメリットとデメリット

13. 4-1. メリット
・VRヘッドセット別のSDK準備が不要
(Oculus Quest/Go/Rift S, HTC VIVE, WinMR)
・Javascriptなのでビルド時間がない
(アプリによってロード時間はある)

14. 4-1. メリット
・プロジェクト全体の容量が少ないので管理しやすい
(下記は例)
Unity:766MB Babylon.js:2.5MB

15. 4-2. デメリット
・Javascriptに慣れていないとやりづらい
・GUIによる開発環境は発展途上
・VR向けの開発Tipsが少ない
・日本語の情報が少ない(VRはとくに)
2019/8/16 8:00時点
1.公式
2.老舗Web
技術紹介
メディア
3.Limes
(2018/8)

16. ある程度解決できるので、紹介します

17. 4-3. デメリットへの対応方法
・Javascriptに慣れていないとやりづらい
ES5のJavascriptでも動くので、まずは慣れてみる
https://qiita.com/rana_kualu/items/422ba6b328c55a9e8edf
2015～2017年のECMAScript コンプリートガイド
参考
https://mizchi.hatenablog.com/entry/2018/10/03/195854
TypeScript入門以前ガイド

18. 4-3. デメリットへの対応方法
・GUIによる開発環境は発展途上
"scene.debugLayer.show()"で対応

19. 4-3. デメリットへの対応方法
・VR向けの開発Tipsが少ない
Gaze、Teleport、Grab、ボタン入力はあるので工夫次第
Teleport Grab(なかったので追加しました)

20. 4-3. デメリットへの対応方法
・日本語の情報が少ない(VRはとくに)
下記の例のように増えてるので、今後期待できる？
Babylon.js で Oculus Quest で気軽に入れる VRクラブを作る (1)
https://qiita.com/nuhs/items/e3697cbc2cf76b0f4899
Babylon.js で Oculus Quest で気軽に入れる VRクラブを作る (2)
https://qiita.com/nuhs/items/e36a5a8fe31cdd9d7043
Babylon.js で 360度動画を再生する (WebVR 及び立体視対応)
https://qiita.com/nuhs/items/419dedf2bf7254463b0d
babylon.js で Material を自作する方法
https://qiita.com/il-m-yamagishi/items/364bd8dc1e56ea79eaad
Babylon.jsに関するブログ記事 (Cross Road)
https://www.crossroad-tech.com/archive/category/babylonjs
contributionの
チャンス！

21. 5. おわりに
・Babylon.jsを使ったVRアプリ開発の方法を紹介
・現状はメリットよりデメリットの方が多いが、対応方法が増え
つつある
・今だとソースコードやドキュメントのプルリクが受け入れられや
すくモチベーションにもあるので、気になる人はぜひ！