mcpField
T
threejs-procedural-vegetation

threejs-procedural-vegetation

github.com/scottsttsクリエイティブ・メディア951106 回インストール1 週間前に更新
リポジトリ

threejs-procedural-vegetation について

Three.js で樹木の成長から葉、草地、ツタ、風の変形まで扱う、プロシージャル植生制作向けスキルです。詳細な実装例と制約を通じて、ジオメトリ生成と描画の設計を支援します。

主な機能

  1. 01種ごとの枝成長パラメーター
  2. 02枝ジオメトリと UV シーム生成
  3. 03葉と植生のプロシージャル生成
  4. 04草地と花畑のシステム
  5. 05表面に沿うツタの成長
  6. 06根元を保つ風変形

活用シーン

  1. 01分枝を制御した樹木の作成
  2. 02地形に沿う草地の生成
  3. 03GPU カリングを使った大規模な花畑
  4. 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.yaml
assets/gpu-culled-flower-field/
THIRD_PARTY_LICENSES.md
assets/structured-ash-growth/
THIRD_PARTY_LICENSES.md
assets/stylized-meadow-grass/
grass-blades-up.glb
examples/gpu-computed-grass/
gpu-grass-system.js
examples/gpu-culled-flower-field/
gpu-culled-flower-field.js
examples/gpu-culled-flower-field/source/
gpu-culled-flower-field.ts
examples/procedural-surface-ivy/
ivy-effect.js
examples/procedural-surface-ivy/source/
bvh.ts
flowers.ts
wind.ts
leafTexture.ts
ivy.ts
examples/structured-ash-growth/
tree-system.js
ash-preset.js
examples/stylized-meadow-grass/
grass-system.js
references/
gpu-culled-flower-field.md
structured-ash-growth-system.md

詳細

プロシージャル植生

植物は、成長階層とレンダリング上の適応を組み合わせて表現します。円柱をランダムに散らしてモデル化しないでください。

このスキルには、説明的なガイダンスに加えて、参考になる例やアセットが含まれています。関連する場合は、十分に検討・参照し、場合によってはそのまま使用してください。むやみに読み飛ばさないでください。

構築手順

  1. レベルごとの種テーブルを定義します。長さ、半径、先細り具合、子の数、発生範囲、角度、ねじれ、曲がり具合、断面数、放射方向の分割数を指定します。
  2. 再帰の深さと予算を把握できるよう、キューを使って枝を反復的に成長させます。
  3. 意図的な UV シームを設け、向きを持つリングとして各枝を生成します。
  4. 次の要素に基づいて断面の向きを更新します。
    • 継承した方向
    • 確率的な曲率
    • 屈性または外力
    • 任意の誘引制約
  5. 縦方向の配置スロットを層化し、角度スロットを個別に並べ替えて子枝を生成します。
  6. 枝のトポロジーが安定してから葉を生成します。
  7. カードの向きと局所的な樹冠の体積の両方を基に、葉の法線を構築します。
  8. 風の適用範囲を明確に選びます。葉の根元の変形、枝階層の変形、木全体の揺れは、それぞれ別のシステムです。

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 を使用してください。このスキルは、種ごとのテーブル、ツタと枝のトポロジー、表面に沿った成長、葉、草原、根、および根元を固定した風の動きを担当します。

コメント