Grace Cathedral Experienceの構築

Grace CathedralはNob Hillにあるサンフランシスコのランドマークです。 Vincent Woo氏による大聖堂とその周辺の街並みの高品質な3D Gaussian splat（ガウシアン スプラット）キャプチャを見て、私たちは彼とのコラボレーションの機会に飛びつきました。 協力して、私たちは彼のスプラットをブラウザベースのインタラクティブな体験に変えました。 完成したアプリは以下で見ることができます。 この記事では、私がこのアプリをどのように構築したかを掘り下げます。 始めましょう。 舞台裏 PlayCanvas Engineは、WebGPUハイブリッドレンダラーとストリーミングSOGフォーマットのおかげで、構築に最適なランタイムでした。 WebGPUハイブリッドレンダラー 外観ビューは、一度に約350万個のGaussian splat（ガウシアン スプラット）をレンダリングします。 それらは後ろから前へとソートする必要があるため、カメラを動かすことは、リアルタイムで数百万個のスプラットを繰り返しソートすることを意味します。 私たちの第一世代のGaussian splat（ガウシアン スプラット）レンダラーはWebGL 2を使用しており、頂点シェーダーとフラグメントシェーダーしか提供しません。 それらはスプラットを描画するのには適していますが、ソートするには適していないため、ワーカーがCPU上でガウシアンをソートし、結果をGPUにアップロードしていました。 ソートとアップロードがレンダリングに追いつかなくなり、カメラが移動するとアーティファクトが見えるようになりました。 WebGPUは、その作業をより効果的に分割することを可能にします。 コンピュートシェーダーは、毎フレームGPU上でアクティブなスプラットセットをカリング、プロジェクション、ソートし、その後頂点シェーダーとフラグメントシェーダーが結果をレンダリングします。 データをGPU上に保持することで、転送のボトルネックを回避し、ワーカーベースのWebGL 2レンダラーよりもパイプラインを劇的に高速化します。 この体験は、ブラウザがサポートしている場合は常にこのWebGPUパイプラインを使用し、自動的にWebGL 2レンダラーにフォールバックします。 両方のレンダリングパスをサポートするために、カットアウト、フラグアニメーション、トランジションシェーダーはそれぞれWGSLとGLSLの実装を持っているため、両方のバックエンドで体験は同じように見えます。 ストリーミングSOG スプラットデータは、ストリーミングSOGとして配信されます。これは、エンジンがオンデマンドで取得するチャンク化された詳細度レベルで拡張された、オープンな圧縮スプラットフォーマットです。 この体験には、外観と内観の別々のスプラットセットが含まれています。 外観は、400メートル以内のすべてをカバーするストリーミングLODセットと、それより遠くの風景のための静的な低詳細セットを組み合わせています。 各モードは独自のセットのみをロードし、もう一方をエビクトするため、デバイスメモリは一度に1つのビューを保持します。 起動は、最初のピクセルまでの時間に最適化されています。 ロード時に、各ストリーミングスプラットセットは単一の粗いLODから開始するため、ローディング画面が解除される前に少量のデータのみが到着すれば済みます。 そこから、エンジンはデバイスごとの予算内で徐々に詳細をストリーミングします。デスクトップでは350万、モバイルでは140万のスプラットです。 モードの切り替えは、短いフリーズフェードでカバーされます。最後のフレームが保持され、次のスプラットセットが粗いLODをロードする間にフェードダウンされ、新しいビューがフェードインして洗練されます。 どこでも実行できるように最適化 ストリーミングとデバイスごとのスプラット予算を超えて、いくつかの要素が、控えめなハードウェアでもスムーズに、そしてスマートフォンではクールかつ静かに体験を実行し続けます。 オンデマンドレンダリング。 アプリは、カメラの移動、LODチャンクの到着、カットアウトのアニメーション、車の走行など、何かが変化したときにのみレンダリングします。 移動を止めると、描画も停止します。 解像度キャップ。 高DPIディスプレイではデバイスピクセル比率がキャップされ、モバイルではさらにレンダースケールが削減されます。モバイルでは、追加のピクセルは表示されるものよりもコストがかかります。 デプスプリパスオクルージョン。 内観のコリジョンメッシュはオクルーダーとしても機能します。スプラットの前にデプスのみでレンダリングされ、壁の後ろに隠れたスプラットフラグメントを早期Z拒否で排除します。 シーンに命を吹き込む ピークエフェクト 外観を周回している間、ピークトグルはカメラに最も近い壁の部分を切り取り、内側を見ることができるようにします。 薄い光る縁がカットされたエッジをアウトラインします。 これは、エンジンのgsplatシェーダーチャンクシステム上に構築されており、プロジェクトがgsplatModifyVSとgsplatModifyPSチャンクを置き換えることで、すべてスプラットとすべてのフラグメントを変更できます。 カットアウト自体はエディター内のボックスエンティティであり、トリガーボリュームの下にグループ化されています。 カメラが移動すると、それに最も近いトリガーがカットアウトをゆっくりと開き、他のトリガーはゆっくりと閉じます。 シェーダーは、安価に保つために2段階で動作します。 WebGPU上のコンピュートパスであるスプラットごとのステージは、各スプラットの中心を、カットアウトボックスに対して符号付き距離関数でテストします。 開いたボックス内に完全に収まるスプラットは完全にカリングされ、カットサーフェスに近いものだけがさらなる処理のためにフラグ付けされます。 フラグメントステージは、フラグ付けされたスプラットに対して、同じテストのピクセル単位の正確なバージョンを実行します。 デプスから各フラグメントのワールド位置を再構築し、ボックス内のアルファをフェードさせ、どの距離でも画面上の一定の幅を維持するリムを描画します。 リムカラーはHDR値として書き込まれるため、ブルームがそれを拾います。 チャンクは外観ビューがアクティブな間のみインストールされるため、ウォークモードではその効果に対して何も支払いが発生しません。 隠されたフラグ 同じチャンクが、シーンのどこかに隠されたフラグをアニメーションさせます。 作成されたボックス内のスプラットは、極端から振幅が徐々に増加する移動波に乗せられ、各スプラットは傾いて変位した布地表面に追従します。 見つけられますか？🔍 車 SuperSplat Editorで、元のキャプチャから駐車中の車を分離して複製することで、移動する交通を作成しました。 3台の車のスプラットがランダムな間隔でスポーンし、大聖堂をわずかに異なる速度で通過します。 それらは屋内で無効化され、そのスプラットを内観のレンダリング予算に戻します。 カメラナビゲーション 外観オービットコントローラー 外観オービットコントローラーは、大聖堂に合わせた丸みを帯びたボックスエンベロープの周りを移動します。 水平および垂直の動きは、壁、角、屋根に沿った円弧長でパラメータ化され、不連続性のない均一なカメラ速度を生成します。 ズームは表面からのカメラの距離を調整し、ダンピングされた入力はリリース後に慣性を追加します。 カメラフライト カメラフライトは、作成されたウェイポイントグラフを使用して大聖堂の建築物の周りをルーティングします。 屋内では、コリジョンメッシュを使用して表示ノードを選択します。屋外では、大聖堂のオービットエンベロープとのクリアランスをテストします。 最短経路検索により、キュービック スプラインに変換されるルートが生成され、位置、向き、フォーカス距離、視野角が補間されます。 注釈を閉じると、フライトは前のカメラ状態に戻ります。 サウンドとその他のタッチ レイヤードサウンドスケープがカメラに追従します。 外では、高度に基づいて2つの都市ループがクロスフェードします。 屋内では、大聖堂のアンビエンスが引き継がれ、歩行中のみ足音が再生されます。 ローディング画面でさえ、CSSで描画されたバラ窓でテーマに従っています。 これらの詳細が組み合わさって、大聖堂のキャプチャを生きた、探索可能な場所に変えます。 オープンソースの基盤 Grace Cathedral Experienceの下にあるすべては、オープンソースの基盤の上に構築されています。 PlayCanvas Engineはブラウザでシーンをレンダリングし、SuperSplatはキャプチャを編集および最適化するためのツールを提供し、オープンSOGフォーマットはストリーミングするのに十分コンパクトにします。 これらは、誰でも使用、検査、改善できるように、オープンソースで開発しているのと同じテクノロジーです。 あなた自身の体験を構築したいですか？キャプチャから配信までの完全なワークフローについては、Gaussian splattingガイドから始めてください。 SuperSplat Editorでキャプチャを準備し、次にYour First Splat Appチュートリアルに従って、Engine API、PlayCanvas Editor、React、またはWeb Componentsのいずれであっても、あなたに最適なアプローチを選択してください。 🚀 質問がある場合、構築したものを共有したい場合、または単に他のクリエイターに会いたい場合は、DiscordでPlayCanvasおよびSuperSplatコミュニティに参加してください。 ぜひお会いしたいです！👋 Grace Cathedral Experienceを自分で体験して、オープンウェブが何ができるかを見てください。