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
42
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
32
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
30
軽率に始まった 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
34
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
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.7k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
技術同人誌をMCP Serverにしてみた
74th
1
640
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Writing Fast Ruby
sferik
628
62k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
A better future with KSS
kneath
238
17k
The Invisible Side of Design
smashingmag
301
51k
Side Projects
sachag
455
42k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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