threejs-water-optics について
Three.js の水表現に向けたスキルで、解析波、有限水域のシミュレーション、光学効果の実装例を扱います。プール、浅瀬、河川を対象とし、海洋や降雨表面のスキルとの適用範囲も示します。
主な機能
- 01解析波の変位と法線
- 02有限水域の高さ場シミュレーション
- 03プール体積の光学表現とレイトレーシング
- 04浅瀬のコースティクスと屈折
- 05発光する河川の流れと泡
活用シーン
- 01波頂と法線が一致する水面の構築
- 02物体で変化するインタラクティブなプールの制作
- 03浅い水底の屈折とコースティクスの描画
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-water-opticsインストール後、Claude Code で/threejs-water-opticsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/photoreal-water/THIRD_PARTY_LICENSES.mdpebbles.jsexamples/interactive-pool-volume/water-volume-system.jsexamples/luminescent-water/luminescent-water.jsexamples/photoreal-water/photoreal-water.jsreferences/photoreal-water.mdluminescent-water.mdwater-surface-system.md詳細
水の光学表現
水は、幾何学的な動き、表面の向き、光を散乱・吸収する媒体として扱います。青く透明なマテリアルは、水のシステムではありません。
このスキルには、説明的なガイダンスに加えて、参考になる優れたサンプルとアセットが含まれています。関連する場合は、十分に調べて参考にするか、コピーして使用してください。安易に読み飛ばさないでください。
スペクトルカスケードを伴う広大な海、沿岸の砕波、またはカメラが媒体を横切る表現には、$threejs-spectral-ocean を使用してください。このスキルでは、空気側から見る浅水域のコンポジター photoreal-water も扱います。
解析的な水面の構築順序
- 波の帯域を定義し、変位を評価します。
- 同じ波から解析的に法線を導出します。
- 変位するジオメトリを使用するか、法線のみの水面を明示的に選択します。
- 近似的な屈折におけるシーンカラーの扱いを確立します。
- 吸収に実際の深度を使うか、経路長の推定値を代替として使うかを明示します。
- 視点側を考慮したフレネルを通して、解析的な反射と屈折をブレンドします。
- 共通の波応答から泡とグリントを導出します。
- 微分値から未解像の法線帯域をフィルタリングします。
変位と法線の仕様、光学的な優先順位、視点側を考慮した屈折、吸収の代替手法、診断チャンネルについては、references/water-surface-system.md を参照してください。
制限された範囲での RGBA 高さ・速度・法線シミュレーション、局所的な滴、ドラッグ可能なオブジェクトに適した移動球による変位、微分面積によるコースティクス、プールの境界と球に対するシェーダー内でのプール・水・球のレイトレーシングについては、インタラクティブなプールボリュームの実装 を参照してください。
重力と毛細管力による FFT 波、タッチによる波紋、RGB コースティクス、屈折した小石の川床の放射輝度、開口回折によるグレアについては、フォトリアルな水の実装 を参照してください。パス、座標、フィルタリング、統合、診断に関する仕様については、references/photoreal-water.md を参照してください。
段階的な浅水流、移流する発光励起と泡、RGB コースティクス、濡れた地形の受光面、連動する川の光学表現については、発光する水の実装 を参照してください。グリッド、テクスチャ、パスの順序、統合、カメラのクリアランス、診断に関する仕様については、references/luminescent-water.md を参照してください。
失敗条件
- 法線テクスチャの動きが、変位した波頭と一致していない。
- 近似的な屈折で前景オブジェクトをサンプリングできるものの、その制限が明示されていない。
- 経路長の推定値を、再構築したシーンの厚みとして提示している。
- 制限されたプールのコースティクスが、シミュレーションした高さの法線から切り離された装飾的な投影になっている。
- 微小な波がエイリアシングを起こし、きらめくノイズになっている。
- 泡が、共通の波頭指標と無関係なスクロールテクスチャになっている。
- フレネルの代わりに一定の不透明度を使用している。
- エネルギーを制御せずに、反射、屈折、透明度をすべて加算している。
適用範囲の境界
水中にいる動物の組織や付属肢の光学表現には、$threejs-procedural-materials と luminescent-jellyfish を使用してください。このスキルの luminescent-water は、川の流れを扱います。
広大なスペクトルカスケード、ヤコビアンによる砕波、持続する海の泡、カメラが媒体を横切る表現には、$threejs-spectral-ocean を使用してください。photoreal-water のサンプルは、空気側から見る浅水域の光学表現に FFT パッチを使用します。水中からの視点には対応していません。解析的な画面屈折の手法も、制限されたボリュームの上にある、空気側のカメラを前提としています。地面の雨による水たまりの濡れ、波紋マスク、天候と連動する水しぶきには、$threejs-precipitation-surfaces を使用してください。このスキルでは、手動で定義する解析的な波、制限された範囲の高さ場シミュレーション、レイトレーシングによるプールボリュームの光学表現、制限された水域の光学表現を扱います。