mcpField
T
threejs-scalable-real-time-shadows

threejs-scalable-real-time-shadows

github.com/linegel開発11131 回インストール5 週間前に更新
リポジトリ

threejs-scalable-real-time-shadows について

スケーラブルなディレクショナルシャドウを設計・検証する Three.js ワークフロースキルです。シャドウ構成、投影範囲、フィルタリング、バイアス、キャッシュ無効化、継続的な性能確認を扱います。

主な機能

  1. 01負荷に応じたシャドウ構成の選択
  2. 02投影範囲とフィルター範囲の調整
  3. 03深度バイアスと法線バイアスの個別調整
  4. 04キャッシュの有効性と無効化の追跡
  5. 05可視物体とシャドウ投射の整合
  6. 06性能とリソースライフサイクルの測定

活用シーン

  1. 01単一シャドウマップとCSMの選択
  2. 02カメラ移動中の影の安定化
  3. 03永続的なカスタムシャドウキャッシュの設計
  4. 04キャスター変化や影のアーティファクトの診断

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/linegel/threejs-complete-set-of-skill --skill threejs-scalable-real-time-shadows

インストール後、Claude Code で/threejs-scalable-real-time-shadowsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE
agents/
openai.yaml
references/
cached-clipmap-shadows.md

詳細

スケーラブルなリアルタイムシャドウ

ディレクショナルシャドウは、フィットの問題です。必要なキャスターからレシーバーへの光線をカバーする最小のライト空間表現をフィットさせ、実際に使用する投影、フィルター、更新に処理を割り当てます。

$threejs-choose-skills は、複数システムを調整するオプションのコーディネーターです。キャプチャ/読み戻しのエビデンスには $threejs-visual-validation を使用してください。

1. トポロジーを1つ選ぶ

同じシード付きワークロード、投影、フィルター、レシーバーポリシーを比較します。

ゲート最初の r185 WebGPU ブランチコストのトポロジー
有界なレシーバー/キャスターのボリュームがワールドテクセルと深度精度のゲートを通過する1つの DirectionalLight シャドウ1つのビュー、1つの深度テクスチャ、1回のフィルター評価
カメラ深度のカバレッジが連続的に変化するCSMShadowNodeL 個のシャドウビュー/マップ。通常、アクティブなフィルターは1つ、フェード中は2つ
固定された1つの正射影フットプリントを空間的に分割するTileShadowNode1つの深度配列、N 回のバックエンドレイヤーパス、N 回の包含判定、および各キャスターをすべてのレイヤーで描画する場合があるユニオン描画リスト
非常に広いカバレッジが継続し、測定された再利用効果が無効化後も維持されるカスタムのキャッシュ付きクリップマップL 個の永続レベル、選択的な更新、L 個のポータブルフィルター、またはターゲットで実証された配列/アトラスフィルター1〜2個
キャスターが毎フレーム変形する、または広範囲に変化する1つのフィット済みシャドウ、CSM、または同じライトを使う静的/動的分割キャッシュの無効化によって、再描画がほぼ全体に及びます。

Core と Tile のシャドウターゲットには、深度のほかに色を持つアタッチメントが保持されます。VSM では分布/ブラー用のリソースとパスが追加されます。TileShadowNode はすべてのレイヤーをまとめて更新するものであり、永続的なタイルキャッシュではありません。

重要な数値は、境界条件/方程式からの導出値、意図的に設定した値、ゲートの上限値、または対象環境での測定値に分類します。

完了条件: 描画/ラスタライズ/レシーバー/バインディング/再利用に関する負荷を測定してトポロジーを1つ選び、棄却した各候補には失敗したゲートがあり、流用したマップサイズ、レベル数、バイアス、ミリ秒単位の保証が選択を左右していないこと。

2. 投影、テクセル、フィルタリング、バイアスをフィットさせる

  • XY は、必要なバイアス適用後のレシーバー座標に、フィルター、スナップ、カバレッジの余裕を加えてフィットさせます。Z は、レシーバーと、それらに届く光線上のすべてのオクルーダーに対して個別にフィットさせます。XY のテクセル幅は、有効な Z の量子化単位を決めるものではありません。
  • 安定したディレクショナルライトの基底とグローバル/ライトアンカーを1つ使用します。確定した各中心は、固定の dx/dy グリッドに対して、決定論的な量子化器を1つ使ってスナップします。基底、符号、またはアンカーを変更すると、新しいコンテンツエポックが始まります。
  • 実際の Basic/PCF/PCFSoft/VSM の実装とバックエンドに基づいてフィルターのサポート範囲を導出します。このサポート範囲を包含範囲の内側に確保し、ブレンド間でワールドフットプリントを一致させます。
  • normalBias はワールド空間での法線方向オフセットとして扱い、bias/biasNode は正規化された比較深度オフセットとして扱います。それぞれを個別に導出して検証します。

シャドウのチラつき、継ぎ目、シャドウアクネ、ピーターパニングを安定させる際は、投影、フィルター、バイアスの仕組みを参照してください。

完了条件: 1テクセル未満の遅い動きが安定していること、XY/Z のすべての境界でカバレッジが維持されること、フィルターのサポート範囲がドメインからはみ出さないこと、選択した深度規約のもとで正面、かすめ角、薄い接触、レベル間の各テストフィクスチャが合格すること。

3. r185 の実装を正確にゲートする

機能を確認する前に WebGPU を初期化します。

await renderer.init();
if ( renderer.backend.isWebGPUBackend !== true ) {
  throw new Error( 'Directional shadows require WebGPU.' );
}

影響を受けるマテリアル/ライトのグラフが構築される前に、light.shadow.shadowNode を通じてカスタムノードをアタッチします。実行時に変更する場合は、影響を受けるすべてのグラフとパイプラインを再構築し、破棄と再作成を通過させる必要があります。

core、CSM、Tile、反転深度、またはカスタムシャドウフックを使用する場合は、クローン時の欠落、深度比較、レイヤーの動作、変換規約、ライフサイクルに関する注意点について、r185 のソースゲートを確認してください。

完了条件: リビジョン/インポート、バックエンド/深度ポリシー、カメラの所有権、シャドウターゲットの種類、レイヤーの動作、マテリアルのバインドレイアウト、および選択したすべての組み込み機能に関する注意点について、固定シーンでの診断があるか、構成が拒否されていること。

4. 選択した場合にのみ明示的なカスタムキャッシュを構築する

各レベルは個別の状態を保持します。

desired  = next coverage request
rendered = center/range/content encoded into an inactive target
committed = exact valid target and parameters sampled by receivers
dirty    = desired coverage differs, while committed content may remain valid
invalid  = committed depth no longer represents required content

レシーバーは確定済みの状態のみをサンプリングします。無効なレベルの重みはゼロとし、次に有効な、より粗いレベルが残りの重みを引き継ぎます。解決されない外側の範囲は照明された状態にします。正しさに関する無効化は、経過時間や品質に基づく更新より優先します。

目標中心、深度範囲、基底エポック、コンテンツエポックを固定してからレンダリングし、レンダラーの状態を復元します。その後、コンテンツ、基底、リソースの各バージョンが更新によって上書きされていないことを再確認してから、中心、範囲、ターゲット/レイヤー、行列、レンダリング済みエポックをアトミックに確定します。より新しい無効化は保持します。フィルター、法線バイアス、フェードの変更時も、再利用前にガード付きカバレッジと依存リソースを再検証します。現在のプレゼンテーションシール後にエンコードされた作業には非アクティブなリソース世代を使用し、次のプレゼンテーションで確定します。以前に確定した世代は、そのコンシューマーが処理を終えるまで不変に保ちます。

カスタムキャッシュを選択した場合は、実装前にキャッシュ状態、スケジューリング、サンプリングの規約を確認してください。

完了条件: レンダリング済みメタデータが非アクティブなターゲットと一致し、確定済みメタデータがレシーバーのサンプリングするリソースと一致すること。確定済みのカバレッジが有効な間に限り、目標状態との差異が許容されること。初回使用時の状態が無効であること。更新に失敗した場合も、なお正しい確定状態のみが保持されること。遅れて実行される更新によってサンプリング中の世代が変更されないこと。また、修復されるまで、無効なレベルがすべて除外されること。

5. 原因のスイープ範囲を無効化し、カスターの整合性を保つ

ライトの基底、カスターの前回/現在の変換、ジオメトリ/LOD、可視性、レイヤー、シャドウフラグ、アルファ/マスク/カバレッジ、変形範囲、アセット/チャンクの世代、リソースの識別情報を追跡します。カスターの保守的なシルエットについて前回と現在の範囲を結合またはスイープし、空いた影の深度と新たに占有された影の深度の両方を無効化します。

中心の変更は、ネストされたすべてのフルマップと交差する可能性があります。その再描画にコストがかかりすぎる場合は、同じライト/シャドウノード内で、重複しない所有範囲、ページ化された常駐管理、プロキシ、または動的オーバーレイを使用します。2 つ目のディレクショナルライトを追加すると、照明が重複します。

可視パスとシャドウパスでは、ローカル空間の変形とアルファ/カバレッジを共有します。positionNode と castShadowPositionNode はローカル空間のフックです。receivedShadowPositionNode はワールド空間のレシーバールックアップであり、個別に検証されます。

無効化イベントの表、レシーバーへのスイープ影響、整合性に関する規約については、スイープ無効化とカスターの整合性を確認してください。

別のシステムがライト/カスターの動き、リベース、またはプレゼンテーションの間隔を提供する場合は、使用前に単位、座標系、現在/過去のサンプル時刻、権限、バージョン、リソース世代、有効性、古さ、リセット条件を紐付けます。シャドウキャッシュは、目標、ダーティ、無効、レンダリング済み、確定済みの各状態の唯一の書き込み元であり続けます。

完了条件: コンテンツ依存関係がすべて、再描画、サンプリングのみの更新、または何もしない処理のいずれかに対応付けられていること。移動または変形したすべてのカスターが、過去/現在の影響範囲をスイープして無効化すること。また、モーフィング、スキニング、インスタンシング、バッチ処理、両面判定、レイヤー、アルファカバレッジについて、可視シルエットとカスターシルエットの整合性が検証に合格すること。

6. 持続的な動作とライフサイクルを検証する

確定済みのカバレッジ/ウェイト、ライトの深度、フィルターのサポート、バイアス、無効時のフォールバック、キャスターの整合性、バインディングレイアウト、ターゲットの一覧、固定された最終ビューを記録します。カメラの移動、すべての XY/Z 境界、レベル間のフェード、局所的および広範囲の無効化、ライト基底の変更、リサイズ/DPR、複数カメラの使用、更新のスパイク/負債、破棄/再作成を検証します。

ウォームアップ後かつ熱的に安定した状態で、CPU/GPU フレームの分位点、シャドウビューの描画数と三角形数、頂点/ラスタライズ/アルファ処理、レシーバーのフィルター評価、トラバーサル、割り当て、バインディング、無効なカバレッジ、更新のスパイクを測定します。トポロジーの代理指標ではなく、測定されたボトルネックを最適化します。

バインディング/リソースの一覧、ワークロードの計算式、合格基準については、 binding, workload, and validationを参照してください。

完了条件: 描画結果が選択したベースラインおよび診断された原因と一致し、古い無効コンテンツがサンプリングされず、アダプターと製品の余裕度の合格基準を満たし、持続的なフレームとスパイクの合格基準を満たすこと。また、ノード、ターゲット/テクスチャ、複製されたシャドウ/ライト、ストレージ、リスナー、デバッグリソースを切り離すと、カウンターがベースラインに戻ること。

所有範囲

このスキルは、ディレクショナルシャドウの投影、フィルタリング/バイアス、キャスターの整合性、キャッシュ状態/無効化、レシーバーのサンプリング、シャドウの診断を担当します。シーンの担当者はキャスター/ライトの入力を提供し、パイプラインの担当者は、シャドウコンテンツの変更によって生じる共有出力および時間的ラジアンスの棄却を制御します。

コメント