1 Unityのようにコンテンツ開発ができる Babylon.js Editorに、チュートリアルと WebXRテンプレートを提供したお話 | Limes | 2021.7.17

⾃⼰紹介 2 ・2013年よりUnity+VR系の活動開始。2014年頃より、 ⼦育てで外向き活動削減。執筆や登壇メインで活動中。 2018年頃からWebGLフレームワークのBabylon.jsを 中⼼に活動中。 Microsoft MVP (Unity :2016/10-2018/7) (Windows Mixed Reality :2018/7-) Blog : Cross Road https://www.crossroad-tech.com/

本⽇の概要 3 ・Babylon.jsとは？ ・WebXRとは何か？ ・代表的なWebXRコンテンツ開発⽅法 ・Babylon.js Editorの説明と代表的なcontribution ・おわりに

4 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)

5 Babylon.jsで開発されたゲームの例 [1] https://www.slideshare.net/KatsushiSuzuki/javascriptwebgl3d-3d-babylonjsbishamon-webgl [2] https://games.yahoo-net.jp/title/casual/752490904 編隊少⼥ フォーメーションガールズ [1] (株式会社アイオウプラス) FINAL FANTASY DIGITAL CARD GAME [2] (SQUARE ENIX) [1] [2]

6 Babylon.jsで開発されたゲームの例 (少しインディー寄り？) [1] https://www.bigredbox.nl//BrilliantMan/index.html [2] https://vtange.github.io/boxgun/ [3] https://simple-3d-fps-game.herokuapp.com/ [4] https://battlechoc.com/ [1] [2] [3] [4]

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

8 WebXRを使うためのおすすめフレームワーク https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Fundamentals Game toolkitsの例 PlayCanvas フレームワークの例 A-Frame, Babylon.js, Three.js

9 代表的なWebXRコンテンツ開発⽅法 # ⽅法 補⾜ お勧め解説記事 1 Unity WebXR Exporterを使っ て、Unityで開発 WebXR Exporter | 機能統合 | Unity Asset Store UnityでWebXRコンテンツが 出⼒できるアセット。 Unity WebXR ExporterでVR刺⾝タンポポを動かして みた / Challenge to use Unity WebXR Exporter for VR Sashimi Tanpopo - Speaker Deck Unity 2020.3で作るWebVR - Qiita 2 A-frameを使って、コーディン グ Introduction ‒ A-Frame (aframe.io) JavaScriptとHTMLの タグのような記述で コンテンツを開発 A-FrameでWebARに対応する - じゅころぐAR (jyuko49.com) 3 Three.jsのWebXRライブラリを 使ってコーディング How to create VR content ‒ three.js docs (threejs.org) JavaScriptで記述 WebXRを使⽤して没⼊型ARセッションを作成す る | ARCore | Google Developers 4 GodotEngineを使って開発 Godot Engine - Free and open source 2D and 3D game engine GDScriptまたは C#で記述。GUI環境 あり Godot Engine VR開発メモ（Oculus Quest、 SteamVR、WebXR対応） - フレームシンセシス (framesynthesis.jp) VR ̶ Godot Engine (stable)の⽇本語のドキュメント 5 PlayCanvasを使って開発 PLAYCANVAS | ⽇本公式サイト JavaScriptで記述。 GUI環境あり PlayCanvasで始めるWebXR (slideshare.net) WebXR UI Interaction | Learn PlayCanvas 【Web】Oculus Questなどのプロジェクトをパソコ ンでデバッグする際に便利な⽅法【PlayCanvas】 - Qiita 6 Babylon.js またはBabylon.js Editorを使って開発 JavaScriptまたはType Scriptで記述。 GUI環境あり WebXR | Babylon.js Documentation (babylonjs.com) An introduction of a powerful development tool for Web applications: Babylon.js Editor - CrossRoad (crossroad-tech.com)

10 Babylon.js Editorとは？ ・GUI上で3DCGオブジェク トを配置、オブジェクト別に スクリプトアタッチして制御 しながらコンテンツ開発がで きるツール ・GitHubからダウンロード 可能 (Apacheライセンス) ・2021/6/12に正式リリース Introducing Babylon.JS Editor v4.0 - Announcements - Babylon.js (babylonjs.com)

11 Babylon.js Editorについて思っていること JavaScript/TypeScriptベースでWebXRコンテンツまで 開発できる便利なツール。 Babylon.js も含めて、書きやすい、多機能、ドキュメン ト丁寧なのですが、とにかく⽇本語/英語の情報が少な い！ Webの進化は著しいので、Babylon.jsが使われる機会も増 えるはず、、と思い、最近はBabylon.jsやEditorを広める 活動をしています。

12 Babylon.js Editorへの主なcontribution (1) 簡単なゲームを作って、作り⽅をブログで解説 Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります - CrossRoad (crossroad- tech.com) (2) 英語でまとめ直してBabylon.js Forumで共有 An introduction of a powerful development tool for Web applications: Babylon.js Editor - CrossRoad (crossroad-tech.com) (3) WebXR (immersive-vr) コンテンツを開発するための テンプレートプロジェクトを作ってGitHubで公開 flushpot1125/WebXR_VRController_Editor_template (github.com)

13 Babylon.js Editorへの主なcontribution (2), (3) は公式ドキュメントでexternal tutorialとして 掲載されました Editor/doc.md at release/4.0.0 · BabylonJS/Editor (github.com)

14 おわりに ・Babylon.jsやWebXRについて簡単に説明 ・⽇本語、英語で情報が少ないBabylon.js Editorでの 活動を紹介 Babylon.jsもBabylon.js Editorも⾊々⾯⽩いので、 気になった⽅はぜひ試してみてください。

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