mcpField
T
threejs-shadow-systems

threejs-shadow-systems

github.com/scottsttsクリエイティブ・メディア946101 回インストール6 日前に更新
リポジトリ

threejs-shadow-systems について

Three.jsで大規模かつ移動する視野のための、ディレクショナルライト用シャドウマップ実装ガイドです。キャッシュ付きクリップマップ階層、テクセル単位の更新、階層境界を目立たせない遷移を扱います。

主な機能

  1. 01同心状のライト空間クリップマップ階層
  2. 02階層ごとのテクセルスナップ
  3. 03隣接階層間のクロスフェード
  4. 04フレーム予算内での粗い階層のキャッシュ
  5. 05キャスターや地形変更時の無効化

活用シーン

  1. 01大規模ワールドのディレクショナルシャドウ構築
  2. 02フレーム予算内でのシャドウ範囲更新
  3. 03カメラ移動時に見える階層遷移の抑制

インストール

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

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-shadow-systems

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

同梱ファイルagents/openai.yamlreferences/cached-clipmap-shadows.md

詳細

シャドウシステム

受影領域が実際に限定されている場合にのみ、シャドウマップを単独で使用します。広範囲を移動するビューでは、シャドウのカバレッジを明示的な空間階層として構成します。

キャッシュ付きクリップマップのワークフロー

  1. ライト空間で同心円状に配置された正方形のレベルを定義します。
  2. 各レベルの中心を、そのレベル固有のテクセルグリッドにスナップします。
  3. シェーダー空間で隣接するレベル間をクロスフェードします。
  4. 近距離のレベルを継続的に更新します。
  5. 粗いレベルをキャッシュし、フレーム予算内で更新します。
  6. 重要なシャドウキャスターやストリーミングされた地形が変化したとき、交差するレベルを無効化します。
  7. 法線バイアスをワールド空間のテクセル幅に合わせてスケーリングします。

広大なワールドのディレクショナルライトを実装する前に、references/cached-clipmap-shadows.md をお読みください。

キャッシュ付きシャドウクリップマップ を参照してください。ライト空間に配置された3つの正方形のレベル、レベルごとのテクセルスナップ、包含範囲に基づくクロスフェード、粗いレベルのキャッシュ更新、スケーリングされたバイアス、シャドウのかからない領域の重み付けを確認できます。

失敗条件

  • 投影中心がテクセルの端数単位で移動する。
  • シェーダーの包含判定が、マップに確定された中心と一致しない。
  • 根拠もなく、すべてのカスケードを毎フレーム更新する。
  • 粗いレベルが移動するシャドウキャスターを無期限に固定する。
  • 深度テクスチャのサンプルが、フラグメントの分岐制御フローに左右される。
  • テクセルサイズが大きく異なるにもかかわらず、同じ法線バイアスを使用する。
  • カメラの移動に伴ってレベルの境界が見える。

適用範囲

このスキルは、ライト空間のディレクショナルシャドウマップに使用します。ビュー依存のアンビエントビジビリティには $threejs-screen-space-ambient-occlusion を使用してください。AOはキャストシャドウの代わりにはなりません。

コメント