three.js r186のGaussian Splatting入門：SPZを表示し、大規模配信との違いを知る

2026年9月8日公開のthree.js r186には、3D Gaussian Splattingを読み込んで描画する公式アドオンが入りました。写真から再構成した空間は、これまでもDreiや専用ライブラリを組み合わせてthree.jsのシーンに表示できました。今回増えたのは、three.js本体のリポジトリで提供される公式アドオンという選択肢です。

ただし、ファイルを読み込めることと、大きな空間を段階的に配信できることは別です。この記事ではr186の公式サンプルと実装をもとに、最初の表示手順と採用時の判断点を整理します。内容は2026年9月22日に公開ソースで確認したもので、特定の端末での実測結果ではありません。

Gaussian Splattingとは

Gaussian Splattingは、空間を多数の半透明な楕円状の要素（スプラット）として表現し、視点から見た位置・大きさ・色を計算して描く方法です。通常の三角形メッシュとは、データ構造も透明な要素を重ねる処理も異なります。

r186のGaussianSplatは、読み込んだデータから描画用のオブジェクトを作り、通常のthree.jsシーンに追加できます。実装には視点に応じた並べ替えと、色の視点依存表現に関する処理もあります。

SPZファイルを表示する最小例

次は公式サンプルの読み込み部分を、r186のAPI名で抜き出した例です。scene、camera、画面サイズの設定は通常のthree.jsアプリと同様に用意します。

import * as THREE from "three/webgpu";
import { SPZLoader } from "three/addons/loaders/SPZLoader.js";
import { GaussianSplat } from "three/addons/objects/GaussianSplat.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 100);
camera.position.set(0, 0, 3);

const renderer = new THREE.WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
await renderer.init();
document.body.appendChild(renderer.domElement);

const geometry = await new SPZLoader().loadAsync("/models/scene.spz");
const splats = new GaussianSplat(geometry);
scene.add(splats);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

/models/scene.spzは自分で配信するファイルのURLに置き換えます。画面のリサイズ処理、モデルの向きとカメラ位置はデータに合わせて調整してください。公式サンプルはautoSort: falseにして各フレームでupdateSort(renderer, camera)を明示的に呼びます。上の例は既定の自動並べ替えを利用しています。

名称に注意してください。 初期の導入PRにはGaussianSplatMeshという名前の説明がありますが、r186のリリース版とサンプルで使う名前はGaussianSplatです。古いコードをそのまま貼るとimportに失敗します。

どの形式を読み込めるか

r186のアドオン一覧には、SPZLoader、SPLATLoader、KSPLATLoader、GaussianSplatPLYLoader、GLTFGaussianSplatLoaderExtensionがあります。いずれもスプラット用のデータをthree.jsで扱う入口ですが、同じファイルをどのローダーに渡してもよいわけではありません。

glTFの拡張は通常のGLTFLoaderに自動で組み込まれるものではありません。導入PRは、必要なアプリだけが登録する設計を説明しています。また、PLYという拡張子だけでデータの中身を決めつけず、書き出し元と属性を確認してください。

WebGPU・WebGL・WebXRの関係

このアドオンが使うのはWebGPURendererです。クラスの説明は、WebGPURendererのforceWebGL経路をサポートする一方、従来のWebGLRendererでは使えないと明記しています。「WebGLでも動く」はWebGLRendererへ差し替えられるという意味ではありません。

r186の公式サンプルは画面上でモデルを回して見る例であり、この記事のコードもWebXRセッションを開始しません。r186にはWebGPU経由のXR描画に関する修正も入っていますが、スプラットをQuestなどで快適に表示できるかは、ブラウザ・端末・モデルの大きさを固定して別途測る必要があります。

既存の方法と何が違うか

r186以前も、React Three Fiber（R3F）でGaussian Splattingを表示できました。R3Fはthree.jsのシーンをReactで組み立てる仕組みであり、スプラットの描画方式そのものではありません。たとえばDreiの<Splat />はR3F用の部品として.splatを扱います。また、SparkのR3Fサンプルでは、R3Fのextendを使ってSparkのSplatMeshとSparkRendererをシーンへ組み込んでいます。

比較の根拠は各プロジェクトのDrei、GaussianSplats3D、Spark、PlayCanvas Streamed SOGの公式資料です。機能表は実測の速度比較ではなく、公開されているAPIと配信方式の整理です。

R3Fで制作している場合

すでにDreiの<Splat />を使っているなら、r186の登場だけを理由に置き換える必要はありません。扱う形式、現在の読み込み方式、複数スプラットの表示、React側の操作を確認してから決めるのがよいでしょう。

特に<Splat />を<primitive object={...} />に変えるだけでは移行は完了しません。r186のGaussianSplatはWebGPURenderer向けで、従来のWebGLRendererでは使えません。R3F側のrenderer設定と、使っているライブラリの対応関係を含めて検証する必要があります。R3Fという書き方と、実際にスプラットを描くライブラリを分けて考えるのがポイントです。

なお、DreiやGaussianSplats3Dの「読み込み途中から表示する」機能は、単一ファイルを取得しながら画面を更新するものです。PlayCanvasのStreamed SOGが行う、視点に応じて空間の領域とLODを入れ替える配信とは区別してください。

大きなシーンで残る課題

ファイル形式が圧縮されていても、ファイル全体を読み込む方式だけでは、視点の近くから優先して表示したり、歩いた先の領域だけを追加取得したりはできません。導入PRの説明でも、段階的な読み込みや空間分割による大規模シーン配信は今後の課題として分けられています。SPZにLOD用の情報があっても、現行ローダーでそれを段階表示に利用できるとは書かれていません。

運用するモデルでは、次の項目を別々に測ると、ファイルサイズだけでは見えない負荷をつかめます。

• 初回表示までの時間とダウンロード量
• 読み込み後のメモリ・GPUメモリ
• カメラ移動中のフレーム時間と並べ替えの負荷
• 目標端末のブラウザと描画経路
• 複数のシーンを切り替えたときの解放と再読み込み

小さな被写体を既存のthree.jsシーンに足す用途には試しやすい更新です。広域の屋外や歩き回る空間では、形式の変換だけでなく、空間分割・段階配信・端末側の予算を含めて設計する必要があります。

参照

• three.js r186リリースノート
• three.js r186 Gaussian Splatting公式サンプル
• GaussianSplatのr186実装
• Gaussian Splatting導入PR #33950
• Drei Splat
• GaussianSplats3D
• Spark
• SparkのR3Fサンプル
• PlayCanvas Streamed SOG