threejs-shadow-systems について
Three.jsで大規模かつ移動する視野のための、ディレクショナルライト用シャドウマップ実装ガイドです。キャッシュ付きクリップマップ階層、テクセル単位の更新、階層境界を目立たせない遷移を扱います。
主な機能
- 01同心状のライト空間クリップマップ階層
- 02階層ごとのテクセルスナップ
- 03隣接階層間のクロスフェード
- 04フレーム予算内での粗い階層のキャッシュ
- 05キャスターや地形変更時の無効化
活用シーン
- 01大規模ワールドのディレクショナルシャドウ構築
- 02フレーム予算内でのシャドウ範囲更新
- 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
詳細
シャドウシステム
受影領域が実際に限定されている場合にのみ、シャドウマップを単独で使用します。広範囲を移動するビューでは、シャドウのカバレッジを明示的な空間階層として構成します。
キャッシュ付きクリップマップのワークフロー
- ライト空間で同心円状に配置された正方形のレベルを定義します。
- 各レベルの中心を、そのレベル固有のテクセルグリッドにスナップします。
- シェーダー空間で隣接するレベル間をクロスフェードします。
- 近距離のレベルを継続的に更新します。
- 粗いレベルをキャッシュし、フレーム予算内で更新します。
- 重要なシャドウキャスターやストリーミングされた地形が変化したとき、交差するレベルを無効化します。
- 法線バイアスをワールド空間のテクセル幅に合わせてスケーリングします。
広大なワールドのディレクショナルライトを実装する前に、references/cached-clipmap-shadows.md をお読みください。
キャッシュ付きシャドウクリップマップ を参照してください。ライト空間に配置された3つの正方形のレベル、レベルごとのテクセルスナップ、包含範囲に基づくクロスフェード、粗いレベルのキャッシュ更新、スケーリングされたバイアス、シャドウのかからない領域の重み付けを確認できます。
失敗条件
- 投影中心がテクセルの端数単位で移動する。
- シェーダーの包含判定が、マップに確定された中心と一致しない。
- 根拠もなく、すべてのカスケードを毎フレーム更新する。
- 粗いレベルが移動するシャドウキャスターを無期限に固定する。
- 深度テクスチャのサンプルが、フラグメントの分岐制御フローに左右される。
- テクセルサイズが大きく異なるにもかかわらず、同じ法線バイアスを使用する。
- カメラの移動に伴ってレベルの境界が見える。
適用範囲
このスキルは、ライト空間のディレクショナルシャドウマップに使用します。ビュー依存のアンビエントビジビリティには
$threejs-screen-space-ambient-occlusion を使用してください。AOはキャストシャドウの代わりにはなりません。
コメント
Markdown 対応