threejs-procedural-vegetation について
Three.js で樹木の成長から葉、草地、ツタ、風の変形まで扱う、プロシージャル植生制作向けスキルです。詳細な実装例と制約を通じて、ジオメトリ生成と描画の設計を支援します。
主な機能
- 01種ごとの枝成長パラメーター
- 02枝ジオメトリと UV シーム生成
- 03葉と植生のプロシージャル生成
- 04草地と花畑のシステム
- 05表面に沿うツタの成長
- 06根元を保つ風変形
活用シーン
- 01分枝を制御した樹木の作成
- 02地形に沿う草地の生成
- 03GPU カリングを使った大規模な花畑
- 04モデル表面に沿うツタの成長
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-procedural-vegetationインストール後、Claude Code で/threejs-procedural-vegetationを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/gpu-culled-flower-field/THIRD_PARTY_LICENSES.mdassets/structured-ash-growth/THIRD_PARTY_LICENSES.mdassets/stylized-meadow-grass/grass-blades-up.glbexamples/gpu-computed-grass/gpu-grass-system.jsexamples/gpu-culled-flower-field/gpu-culled-flower-field.jsexamples/gpu-culled-flower-field/source/gpu-culled-flower-field.tsexamples/procedural-surface-ivy/ivy-effect.jsexamples/procedural-surface-ivy/source/bvh.tsflowers.tswind.tsleafTexture.tsivy.tsexamples/structured-ash-growth/tree-system.jsash-preset.jsexamples/stylized-meadow-grass/grass-system.jsreferences/gpu-culled-flower-field.mdstructured-ash-growth-system.md詳細
プロシージャル植生
植物は、成長階層とレンダリング上の適応を組み合わせて表現します。円柱をランダムに散らしてモデル化しないでください。
このスキルには、説明的なガイダンスに加えて、参考になる例やアセットが含まれています。関連する場合は、十分に検討・参照し、場合によってはそのまま使用してください。むやみに読み飛ばさないでください。
構築手順
- レベルごとの種テーブルを定義します。長さ、半径、先細り具合、子の数、発生範囲、角度、ねじれ、曲がり具合、断面数、放射方向の分割数を指定します。
- 再帰の深さと予算を把握できるよう、キューを使って枝を反復的に成長させます。
- 意図的な UV シームを設け、向きを持つリングとして各枝を生成します。
- 次の要素に基づいて断面の向きを更新します。
- 継承した方向
- 確率的な曲率
- 屈性または外力
- 任意の誘引制約
- 縦方向の配置スロットを層化し、角度スロットを個別に並べ替えて子枝を生成します。
- 枝のトポロジーが安定してから葉を生成します。
- カードの向きと局所的な樹冠の体積の両方を基に、葉の法線を構築します。
- 風の適用範囲を明確に選びます。葉の根元の変形、枝階層の変形、木全体の揺れは、それぞれ別のシステムです。
references/structured-ash-growth-system.md を読み、調整を行う前に、プリセット、継続処理、子の配置、葉、マテリアル、風、構図に関する仕様を維持してください。
仕様に正確に準拠した実装と診断用属性については、 アッシュ成長システムの実装 と、その 作成済みプリセットを確認してください。
作成済みの草の房ジオメトリとプロシージャルなフォールバック、画像ベースの経路マスキング、インスタンスごとの原点・向き属性、円弧状の根元からの風の変形、突風前線、先端の揺れ、色の房、マクロな変化、半透明、リムの診断機能については、 スタイライズドな草原の実装を確認してください。
MRT による葉パラメーター生成、決定論的な地形追従配置、ボロノイクラスター、ベジェ曲線による葉の折り曲げ、風向きに合わせたヨー回転、距離に基づく LOD/カリング、法線・色のフェード、半透明、フィールドの診断機能については、 GPU 計算による草の実装を確認してください。
仮想アドレス、エコロジー、階層的なコンパクション、間接描画、距離別の階層、アトラス、風、接触、リソース、診断機能に関する正確な仕様については、references/gpu-culled-flower-field.mdを確認してください。
レコードなしでの整数候補の再構築、32×32 のタイルカリング、3 つの可視 ID ストリーム、近距離/中距離/遠距離の間接描画、曲面状のテクスチャ付き花びら、同一性を維持する地平線上の花、根元を軸にした移動接触への応答については、 GPU カリング花畑のエントリ と、完全な 生の WebGPU 実装を確認してください。
シード付きのスプライン追従型の茎、メッシュの繰り返し再投影、接平面に沿った這い上がりと垂れ下がり、平行移動法によるチューブリング、成長の表示、インスタンス化された葉と散形花序、葉柄のヒンジを軸にした剛体的な風の変形については、 プロシージャルな表面のツタのエントリ と、完全な TypeScript 実装を確認してください。唯一の実装として扱うのは TypeScript モジュールです。エントリファイルはそれらを再エクスポートするだけです。
視覚的な失敗条件
- 枝が目に見えるらせん状になっている。
- 密集した草が地形の高さや株単位のばらつきを無視している。
- すべての子要素が同じ相対的な高さから生えている。
- 樹皮のテクスチャスケールが枝の半径に応じて変化している。
- 葉を回転させると、平面カードの法線が露呈する。
- 葉の風の動きでカードの根元が動き、固定されたままにならない。
- 枝が静止している参照画像に対して、枝の風の動きが一致すると主張している。
- シードを変えると、制御されたばらつきではなく種のアイデンティティが変わる。
- レベルごとの予算なしに、ジオメトリのコストが増大する。
- 表面に沿って伸びる茎がホストからずれていたり、継ぎ目をまたいで法線が反転したりする。
- ツタの枝が、表面に付着している間、接平面を無視している。
- 葉の風の動きで、葉柄ではなくカードの中心を軸に回転する。
- 100 万本の花畑で、CPU トランスフォームや候補ごとのレコードが割り当てられる。
- 遠景の花の LOD で、種のアイデンティティが汎用のスプライトに置き換わる。
- コンパクションと直接レンダリングで、異なる根や採用判定が再構築される。
- 茎が曲がっても、花の頭がワールドの上方向を向いたままになる。
ルーティングの境界
成長モデルを伴わない汎用的な枝リングの生成には、$threejs-procedural-geometry を使用してください。このスキルは、種ごとのテーブル、ツタと枝のトポロジー、表面に沿った成長、葉、草原、根、および根元を固定した風の動きを担当します。