Babylon.js 8.0のアップデート内容を頑張って解説

<iframe width="560" height="315" src="https://www.youtube.com/embed/kKaomUggipQ?si=ktmLodwA2jNIBw9N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

[Babylon.js公式の解説](https://www.linkedin.com/pulse/introducing-babylonjs-80-babylon-js-s5zmc)

# はじめに
今回はリアルさに関するアップデートが多く、個人的にはかなりアツいバージョンアップでした。
それ以外に関しても実案件で活用されがちなアップデートが多いのではないでしょうか。
素晴らしいですね！

## 用語の解説
#### IBL
イメージ・ベースド・ライティングの略。
ライトオブジェクトの代わりに、画像を用いてライティングを行う。
ワールドに見立てた3Dオブジェクトを覆う球に対し、パノラマ画像を割り当ててライティングされる使われ方が多い。
[IBLの詳細解説](https://help.autodesk.com/view/MAYAUL/2024/JPN/?guid=Maya_SDK_Viewport_2_0_API_Maya_Viewport_2_0_API_Guide_Advanced_Topics_Image_based_lighting_html)

#### HDR (画像形式)
ハイ・ダイナミック・レンジの略。
jpg等、SDR(スタンダード・ダイナミック・レンジ)形式よりも広い輝度情報を格納できるため、ライトとして使われることが多い。
また、露光量フィルターを変化させることで、白飛び、黒つぶれした状態から、していない状態に変化させられる。

#### EXR (画像形式)
OpenEXRともいう。
HDRのようなやつ（適当）

#### IESデータ
配光データという、照明器具の光の拡がり具合を保持するデータ形式。
照明器具メーカーが商品サイトで提供していることがあります。

#### GLTF
3Dの汎用フォーマット。
出力時に三角ポリゴン化されるため、主に閲覧用として使用。
保持できる情報が非常に多い。

#### USDZ
GLTFのようなやつ（適当）
Pixarが開発した。
主にiOSで使われることが多い。

#### Gaussian Splatting
3Dシーンを多量の小さな楕円型のぼかし模様で表現する技術（点群）
[Gaussian Splattingの詳細解説](https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/)

#### ブール演算
交差した3DオブジェクトA,Bについて、AとBを合体もしくはBの形状で削る機能。
[ブール演算の詳細解説](https://help.autodesk.com/view/MAYACRE/JPN/?guid=GUID-9467513F-47C3-4C73-8251-6FF8C0DE4982)

#### Havokエンジン
Havok社が開発した物理エンジン。
Babylon.js開発元であるマイクロソフトにより買収され、Babylon.js 6.0から使えるようになった。
Havokのロゴはゲーム起動時に見たことがある方も多いのではないでしょうか。

#### GLSLシェーダー言語
WebGL用のシェーダー言語。
高度な特殊効果を実装でき、使いこなせれば魔法使いになれる。
[GLSL シェーダー | MDN](https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders)

#### WGSLシェーダー言語
WebGPU用のシェーダー言語。

#### WebXR
Webブラウザ上で仮想現実（VR）や拡張現実（AR）の体験を提供するためのAPI規格。
範囲が広大でとても解説しきれませんが非常に面白い分野なので、ぜひ調べてみてください。
[WebXRの詳細解説](https://immersiveweb.dev/)

#### Node Material Editor
Babylon.jsが提供するノードベースのマテリアル作成ツール。
他にポストプロセス、パーティクルも製作可能。
3DCGソフトによくあるマテリアル設定をノードベースで行うツールではなく、いうなればマテリアルノード自体を作りたいようなときに使われるツール。

#### Node Geometry Editor
Babylon.jsが提供するノードベースの3Dモデル生成、編集ツール。
Blenderのジオメトリノードのようなもの。

# アップデート内容
## ライティングまわり
### IBL Shadows
<iframe width="560" height="315" src="https://www.youtube.com/embed/xVLyy7N4Us8?si=N-wco6ppOhO3Oqoj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

今まではIBLの場合、影が出なかったんですよね。
私も何度改善できないか調べ倒したことか。。。
このアップデートは嬉しいですね。
確か昨年にはすでに実験的に実装されていた気がします。
高負荷なため、アニメーションがあるシーンでは非推奨だそうです。
カメラを動かしたときにノイズが出るため、使い方次第では注意が必要そうです。

* [デモ](https://aka.ms/babylon8IBLShadows)
* [ドキュメント](https://aka.ms/babylon8IBLShadows)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.IblShadowsRenderPipeline)

### IBLでのレンダリング結果の改善
<iframe width="560" height="315" src="https://www.youtube.com/embed/AYpnP0a9ZcE?si=iDIGYfn-mRbFOz0m" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

どういうアプローチの違いなのか全く理解できていませんが、色々変わったらしいです。

```javascript:デモのコードを抜粋
const hdrTextureRT = new BABYLON.HDRCubeTexture(`${txtName}?0`, scene, 256, 
    false, // noMipmap: ミップマップ生成を行う
    false, // generateHarmonics: ハーモニクス生成を行わない
    false, // gammaSpace: リニア空間で使用
    false  // prefilterOnLoad: プリフィルタリングを行わない
);
const hdrTexturePSH = new BABYLON.HDRCubeTexture(`${txtName}?1`, scene, 256, 
    false, // noMipmap: ミップマップ生成を行う
    true,  // generateHarmonics: ハーモニクス生成を行う
    false, // gammaSpace: リニア空間で使用
    true   // prefilterOnLoad: PBR反射用にプリフィルタリングを実施
);
const hdrTexturePI = new BABYLON.HDRCubeTexture(`${txtName}?2`, scene, 256, 
    false,       // noMipmap: ミップマップ生成を行う
    true,        // generateHarmonics: ハーモニクス生成を行う
    false,       // gammaSpace: リニア空間で使用
    true,        // prefilterOnLoad: PBR反射用にプリフィルタリングを実施
    undefined,   // onLoad: コールバック未指定
    undefined,   // onError: コールバック未指定
    undefined,   // supersample: supersample未指定（デフォルト）
    true,        // prefilterIrradianceOnLoad: irradianceプリフィルタリングを実施
    false        // prefilterUsingCdf: CDF方式は使用しない
);
const hdrTexturePICDF = new BABYLON.HDRCubeTexture(`${txtName}?3`, scene, 256, 
    false,       // noMipmap: ミップマップ生成を行う
    true,        // generateHarmonics: ハーモニクス生成を行う
    false,       // gammaSpace: リニア空間で使用
    true,        // prefilterOnLoad: PBR反射用にプリフィルタリングを実施
    undefined,   // onLoad: コールバック未指定
    undefined,   // onError: コールバック未指定
    undefined,   // supersample: supersample未指定（デフォルト）
    true,        // prefilterIrradianceOnLoad: irradianceプリフィルタリングを実施
    true         // prefilterUsingCdf: CDF方式でプリフィルタリングを実施
);
```

* [デモ](https://aka.ms/babylon8EnvImprovementsDemo)
* [ドキュメント - IBL](https://aka.ms/babylon8EnvImprovementsDoc)
* [ドキュメント - realtime Filtering](https://aka.ms/babylon8EnvImprovementsDoc)
* [APIドキュメント - HDRCubeTexture](https://doc.babylonjs.com/typedoc/classes/BABYLON.HDRCubeTexture)
* [APIドキュメント - mixIblRadianceWithIrradiance](https://doc.babylonjs.com/typedoc/classes/BABYLON.PBRBRDFConfiguration#mixiblradiancewithirradiance)

### エリアライト
<iframe width="560" height="315" src="https://www.youtube.com/embed/U1FdTyTlJsU?si=xjsCI6yJQk6T3SXj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

長方形平面のライトです。
将来的には影が落ちるようにしたいそうです。

* [デモ](https://playground.babylonjs.com/#TZQ4G7#5)
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction/#the-rectangular-area-light)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.RectAreaLight)

### IES ライトのサポート
<iframe width="560" height="315" src="https://www.youtube.com/embed/j-InYXIJr2w?si=IvqmRPceJtsl18Fm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

建築系ではおなじみのIES
本物の照明器具を使った3D空間をシミュレートできそうですね。
SpotLightで使えます。

* [デモ](https://playground.babylonjs.com/#UIAXAU#41) ※3Dオブジェクトをクリックすることでライトが変わります。
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction#ies-profile)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.SpotLight#iesprofiletexture)

### EXRテクスチャ対応
テクスチャなので厳密にはライティングカテゴリにいれるのは違うのですが、主にIBLで使われることが多いのではないでしょうか。
EXRはHDRに比べ、若干サイズが小さい印象があるのでありがたいです。
あと拾い物のアセットでEXRしかない場合、HDRに変換する手間が省けました。

* [デモ](https://aka.ms/babylon8exrDemo)

## マテリアル
### KHR_materials_diffuse_transmission対応
<iframe width="560" height="315" src="https://www.youtube.com/embed/c5qumu-k9lQ?si=5OCXSPpJmU7E-Xzs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

葉っぱなどの薄いオブジェクトに対する光の透過拡散を表現するGLTFの拡張機能に対応したようですね。

* [KHR_materials_diffuse_transmission 解説](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_diffuse_transmission/README.md)
* [デモ](https://sandbox.babylonjs.com/?asset=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/0a0b54ef68f5719e6bc82227b5922ecf18ceba02/Models/DiffuseTransmissionPlant/glTF/DiffuseTransmissionPlant.gltf&autoRotate=true&environment=https://assets.babylonjs.com/environments/studio.env)

## 機能面その他

### glTFローダーのオプション追加
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yz8H4y2dyJw?si=pLKN9jD_QurWIN4Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

デモや動画からは、KHR_materials_variantsによる最初に使うマテリアルプリセットを事前指定したり、LODの最大値を設定して読み込んでいることが伺えます。

* [デモ](https://aka.ms/babylon8glTFLoaderDemo)
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/importers/loadingFileTypes/#advanced-usage)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/functions/BABYLON.LoadAssetContainerAsync-1)
* [オプション](https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions)

### Gaussian Splatting
パフォーマンスが改善されたのでしょうか？
* [デモ](https://aka.ms/babylon8gsplatImrovementsDemo) ※23MBのspzが読み込まれます。モバイル環境ではご注意ください。
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/mesh/gaussianSplatting)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.GaussianSplattingMesh)

### ブール演算の改善
babylonjsでブール演算を使ったことがないのでどう改善されたのかよく分かりませんが、Manifold.jsに対応したことによりブール演算の精度、安定性が上がり失敗を減らせたのではないかと思います。

* [デモ](https://playground.babylonjs.com/#E3VZCB)
* [ドキュメント](https://aka.ms/babylon8booleanDoc)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.Mesh#mergemeshes)

### WGSLの直接サポート
例えばGLSLシェーダーをWebGPUでレンダリングする場合、従来は約3MBもの変換ライブラリが必要でしたが、これが不要になりました。

* [デモ](https://playground.babylonjs.com/#FBKO9Y#23)
* [ドキュメント](https://doc.babylonjs.com/setup/support/webGPU/webGPUWGSL/)

### Havokキャラクターコントローラー
<iframe width="560" height="315" src="https://www.youtube.com/embed/Bu_hAq6kGBk?si=fNyJqNz8XYCyUli8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Havokエンジンを用いたTPS視点におけるキャラクターコントローラーの機能でしょうか。
ちなみにFPS視点はFree Cameraを使い、`camera.applyGravity`を有効にすることで実装できます。
**布シミュレーションHavok Clothを実装してほしいなぁぁ！**

* [デモ](https://aka.ms/babylon8havokCCDemo)
* [ドキュメント](https://aka.ms/babylon8havokCCDoc)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.PhysicsCharacterController)

### オーディオエンジンの刷新
<iframe width="560" height="315" src="https://www.youtube.com/embed/vdjBS_EfeDg?si=PkQbVwBstFqOTR2w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

あまり知見がないのですが、結構刷新したそうです。

* [デモ](https://aka.ms/babylon8AudioEnginev2Demo)
* [ドキュメント](https://aka.ms/babylon8AudioEnginev2Doc)

## WebXR
### WebXR Depth Sensingにより、後方の3Dオブジェクトを前方の現実オブジェクトで隠す
<iframe width="560" height="315" src="https://www.youtube.com/embed/fqmFjLD0xBE?si=0iexj6XUBsNLh8Vt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

現実世界の奥行きを取得するWebXR Depth Sensing APIに対応したそうです。
現状、最新の Android デバイスまたは Oculus Quest 3のみ対応だそうです。

* [デモ](https://playground.babylonjs.com/#KDWCZY#601)
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/webXR/webXRARFeatures/#depth-sensing)

## ノード系ツール
### Node Render Graph (アルファ版 新ツール)
<iframe width="560" height="315" src="https://www.youtube.com/embed/emoIox2sru0?si=UzvoaL81CaU8wNJ4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

レンダリングパイプラインを自分で構築することが可能になったそうです。
チューニングや、高度なポストプロセスを実装したいときに使うのでしょうか。

* [Node Render Graph エディタ](https://nrge.babylonjs.com/)
* [デモ](https://aka.ms/babylon8RenderGraphDemo)
* [ドキュメント](https://aka.ms/babylon8RenderGraphDoc)

## Node Material EditorでのWGSLサポート
本家と同様に、Node Material EditorでもWGSLがサポートされました。

* [デモ](https://nme.babylonjs.com/?webgpu=true#8I43GX#4)
* [ドキュメント](https://aka.ms/babylon8nmeWGSLDoc)

### Node Material Editor デバッグノード追加
<iframe width="560" height="315" src="https://www.youtube.com/embed/vBwgLWeIERs?si=yGXORM4xgfpDFT7-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

最終結果ではなく、途中の結果を確認できるノードですね。
拾い物のノード設定ファイルの理解が捗りそうです。

* [デモ](https://aka.ms/babylon8nmedebugnodedemo)
* [ドキュメント](https://aka.ms/babylon8nmedebugnodedoc)

### Node Geometry Editorのアップデート
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZjQ0Nu5pXdk?si=IKvsFqWmNZGYtzJC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

追加されたノードの一例
* [ラティスデフォーマ (Lattice Deformer)](https://doc.babylonjs.com/toolsAndResources/nge/customFrames/#lattice)　[デモ](https://nge.babylonjs.com/#FF8N3Q#5)　[ラティスとは](https://help.autodesk.com/view/MAYACRE/JPN/?guid=GUID-8F27AC88-6892-4EAE-A1CB-C43FADF95A64)
* [ポイントリスト (Point List)](https://doc.babylonjs.com/toolsAndResources/nge/customFrames/#point-list)
* [クリーンジオメトリ (Clean Geometry)](https://doc.babylonjs.com/toolsAndResources/nge/customFrames/#cleangeometry) ※法線方向を再計算して反転した麺を修正
* [インターセプター (Interceptor)](https://doc.babylonjs.com/toolsAndResources/nge/customFrames/#interceptor)　[デモ](https://playground.babylonjs.com/#QGTNH5)
* [アグリゲーター (Aggregator)](https://doc.babylonjs.com/toolsAndResources/nge/customFrames/#aggregator) 　[デモ](https://nge.babylonjs.com/#W1WROK)
※最小値、最大値、または合計を取得することで、例えばボックスの下に地面を配置できる
* [細分化 (Subdivision)](https://doc.babylonjs.com/toolsAndResources/nge/customFrames/#subdivide)　[デモ](https://nge.babylonjs.com/#X7L4SK)
※面を再分割することで滑らかに
　
* [デモ](https://nge.babylonjs.com/#IXOCQA#104)
* [ドキュメント](https://aka.ms/babylon8ngeDoc)

### Smart Filter Editor（新ツール）
<iframe width="560" height="315" src="https://www.youtube.com/embed/WREWPLE6NAM?si=OCFWDSy3k75HZhsl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

まだ正しく理解できていません。
ポストエフェクトのためのツール？
テクスチャをぼかしたりといった用途も可能なのでしょうか。

* [Smart Filter エディタ](https://aka.ms/babylon8sfe)
* [デモ](https://aka.ms/babylon8sfeDemo)
* [ドキュメント](https://aka.ms/babylon8sfeDoc)

## ツール
### Lightweight Viewer
<iframe width="560" height="315" src="https://www.youtube.com/embed/HmkkGE96Xb4?si=9xexPdO7k17RwldR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Googleのmodel-viewerのような位置づけであるbabylon-viewerのアップデートですね。
`<babylon-viewer></babylon-viewer>`タグでホームページ内に埋め込める3Dビューアです。
刷新され、サイズが小さくなったのでしょうか？（469KB！）
* [ドキュメント](https://www.babylonjs.com/viewer/)
* [babylon-viewer設定ツール](https://viewerconfig.babylonjs.com/)

### USDZ形式でエクスポート
GLTFなどのように、USDZでもエクスポートできるようになりました。
* [APIドキュメント](https://doc.babylonjs.com/typedoc/functions/BABYLON.USDZExportAsync)

### GLTF形式でのエクスポートの改善
最新の拡張機能と機能をサポート
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/Exporters/glTFExporter/)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.GLTF2Export)

## GPUによるパフォーマンス改善
### GPUメッシュ選択
<iframe width="560" height="315" src="https://www.youtube.com/embed/4hBhUFk-k_U?si=P79OpLeUgZd61dbs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

個人的には感じていませんでしたが、シーン内にメッシュが多量にあるとクリック等によるメッシュ選択が高負荷になるそうです。
GPUを使うことで改善されました。

* [デモ](https://aka.ms/babylon8gpuPickDemo)
* [ドキュメント](https://doc.babylonjs.com/features/featuresDeepDive/mesh/interactions/picking_collisions/#gpu-picking)
* [APIドキュメント](https://doc.babylonjs.com/typedoc/classes/BABYLON.GPUPicker)

### GPU バウンディングボックス
<iframe width="560" height="315" src="https://www.youtube.com/embed/JdKSMPf-aWg?si=Fp8gZ4MXvz6lscyt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

バウンディングボックスとは3Dオブジェクトをピッタリ覆う直方体です。
頂点数が多いとバウンディングボックスの生成が高負荷になる印象があり、頂点数を減らしたオブジェクトを別に用意して生成するなどしていましたが、この必要がなくなったのでしょうか。

* [デモ](https://aka.ms/babylon8gpuBBoxDemo)
* [APIドキュメント](https://aka.ms/babylon8gpuBBoxDoc)

# 最後に
誤り等ございましたら、お手数ですがコメント欄から教えていただけますとありがたいです。
現状の私の理解では、ジオメトリ以外のノードツールでよってたかってポストエフェクトを設定できることになっているのですが何か違いあるのでしょうか。

# 関連記事
https://cginterest.com/2025/03/29/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3-2/