グレイス大聖堂：インタラクティブな 3D 体験の構築と最適化

サンフランシスコノブヒル地区にあるグレイス大聖堂は、有名なランドマークです。ウィンセント・ウー氏がこの大聖堂とその周辺を「ガウススプラット（Gaussian Splatting）」技術で高品質に捉えたデータを確認した後、「ぜひ協力したい」という思いから、このデータをブラウザ上で自由に操作できるインタラクティブな体験へと変換するプロジェクトが始動しました。

本稿では、このアプリケーションがどのように構築され、最適化されたのかを詳しく解説します。

---

仕組みの内幕

PlayCanvas Engine は、WebGPU ハイブリッドレンダラーと独自開発の**ストリーミング形式（SOG）**を採用しており、本プロジェクトにとって最適なランタイムとなりました。

WebGPU ハイブリッドレンダラー

外観ビューでは、一度に約 350 万ものガウススプラットをレンダリングしています。カメラ移動に合わせて、これら数百万の要素を描画順序（前後関係）が正確になるようリアルタイムで並べ替える必要があります。

• WebGL 2 レンダラーの課題

  • 当初は WebGL 2 を使用していたが、頂点シェーダーとフラグメントシェーダーのみを提供し、並べ替えには向かないという弱点があった。
  • CPU ワーカーでガウスを並べ替えて GPU にアップロードする方式を採用したが、処理遅延によりレンダリングに追いつかず、カメラ移動時に**アーティファクト（画面上のちらつき）**が発生していた。

• WebGPU による解決策

  • WebGPU を利用することで作業を効果的に分割可能になった。
  • Compute シェーダーが GPU 上で剔除（カリング）、射影、並べ替えを行い、描画は頂点・フラグメントシェーダーが担当する方式へ移行。
  • データを GPU に保持することでデータ転送のボトルネックを回避し、パイプライン全体の性能が劇的に向上した。

• 柔軟な対応

  • ブラウザが WebGPU をサポートしていれば常に高性能パイプラインを使用し、非対応の場合は自動的に WebGL 2 レンダラーにフォールバックする。
  • 両方のレンダリング経路を統合するため、カットアウトや旗のアニメーション、遷移シェーダーには **WGSL（WebGPU）とGLSL（WebGL）**の実装をそれぞれ用意し、どちらのバックエンドでも見た目を統一している。

ストリーミング SOG（SOG）

スプラットデータは、我々が開発した開放的な圧縮フォーマットに、オンデマンド読み込み用の LOD（詳細度レベル）を組み合わせたストリーミング SOG 形式で配信されています。

• コンテンツ構成

  • 外観用と内観用に別々のスプラットセットを用意している。
  • 外観側：400 メートル以内の領域全体をカバーするストリーミング LOD セットと、それ以遠の地形用静的な低詳細度セットを組み合わせている。
  • メモリ効率化のため、各モードは各自のセットのみを読み込み、もう一方をメモリから解放している（一度に一つのビューしか保持しない）。

• 起動時の最適化（TTFP 短縮）

  • **「最初の画素が表示されるまでの時間（TTFP）」**を最優先に設計している。
  • ロード直後は単一の粗い LOD で開始するため、ローディング画面閉鎖までに必要なデータ量は最小限に抑えることができる。
  • 以降はデバイスごとの予算内において、エンジンによって詳細さが段階的にストリーミングされる（デスクトップでは 350 万、モバイルでは 140 万のスプラット）。

• 表示のスムーズ化

  • モード切り替え時に表示が途切れないよう配慮している。
  • 次のスプラットセットが粗い LOD を読み込む間、最後のフレームを保持してフェードアウトさせ、新しいビューへフェードインすることで詳細度が高まっていくように制御する。

---

すべてのデバイスで快適に動作するように最適化

ストリーミングやデバイスごとのスプラット予算以外にも、控えめな性能のハードウェアでも滑らかな体験、スマホでは冷却かつ静かな動作を実現するための工夫が施されています。

• オンデマンドレンダリング
  • アプリケーションは変化がある時だけ描画を行う。
  • カメラ移動、LOD チャンクの到着、カットアウトのアニメーション、車の通過などのイベントが発生しない場合は描画を停止する。
• 解像度の上限設定
  • 高 DPI ディスプレイではデバイスピクセルレシオを制限する。
  • モバイル端末では追加の画素コストに見合わない表示効果のため、レンダリングスケールをさらに低減している。
• 深度プレパスによる奥行き隠蔽
  • 内部の衝突メッシュを遮蔽物としても活用する。
  • スプラットを描画する前に深度情報のみを描画し、壁に隠れたスプラットフラグメントを Early-Z テストで除外できるようにしている。

---

情景を生き生きと表現

「Peek（覗く）」エフェクト

外側の軌道上で「Peek」機能をオンにすると、カメラに近い部分の壁が切り取られ、中を覗けるようになります。切断された縁には薄い発光輪郭が表示されます。

• 技術的実装

  • Engine の

    gsplat

    シェーダーチャンクシステムに基づいて構築されている。
  • プロジェクトは

    gsplatModifyVS

    と

    gsplatModifyPS

    チャンクを置き換えることで、スプラットとフラグメントの処理を変更できる。
  • カットアウト自体はエディタ内ではトリガーボリウム下グループ化されたボックスエンティティに過ぎない。
  • カメラ移動に合わせて、最も近いトリガーのカットアウトが開き、他のが閉じるようにスムーズに移行する。

• コスト削減のための 2 段階処理

  1. 第 1 段階（スプラットごとの処理）：WebGPU の Compute パスとして、各スプラットの中心をサイン距離関数を使ってカットアウトボックスと比較。完全に開いたボックス内は剔除し、切断面付近のみをフラグ付けする。
  2. 第 2 段階（フラグメント処理）：フラグ付けされたスプラットに対してピクセル精度で同じテストを実行。世界位置を深度から復元し、アルファ値をフェードさせ、縁を描画する。
  • 縁の色は HDR 値として出力するため、ブーミング効果により発光して描画される。
  • これらのチャンクは外観ビューがアクティブな間だけインストールされるため、ウォークモードではエフェクトのコストは一切かからない。

隠された旗

同じチャンクを利用して、ある場所に隠された旗のアニメーションも行っています。 著作者によって定義されたボックス内のスプラットは、

travelling wave（移動する波）

に乗っており、ポール端から振幅が徐々に増大し、各スプラットは変位した布地の表面に従うように傾きます。

旗はどこにあるでしょうか？ 🔍

車

SuperSplat Editor で元の捕捉データから停車中の車を抽出・複製し、移動する交通流を作成しました。

• 3 台の車のスプラットがランダムな間隔で生成され、大聖堂を異なる速度で通り過ぎます。
• 屋内では無効化され、そのスプラットを内部レンダリング予算に戻します。

カメラナビゲーション

外観軌道コントローラ

• 大聖堂にフィットした丸い角を持つボックス形状のエンベロープを中心に移動します。
• 水平および垂直方向の運動は、壁面・隅々・屋根に沿った弧長でパラメータ化されており、不連続なく均一なカメラ速度を実現します。
• ズームは表面からの距離（Standoff）を調整し、減衰入力はリリース後に慣性を持たせます。

カメラフライト

• 作者によって定義されたウェイポイントグラフを使って大聖堂の建築物を周回するルートを作成します。
• 内部では衝突メッシュを使って可視ノードを選択し、外部では軌道エンベロープに対するクリアランスをチェックします。
• 最短経路探索で生成されたルートは、位置・方向・焦点距離・画角を補間する三次スプラインに変換されます。
• 注釈を閉じることで、飛行が前のカメラ状態へ巻き戻されます。

---

サウンドとその他のディテール

レイヤー状のサウンドスケープがカメラに追従します。

• 屋外：高低差に応じて 2 つの都市ループがクロスフェードする。
• 屋内：大聖堂の環境音が引き継がれ、足音は歩いている間だけ再生される。
• ローディング画面：テーマに沿った CSS で描かれた薔薇窓が表示されます。

これらの細かいディテールが合わさることで、グレイス大聖堂の捕捉データは「生きている、探索可能な場所」へと変貌を遂げました。

---

オープンソース基盤

グレイス大聖堂体験のすべてはオープンソース技術で構築されています。

• PlayCanvas Engine：ブラウザ内でシーンをレンダリング。
• SuperSplat：捕捉データの編集・最適化ツール。
• 開放的な SOG フォーマット：データをストリーミング可能かつコンパクトに圧縮。

これらは我々が公開し、誰でも使用・検証・改善できる技術です。

ご自身の体験を構築したいですか？キャプチャから配信までの完全なワークフローについては [Gaussian splatting ガイド](https://docs.gaussian-splatting.com/guide/) をご覧ください。SuperSplat Editor で捕捉データを準備し、「Your First Splat App」チュートリアルに従って、Engine API、PlayCanvas エディタ、React、Web Components のいずれか最适合するアプローチを選定できます。🚀

ご質問や、自分が作ったものとの共有、あるいは他のクリエイターとの交流をお望みの方は、PlayCanvas と SuperSplat の Discord コミュニティにご参加ください。お待ちしております！ 👋

ぜひご自身でもグレイス大聖堂を体験し、オープンウェブの可能性をご確認ください。