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

xR with Anything Meetup #03での発表資料です。

https://xram.connpass.com/event/212896/

Transcript

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

   View Slide

2. ⾃⼰紹介 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/
   

   View Slide

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

   View Slide

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

   View Slide

5. 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]
   

   View Slide

6. 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]
   

   View Slide

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

   View Slide

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

   View Slide

9. 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)
   

   View Slide

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

    View Slide

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

    View Slide

12. 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)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide