Spark – THREE.jsのためのリアルタイム3Dガウススプラッティング

概要

Sparkは、3Dシーンを微小でぼやけた「スプラット」の集合として表現する現代的な技術であるガウススプラッティングをブラウザにもたらすオープンソースのレンダラーです。人気のグラフィックスライブラリTHREE.jsに直接プラグインできるため、開発者は高品質で視点依存の点群レンダリングをあらゆるWebベースの3Dアプリに追加できます。

なぜ重要なのか

従来のメッシュパイプラインでは、特にモバイルハードウェアにおいて、非常に高密度のジオメトリをインタラクティブなフレームレートで表示することに苦労していました。ガウススプラットは、ジオメトリ、色、不透明度、さらには学習された特徴をコンパクトな形式で保存し、GPU上で効率的にラスタライズできます。Sparkはこの研究レベルのレンダリング手法をポータブルでWebGL2互換のライブラリにパッケージ化しており、ネイティブコードや重いサーバーサイド処理なしで、最先端の視覚的忠実度をWeb開発者が利用できるようにします。

主な機能（READMEより）

THREE.js統合 – SparkRendererとSplatMeshは、標準のTHREE.jsシーン、カメラ、ライトと連携するドロップインオブジェクトです。
幅広いデバイスサポート – 低電力モバイルを含む、WebGL2対応ブラウザの98%以上をターゲットにしています。
高速なリアルタイムレンダリング – スプラットはGPU上でソートおよびラスタライズされるため、控えめなハードウェアでもスムーズなアニメーションが可能です。
マルチフォーマットインポート – PLY（圧縮バリアントを含む）、SPZ、SPLAT、KSPLAT、SOGファイルのネイティブローダー。
マルチビューポイント – 複数のカメラ視点を同時にレンダリングでき、VR/ARやマルチウィンドウ設定に便利です。
動的編集 – スプラットは実行時に変換、アニメーション、再着色、変位、スキニングが可能です。
シェーダーグラフシステム – GLSLを手動で記述することなくカスタムスプラットシェーダーを作成するためのGPU側ノードエディタ。

はじめに（クイックスタートコード）

READMEには、以下の手順を行う最小限のHTMLページが記載されています：

CDNを指すimport-mapを介してTHREE.jsとSparkを読み込む。
THREE.jsのシーン、カメラ、WebGLレンダラーを作成する。
SparkRendererをインスタンス化し、シーンに追加する。
サンプルスプラット（butterfly.spz）をSplatMeshとして読み込み、アニメーション化する。

<script type="module">
  import * as THREE from "three";
  import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";
  // …シーン設定…
  const spark = new SparkRenderer({renderer});
  const butterfly = new SplatMesh({url: "https://sparkjs.dev/assets/splats/butterfly.spz"});
  // 回転アニメーション
</script>

これをブラウザで実行すると、GPUアクセラレーションによる回転するスプラットモデルが表示されます。

インストールオプション

CDN – https://sparkjs.dev/releases/spark/<version>/spark.module.js からビルド済みモジュールを直接インポート。
npm – バンドラーやNodeベースのワークフローには npm install @sparkjsdev/spark を使用。
ローカルビルド – リポジトリをクローンし、Rust（WebAssemblyコア用）をインストールしてから以下を実行：
```
npm install
npm run build:wasm   # Rust → WASMのコンパイル
npm run build        # JS/TSのバンドル
```
リポジトリには、サンプルアセットのダウンロードや開発サーバーの起動（npm start）用スクリプトも含まれています。

開発ワークフロー

READMEには便利なスクリプトがリストされています：

npm run clean – 生成されたファイルを削除。
npm run assets:download / assets:clean – サンプルアセットの管理。
npm run docs – MkDocsベースのドキュメントをビルド。
npm run site:* – 静的サイトのビルド、提供、デプロイ（gh-pages）。
npm run assets:compress <file> – PLYスプラットをSPZ形式に圧縮。

開発チーム

Sparkは、AI駆動の3Dコンテンツ作成に注力する企業であるWorld Labs (https://www.worldlabs.ai) によって開発されています。このプロジェクトはMITライセンスであり、npmでスコープ付きパッケージ @sparkjsdev/spark として公開されています。

結論： Sparkは、THREE.jsを介して最新のガウススプラッティングレンダリング技術をWebにもたらす、真のプロダクションレディなライブラリです。AI生成の3Dアセット、リアルタイムグラフィックス、およびブラウザ内で高品質な点群可視化を必要とするあらゆるプロジェクトに関連しています。