Spark 2.0
Spark 2.0はTHREE.js×WebGL2で動くブラウザ型3D Gaussian Splattingレンダラー。ストリーミングLoDで巨大3DGSワールドを描画。
Spark 2.0とは?
Spark 2.0は、ブラウザで動作する動的3D Gaussian Splatting(3DGS)レンダラーであるSparkのアップデート版です。主な目的は、視聴者が移動するにつれて自動的に詳細レベルを調整し、ウェブ上で大規模な3DGSワールドをストリーミングして描画することです。
SparkはTHREE.jsとWebGL2で動作し、標準ウェブブラウザによる幅広いデバイス対応を目指します。従来のSparkでは、同じシーン内の複数3DGSオブジェクトの描画、リアルタイム編集・再照明、動的スプラットベースのエフェクトやアニメーションのためのシェーダーグラフシステムをサポートしていました。Spark 2.0では、現在の視点を基に描画する詳細を選択し、インターネット経由で必要なデータをストリーミングするLevel-of-Detail(LoD)システムを追加しています。
主な機能
- ブラウザベースの3DGS描画: THREE.jsとWebGL2を使ってウェブブラウザで動作し、デスクトップ、iOS、Android、VRを標準ウェブ再生でサポートすることを目指します。
- 動的Level-of-Detail(LoD)システム: 視聴者の視点に基づいて3DGSの詳細を最適化し、必要なデータのみを描画します。
- 大規模ワールド向けストリーミング: シーンを移動する際に必要な3DGSデータをインターネット経由でストリーミングし、全てをフル解像度で描画するのではなく「巨大3DGSワールド」を実現します。
- 統一された3DGSワールド合成: 複数3DGSオブジェクト間で正しい背面から前面へのソートを実現し、オブジェクトが「貼り付けられた」ようなローカルソートのartifactではなく、同じ3D空間で共存します。
- シェーダーグラフサポート(Spark機能): 動的スプラットベースのエフェクトやアニメーションを作成するためのシェーダーグラフシステムを使用します(Sparkの従来機能として記述)。
Spark 2.0の使い方
Sparkベースの3DGSウェブエクスペリエンス(またはTHREE.jsで構築)から始め、対象の3DGSワールドにSpark 2.0のLoD方式を有効化/適用します。ユーザーがシーンを移動すると、レンダラーは現在の視点に合わせてスプラットの詳細レベルを自動最適化し、描画用のデータをストリーミングします。
スプラットの外観を構築・実験する場合、投稿で記述されたスプラットプロパティ(中心位置、XYZスケール、回転、RGBカラー、不透明度)とやり取りし、レンダリングパイプラインが半透明スプラットをどのようにブレンドするかを検証できます。
ユースケース
- 大規模スキャン環境のストリーミング探索: ブラウザで大規模3DGSワールドをナビゲートする際、LoD選択とストリーミングにより、ユーザーの視点にスプラット詳細を適応させて描画を実用的かつ効率的に保ちます。
- ウェブランタイムでのVR対応3DGSエクスペリエンス: SparkがWebGL2/THREE.jsベースで「VRで最高の体験」と例で記載されているため、Spark 2.0はウェブ描画に依存したインタラクティブVR探索ワークフローに適合します。
- マルチオブジェクト3DGSシーン: 複数3DGSオブジェクトから構成されるシーンに対し、Sparkの設計はオブジェクト間で統一ソートを実現し、3D空間で視覚的に統合します。
- スプラットベースシーンのリアルタイム編集・再照明(Spark機能): 3DGSシーンにインタラクティブな変更を加えつつ動的スプラット描画を維持するワークフローで、Sparkの従来機能がSpark 2.0の関連コンテキストとして位置づけられます。
- 動的スプラットエフェクトとアニメーション(シェーダーグラフ): プロシージャルまたは動的シェーディングのスプラットベースビジュアルが必要な場合、Sparkのシェーダーグラフシステムがソースで記述された仕組みです。
FAQ
Spark 2.0はSparkに比べて何を追加したか?
Spark 2.0は、視聴者の視点に基づいて詳細レベルを調整し、大規模3DGSワールドをストリーミング・描画するLevel-of-Detail(LoD)システムを追加します。
Sparkはブラウザで3D Gaussian Splattingをどのように描画するか?
レンダラーはTHREE.jsと統合され、標準ウェブブラウザのWebGL2上で動作します。
この文脈での3DGS「スプラット」とは?
投稿では、スプラットを数百万の半透明カラー楕円体として記述し、プロパティに3D中心、XYZ半径(スケール)、向き、RGBカラー、不透明度を含み、これらがブレンドされて表面や細部を形成します。
Sparkは同じシーンで複数3DGSオブジェクトをサポートするか?
はい—Spark(レンダラー)は同じシーンで複数3DGSオブジェクトをサポートし、オブジェクト間で統一された背面から前面へのソートを確保する設計選択が記述されています。
スプラット描画時のソートの役割は?
投稿では、ペインターのアルゴリズム(背面から前面への順序付け)と「over」演算子によるブレンドが一般的な手法と説明され、Sparkのシステム設計はオブジェクト間の正しいグローバル順序を重視します。
代替案
- 非ストリーミング3DGSウェブレンダラー: 代替レンダラーは、視点ベースのLoDストリーミングなしに固定数のスプラットをロード・描画する場合があり、非常に大規模なワールドを制限する可能性があります。
- 他のブラウザ3Dレンダリング手法(メッシュ/ポイントベース): 3DGSの代わりに、一部のシステムはテクスチャマッピング三角形や他のプリミティブで表面を描画し、スプラットベースの密度/外観特性を異なるパフォーマンスとコンテンツワークフローにトレードオフします。
- 異なるウェブグラフィックスAPI: 本投稿は広範な利用可能性のためWebGL2を対象としています。代替は他のAPIベースとなり、互換性次第でデバイスカバレッジが低下する可能性があります。
- スタンドアロン3DGSパイプライン: ブラウザ外で3DGSを前処理・描画するデスクトップ/ネイティブパイプラインは、ウェブストリーミング/LoDの複雑さを回避しますが、Sparkで記述された「ブラウザ内」インタラクションモデルを提供しません。
代替品
DailyPlay.ai
DailyPlay.aiで、ブランド向けのパーソナライズされたデータ駆動ミニゲームを作成。受動的な訪問者を行動とロイヤルへ。
Ably Chat
Ably Chatはカスタムリアルタイムチャット用のAPI/SDK。リアクション、プレゼンス、メッセージ編集/削除に対応し高負荷も設計。
Prompty Town
Prompty Townはリンクをタイルにして購入・プロンプト文/コンテンツを付け、みんなで街のように閲覧できる小さなWeb空間です。
Make Real
tldraw SDKを使用してUIを描き、実現します。
AakarDev AI
AakarDev AIは、シームレスなベクターデータベース統合を通じてAIアプリケーションの開発を簡素化し、迅速な展開とスケーラビリティを実現する強力なプラットフォームです。
beehiiv
beehiivは、ニュースレターとWebサイトを一つで運用。公開・成長・分析・収益化まで、クリエイター/ブランド向け統合プラットフォーム。