Babylon.js公式の解説

はじめに

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

用語の解説

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方式でプリフィルタリングを実施
);

エリアライト

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

IES ライトのサポート

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

デモ ※3Dオブジェクトをクリックすることでライトが変わります。
ドキュメント
APIドキュメント

EXRテクスチャ対応

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

デモ

マテリアル

KHR_materials_diffuse_transmission対応

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

機能面その他

glTFローダーのオプション追加

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

Gaussian Splatting

パフォーマンスが改善されたのでしょうか？

デモ ※23MBのspzが読み込まれます。モバイル環境ではご注意ください。
ドキュメント
APIドキュメント

ブール演算の改善

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でもエクスポートできるようになりました。

APIドキュメント

GLTF形式でのエクスポートの改善

最新の拡張機能と機能をサポート

GPUによるパフォーマンス改善

GPUメッシュ選択

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

GPU バウンディングボックス

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

最後に

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

関連記事