Babylon.js 9 がリリース！ライティングやパーティクルシステムの強化、地理空間レンダリング、リターゲティング機能などなど

Babylon.jsの開発チームは、オープンなWebレンダリングエンジンの最新アップデート「Babylon.js 9」をリリースしました。

新機能ハイライト

今回のアップデートは過去最大規模のアップデートとされており、「想像し得る最も美しく、パフォーマンスが高く、インタラクティブなWeb体験を皆様が創造できるようにする」ということを目標に構築されました。

ライティングやパーティクルシステムから、地理空間レンダリング、アニメーションリターゲティング、そしてまったく新しいインスペクターに至るまで、Web上で可能なことの限界を押し広げる新機能、最適化、パフォーマンス向上の1年間の成果が詰まっています。

Babylon.js 9.0 Release Video

クラスタードライティング 

多数の光源が存在するシーンでは、ピクセルごとにすべてのライトの寄与を計算する必要があり、処理が非常に重くなります。従来の手法では、あるピクセルにまったく影響しない光源であっても、例外なく計算対象に含める必要がありました。

Babylon.js 9.0 では、新しいクラスタードライティング（Clustered Lighting）システムにより、光源をスクリーンスペース上のタイルと深度スライスに基づいてインテリジェントに分類し、ライティング計算を大幅に効率化できるようになりました。

レンダリング時には、各ピクセルが 自分に実際に影響を与える光源だけを計算するようになるため、数百〜数千のライトが配置されたシーンでも滑らかなフレームレートを維持できます。

このシステムは WebGPU と WebGL 2 の両方に対応しており、幅広い環境で次世代のライティングパフォーマンスが実現できます。

テクスチャ付きエリアライト

バージョン 8.0 で導入されたエリアライトをベースに、バージョン 9.0 では 発光テクスチャがサポートされました。

これによって、任意の画像を長方形のエリアライトの光源として使用できるようになり、ステンドグラスの投影、LED パネルディスプレイ、映画照明のようなセットアップなど、物理的に正確な発光を伴う表現が可能になります。

プロダクション向けには オフラインでのテクスチャ処理ツール が用意されており、迅速なプロトタイピングや実験用途として ランタイム処理のオプション も利用できます。

ノードパーティクルエディタ

非破壊的なノードグラフを使って複雑なパーティクルシステムを構築できる、まったく新しいビジュアルツール 「Node Particle Editor（NPE）」 が登場しました。

NPEを使用すると、発光形状、スプライトシートから、更新の振る舞い、サブエミッターに至るまで、パーティクルシステムのあらゆる側面を直感的なドラッグ＆コネクトのインターフェースで完全に制御できます。

NPEの最大の利点は、Particle System APIの深い知識がなくても、ツール側が構文やバリデーションを自動で処理してくれるため、複雑なコードの記述を大幅に削減できる点です。主な特徴は以下の通りです。

この新しいエディタは、Babylon.jsの既存ツールであるNode Material Editorに慣れている方であれば、すぐに使いこなせることができるように設計されています。シンプルな煙のエフェクトから、プロシージャルに生成される複雑な花火まで、 視覚的に楽しみながらエフェクトを簡単に作成できます。

NPEは npe.babylonjs.com からスタンドアロンで利用できるほか、シーン内の既存のパーティクルシステムを選択してインスペクタの「Edit」ボタンから直接起動することも可能です。

パーティクルフローマップとアトラクター 

Babylon.js 9.0 では、パーティクルの挙動をさらに細かく制御するために フローマップ（Flow Maps） が追加されました。これは、画面に整列したテクスチャを利用し、画面上の位置に基づいてパーティクルに加わる力の方向と強さを制御する仕組みです。

各ピクセルには 3D の方向ベクトルと強度がエンコードされており、パーティクルの動きをきめ細かく、芸術的にコントロールできます。フローマップは CPU・GPU の両パーティクルシステムで動作し、新しい Node Particle Editor にもシームレスに統合されています。

さらに、パーティクルツールキットには 重力アトラクター（Attractors） も追加されました。アトラクターは空間内の特定位置に引力（強度）を設定し、その方向へパーティクルを引き寄せる機能です。強度をマイナスに設定すれば、反発力（リパルサー）としても利用できます。

アトラクターの位置やパラメーターはリアルタイムで調整できるため、渦巻く竜巻、磁場のような動き、爆発の衝撃波など、動的でインタラクティブなエフェクトを簡単に作り出せます。

ボリューメトリックライティング

できるボリュメトリックライティングは、機能です。Babylon.js 9.0 の新しいボリュメトリックライティングシステムにより、霧、ほこり、かすみなどを通り抜ける光の筋をリアルに描写する表現がこれまで以上に簡単に扱えるようになりました。

光の減衰（Extinction）や位相（Phase）といったパラメーターを調整することで、大気と光の相互作用をアーティストの意図通りに細かくコントロールでき、リアルな光の散乱表現を実現できます。指向性光源にも対応しており、WebGPU のコンピュートシェーダーを最大限に活用することで高いパフォーマンスを発揮します（WebGL 2 へのフォールバックもスムーズです）。

薄暗いダンジョン探索ゲーム、霧に包まれた森、雰囲気重視の建築ビジュアライゼーションなど、どのようなシーンでも一瞬で映画のような重厚な雰囲気へと変えてくれます。

フレームグラフ

バージョン8.0でアルファ版として導入されたフレームグラフ（Frame Graph）システムが、ついに正式なバージョン 1 として実装され、レンダリングパイプライン全体を詳細に制御できるようになりました。

フレームグラフは、オブジェクトのカリングからポストプロセスまで、各レンダリングタスクをノードとして構成する 有向非巡回グラフ（DAG） です。

各タスクが必要とするリソースと生成するリソースを宣言すると、システムがテクスチャの割り当て、再利用、最適化をインテリジェントに管理することができます。その結果、GPU メモリを大幅に節約でき（ケースによっては 40%以上の削減 が確認されています）、これまで不可能だったレベルの柔軟なレンダリング構築が可能になります。

フレームグラフは、Node Render Graph Editor を使ったビジュアルな構築 と、クラスフレームワークを利用したプログラムによる構築 のどちらにも対応しており、不透明なレンダリングのブラックボックスに悩まされる必要がなくなる重要な機能となっています。

アニメーション リターゲティング

キャラクターアニメーションを扱うあらゆる開発者にとって、まさにゲームチェンジャーとなる機能新しい「アニメーション リターゲティング（Animation Retargeting）」機能が追加されました。

新しいリターゲティングシステムを使うと、あるキャラクター向けに作成されたアニメーションを、骨格構造・ボーン比率・命名規則がまったく異なる別のキャラクターへ適用できます。

このシステムは、ソース側のスケルトンからターゲット側へ各ボーンのトランスフォームを数学的にリマップし、基準ポーズ・ボーン長・階層構造の違いを自動的に補正します。これにより、歩行、戦闘、表情アニメーションなど、アニメーションライブラリ全体を複数のキャラクター間で共有することが可能になります。

さらに、コードを一切書かずにリターゲティングの実験ができるインタラクティブな「アニメーションリターゲティングツール」も用意されています。

このツールでは画面が2つのビューポートに分割され、左半分にはアニメーションが適用されるターゲットキャラクター（アバター）が、右半分にはソースアニメーションファイルから生成されたリファレンススケルトンが表示されます。画面右側のパネルにはすべてのコントロールがまとめられており、直感的な操作が可能です。

高度なガウシアンスプラットのサポート

バージョン 7.0 で導入されたガウシアンスプラッティングが、Babylon.js 9.0 でさらに大きく進化しました。

今回のリリースでは、複数のファイルフォーマット（.PLY、.splat、.SPZ、そして自己組織化ガウシアンである .SOG / .SOGS）のサポートに加え、不透明なメッシュのようにレンダリングできる トライアングルスプラッティング や、影を落とす シャドウキャスト 機能が新たに追加されています。

各フォーマットや手法については以下の記事をご覧ください。

さらに、グローバルなスプラットソート機能 により、複数のガウシアンスプラットアセットを 1 つのシーンに統合できるようになりました。プログラムからガウシアンスプラットデータを生成・編集・ダウンロードすることも可能で、複合スプラットシーンの各パーツを独立して変形・アニメーションさせることができます。

これにより、Web上でのフォトリアルなボリュメトリックキャプチャの扱いがより柔軟になりました。

このガウシアンスプラットのサポートの強化はAdobeの貢献により行われたとのことです。

Babylon.js Editor

コミュニティメンバーである Julien Moreau‑Mathis 氏 が情熱を注いで長年開発してきた「Babylon.js Editor」が、レンダリング面・機能面の両方で大きく強化されました。

Babylon.js Editorは、ビデオゲームをはじめとする Babylon.js アプリケーションを 視覚的に作成・編集するためのデスクトップアプリケーションです。シーン構築、マテリアル編集、スクリプトのアタッチといったフル機能の編集環境を、シンプルで直感的なインターフェースで利用できます。さらに、圧縮テクスチャの生成や LOD（Level of Detail）、コリジョン設定など、多彩な最適化ツールも組み込まれています。

最近のアップデートでは、以下のような機能が追加されています。

• 高度なPBRマテリアル表現: インスペクタ上で「屈折（Refraction）」「半透明（Translucency）」「イリデッセンス（遊色効果）」「シーン（光沢）」プロパティが追加設定できるようになり、よりフォトリアルで複雑な質感表現が可能になりました。
• 最新エンジンのサポート: Babylon.js 9.0の「ノードパーティクルシステム (NPE)」をエディタ内でネイティブにサポートしています。
• 内蔵マーケットプレイス: エディタ内に専用のマーケットプレイス機能が統合され、アセットやマテリアルパックをエディタ上から直接ダウンロードして適用できるようになりました。
• ワークフローの改善: Sketchfabとの直接ログイン連携、Shiftキーによる複数選択、プレビュー画面からのマテリアル自動選択、インスタンス作成時の物理演算（Physics Aggregate）のクローンなど、クリエイターの作業を効率化する多数の機能が追加されました。

Inspector v2

Babylon.js で長年愛されてきたデバッグ／検査ツールが、基礎から完全に再構築され、「Inspector v2」 として生まれ変わりました。これは Babylon.js における開発者体験とツール環境を大きく前進させる重要なアップデートとされています。

新しい Inspector は、React ベースの UI コンポーネントによるサービス指向モデルの上に構築された、モダンで拡張性の高いアーキテクチャが採用されています。オーバーレイ／インラインのレイアウトモード、ライト／ダークテーマをサポートし、静的・動的な拡張機能を通じて完全にカスタマイズ可能です。

開発者は、クリーンでドキュメント化された API を利用して、独自のペイン、ツールバーアイテム、プロパティエディター、デバッグビューなどを簡単に追加できます。

Babylon Viewer のアップデート

数行の HTML を追加するだけで、どんな Web ページにも美しい 3D コンテンツを埋め込める 「Babylon.js Lightweight Viewer」は、バージョン 8.0 で導入されさましたが、9.0 でも引き続き強化されています。

今回のアップデートでは、シャドウマップ用の IBL における主要光源方向の計算や、テクスチャを持たないモデル向けの SSAO など、影の表現が大幅に改善されました。製品の簡単なショーケースを作りたい場合、完全にインタラクティブな3Dコンテンツを素早く埋め込みたい場合など、このビューアーの改善が役立ちます。

また、今年も Babylon Viewer の高度なシャドウレンダリングの導入にはAdobeが貢献したとのことです。

Playground のアップデート

Babylon.js の実験やテストで親しまれているオンラインサンドボックス 「Playground」 が、コミュニティメンバー knervous 氏の多大な貢献により、大幅にアップグレードされました。

簡単なアイデアのプロトタイピングから複雑なマルチファイルプロジェクトの構築まで、ブラウザ上での開発体験がかつてないほど強力になっています。主な更新内容は以下の通りです。

• マルチファイル編集とタブ機能: コードエディタがタブ化され、Playgroundを複数のファイルに分割できるようになりました。タブの追加、削除、名前の変更、並べ替えが可能で、任意のファイルを実行の起点（エントリーポイント）に指定できます。
• ESMモジュールとNPMパッケージのインポート: タブ間でローカルモジュールのインポート/エクスポート（例: import MyClass from './module.ts'）が可能になりました。さらに、esm.shを介してNPMパッケージをバージョン指定付きで直接インポートすることもできます。
• ローカルセッション履歴（自動保存）: 作業内容がローカルストレージに自動保存されるようになりました。無限ループ、誤ったページ遷移、ブラウザのクラッシュが発生した場合でもコードが失われることはなく、過去のセッションをいつでも復元できます。

広大な世界のレンダリング機能

広大な座標空間にまたがるシーンを扱う場合、32 ビット浮動小数点では精度が不足し、メッシュの揺れ、影のちらつき、アニメーションのカクつきといった ジッタリング が発生します。Babylon.js 9.0 では、これを解決するための包括的な Large World Rendering / Floating Origin（フローティングオリジン） システムが導入されました。

このシステムは、カメラを常にワールド原点付近に保ち、ジオメトリやシェーダーのユニフォームをオフセットします。これにより、広大な距離を移動しても計算精度が維持され、滑らかなレンダリングが可能になります。

さらに、この仕組みは Havok 物理エンジンとも統合されています。マルチリージョンアーキテクチャにより、物理ボディを複数のシミュレーション領域（それぞれが独自のフローティングオリジンを持つ）に分散させることで、巨大な世界規模での物理演算が可能となります。

これらのアップデートにより、フライトシミュレーター、宇宙ゲーム、地理空間アプリケーションなど、広大な世界座標を扱うあらゆるシーンで、これまでにない滑らかなレンダリングができるようになりした。

地理空間カメラ

ワールド原点を中心とした球状の惑星を周回し、ナビゲーションするために設計された新しい「地理空間カメラ(Geospatial Camera)」 が導入されました。

ドラッグによるパン、カーソル方向へ半径に比例してズームするスクロール、右クリックによるチルトなど、地図アプリのような操作性を標準で備えています。さらに、キーボードやタッチ入力のサポート、設定可能な移動制限、flyToAsync による滑らかな飛行アニメーション、衝突検出、高度に応じたクリップ面の自動調整（オプション）など、多彩な機能が含まれています。

前述の Large World Rendering と組み合わせることで、このカメラは地理空間Web体験という新しいクラスのアプリケーションを構築するための強力な基盤となります。

3D Tiles サポート

3D Tiles は、Cesium によって作成され、Open Geospatial Consortium（OGC）に採用された、巨大で不均一な 3D 地理空間データをストリーミングするためのオープン標準規格です。

Babylon.jsで3D Tilesをレンダリングするための推奨ソリューションとして、NASA/AMMOSが開発するオープンソースライブラリ「3DTilesRendererJS」に、新しくBabylon.js対応が追加されました（Garrett Johnson 氏の貢献）。

これにより、タイルセットのトラバーサル、詳細度（LOD）の選択、タイルの読み込みが処理され、カメラの位置に基づいてオンデマンドで読み込まれる巨大なデータセットの効率的な視覚化が可能になります。

新しい Geospatial Camera と Large World Rendering と組み合わせることで、Babylon.js を使って 地図データを Web 上でレンダリングするための道が本格的に開かれました。

実際のプロジェクトでこの機能を使用する際は、以下のような重要な要件と注意点があります。

• Playgroundでの利用制限: モジュールのインポート方式（UMDとES6）の競合により、公式のPlayground上では動作しません。WebpackやViteなどのバンドラーを用いたローカルプロジェクト環境でセットアップする必要があります。
• 必須のセットアップ: 右手座標系の有効化（scene.useRightHandedSystem = true）と、毎フレーム tiles.update() を呼び出す処理が必要です。
• 推奨される組み合わせ: 地球規模の巨大なデータセット（Google Photorealistic 3D Tilesなど）を扱う場合は、精度の問題を回避するために「Large World Rendering」を有効にし、ナビゲーションには従来のArcRotateCameraではなく新機能の「Geospatial Camera」を使用することが強く推奨されます。

物理ベースの大気表現

空や大気遠近法をリアルに描き出す 「物理ベースの大気（Physically Based Atmosphere）」アドオン が導入されました。

このアドオンを使用すると、物理的に正確なレイリー散乱やミー散乱のモデルに加え、オゾン層での吸収や多重散乱を組み合わせることで、日の出・日没・昼夜サイクルを自然に表現できます。PBR マテリアルや指向性光源ともシームレスに統合されており、カスタマイズ可能な散乱パラメータを調整することで、地球はもちろん、まったく異なる惑星の大気まで柔軟に作成できます。

このアドオンは、プロジェクトに気軽に追加できる 軽量なオプトインパッケージ として提供されています。

OpenPBR サポート アルファ版

Babylon.js 9.0では、Academy Software Foundation (ASWF) がホストするオープンな標準規格であり、アーティストフレンドリーで相互運用可能なマテリアルモデルを定義する「OpenPBR」の実装が始まりました。

OpenPBR は、作成したマテリアルが標準をサポートするあらゆるプラットフォームで 一貫した見た目 になるよう設計されています。Babylon.js では、ベース、スペキュラー、コート、薄膜（Thin‑film）など、OpenPBR の多くのパラメータグループを既存の PBR マテリアルシステムへマッピングできるようになりました。

これは、業界全体でマテリアルの相互運用性を進めるうえで大きな前進であり、Babylon.js がレンダリング標準の分野で引き続き重要な役割を果たすことにつながります。この機能もまた、Adobeからの貢献により実現しています。

動的IBLシャドウ

イメージベースドライティング（IBL）は長年にわたり Babylon.js のレンダリングを支えてきましたが、バージョン 9.0 では 動的IBLシャドウ（Dynamic IBL Shadows）によってさらに強化されました。

Babylon.js 8.0 で Adobe が最初に提供した IBL シャドウ機能を基盤に、照明条件の変化にリアルタイムで応答する、より柔軟で精度の高い環境シャドウが追加されています。これにより、シーン環境の光と影をソース画像からこれまで以上に自然かつ高い忠実度で近似できるようになりました。

これらの画像ベースのライティングとシャドウ表現の新機能は、引き続きAdobeによる貢献によって実現しています。

SDFテキスト

3D環境でスケーラブルかつ鮮明なテキストをレンダリングすることは、これまで常に課題でした。Babylon.js 9.0 では、この問題に対応するため Signed Distance Field（SDF）テキストレンダリング が導入されました。

この技術により、解像度に依存せず、どのようなサイズやズームレベルでも滑らかで読みやすいテキストを表示できます。拡大するとぼやけたりピクセル化したりする従来のビットマップフォントとは異なり、SDF テキストは近づいてもシャープなエッジと明瞭な輪郭を保ちます。

そのため、ゲーム内 UI、ラベル、看板、HUD 要素など、3D 空間に視認性の高いテキストを配置するあらゆる場面に適した手法となっています。

アウトラインレンダラー

Babylon.js 9.0 には、コミュニティメンバー noname0310 氏 の貢献によってシーン内のメッシュにスタイル化されたアウトライン（輪郭線）を手軽に追加できる 新しい「アウトラインレンダラー（Outline Renderer）」 が導入されました。

カートゥーン調（トゥーンレンダリング）の表現を行う場合はもちろん、選択中のオブジェクトを強調したり、テクニカルなビジュアライゼーションを作成したりする際にも、レンダリングパイプラインと自然に統合できる、クリーンでカスタマイズ可能なアウトラインを描画できます。

ナビゲーションメッシュのアップデート

ナビゲーションメッシュ（Nav Mesh）は、ゲームやシミュレーションにおける経路探索や AI の移動に欠かせない要素です。

Babylon.js 9.0 では、コミュニティメンバー Roland 氏によってこのナビゲーションメッシュシステムに改良が加えられ、メッシュ生成やエージェントの経路探索における 精度・パフォーマンス・使いやすさ が向上しました。

この強化により、RTS（リアルタイムストラテジー）、オープンワールドの探索ゲーム、または建築物のウォークスルーなどを構築する際、キャラクターやエージェントをシーン内でインテリジェントに動かすことがこれまでになく簡単になります。

オーディオエンジンのアップデート

音響は、没入感のある体験を構築するうえで非常に重要な要素です。Babylon.js 9.0 では、バージョン 8.0 で全面的に刷新されたオーディオエンジンの改良がさらに進みました。

今回のリリースでは、追加の改善点や機能拡張に加え、最新の Web Audio 標準に沿った API の使いやすさが向上しています。モジュール化されたオーディオエンジンにより、空間オーディオ、環境音（アンビエントサウンド）、インタラクティブな効果音などを、Babylon.js の体験によりスムーズに組み込めるようになりました。

3MF エクスポーター

コミュニティメンバー Guillaume_Pelletier 氏 の貢献によってBabylon.js 9.0 に、新しいエクスポーターが追加され、シーンのジオメトリを 3D プリントで一般的に利用される 3MF フォーマット に書き出せるようになりました。

これにより、Babylon.js で作成したモデルをそのまま 3D プリンター向けのワークフローに組み込みやすくなります。

追加のアップデート情報

大型アップデートから間を置かず、開発チームからは早くもパフォーマンスのさらなる最適化と開発基盤の刷新が行われたバージョン9.1がリリースされています。

• WebGPUの強化: 非同期レンダーパイプラインのプレウォームAPIの追加や、頂点プーリング（Vertex Pulling）のサポート、読み書き可能なストレージテクスチャへの対応など、次世代のグラフィックスAPIに向けた最適化がさらに進んでいます。
• ガウシアンスプラッティングの改善: 実行時（ランタイム）におけるSH次数の変更機能や、非アクティブな部分を除外するGPUピッカーなど、より高度で柔軟な制御が可能になりました。
• エディタと開発基盤の進化: Flow Graph Editorに物理演算ブロックや新しいオーディオブロックが追加されました。また、コアのコードベースがTypeScript 6.0へとアップグレードされ、開発環境がよりモダンで堅牢なものに刷新されています。

利用について

Babylon.jsは、Apache License 2.0のオープンソースライセンスの下で提供されており、個人利用、商用利用問わず、無償で自由に使用、改変、配布することができます。

詳細は、Babylon.jsの公式サイトやドキュメント、 GitHub 、フォーラムをご確認ください。

---

Welcome to Babylon.js 9.0