Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Babylon.js v5 新機能の紹介

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

Eeac2f3b51b69b3cd6fb14ed348f0c6e?s=128

Limes2018

May 06, 2022
Tweet

More Decks by Limes2018

Other Decks in Technology

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の新機能を5つ紹介 ・だんだんできることが増えているので、今後もこの 勉強会などで情報発信をしていきたいと思います。
  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)