はじめに
この記事は Babylon.js Advent Calendar 2025
の、8日目の記事です
3回に分けて、ガウシアンスプラットについて書かせていただきます。
１．Scaniverseによるスキャンと、Babylon.jsで表示する手順
２．ガウシアンスプラットの特長について
３．Babylon.jsでガウシアンスプラットのデータの編集
今回の内容
この記事では、スマートフォンのアプリScaniverseでガウシアンスプラットのデータを作成し、Babylon.jsを使って表示する方法を紹介します。
ガウシアンスプラッティングって何？
ガウシアンスプラッティングは、3Dシーンを点群データとして表現する新しい技術です。従来のポリゴンとは異なり、無数の楕円体を空間に配置して、リアルな3D表現を実現します。
次の画像は、フォトグラメトリで作成したポリゴンのデータとガウシアンスプラットのデータで表示した恐竜の3Dデータを表示したものです。
よく見るとポリゴンのデータの方は地面や背景が少し乱れているのがわかります。
自然な表現ができる点に優れたガウシアンスプラットは、スマホだけでも簡単にスキャンを作成できます。
Scaniverseについて
Scaniverseは、ナイアンテック社の提供する3Dスキャンをする無料アプリです。
スマホがあれば簡単に３Dデータを作成できるのが最大の特徴です。
まずScaniverseで３Dデータを作成する手順を簡単に記載します。
Scaniverseによるガウシアンスプラットの作成方法
iPhoneの場合であればAppStoreで、「Scaniverse」で検索してインストールするだけです。
インストール出来たら、次はアプリを起動します。
起動すると、下図左の画面（マップ）が表示されます。
スキャンするにはまず画面下部の赤いプラスボタンをタップします。
赤いプラスボタンをタップすると次は下図中央の画面、Splatかメッシュどちらで３Dスキャンをするか選択する画面が表示されるので、ガウシアンスプラットでスキャンする場合は、Splatのボタンをタップします。
スキャン形式を選択すると、下図右側の画面、スキャンの開始待ちになります。対象物を画面に収めてスキャンを開始しましょう。
スキャンを開始したら対象物を様々な角度から撮影します。
例えば、３Dにしたいものを1周します。録画の停止ボタンをタップすると、今すぐ処理をするか後で処理するかを問われます。（下図左の画面）
この後の処理は数分時間がかかるのとバッテリーを消費するので、状況を見て選んでください。今すぐ処理を選択すると立体化の計算が始まります。（下図中央の画面）
計算が終わると保存するかマップに投稿して共有するか選択します。（下図右の画面）どちらを選択してもデータは保存されているので大丈夫です。
処理が終わったら3Dデータをファイルに出力します。
まず「共有」をタップ（下図左の画面）
次に、「モデルのエクスポート」をタップ（下図中央の画面）
出力するファイル形式の選択になります。今回はファイルサイズが小さくなるSPZを選択します。（下図右の画面）
この後はファイルの保存先を問われます。お好きな場所に保存してください。
私は一旦iCloudに保存してPCからダウンロードしたりしています。
Babylon.jsで表示してみよう
ここまででスキャンした物体の３Dファイルが作成できました。
それでは、スキャンしたデータをBabylon.jsを使ってWebで表示してみましょう。
以下がガウシアンスプラットの表示をするコードです。
実行はこちらから
https://ddy.nukenin.jp/Qiita/qiita_20251208.html
<html>
<head>
<meta charset="utf-8"/>
<title>Babylon.js Playground</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<style>
html,body,#renderCanvas{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#000}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
<script>
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const createScene = function () {
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8); // シーンの背景色を設定（任意）
// カメラ
const camera = new BABYLON.ArcRotateCamera("camera1", 1, 1, -3, new BABYLON.Vector3(-2, 3, -2), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.wheelDeltaPercentage = 0.04;
camera.minZ = 0.1;
camera.attachControl(canvas, true);
return scene;
};
const init = async () => {
const scene = createScene();
let splattingMesh;
try {
console.log("SPZファイルの読み込みを開始します...");
const result = await BABYLON.SceneLoader.ImportMeshAsync(
"", // meshNames
"https://raw.githubusercontent.com/ykoba079/sample1/master/Qiita/", // rootUrl
"takeyabu.spz", // fileName
scene
);
const splatMesh = result.meshes[0];
if (splatMesh) {
splatMesh.rotation.x = Math.PI;// X軸を中心に180度（π）回転させる
}
} catch (error) {
console.error("SPZファイルの読み込みエラー:", error);
alert("SPZファイルの読み込み中にエラーが発生しました。コンソールを確認してください。");
}
// 読み込み完了後、レンダリングループを開始
engine.runRenderLoop(function () {
scene.render();
});
};
// 初期化関数を呼び出す
init();
</script>
正しく動けば以下のような表示がされるはずです。マウスでドラッグしてぐりぐりしてみてください。
実行結果
コードの主要な部分について。
Babylon.jsのローダー読込み
ガウシアンスプラットなど3Dモデルのファイルを読み込むにはローダーの追加が必要なので、 以下の行でローダーを追加しています。
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
３Dモデルファイルの読み込み
ImportMeshAsyncで、GitHubに保管したガウシアンスプラットのファイルを読み込み、標示します。今回はspzファイルですが、GlbやPlyも同じように読込できます。
const result = await BABYLON.SceneLoader.ImportMeshAsync(
"", // meshNames
"https://raw.githubusercontent.com/ykoba079/sample1/master/Qiita/", // rootUrl
"takeyabu.spz", // fileName
scene
);
Babylon.jsは座標軸が左手系のため上下が反転されてしまうので、以下の行で180度回転させています。
splatMesh.rotation.x = Math.PI;// X軸を中心に180度（π）回転させる
すこしコツはありますが、画像ファイルと同じくらい簡単にWebブラウザで表示できましたね。
実際にお手元のスマホでスキャンと、動くWebページを作ってみてガウシアンスプラッティングの魅力を体験してみましょう。
次回予告
次回の記事では、ガウシアンスプラッティングの技術的な仕組みや、なぜ軽量でリアルな表現ができるのかを深掘りします。