はじめに
今回のアップデートは今までで最大規模だそうです。
個人的にはボリュメトリックライトとテクスチャエリアライトが非常に嬉しいです。
Geospatial Cameraという新しいカメラも面白いと思いました。
総合的に見ると、3D地図アプリや大規模シーンを作るときに役立つ機能が多い印象です。
大規模シーンの座標安定化は嬉しい方も多そうですね。
素晴らしいですね！
アップデート内容を理解するための用語解説
エリアライト
長方形のエリアを光源としたライトのこと。
BabylonjsではRectAreaLightと呼ばれる。
ボリューム
3Dにおけるボリュームとは空間データの事。
空間をブロック化し、それぞれのブロックにデータを持たせることで煙など3Dポリゴンオブジェクトではできないことを表現できる。
ボリュメトリックライト
木漏れ日など、光の軌跡が見えるライトの事。
IBL
イメージ・ベースド・ライティングの略。
ライトオブジェクトの代わりに、画像（HDRやEXR）を用いてライティングを行う。
ワールドに見立てた3Dオブジェクトを覆う球に対し、パノラマ画像を割り当ててライティングされる使われ方が多い。
IBLの詳細解説
HDR (画像形式)
ハイ・ダイナミック・レンジの略。
jpg等、SDR(スタンダード・ダイナミック・レンジ)形式よりも広い輝度情報を格納できるため、ライトとして使われることが多い。
また、露光量フィルターを変化させることで、白飛び、黒つぶれした状態から、していない状態に変化させられる。
EXR (画像形式)
OpenEXRともいう。
HDRのようなやつ（適当）
Gaussian Splatting
3Dシーンを多量の小さな楕円型のぼかし模様で表現する技術（点群）
Gaussian Splattingの詳細解説
Inspector
Babylon.jsの最大の強みと言っても過言ではないデバッグツールの事。
Inspectorの機能
Playground
Babylon.jsを試すことができるオンライン環境
https://playground.babylonjs.com/
アップデート内容
レンダリング処理
Frame Graph
8.0でアルファ版が実装された、レンダリング処理を細かくユーザーが制御できるシステムです。
不要な計算を40%も省けた例もあるとか。
後述のボリュメトリックライトを使う場合、フレームグラフが必要です。
アウトラインレンダリング
指定オブジェクトの輪郭をハイライトする機能、BABYLON.SelectionOutlineLayerの追加。
似た機能としてBABYLON.HighlightLayerがありました。
BABYLON.SelectionOutlineLayerはくっきりと輪郭をハイライトするので、カートゥーン（セルルック）シェーディングの時にも使えそうです。
ライティングまわり
Clustered Lighting
画面空間を3Dブロックに分割し、見えている（もしくは指定した奥行きの）必要なライトだけを計算することで、大量のライトが置かれている場合のパフォーマンスが劇的に改善できたそうです。
真相は分かりませんが、ドキュメントを読むとMicrosoftのActivision Blizzard買収によって実現が進んだようにも感じました。
Textured Area Lights
8.0で実現した長方形面ベースのエリアライトがテクスチャに対応しました。
デモではテクスチャが地面に反射しているのが分かります。
シーン構築時にテクスチャ変換処理が走るようです。
Texture Toolsを使って事前に変換しておくことも可能です。
影を落とせるようにしたいそうですが1年たった今も実現できていないようです。
Volumetric Lighting
これまでのVolumetricLightScatteringPostProcessというポストプロセスではなく、ボリューム計算ベースの実装により、画面外に光源があってもボリュメトリックライト表現が可能になりました。
前提としてFrameGraphが必要です。
可能であればWebGPUで実装した方が良さそうです。ドキュメントではWebGLで実装した場合に負荷軽減のため更新頻度を落とす例が掲載されていました。
Dynamic IBL Shadows
8.0で実装されたIBLで影を作るシステムがパワーアップ。
アニメーションがあるシーンを改善します。
リアリティが増す反面、高負荷であることと影にノイズが出るため、使い方次第では注意が必要そうです。
完璧になれば非常に強力なので引き続きアップデートを継続してほしいです。
3D表現関連
Advanced Gaussian Splat Support
7.0で対応した3Dガウシアンスプラッティング(3DGS)のアップデートが続いています。
- 複数形式に対応(.PLY, .splat, .SPZ, .SOG/.SOGS（Self-Organizing Gaussians))
- 不透明メッシュのようなレンダリングのための三角形スプラッティングに対応
- 影の生成
- 複数の3DGSを統合、個々の位置変更など
- デモ
- ドキュメント
- APIドキュメント
Animation Retargeting Tool
アバターアニメーションを全く異なるアバターに適用する機能。
骨格構造、命名が異なっても成り立つそうです。
詳しい内容を知りたい方は是非ドキュメントを見てみてください。
3D Tiles Support
3D地理空間データプラットフォームCesiumが提唱するオープン規格「3D Tiles」に対応。
タイル状に分割して必要箇所だけを動的に描画することで広大な3D地理空間をレンダリングできます。
3D Tilesを読み込むには外部ライブラリが必要で、NASA-AMMOS/3DTilesRendererJSが推奨されています。
これにより、Playgroundでは使用できません。
npm install 3d-tiles-renderer @babylonjs/core
物理的に正確な大気の生成
正確に計算された大気システムにより、日の出、日の入り、昼夜のサイクルといった時間帯での変化を表現可能です。
npm install @babylonjs/addons --save
大気と共に3Dオブジェクト（例：飛行機）を扱う場合、PBRマテリアルを使うことを推奨されています。
拡大してもきれいな3Dテキスト
従来のテクスチャベースではなく、SDF(Signed Distance Field)によるテキストレンダリングを使うことで拡大してもきれいなテキストを実現。
3D-UIなどあらゆるシーンで役立ちます。
npm install @babylonjs/addons --save
事前にフォントデータを作成しておく必要があります。
マテリアル
OpenPBR対応（Alpha段階）
PBRの業界標準を目指すOpenPBRへの対応が進められています。
異なるプラットフォーム間で同じ質感表現が可能になります。
他にもMaterialXやglTFのマテリアルなど、目指す用途は違えど標準PBRが増えてきていますね。。。
const scene = new BABYLON.Scene(engine);
// Loads a model enabling OpenPBR
const loadOptions = {
pluginOptions: {
gltf: {
useOpenPBR: true
}
}
}
await BABYLON.AppendSceneAsync("https://assets.babylonjs.com/meshes/StandardShaderBall/StandardShaderBall.glb", scene, loadOptions);
カメラ
Geospatial Camera
地球儀を回すときに使うような、カメラではなくオブジェクト自体を回転させているように感じるカメラが新しく追加されました。
パーティクルシステム
フローマップによるパーティクル制御
パーティクルの進む方向を画像（フローマップ）ベースで制御できるようになりました。
const flowMapUrl = "https://assets.babylonjs.com/textures/particleMotion_flowmap.png";
particleSystem.flowMap = await BABYLON.FlowMap.FromUrlAsync(flowMapUrl);
const flowMapUrl = "https://assets.babylonjs.com/textures/particleMotion_flowmap.png";
particleSystem.flowMap = new BABYLON.Texture(flowMapUrl);
パーティクルアトラクター
アトラクターにより、パーティクルを一点に引き寄せたり（アトラクト）、反発させることが可能になりました。
GPUパーティクルシステムでは使用できません。
オーディオ
Audio Engine Updates
継続的にオーディオエンジンのアップデートが続いています。
空間音響、環境音、インタラクティブな効果音といったゲーム制作で役立つ音響効果を実現できます。
その他
安定した大規模ワールドレンダリング
大規模な座標を扱うシーンでは、座標の精度が落ちてオブジェクトが正しく描画されない、カメラ移動でちらつきが発生するなどの悪影響が出ていました。
今回のアップデートでこの問題を解決しました。
デモでは有効無効を見比べられますが、無効だとそんなことになるのという感じで笑ってしまいました。
const engine = new BABYLON.Engine(canvas, true, {
useLargeWorldRendering: true,
});
ナビゲーションメッシュのアップデート
オブジェクト（例：車）の経路探索や、AIによる経路コントロールに使うナビゲーションメッシュシステムのアップデート。
ナビゲーションメッシュ生成およびエージェント経路探索の精度、性能、使いやすさが向上したそうです。
npm i @babylonjs/addons @recast-navigation/core @recast-navigation/generators
import { CreateNavigationPluginAsync } from "@babylonjs/addons";
import * as RecastCore from "@recast-navigation/core";
import * as RecastGenerators from "@recast-navigation/generators";
const navigationPlugin = await ADDONS.CreateNavigationPluginAsync(); // uses WASM under the hood
const navigationPlugin = await ADDONS.CreateNavigationPluginWorkerAsync(); // under construction
ノードエディタツール
Node Particle Editor
ノード形式のパーティクルエディタにより、実装時にGUIでのコントロールが可能になりました。
nodeParticleSystemSet.editAsync();
3Dデータ出力
3MF Exporter
新たに3MF形式でデータ出力が可能になりました。
出力時に再スケーリングを行わないため、オブジェクト寸法を正しくしておく必要があります。
- STL
3DCADや3Dプリント業界で多用される3Dデータ形式。
形状データのみを保持する。 - 3MF
STLの上位互換のような3Dデータ形式。
内部的にzip圧縮されるためSTLよりデータ容量を小さくできる。
色・材質・単位・複数オブジェクトのデータを保持する。
3MFを扱うにはまず環境を整備する必要があります
import {
ThreeMfModelBuilder,
ThreeMfMeshBuilder,
ThreeMfMaterialBuilder,
ThreeMfDocumentBuilder,
ST_Unit,
} from "babylonjs-serializers";
ツール系アップデート情報
Inspector v2
Babylon.jsの最大の強みと言っても過言ではないデバッグツールの存在、Inspectorがバージョン2となりインターフェースがかなり変わりました。
import { ArcRotateCamera, Engine, Scene, LoadAssetContainerAsync } from "@babylonjs/core";
import "@babylonjs/loaders";
import { ShowInspector } from "@babylonjs/inspector";
const testAsset = "https://assets.babylonjs.com/meshes/Demos/optimized/acrobaticPlane_variants.glb";
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true, {
adaptToDeviceRatio: true,
antialias: true,
});
const scene = new Scene(engine);
(async () => {
const assetContainer = await LoadAssetContainerAsync(testAsset, scene);
assetContainer.addAllToScene();
// 省略
engine.runRenderLoop(() => {
scene.render();
});
ShowInspector(scene);
})();
Babylon.js Editor
PlayCanvasのようなGUIベースのBabylon.jsシーン構築アプリケーションのアップデート。
映像、ゲーム作りに特に役立ちます。
Playground
コードを複数ファイルに分割可能になりました。
エディタの左側にあるExplorerをクリックしてください。
最後に
誤り等ございましたら、お手数ですがコメント欄から教えていただけますとありがたいです。