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
130
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 にー兄さん
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
19
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
24
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
50
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
38
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
89
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
22
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.8k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
400
Other Decks in Programming
See All in Programming
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
Blueskyのプラグインを作ってみた
hakkadaikon
1
500
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
Using AI Tools Around Software Development
inouehi
0
1.2k
漸進。
ssssota
0
1.8k
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
290
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
2.9k
Perlで痩せる
yuukis
1
680
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
3k
カクヨムAndroidアプリのリブート
numeroanddev
0
400
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
人には人それぞれのサービス層がある
shimabox
3
660
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Unsuck your backbone
ammeep
671
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Scaling GitHub
holman
459
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
346
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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