Babylon.js 6.33.0で3D Gaussian Splattingが表示できるようになりました！
はじめに
TL;DR
Babylon.js 6.33.0 から 3DGS が表示できるようになりました🎉。
概要と対象読者
本記事では Babylon.js の新機能である「Gaussian Splatting」の使い方について解説します。
この機能自体、かなり手軽に扱えるようになっており内容は軽めですので、Babylon.js を使ったことがあればすんなり理解できるでしょう。また 3DGS についての解説は本記事では割愛しますので、詳細が気になる方は別の記事を参照ください。
検証環境
- Windows 10 Home
- Node.js 20
- pnpm 8
- Babylon.js 6.33.1
サンプル
サンプルプロジェクトを GitHub にて公開しておりますので、ぜひご参考になさってください。
Babylon.jsで3DGSが見られるようになった
Babylon.js 6.33.0のリリースノート
Babylon.js 6.33.0 のリリースノートを見ると、「#14578: Gaussian Splatting」という項目がありました。すごいしれっと書かれているのでスルーしかけたのですが、まさか 3DGS が使えるのか......？ と思い試してみたところ、かなり簡単に扱えるようになっていました。
当該プルリクはこれです。
その後データ読み込み API が 6.33.1 で追加されました。本記事でご紹介する方法も、6.33.1 から追加された API を利用します。当該プルリクエストはこれです。
実際に表示してみる
それでは実際に使って見ましょう。
.splatデータを用意する
Gaussian Splatting のデータを表示するためには対象のデータが必要です。Babylon.js の API では.splatファイルというものをロードして表示する仕組みになっています。
LumaAI や Polycam もしくは Gaussian Splatting の原著論文のサンプルを使って学習させたモデルは.plyファイルとして生成されますが、このデータを変換したものが.splatファイルだと筆者は理解しています。
例えば LumaAI のページでダウンロードボタンを押すとダイアログが開きますが、その中の「Gaussian Splat」というボタンを押すと.plyファイルを取得出来ます。
.plyファイルを取得
そのファイルを次の Web ページへ D&D することで.splatファイルがダウンロードできます。
.splatを読み込んで表示する
.spaltファイルの読み込み方法は 2 通り用意されています。
-
loadDataAsync: バイナリデータを ArrayBuffer として読み込む -
loadFileAsync: ファイルパスを指定して読み込む
次のコードは、Vite で作成した TypeScript ベースの Web フロントエンドプロジェクトでassets/に配置された.splatファイルを読み込んで表示する例です。
import {
ArcRotateCamera,
Engine,
GaussianSplatting,
Scene,
Vector3,
} from "@babylonjs/core";
// splatファイルのパスを指定
import splatPath from "../assets/model.splat?url";
const main = () => {
const engine = new Engine(renderCanvas, true);
const scene = new Scene(engine);
const camera = /* 中略 */;
// ここでsplatデータを読み込んで3DGSを表示
new GaussianSplatting("splatting", scene).loadFileAsync(splatPath);
window.addEventListener("resize", () => engine.resize());
engine.runRenderLoop(() => scene.render());
};
main();
すると、このように Babylon.js のシーン内に 3DGS が表示されました。
3DGSが表示された。マウスでグリグリ動かせる
おわりに
まとめ
本記事では Babylon.js に加わった 3D Gaussian Splatting 機能について解説しました。
個人的にかなりアツいトピックなのですが、まだあまり情報が出ていないみたいでしたのでサクッと記事化してみた次第です。3DGS は今かなり注目を集めているので、引き続き情報を追っていきたいですね。
最後まで読んでいただきありがとうございました。
参考文献
Discussion