Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-bab...
Search
にー兄さん
May 27, 2025
Programming
0
140
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
Babylon.js 勉強会 vol.4 オンライン~Babylon.js 8.0 リリース記念~で発表した資料です
にー兄さん
May 27, 2025
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
40
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
32
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
29
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
54
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
44
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
33
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.8k
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
240
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
730
ニーリーにおけるプロダクトエンジニア
nealle
0
800
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
490
XP, Testing and ninja testing
m_seki
3
240
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
680
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
800
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
780
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
270
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Visualization
eitanlees
146
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Babylon.js 8.0の アプデ情報を 軽率にキャッチアップ にー兄さん@ninisan_drumath Babylon.js 勉強会 vol.4 オンライン~Babylon.js 8.0
リリース記念~
アジェンダ - はじめに - Babylon.js 8.0アプデの全体感 - レンダリング系 - ツール系
- ファイルフォーマット系 - オーディオエンジン - Havok - おわりに
はじめに
にー兄さん(@ninisan_drumath) ソフトウェアエンジニア “Babylon.jsとWebXR Device APIの宣教師” 株式会社ホロラボ Babylon.js勉強会運営 Iwaken Lab. Microsoft
MVP for Developer Technologies
本日のお話 - Babylon.js 8.0のリリースをキャッチアップ - 詳細な内容はあまり話せない(時間的に) ゴール: Babylon.jsが好き・興味がある人向けに 8.0の目玉となる機能を抜粋してお届けする
Babylon.js 8.0 リリースの全体感
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/
かっこいいPV
Babylon.jsのメジャーアップデート - 年に1回メジャーバージョンが アップデート - マイナーバージョンは 定期的に細かくリリース - 8.0のリリース内容は すでに7.xで実装されているもの
- つまり急に出てきたわけではない - 大きな変更を与えないようにするため
リリース項目(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
リリース項目(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 多すぎ
アプデ内容をキャッチアップ!
主なソース Windows Developer Blog Part1~3まである 観測範囲で話題になっていたり 熱量高く語られていたりするものを ピックアップ https://blogs.windows.com/ windowsdeveloper/2025/03/27/announcing
-babylon-js-8-0/
レンダリング系
IBL Shadows - Image Based Lighting←既存機能 - 環境マップから3Dモデルに影響す るライティングを表現 -
IBLが影に対応←New! - Adobe社のMichael氏による貢献 デモ: https://playground.babylonjs.com/#8R 5SSE#665
Area Light 2Dのジオメトリを光源として 扱う RectAreaLightクラス とにかくデモが良い https://aka.ms/babylon8Are aLightsDemo
WGSL Core Engine Shaders WGSL = WebGPUで使えるシェーダ言語(not GLSL) Babylon.js EngineのシェーダはGLSLで書かれていて
WebGPUを使う場合は変換ライブラリで変換していた →ライブラリが3MBくらいあってUXに影響していた GLSL/WGSL両対応することで(変換不要になったので) WebGPU使用時のライブラリサイズが半分に(!!)
ツール系
Node Render Graph Editor (Alpha版)
Node Render Graph (Alpha版) ノードエディタからBlack-Boxだった レンダリングパイプラインの カスタマイズが可能な Frame Graphという機能で カスタマイズは可能だった
→視覚的にパイプライン構築可能に コードベースではなくノードベースで
Node Render Graph (Alpha版) まだAlpha版なので 製品コードには使わないでとも “One of the most
powerful new features” https://nrge.babylonjs.com/
All New Lightweight Viewer いわゆるViewer V2 シンプルなHTMLでビューワが作れちゃう <babylon-viewer source=”glbのURL”> </babylon-viewer>
コントローラなど付けられて実は高機能 公式サイト: https://babylonjs.com/viewer
All New Lightweight Viewer(Configurator)
Smart Filter Editor (SFE) ビデオフィルタやテクスチャ操作、 ポスプロなどの用途に使える エディタがあり、 ノードベースで構築 https://sfe.babylonjs.com/ リポジトリは独立しているみたい
https://github.com/BabylonJS/SmartFilters
ファイルフォーマット系
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
その他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
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");
Gaussian Splatting 新たなフォーマットとして SPZ、compressed-PLYに対応 SH(球面調和関数)への対応 メモリ容量・CPU/GPU使用率への 最適化 doc: https://doc.babylonjs.com/features/featuresDeep Dive/mesh/gaussianSplatting
サン・ピエトロ寺院のデモ事例
オーディオエンジン
Overhauled Audio Engine 新しくなったAudio Engine V2 - Powerful - web-audio機能をフル活用できる
- Modern - クラス名や設計 - Simple-to-Use - 知識レベルによらず使いやすく doc: https://doc.babylonjs.com/features/featuresDeepDive/audio/playingSoundsMusic/
Havok
Havok Character Controller 6.0の目玉機能であるHavok Character Controllerの実装 FPSゲームのようなものが いい感じに作れそう デモ: https://aka.ms/babylon8havokCCDemo
おわりに
まとめ・所感 Babylon.js 8.0は3月末リリースされた アプデ項目も多く、強力な機能がいくつもあった - レンダリング - ツール類 - ファイルフォーマット
- オーディオ - 物理演算エンジン 特に最近はノードエディタ系に力が入っていそうな印象
参考 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