Babylon.js v5 新機能の紹介

2022/5/6に開催されたBabylon.js勉強会 Vol.1での発表資料です。
Babylon.js v5で公開された新機能を紹介しています。

イベントのURLです。
https://babylonjs.connpass.com/event/246064/

ここで紹介しているGUI Editorについては、以下の記事で別途紹介しています。

https://www.crossroad-tech.com/entry/GUIEditor-babylonjs

https://www.crossroad-tech.com/entry/GUIEditor-babylonjs-example

Transcript

1. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.js 5の 新機能紹介 2022/5/6 Limes (Microsoft MVP for Windows Development)
2. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. ⾃⼰紹介 2. Babylon.jsの歴史を簡単に 3. バージョン別のBabylon.js変化 4. Major Updatesの代表機能 (5つ) を紹介 5. まとめ
3. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ⾃⼰紹介 o UnityとVRを中⼼に活動。2018年頃から Babylon.jsを知って情報発信を継続。最 近はBabylon.js+WebXR関連で活動中 o 2児の⽗で休⽇は公園と図書館に⾏くこと が多い o Blog : Cross Road https://www.crossroad-tech.com/ Unity : 2016/10-2018/7 Windows Mixed Reality : 2018/7-
4. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Limesの名前について ライムの複数形 「ライムス」 Oculus Riftの”Rift”と同じく「境界」 や「境⽬」を意味するラテン語の 「リーマス」に由来しています。 現実空間 仮想空間 境界 ではないです。
5. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 はじめてのBabylon.jsに関する記事 ⼀番最初にBabylon.jsについて記事を書いた のは2018年7⽉頃です。 なんとなく次の技術になりそうと思って ここから情報発信を始めました。 ただ、Unityの話を書かなくなったことで アクセス数が半分くらいまで落ちました。 Babylon.js向けデータをUnityから出⼒する - CrossRoad (crossroad-tech.com)
6. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 こんなことをやってます Babylon.js Forumで相談や情報発信 Babylon.js Documentationへのpull request (WebXR関係) Profile - Limes2018 - Babylon.js (babylonjs.com) 360 Photo Domes | Babylon.js Documentation (babylonjs.com) WebXR Controllers Support | Babylon.js Documentation (babylonjs.com)
7. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 こんなことをやってます Babylon.js Editorの情報発信 &公式DocsにExternal tutorialsが掲載 Getting Started with the Editor | Babylon.js Documentation (babylonjs.com) An introduction of a powerful development tool for Web applications: Babylon.js Editor - CrossRoad (crossroad-tech.com)
8. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 o 2013年より公開。作者はMicrosoftのDavid Catuheさん o Githubでは、2013/8/17にv1.2.1がリリース o 以後、約2年おきにメジャーバージョンアップし、2022/4 にv5.0.0がリリース Babylon.jsの歴史を簡単に
9. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 バージョン別のBabylon.js変化 機能改修 (Updates) は増加傾向。v5.0.0ではv4.0.0の2.5倍に。 0 50 100 150 200 250 v2.0.0 v3.0.0 v4.0.0 v5.0.0 Updatesの推移 Updatesの数 Releases · BabylonJS/Babylon.js (github.com)
10. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 バージョン別のBabylon.js変化 0 5 10 15 20 25 30 35 40 v2.0.0 v3.0.0 v4.0.0 v5.0.0 Major Updatesの推移 ⼤きな変更 (Major Updates) は増加傾向だったが、v5.0.0では減少 数は少なくても 便利な機能が増 えた (後述) Releases · BabylonJS/Babylon.js (github.com)
11. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Major Updates 特に⼤きな機能追加を紹介します。 ・Animation Curve Editor ・GUI Editor ・Material plugin ・WebGPU ・Performance Profiler
12. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Major Updates 特に⼤きな機能追加を紹介します。 ・Animation Curve Editor ： メッシュのアニメーションを⽣成 ・GUI Editor：GUI画⾯をコードを書かずに作成できる ・Material plugin：shaderを使⽤するマテリアルの調整が簡単 ・WebGPU：WebGLの後継と⾔われているWebGPUサポート ・Performance Profiler：性能やボトルネックをリアルタイム確認
13. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 その他機能については︖ ・WebXR関係など他にも多数あるのですが、時間の関係 で今回は割愛しました。 ・公式から投稿されたMediumをスクロールするとイメ ージがつかめます。 (そのうち解説記事を出すかもしれません) Babylon.js 5.0: Beyond the Stars. Our mission is to create one of the… | by Babylon.js | May, 2022 | Medium
14. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Animation Curve Editor ・meshのアニメーションを作成 できる仕組み ・Playground (サンプルコードの作 成と動作確認ができるサイト) の 中で動作する ・glbに⼊っているアニメーション の調整もできる ACE - The Animation Curve Editor | Babylon.js Documentation (babylonjs.com)
15. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Animation Curve Editor ・アニメーションはjson形式で保存 できて、簡単にロードできる ・2021/8にアルファ版として公開 されていたときは、glb animation編 集、json形式の保存や読み込みはな かった ・ACEを使って複数オブジェクトへ のアニメーションは⽣成できない ACE - The Animation Curve Editor | Babylon.js Documentation (babylonjs.com)
16. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 GUI Editor ・コードを書かずにGUI画⾯を作 成できる。ブラウザ上で実⾏可能 ・GUI作成→json形式で出⼒→ 専⽤の関数で呼び出す ・作ったGUIに含まれるボタン 操作などをコードで制御可能 The GUI Editor | Babylon.js Documentation (babylonjs.com) Babylon.js Gui Editor (babylonjs.com)
17. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 GUI Editor タイトル画⾯ 設定画⾯ 試しに作ってみました
18. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 GUI Editor コードに組み込んだ結果
19. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 GUI Editorの注意点 (2022/5/6時点) ・まだBeta版。広い⼼で使ってみよう ・プレビュー実⾏機能はない ・不要になった要素を画⾯上で削除できないことがある ・Undo/Redo機能はない こまめなsaveでjsonデータを保存、うまく動かないときは Jsonをloadしてやり直すのが良い
20. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Material Plugin ・Custom shaderを使って既存のマテリアルを加⼯できる ・コードで分離されていて、シェーダの適⽤が簡単に調整できる ・BABYLON.MaterialPluginBaseを継承したクラスで詳細を設定 Material Plugins | Babylon.js Documentation (babylonjs.com)
21. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Material Pluginの例 scene.meshes.forEach((m) => { if (m.material && m.material.name !== "skyBox") { m.material.pluginManager.getPlugin("Colorif y").isEnabled = true; }});});return scene;}; class ColorifyPluginMaterial extends BABYLON.MaterialPluginBase { color = new BABYLON.Color3(1, 0.0, 0.0); ⾚⾊ Material plugin example with uniforms | Babylon.js Playground (babylonjs.com)
22. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Material Pluginの例 scene.meshes.forEach((m) => { if (m.material && m.material.name !== "skyBox") { m.material.pluginManager.getPlugin("Colorif y").isEnabled = false; }});});return scene;}; class ColorifyPluginMaterial extends BABYLON.MaterialPluginBase { color = new BABYLON.Color3(1, 0.0, 0.0); Material plugin example with uniforms | Babylon.js Playground (babylonjs.com)
23. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebGPUへの対応 ・WebGPU = WebGLの後継。W3C groupで提唱されている (感覚的にはまだ⼀般的になるのは先) ・Babylon.js 5からはWebGPUに対応した ・もちろん現⾏のWebGLへの対応は継続 WebGPU Support | Babylon.js Documentation (babylonjs.com) WebGPU Status | Babylon.js Documentation (babylonjs.com)
24. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebGPUを試すには︖ ・Chrome Canaryを推奨 (Edge、Chrome、Safariでは使えなかった) ・Chrome CanaryのExperimentalオプションで Unsafe WebGPUを Enabledに変更する
25. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebGPUを試すには︖ ・Chrome CanaryでPlayGroundを開き、WebGPU対応のサイトを開く ・WebGPU→WebGL2で表⽰ができないことを確認 glow layer and alpha fresnel | Babylon.js Playground (babylonjs.com) WebGPU WebGL2
26. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Performance Profiler ・Babylon.jsで動作しているコードの 性能やボトルネックを確認できる ・fps、drawcall、active mesh countなど をリアルタイムに表⽰。csvで保存も できる ・特定の箇所で1フレーム当たり何回 呼ばれたかをカウントするカスタムイ ベントも定義可能 The Performance Profiler | Babylon.js Documentation (babylonjs.com)
27. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 まとめ ・Babylon.js v5の新機能を５つ紹介 ・だんだんできることが増えているので、今後もこの 勉強会などで情報発信をしていきたいと思います。
28. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 本⽇の発表で関係する記事⼀覧 Babylon.js v5で正式に追加されたGUI Editorの使い⽅をまとめました - CrossRoad (crossroad-tech.com) 【2021/8/29 json読み込みサンプルコードを追記】Babylon.jsのInspector上からアニ メーションを作成できるAnimation Curve Editorの使い⽅をまとめました - CrossRoad (crossroad-tech.com) Babylon.jsのGUI Editorで作ったGUIをソースコードから制御する⽅法 - CrossRoad (crossroad-tech.com) Babylon.js v5をビルドする⽅法 - CrossRoad (crossroad-tech.com) babylonjs カテゴリーの記事⼀覧 - CrossRoad (crossroad-tech.com)