Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8

Babylon.js 勉強会 vol.4 オンライン~Babylon.js 8.0 リリース記念~で発表した資料です

Transcript

1. Babylon.js 8.0の アプデ情報を 軽率にキャッチアップ にー兄さん@ninisan_drumath Babylon.js 勉強会 vol.4 オンライン~Babylon.js 8.0 リリース記念~
2. アジェンダ - はじめに - Babylon.js 8.0アプデの全体感 - レンダリング系 - ツール系 - ファイルフォーマット系 - オーディオエンジン - Havok - おわりに
3. はじめに
4. にー兄さん(@ninisan_drumath) ソフトウェアエンジニア “Babylon.jsとWebXR Device APIの宣教師” 株式会社ホロラボ Babylon.js勉強会運営 Iwaken Lab. Microsoft MVP for Developer Technologies
5. 本日のお話 - Babylon.js 8.0のリリースをキャッチアップ - 詳細な内容はあまり話せない（時間的に） ゴール： Babylon.jsが好き・興味がある人向けに 8.0の目玉となる機能を抜粋してお届けする
6. Babylon.js 8.0 リリースの全体感
7. Babylon.js 8.0リリース🎉 公式Xでは2025/3/28(日本時間)に アナウンス ブログポストもいくつか - Announcing Babylon.js 8.0 https://blogs.windows.com/windowsdeveloper/2025/03/27/ann ouncing-babylon-js-8-0/ - Introducing Babylon.js 8.0(medium) https://babylonjs.medium.com/introducing-babylon-js-8-0-776 44b31e2f9 - Introducing Babylon.js 8.0(linkedin) https://www.linkedin.com/pulse/introducing-babylonjs-80-b abylon-js-s5zmc/
8. かっこいいPV
9. Babylon.jsのメジャーアップデート - 年に1回メジャーバージョンが アップデート - マイナーバージョンは 定期的に細かくリリース - 8.0のリリース内容は すでに7.xで実装されているもの - つまり急に出てきたわけではない - 大きな変更を与えないようにするため
10. リリース項目(NotebookLMに頼んでみた) • IBL Shadows • Area Lights • Node Render Graph – Alpha • All New Lightweight Viewer • WGSL Core Engine Shaders • NME -> WGSL Support • Overhauled Audio Engine • Gaussian Splat Updates • Havok Character Controller • Smart Filters • Environment Improvements • Node Geometry Editor Updates • Node Material Editor Debug Node • Improved Booleans • Updated glTF Support — KHR_materials_diffuse_transmission • glTF Exporter Improvements • More glTF Loader Options • IES Light Support • USDZ Export • GPU Mesh Picking • GPU Bounding Box • EXR Texture Support • WebXR Depth Sensing
11. リリース項目(NotebookLMに頼んでみた) • IBL Shadows • Area Lights • Node Render Graph – Alpha • All New Lightweight Viewer • WGSL Core Engine Shaders • NME -> WGSL Support • Overhauled Audio Engine • Gaussian Splat Updates • Havok Character Controller • Smart Filters • Environment Improvements • Node Geometry Editor Updates • Node Material Editor Debug Node • Improved Booleans • Updated glTF Support — KHR_materials_diffuse_transmission • glTF Exporter Improvements • More glTF Loader Options • IES Light Support • USDZ Export • GPU Mesh Picking • GPU Bounding Box • EXR Texture Support • WebXR Depth Sensing 多すぎ
12. アプデ内容をキャッチアップ！
13. 主なソース Windows Developer Blog Part1～３まである 観測範囲で話題になっていたり 熱量高く語られていたりするものを ピックアップ https://blogs.windows.com/ windowsdeveloper/2025/03/27/announcing -babylon-js-8-0/
14. レンダリング系
15. IBL Shadows - Image Based Lighting←既存機能 - 環境マップから3Dモデルに影響す るライティングを表現 - IBLが影に対応←New！ - Adobe社のMichael氏による貢献 デモ： https://playground.babylonjs.com/#8R 5SSE#665
16. Area Light 2Dのジオメトリを光源として 扱う RectAreaLightクラス とにかくデモが良い https://aka.ms/babylon8Are aLightsDemo
17. WGSL Core Engine Shaders WGSL = WebGPUで使えるシェーダ言語（not GLSL） Babylon.js EngineのシェーダはGLSLで書かれていて WebGPUを使う場合は変換ライブラリで変換していた →ライブラリが3MBくらいあってUXに影響していた GLSL/WGSL両対応することで（変換不要になったので） WebGPU使用時のライブラリサイズが半分に（！！）
18. ツール系
19. Node Render Graph Editor (Alpha版)
20. Node Render Graph (Alpha版) ノードエディタからBlack-Boxだった レンダリングパイプラインの カスタマイズが可能な Frame Graphという機能で カスタマイズは可能だった →視覚的にパイプライン構築可能に コードベースではなくノードベースで
21. Node Render Graph (Alpha版) まだAlpha版なので 製品コードには使わないでとも “One of the most powerful new features” https://nrge.babylonjs.com/
22. All New Lightweight Viewer いわゆるViewer V2 シンプルなHTMLでビューワが作れちゃう <babylon-viewer source=”glbのURL”> </babylon-viewer> コントローラなど付けられて実は高機能 公式サイト： https://babylonjs.com/viewer
23. All New Lightweight Viewer（Configurator）
24. Smart Filter Editor (SFE) ビデオフィルタやテクスチャ操作、 ポスプロなどの用途に使える エディタがあり、 ノードベースで構築 https://sfe.babylonjs.com/ リポジトリは独立しているみたい https://github.com/BabylonJS/SmartFilters
25. ファイルフォーマット系
26. glTF KHR_materials_diffuse_transmission拡張 glTF拡張仕様の1種 葉っぱやロウソクなどから 透けるやわらかい拡散光の表現 デモ： https://aka.ms/babylon8gltfdemo 仕様： https://github.com/KhronosGroup/glTF/blob/main/e xtensions/2.0/Khronos/KHR_materials_diffuse_trans mission/README.md
27. その他glTF関連 - Loader/Exporterのアプデ - オプションが増えたり - ExporterがLOD対応したり - 将来的な展望として glTF Interactivity拡張への対応に言及 - 仕様 ：https://github.com/KhronosGroup/glTF/blob/interactivity/extensions/2.0/Khronos/KHR_interactivity/Spe cification.adoc#introduction-general
28. USDZ export USDZのランタイム出力に対応 const data = await BABYLON.USDZExportAsync(scene, {}, m => { return m !== currentSkybox }); BABYLON.Tools.Download(new Blob([data], {type: 'model/vnd.usdz+zip'}), "scene.usdz");
29. Gaussian Splatting 新たなフォーマットとして SPZ、compressed-PLYに対応 SH(球面調和関数)への対応 メモリ容量・CPU/GPU使用率への 最適化 doc: https://doc.babylonjs.com/features/featuresDeep Dive/mesh/gaussianSplatting サン・ピエトロ寺院のデモ事例
30. オーディオエンジン
31. Overhauled Audio Engine 新しくなったAudio Engine V2 - Powerful - web-audio機能をフル活用できる - Modern - クラス名や設計 - Simple-to-Use - 知識レベルによらず使いやすく doc: https://doc.babylonjs.com/features/featuresDeepDive/audio/playingSoundsMusic/
32. Havok
33. Havok Character Controller 6.0の目玉機能であるHavok Character Controllerの実装 FPSゲームのようなものが いい感じに作れそう デモ： https://aka.ms/babylon8havokCCDemo
34. おわりに
35. まとめ・所感 Babylon.js 8.0は3月末リリースされた アプデ項目も多く、強力な機能がいくつもあった - レンダリング - ツール類 - ファイルフォーマット - オーディオ - 物理演算エンジン 特に最近はノードエディタ系に力が入っていそうな印象
36. 参考 Announcing Babylon.js 8.0 https://blogs.windows.com/windowsdeveloper/2025/03/27/announcing-babylon-js-8-0/ Part 2 – Babylon.js 8.0: Audio, Gaussian Splat and physics updates https://blogs.windows.com/windowsdeveloper/2025/03/31/part-2-babylon-js-8-0-audio-gaussian-splat-and-physics-upda tes/ Part 3 – Babylon.js 8.0: glTF, USDz, and WebXR advancements https://blogs.windows.com/windowsdeveloper/2025/04/03/part-3-babylon-js-8-0-gltf-usdz-and-webxr-advancements/ Introducing Babylon.js 8.0(medium) https://babylonjs.medium.com/introducing-babylon-js-8-0-77644b31e2f9 Introducing Babylon.js 8.0(linkedin) https://www.linkedin.com/pulse/introducing-babylonjs-80-babylon-js-s5zmc/ Babylon.js 8.0 is Officially Here! https://forum.babylonjs.com/t/babylon-js-8-0-is-officially-here/57452