threejs-precipitation-surfaces について
Three.jsの降水と表面効果を扱うスキルです。天候の進行、粒子、表面変化、衝突を連動するシステムとして捉え、積雪や雨で濡れた水たまりの実装資料を提供します。
主な機能
- 01降水と表面応答の構築手順
- 02積雪とモデルへの雪付着の資料
- 03濡れた地面と水たまりの雨表現
- 04風、被覆率、表面パラメーター制御
- 05マスク、法線、イベントのデバッグ
活用シーン
- 01風に応じた降雪と積雪の作成
- 02向きを考慮したモデルへの雪付着
- 03水たまりや波紋のある雨濡れ路面
- 04降水、表面変化、衝突効果の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-precipitation-surfacesインストール後、Claude Code で/threejs-precipitation-surfacesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/wet-puddle-rain/GPL-3.0.txtexamples/snow-accumulation/snow-system.jsexamples/wet-puddle-rain/rain-puddle-system.jsreferences/precipitation-surface-systems.md詳細
降水による表面変化
天候を、イベント、パーティクル、表面の反応が連動するシステムとして扱います。地面から視覚的に切り離された雨や雪のパーティクルを追加しないでください。
このスキルには、説明的なガイダンスに加えて、参考になる優れた実例やアセットが含まれています。関連する場合は、十分に調べて参照し、場合によってはそのまま使ってください。むやみに読み飛ばさないでください。
構築順序
weather envelope
-> falling precipitation volume
-> world/object surface mask
-> displaced or optical surface response
-> impact residue and splashes
-> shared lighting/post presentation
雪の積もり方、オブジェクトへの雪の付着、ラップする降水ボリューム、濡れた水たまりのマスク、プロシージャルな波紋法線、スプラッシュの配置、デバッグ出力、ライセンスの境界については、references/precipitation-surface-systems.mdを読んでください。
カメラに追従してラップする降雪、風と時間を共有するユニフォーム、ワールド空間の雪マスク、単一の情報源による積雪量と法線、モデルへの雪の付着、オプションの氷面合成については、雪の積雪処理の実装を読んでください。
雨の進行に応じた濡れ具合、アスファルトの水たまりマスク、プロシージャルな波紋法線、インスタンス化された雨筋、上向きの面を対象としたスプラッシュのサンプリング、フリップブック形式のスプラッシュについては、濡れた水たまりと雨の実装を読んでください。この例にはGPLライセンスのソース素材が含まれています。コピーまたは公開する際は、ライセンスの境界を維持してください。
必須の制御項目
- 降水の密度と速度;
- 風向と風の強さ;
- 天候の進行度または覆域の共有;
- 濡れ、水、または水たまりのマスクのしきい値と滑らかさ;
- 波紋または吹き流しの法線の強さ;
- 表面の粗さへの反映;
- パーティクル/スプラッシュの不透明度;
- マスク、法線、パーティクル、イベントの進行状況を確認するデバッグモード。
問題となる状態
- 落下する降水が、表面の反応に使われる風やタイミングを無視している;
- 雪の高さと雪の法線が異なるフィールドから生成されている;
- 上向きの面を判定するフィルターがなく、垂直面に雪が付着する;
- マスク、法線への反映、波紋を使わず、粗さを下げるだけで水たまりを表現している;
- 下向きの面や見えない面にスプラッシュが現れる;
- 雨筋を一滴ごとに割り当てている、またはカメラの周囲でラップできない;
- 無関係な時間ノイズで時間経過による濡れを見せかけている;
- GPL由来の雨のコードに関するライセンス境界が削除または不明瞭化されている。
適用範囲
範囲を限定した水たまりのシミュレーション、コースティクス、フレネル、屈折、ベール・ランベルトの水ボリュームには、$threejs-water-opticsを使用してください。一般的な火花、プラズマ、軌跡、天候に関係しないパーティクルには、$threejs-procedural-vfxを使用してください。スクリーンスペースでの接触履歴や霜を取り除く処理には、$threejs-temporal-surfacesを使用してください。このスキルの対象は、降水イベントと、それによって視覚的に変化する表面です。