threejs-spectral-ocean について
外洋や海岸の砕波シーンを作る制作者向けのスキルで、スペクトル海洋、FFT処理、泡の履歴、浅水の海岸システムの実装仕様と例を提供します。水域や視点に応じて方式を分け、スペクトル、形状、泡、照明の一貫性を重視します。
主な機能
- 01スペクトルカスケードとFFT波浪
- 02変換後の微分値から求める法線
- 03ヤコビアンによる砕波と持続する泡
- 04海岸浅水と濡れた砂のシステム
- 05水面上・水面下の光学表現
- 06スペクトルと海岸の診断機能
活用シーン
- 01外洋のスペクトル波浪の実装
- 02海岸の砕波と濡れた砂の遷移の構築
- 03水面上・水面下から見た海洋マテリアルの制作
- 04FFT、泡、照明の挙動の検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-spectral-oceanインストール後、Claude Code で/threejs-spectral-oceanを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/ocean-beach-waves/THIRD_PARTY_LICENSES.mdexamples/coastal-breaker-ocean/coastal-breaker-ocean.jsexamples/coastal-breaker-ocean/source/noise.jswave-field.jsfoam.jscoast.jschain.jstsl.jsocean.jsexamples/ocean-beach-waves/ocean-beach-waves.jsexamples/ocean-beach-waves/source/coast.jssolver-kernels.tssolver-accelerator.jssurface.jsnoise.jsshading.jsspray.jsterrain-grid.jssimulation.jsworld.jsexamples/spectral-cascade-ocean/detail-texture.jsocean-system.jsfft-pipeline.jsspectrum.jsocean-material.jsexamples/stylized-above-below-ocean/stylized-ocean-material.jsexamples/submerged-snell-ocean/source/current.tscaustics.tsgrade.ts詳細
スペクトルオーシャン
求めるビューを担う表現を選んでください。外洋の海況では、明示的に周波数空間で管理します。浜辺の波が砕ける様子を視点とする場合は、帯域制限された連成波動場、海岸表現、遡上状態、泡の履歴、砂の応答を組み合わせます。どちらの対象も、スクロールする法線マップや無関係な泡のノイズに置き換えないでください。
このスキルには、説明的なガイダンスに加えて、参考になるサンプルやアセットが含まれています。よく学び、参考にし、必要であればコピーして活用してください。関連する場合は十分に使用し、やみくもに無視しないでください。
スペクトル構築の順序
- 海況スペクトルと決定論的なガウスシードを定義します。
- 波長を重複しないカスケードに分割します。
- 解析的な入力を使って逆 FFT を個別に検証します。
- 初期スペクトルを生成し、共役パックします。
- 周波数空間でパック済みの変位場と微分場を時間発展させます。
- 各パック済みフィールドを逆変換し、ステップ間のバリアを明示します。
- 変位、微分値、持続するヤコビアン泡マップを組み立てます。
- 合算したカスケード変位と微分値に基づいてシェーディングします。
- サブグリッドのディテールは、解像されたシミュレーション帯域より低い周波数にのみ追加します。
- スペクトル、高さ、傾斜、ヤコビアン、泡の履歴に関する診断情報を公開します。
スペクトルオーシャンを実装または監査する前に、references/spectral-cascade-ocean-system.mdを読んでください。
沿岸の波が砕けるシステムにおける、水から濡れた砂への遷移を実装または監査する前に、 references/coastal-breaker-and-swash-ocean.md を読んでください。
スペクトルカスケードオーシャンシステムと、その隣接するスペクトル、FFT、マテリアル、ディテールの各モジュールを読んで、カスケード、FFT、微分値、ヤコビアン、泡の履歴、シェーディングに関する仕様を確認してください。WebGL2 のフラグメント FFT バックエンドは明示的な互換性層です。対象が対応している場合は、リファレンスに記載された本番用の WebGPU/TSL アーキテクチャを維持してください。
対象に、水面の上下両方から観察できるスタイライズド FFT オーシャンが必要な場合は、 水面の上と下から見たスタイライズドオーシャンマテリアル を読んでください。高さの勾配に応じた水の色、太陽の軌跡に沿ったきらめき、波頭の散乱、ヤコビアン泡、水の色に染まった海底のコースティクス、シーン深度に基づく水中 Beer-Lambert 合成を実現しています。
カメラを WebGPU スペクトル水面の下に置いたままにする必要がある場合は、 水中スネルオーシャンシステム を読んでください。導関数でフィルタリングした臨界角マスクを用いる水から空気への厳密なフレネル反射、物理的に明るい上向きの水面裏側に対する全反射、エネルギー保存型の透過太陽ローブ、水上構造物を窓へ前方投影する処理、共有 HDR 空放射、水中での減衰と散乱光、フットプリントに応じて減衰する微分面積コースティクス、フル解像度のゴッドレイ、浮遊粒子、最終 HDR グレーディングを提供します。
視点の中心が水面の高さにある場合は、 沿岸の波が砕けるオーシャンシステム を読んでください。決定論的な帯域制限付き重力波場と毛細波場、符号付き距離による本土と島の海岸、海岸法線に沿った浅水の遡上連鎖、持続する波砕け泡と水膜泡、カメラ追従型のワープジオメトリ、濡れた砂の光学効果、共有の空放射を提供します。
海浜の計算を正値性保存型の有限体積ソルバーが担う場合は、 海岸の波の実装 を読んでください。岩の多い沿岸グリッド、水と濡れた砂の再構成フィールド、移流する泡、浅い水膜の光学効果、反射および屈折した空放射、衝撃で発生する飛沫を提供します。
スペクトルの必須ゲート
- 2 の累乗のグリッドを必須とし、FFT のインパルス/周波数テストに合格するようにします。
- カスケードの波数区間は重ならないようにします。
- 分離した法線テクスチャではなく、変換後の微分値から法線を導出します。
- 水平変位のヤコビアンから砕波を検出します。
- 泡はシミュレーション状態に保持し、毎フレームすべての泡を新たに推定しないようにします。
- アクティブなバックエンドに必要な同期を行って FFT の各ステージを送信します。
- 可視の空と海面反射で、太陽と空のパラメーターを共有します。
- 反対側の媒質の構造は、順方向投影で移送します。つまり、その構造自身の頂点を、屈折後のスクリーン位置にラスタライズします。開いた界面では、水面ピクセルから発生源のスクリーン位置を逆方向に追跡せず、方向の消失点が画面内にあるかどうかで移送する放射輝度を制限しないでください。(空中からしか見ない閉じたプールでは、
$threejs-water-opticsのスクリーン空間オフセットを引き続き使用できますが、カメラが媒質を切り替える海洋では使用できません。) - 水中側からの交差を求める計算は、カメラから発生源までの距離ではなく、臨界角(
tan θc ≈ 1.1346に、その光線から界面までの距離を掛けた値)を境界として行います。 - スペクトル LOD はピクセルフットプリント(
distance² · pixelAngle / heightGap)でスケーリングし、頂点変位、微分値、およびそれらに依存するすべてのバンドに適用します。アルベド項または放射輝度項である各バンドは、それぞれの平均値にフェードさせます。 - 臨界角の領域判定は出力ピクセル約 1 個分にわたってフィルタリングします。移送対象を安定させるために界面法線自体をフィルタリングしてはいけません。
- 光学処理全体は単一のカメラ媒質状態で制御し、三角形ごとに水面上/水面下の挙動を切り替えないようにします。
- 遠方の水中視線は、安全に水中へ沈んだ地形の縁で終端させます。空の海底や海面の地平線を、視線方向に沿った散乱レイヤーで覆わないでください。
- 比較用に、決定論的なシードと固定カメラのキャプチャを維持します。
沿岸の砕波に関するゲート
- 海岸線の SDF、弧長テーブル、リボンジオメトリ、遡上水の列は、単一の海岸契約にまとめます。SDF の勾配から不安定な列の順序を導出しないでください。
- 沖合の波の水位を、海岸法線方向の保存体積チェーンに渡します。線形スプリングチェーンだけでは、平坦な自由水面を一意に復元できません。
- ワールド空間の砕波泡と、海岸パラメーター化された膜状の泡の両方を保持します。
- 水、濡れた砂、乾いた砂は、切り離された海岸線デカールではなく、実際の水柱に基づいてブレンドします。
- 水面を変位させるものと同じ重力場および毛細管場から水面法線を導出し、すれすれの距離では砂の法線ディテールを微分フィルタリングします。
- 可視の背景と海面反射で、空の放射輝度と太陽の方向を共有します。
- 軌道カメラは地形より上に保ち、比較用には固定水面カメラを使用します。
別の項目については以下を参照
- 空気側から見る浅水域の FFT 光学処理、RGB コースティクス、回折グレアには、
$threejs-water-opticsとそのphotoreal-waterの例を使用します。閉じた水域、スクリーン空間屈折、深度方向の厚み、海岸線の吸収、解析的な波面には、このスキルを使用します。カメラが空気中に留まり、水域が閉じているため、ここではスクリーン空間屈折が有効です。ただし、開いた界面を越えるこのスキルの順方向投影の代わりにはなりません。 - 波頭のしぶきや相互作用による水しぶきが必要な場合に限り、
$threejs-procedural-vfxを追加します。 - シード間、時間経過、および GPU のエビデンスには、
$threejs-visual-validationを追加します。