はじめに
今回はリアルさに関するアップデートが多く、個人的にはかなりアツいバージョンアップでした。
それ以外に関しても実案件で活用されがちなアップデートが多いのではないでしょうか。
素晴らしいですね！
用語の解説
IBL
イメージ・ベースド・ライティングの略。
ライトオブジェクトの代わりに、画像を用いてライティングを行う。
ワールドに見立てた3Dオブジェクトを覆う球に対し、パノラマ画像を割り当ててライティングされる使われ方が多い。
IBLの詳細解説
HDR (画像形式)
ハイ・ダイナミック・レンジの略。
jpg等、SDR(スタンダード・ダイナミック・レンジ)形式よりも広い輝度情報を格納できるため、ライトとして使われることが多い。
また、露光量フィルターを変化させることで、白飛び、黒つぶれした状態から、していない状態に変化させられる。
EXR (画像形式)
OpenEXRともいう。
HDRのようなやつ（適当）
IESデータ
配光データという、照明器具の光の拡がり具合を保持するデータ形式。
照明器具メーカーが商品サイトで提供していることがあります。
GLTF
3Dの汎用フォーマット。
出力時に三角ポリゴン化されるため、主に閲覧用として使用。
保持できる情報が非常に多い。
USDZ
GLTFのようなやつ（適当）
Pixarが開発した。
主にiOSで使われることが多い。
Gaussian Splatting
3Dシーンを多量の小さな楕円型のぼかし模様で表現する技術（点群）
Gaussian Splattingの詳細解説
ブール演算
交差した3DオブジェクトA,Bについて、AとBを合体もしくはBの形状で削る機能。
ブール演算の詳細解説
Havokエンジン
Havok社が開発した物理エンジン。
Babylon.js開発元であるマイクロソフトにより買収され、Babylon.js 6.0から使えるようになった。
Havokのロゴはゲーム起動時に見たことがある方も多いのではないでしょうか。
GLSLシェーダー言語
WebGL用のシェーダー言語。
高度な特殊効果を実装でき、使いこなせれば魔法使いになれる。
GLSL シェーダー | MDN
WGSLシェーダー言語
WebGPU用のシェーダー言語。
WebXR
Webブラウザ上で仮想現実（VR）や拡張現実（AR）の体験を提供するためのAPI規格。
範囲が広大でとても解説しきれませんが非常に面白い分野なので、ぜひ調べてみてください。
WebXRの詳細解説
Node Material Editor
Babylon.jsが提供するノードベースのマテリアル作成ツール。
他にポストプロセス、パーティクルも製作可能。
3DCGソフトによくあるマテリアル設定をノードベースで行うツールではなく、いうなればマテリアルノード自体を作りたいようなときに使われるツール。
Node Geometry Editor
Babylon.jsが提供するノードベースの3Dモデル生成、編集ツール。
Blenderのジオメトリノードのようなもの。
アップデート内容
ライティングまわり
IBL Shadows
今まではIBLの場合、影が出なかったんですよね。
私も何度改善できないか調べ倒したことか。。。
このアップデートは嬉しいですね。
確か昨年にはすでに実験的に実装されていた気がします。
高負荷なため、アニメーションがあるシーンでは非推奨だそうです。
カメラを動かしたときにノイズが出るため、使い方次第では注意が必要そうです。
IBLでのレンダリング結果の改善
どういうアプローチの違いなのか全く理解できていませんが、色々変わったらしいです。
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方式でプリフィルタリングを実施
);
- デモ
- ドキュメント - IBL
- ドキュメント - realtime Filtering
- APIドキュメント - HDRCubeTexture
- APIドキュメント - mixIblRadianceWithIrradiance
エリアライト
長方形平面のライトです。
将来的には影が落ちるようにしたいそうです。
IES ライトのサポート
建築系ではおなじみのIES
本物の照明器具を使った3D空間をシミュレートできそうですね。
SpotLightで使えます。
EXRテクスチャ対応
テクスチャなので厳密にはライティングカテゴリにいれるのは違うのですが、主にIBLで使われることが多いのではないでしょうか。
EXRはHDRに比べ、若干サイズが小さい印象があるのでありがたいです。
あと拾い物のアセットでEXRしかない場合、HDRに変換する手間が省けました。
マテリアル
KHR_materials_diffuse_transmission対応
葉っぱなどの薄いオブジェクトに対する光の透過拡散を表現するGLTFの拡張機能に対応したようですね。
機能面その他
glTFローダーのオプション追加
デモや動画からは、KHR_materials_variantsによる最初に使うマテリアルプリセットを事前指定したり、LODの最大値を設定して読み込んでいることが伺えます。
Gaussian Splatting
パフォーマンスが改善されたのでしょうか？
ブール演算の改善
babylonjsでブール演算を使ったことがないのでどう改善されたのかよく分かりませんが、Manifold.jsに対応したことによりブール演算の精度、安定性が上がり失敗を減らせたのではないかと思います。
WGSLの直接サポート
例えばGLSLシェーダーをWebGPUでレンダリングする場合、従来は約3MBもの変換ライブラリが必要でしたが、これが不要になりました。
Havokキャラクターコントローラー
Havokエンジンを用いたTPS視点におけるキャラクターコントローラーの機能でしょうか。
ちなみにFPS視点はFree Cameraを使い、camera.applyGravityを有効にすることで実装できます。
布シミュレーションHavok Clothを実装してほしいなぁぁ！
オーディオエンジンの刷新
あまり知見がないのですが、結構刷新したそうです。
WebXR
WebXR Depth Sensingにより、後方の3Dオブジェクトを前方の現実オブジェクトで隠す
現実世界の奥行きを取得するWebXR Depth Sensing APIに対応したそうです。
現状、最新の Android デバイスまたは Oculus Quest 3のみ対応だそうです。
ノード系ツール
Node Render Graph (アルファ版 新ツール)
レンダリングパイプラインを自分で構築することが可能になったそうです。
チューニングや、高度なポストプロセスを実装したいときに使うのでしょうか。
Node Material EditorでのWGSLサポート
本家と同様に、Node Material EditorでもWGSLがサポートされました。
Node Material Editor デバッグノード追加
最終結果ではなく、途中の結果を確認できるノードですね。
拾い物のノード設定ファイルの理解が捗りそうです。
Node Geometry Editorのアップデート
追加されたノードの一例
- ラティスデフォーマ (Lattice Deformer) デモ ラティスとは
- ポイントリスト (Point List)
- クリーンジオメトリ (Clean Geometry) ※法線方向を再計算して反転した麺を修正
- インターセプター (Interceptor) デモ
-
アグリゲーター (Aggregator) デモ
※最小値、最大値、または合計を取得することで、例えばボックスの下に地面を配置できる -
細分化 (Subdivision) デモ
※面を再分割することで滑らかに
- デモ
- ドキュメント
Smart Filter Editor（新ツール）
まだ正しく理解できていません。
ポストエフェクトのためのツール？
テクスチャをぼかしたりといった用途も可能なのでしょうか。
ツール
Lightweight Viewer
Googleのmodel-viewerのような位置づけであるbabylon-viewerのアップデートですね。
<babylon-viewer></babylon-viewer>タグでホームページ内に埋め込める3Dビューアです。
刷新され、サイズが小さくなったのでしょうか？（469KB！）
USDZ形式でエクスポート
GLTFなどのように、USDZでもエクスポートできるようになりました。
GLTF形式でのエクスポートの改善
最新の拡張機能と機能をサポート
GPUによるパフォーマンス改善
GPUメッシュ選択
個人的には感じていませんでしたが、シーン内にメッシュが多量にあるとクリック等によるメッシュ選択が高負荷になるそうです。
GPUを使うことで改善されました。
GPU バウンディングボックス
バウンディングボックスとは3Dオブジェクトをピッタリ覆う直方体です。
頂点数が多いとバウンディングボックスの生成が高負荷になる印象があり、頂点数を減らしたオブジェクトを別に用意して生成するなどしていましたが、この必要がなくなったのでしょうか。
最後に
誤り等ございましたら、お手数ですがコメント欄から教えていただけますとありがたいです。
現状の私の理解では、ジオメトリ以外のノードツールでよってたかってポストエフェクトを設定できることになっているのですが何か違いあるのでしょうか。
関連記事