Three.js r186のGaussian Splatting標準対応とは — 使い方・対応形式・Sparkとの違い
Three.js r186でGaussianSplatクラスとSPZ/PLY/glTF用ローダーが標準搭載され、WebGPURenderer上でGPUの深度ソートにより高速描画できるようになった。インストール方法・最短コード・Spark 2.0との違い・制限事項までを実務目線で整理する解説記事である。
Three.js r186のGaussianSplatとは — レンダラー標準搭載のGaussian Splatting
Three.js r186は、Gaussian Splattingをレンダラー標準機能として取り込んだメジャーアップデートである。2026年8月10日にdev枝へマージされ、9月にr186としてリリースされた。開発を主導したのはThreekit社のBen Houston氏で、マージ担当はメンテナーのMugen87氏。これまでGaussian Splattingを使うには mkkellogg/GaussianSplats3D のようなサードパーティライブラリを別途組み込む必要があったが、r186以降は GaussianSplat という組み込みメッシュクラス1つで完結する。Three.jsの基礎知識やWebGPU/TSL移行の背景は既報のThree.js 2026年版 完全ガイドも参照してほしい。
GaussianSplatクラスで何ができるか
GaussianSplat（開発中はGaussianSplatMeshという名称だった）はthree/addons/objects/GaussianSplat.jsで提供される組み込みメッシュ型で、通常のThree.jsオブジェクトと同じ扱いができる点が大きい。
- レイキャスティング対応 — クリック判定やマウスインタラクションがそのまま書ける
- メッシュ単位のフラスタムカリング — 画面外のスプラットを自動的に描画対象から除外
- バウンディングボックス算出に対応 — シーン全体の管理やLOD判定の土台に使える
- 視点依存の球面調和関数（Spherical Harmonics）に対応し、見る角度で反射・陰影が変化する表現を再現
導入方法・必要環境
インストールはnpm経由で行う。Three.jsのnpmバージョンはrリリース番号と対応しており、r186は0.186.0にあたる。
```bash
npm install three@0.186.0
```注意すべきは、GaussianSplatがWebGPURendererでのみ動作する点だ。従来のWebGLRendererでは利用できない。インポート元もthreeではなくthree/webgpu、TSLを使う場合はthree/tslになる。
```javascript
import * as THREE from 'three/webgpu';
```なお、WebGPURendererにはWebGPU非対応環境向けのWebGL2フォールバックバックエンドが存在するが、そちらではGPUコンピュートによる深度ソートではなく、通常のJavaScriptによるソート処理にフォールバックする点は把握しておきたい。追加コストはSPZLoaderとレンダラー部分を合わせて約7KB（base Three.js比）と小さい。
使い方 — 最短コード
最も簡単なのは、Niantic/Scaniverse系の圧縮フォーマットである.spzをSPZLoaderで読み込むパターンだ。ファイルサイズが小さく、公式にも推奨されている。
```javascript
import * as THREE from 'three/webgpu';
import { SPZLoader } from 'three/addons/loaders/SPZLoader.js';
import { GaussianSplat } from 'three/addons/objects/GaussianSplat.js';
const splatGeometry = await new SPZLoader().loadAsync('model.spz');
const splats = new GaussianSplat(splatGeometry);
scene.add(splats);
```互換性を重視するなら.ply形式をGaussianSplatPLYLoaderで読み込む方法もある。Gaussian Splatting系ツールの出力として最も広く使われているフォーマットだ。
```javascript
import { GaussianSplatPLYLoader } from 'three/addons/loaders/GaussianSplatPLYLoader.js';
const splatGeometry = await new GaussianSplatPLYLoader().loadAsync('point_cloud.ply');
scene.add(new GaussianSplat(splatGeometry));
```glTF/glbパイプラインに載せたい場合は、KHR_gaussian_splatting拡張に対応したGLTFGaussianSplatLoaderExtensionをGLTFLoaderに登録すればよい。
```javascript
import { GLTFGaussianSplatLoaderExtension } from 'three/addons/loaders/GLTFGaussianSplatLoaderExtension.js';
loader.register((parser) => new GLTFGaussianSplatLoaderExtension(parser));
```このほか、レガシー形式である.ksplat（KSPLATLoader、旧GaussianSplats3D由来）や.splat（SPLATLoader、antimatter15由来）も読み込める。既存アセットの移行パスとして用意されている。
内部の仕組み — GPU深度ソートの設計
Gaussian Splattingは視点から見て奥にあるスプラットから順に半透明合成しないと正しく見えないため、毎フレームの深度ソートが避けられない。r186のGaussianSplatはTSLベースのNodeMaterialで描画し、ソート処理には再利用可能なCountingSortクラスを使う。リセット・ヒストグラム作成・プレフィックスサム・スキャッター（並べ替え）の4つのTSLコンピュートパスで構成され、デフォルトのビン数は4096。ソート対象はスプラットの実データではなく、スプラットごとに1つのuintを持つインデックス配列だけなので、負荷が抑えられている。さらにカメラが一定距離以上動いたときだけ再ソートする仕組みになっており、静止シーンでの無駄な計算を避けている。
ジオメトリ側は、通常のBufferGeometryのposition属性に加えて、対称3x3行列の共分散を上三角成分（6要素）で表す属性、そしてRGBA8にパックされた色情報を持つ構成になっている。
既存ライブラリとの違い
r186以前、Three.jsでGaussian Splattingを扱う実質的な選択肢はmkkellogg/GaussianSplats3Dをサードパーティ依存として組み込むことだった。r186のネイティブ対応は、基本的な単一オブジェクト・単一ルームスケールの表示用途において、この依存を置き換えるものと位置づけられる。一方、大規模シーンに強いのはWorld Labs系エコシステムのSpark 2.0で、LOD付きスプラットツリー、仮想ページング、独自の.RADフォーマットを備える。用途で使い分けるのが実務的だ。
| ライブラリ | 位置づけ | 大規模シーン対応 | 依存関係 |
|---|---|---|---|
| Three.js r186 GaussianSplat（ネイティブ） | 標準搭載の基本機能 | 非対応（LoD・ストリーミングなし） | Three.js本体のみ、WebGPURenderer必須 |
| mkkellogg/GaussianSplats3D | r186以前の主要な選択肢 | 限定的 | サードパーティライブラリ |
| Spark 2.0 | 大規模シーン特化 | LODツリー・仮想ページングで対応 | 別エコシステム（World Labs系） |
制限・注意点
- 想定用途は単一の撮影対象やルームスケールのシーンまでで、街区規模のような大規模空間は想定外
- LoD（詳細度切替）やストリーミング、空間分割の仕組みは持たない
- WebAssemblyやWeb Workerは使用しない実装
- glTFへのエクスポート機能はない
- Three.js公式エディタへの統合はまだ用意されていない
- WebGPURenderer必須のため、WebGLRendererのみで動かしている既存プロジェクトでは追加の移行作業が発生する
r186のその他の変更点
Gaussian Splatting以外にもr186にはいくつかの注目すべき変更が含まれる。
- SunLightクラスを新設。カスケードシャドウマップ（デフォルト2カスケード）に対応
- Object3D.dispose()とObject3D.intersectsFrustum()を追加
- レトロリフレクティブ（再帰反射）マテリアルに対応
- OITPassNodeによるOrder Independent Transparency（順序非依存の透明処理）を追加
- ディフューズGI（グローバルイルミネーション）向けのボクセルコーントレーシングに対応
- WebGPU向けにcompileComputeAsync()を追加
- 破壊的変更: CommonJSビルドは非推奨化、minifiedビルドは削除、SourceクラスはTextureSourceに改名
よくある質問（FAQ）
GaussianSplatはWebGLRendererでも使えますか？
使えない。GaussianSplatはWebGPURenderer専用の機能で、three/webgpuとthree/tslからのインポートが前提になる。WebGL2フォールバックバックエンドでは動作するが、その場合ソート処理はGPUコンピュートではなく通常のJavaScriptによる処理になる。
どのファイル形式を使えばいいですか？
ファイルサイズを優先するなら.spz（SPZLoader）が推奨形式。互換性を重視するなら.plyが最も広く出回っているフォーマットで、GaussianSplatPLYLoaderで読み込める。glTFパイプラインに載せたい場合はKHR_gaussian_splatting拡張対応のGLTFGaussianSplatLoaderExtensionを使う。
既存のGaussianSplats3Dから移行する必要はありますか？
単一オブジェクトやルームスケールの基本的な表示用途であれば、r186のネイティブGaussianSplatに置き換えることでサードパーティ依存を減らせる。ただし大規模シーンでLoDやストリーミングが必要な場合は、その用途に強いSpark 2.0のようなエコシステムを検討したほうがよい。
大規模な都市スケールのシーンにも使えますか？
想定用途ではない。r186のGaussianSplatは単一の撮影対象やルームスケールのシーンを想定した実装で、LoDや空間分割、ストリーミングの仕組みを持たないため、街区規模の大規模空間には不向きである。
スマホで撮影したデータをそのまま使えますか？
Scaniverseなどスマホ撮影アプリで生成したスプラットデータを.spzや.plyとして書き出せれば、SPZLoaderやGaussianSplatPLYLoaderでそのまま読み込める。
まとめ
Three.js r186は、Gaussian SplattingをGaussianSplatという組み込みメッシュクラスとして標準搭載し、サードパーティ依存なしでレイキャスティング・フラスタムカリング・視点依存の陰影表現までを扱えるようにした。条件はWebGPURenderer必須という一点に集約されるが、SPZ/PLY/glTFなど複数フォーマットに対応し、GPUコンピュートによる深度ソートで実用的な速度も確保している。単一オブジェクトやルームスケールの用途ならまずネイティブのGaussianSplatを試し、大規模シーンが必要になった時点でSpark 2.0のような専用エコシステムを検討するのが現実的な進め方だ。
お気軽にご相談ください
お問い合わせ