threejs-procedural-vegetation について
プロシージャル植生を安定した配置・トポロジーデータとして構築し、動的状態を分けて管理する Three.js スキルです。高密度植生、生態的な配置、樹木の成長、描画、検証を扱います。
主な機能
- 01決定論的な植物配置データの生成
- 02植生群落と樹木の表現選択
- 03地形に基づく生態的配置のモデル化
- 04構造化された樹木と風応答の生成
- 05静的配置と動的状態の分離
- 06描画、予算、ライフサイクルの検証
活用シーン
- 01再現可能な地形植生の配置
- 02草、低木、樹木のLOD選択
- 03環境フィールドに基づく種の配置
- 04根元を保つ風変形を伴う樹木の構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ linegel/ threejs-complete-set-of-skill --skill threejs-procedural-vegetationインストール後、Claude Code で/threejs-procedural-vegetationを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSEagents/openai.yamlreferences/terrain-ecology-and-placement.mdtree-growth-and-wind.mdscripts/placement-oracle.mjs詳細
プロシージャル植生
植生をコンパイラーとして構築します。安定した環境要因から不変の配置・トポロジーレコードを生成し、風や相互作用は独立して管理される動的状態として扱います。標準的な経路では、Three.js r185 の WebGPURenderer、TSL、NodeMaterial、およびワークロードに応じて選択するコンピュート/ストレージを使用します。
1. 観測可能な結果と所有者を定義する
API を選ぶ前に、要求される結果を分類します。
| 分岐 | 要求される観測可能な結果 | 植生が所有するもの |
|---|---|---|
| 高密度の植生 | 草、花、グラウンドカバー、繰り返し配置される低木・樹木 | 配置の識別情報、ページ、表現、変形バインディング |
| 樹木の成長 | 幹、根、枝、葉、根元を起点とする風の影響 | 成長階層、ジオメトリ、構造応答、LOD |
| 地形の生態系 | 地形または敷地のフィールドに起因する植生 | 種の応答、候補同士の競合、安定した採用 |
座標系、ワールド単位、植物の特性スケール、対象カメラ/範囲、更新頻度、出力の所有者、外部フィールドの所有者を明示します。地形、天候、水、接触、ライティングはそれぞれの所有者が管理し、植生はそれらからバージョン管理されたサンプルを受け取ります。
すべての要求される観測可能な結果に所有者が 1 つずつ定まり、すべての外部入力について、生成元、単位、座標系/チャート、サポート/フィルター、リビジョン、有効性、誤差、更新頻度が明示された時点で、このステップは完了です。
2. 個体数と投影誤差に応じて表現を選択する
| ワークロード | デフォルトの表現 |
|---|---|
| 近くで見る樹木が 1 本または数本 | CPU/ワーカーで成長をコンパイルし、インデックス付きバッファーにする |
| 繰り返し配置される樹木または低木 | 適合する種のバリアントを空間ページ内にインスタンス化し、続いてジオメトリ LOD とインポスターを使う |
| 高密度の草またはグラウンドカバー | 暗黙、コンパクトな CPU、またはストレージベースの配置と、共有ストリップ/クランプジオメトリを使う |
| 配置またはトポロジーの変更 | 変更されるレコードだけをコンピュートし、その後、上限付きコンパクションを行う |
コンピュートの選択は、変更データ量、ディスパッチコスト、データ転送量、常駐コストの実測値に基づいて行います。静的な CPU 生成の植生が、最も低コストな GPU の結果になる場合もあります。近距離/中距離/遠距離の各範囲について、表現、遷移誤差、拡張境界、シャドウプロキシ、静的データ量、動的データ量、送信ワーク量を記録します。
表示範囲ごとに主要な表現が 1 つだけあり、すべての遷移にジッターのない物理ピクセル誤差のしきい値、ヒステリシス/滞留時間、同時メモリ予算が設定された時点で、このステップは完了です。
3. 選択した分岐をコンパイルする
高密度の植生
- ドメインを、グローバル ID、固定シード、半開区間による所有権、保守的な変形後境界、および視認可能な境界/LOD 診断を備えた、決定論的なチャンクに分割します。
ワールドを基準とするレコード ID は
(generatorSchemaVersion, globalSeedWords, stableSpeciesIdWords, biasedWorldCellWords, candidateOrdinal)です。ハッシュはコンパクトなラベル、優先度、または乱数レーンに限って使用します。完全なタプルの一致によって ID を決定し、ハッシュ衝突を解決します。種または機能群の ID は不変であり、レジストリ内の位置によって決まるものではありません。別の植生ファミリーを追加したり、チャンクの走査順序を変更したりしても、既存のレコードの番号は変わりません。 - 暗黙的な再構築、クランプレコード、コンパクトな CPU 属性、ストレージレコードを比較します。実際のアラインメント済みストライド、重複する LOD データ、頻繁に読み取られる頂点データを数えます。r185 では、
computeAsync()はキューに追加する前に初期化を待機しますが、GPU 処理の完了を示すものではありません。 - スポーン後は、配置と種の ID を不変に保ちます。安定した整数ハッシュから安全な変動を導出し、風、接触、湿り気、積雪、または選択したその他の動的フィールドのみを更新します。
- 描画の送信前に、空間ページ単位でカリングします。近距離ではジオメトリ、中距離では入れ子状の密度間引き、遠距離ではクラスターまたはインポスター表現を使用します。すべての頂点を引き続き送信する可視性マスクは、カリングではなく外観上のマスクです。
- 各ページの境界を、地形の変位、植物の高さ、最大有効変形量に応じて拡張します。表示、シャドウ、ピッキングで同じ境界を使用します。
入力が同じなら同じ ID が再現され、チャンク順序によって所有する植物が変わらず、配置バイトと動的バイトが分離され、不可視ページが送信ジオメトリに寄与しなくなった時点で、高密度植生のコンパイルは完了です。
地形の生態
地形、基質、曝露、水、攪乱、光、またはサイトアセットが配置に影響する場合は、 terrain-ecology-and-placement.mdを参照してください。 適合度を評価する前にハードな適格条件を適用し、その後、Matérn-II/局所最大方式か、グローバル優先度貪欲方式のどちらを使うかを明示的に選択します。このリファレンスで定義されているチャンクのハロー、安定した勝者キー、入れ子状の LOD 間引き順位を厳密に維持してください。
採用されたすべての植物について、フィールドのリビジョン、適格性、応答係数、候補/勝者 ID、アセット、チャンクの所有者が解決され、除外と継ぎ目の検査に違反がない状態になった時点で、生態系のコンパイルは完了です。
構造化された樹木
幹、枝、根、葉、または階層的な風を生成する場合は、 tree-growth-and-wind.mdを参照してください。 回転最小化フレーム、明示的なねじれ、種ごとのアロメトリー、検証済みの接合部、弧長に基づく樹皮 UV、安定した葉の基部、表示とシャドウで共有される変形を備えた、反復型の成長階層をコンパイルします。
キューが宣言された予算内で終了し、すべての枝 ID が一意で、フレームと接合部が連続性/メッシュの検証基準を満たし、葉群の根元、法線、UV、境界が有限かつ再現可能になった時点で、樹木のコンパイルは完了です。
4. 動的状態と受け渡しを定義する
風、水、天候、接触、読み込み、またはその他のシミュレーション所有者から 植生へデータを渡す場合は、単位、座標系/原点、間隔またはサンプル時刻、 更新頻度/サンプル位相、生成元/利用先/バージョン、適用範囲/フィルター、 有効性/鮮度/エラー、レート値か積算値かの意味を定義した受け渡しを設けます。
植生が所有するのは構造的な応答です。これには、根の拘束、解析的な揺れまたは モード状態、葉の揺らぎ、接触/荷重状態、境界、LOD 投影が含まれます。空気/水/ 接触の原因は所有しません。繰り返し使われる状態は固定ステップ、またはルーティング されたシミュレーション段階で更新します。レンダリングでは、安定した植物/ページの 識別子ごとに、変更不可の前回/現在の状態をサンプリングします。プレゼンテーション では、配置を変更せずに、それらの状態を現在のビューへ変換します。
一方向の視覚的変形はソースを利用し、物理的な反作用は返しません。双方向の ルートでは、受け渡しで指定された権威あるソルバーを通じて反作用を送ります。 GPU 上に常駐する状態は、フレームのクリティカルパスを通じて GPU 上に維持します。 CPU 側の判断には、解析的なミラー、コンパクトなダーティ範囲、または経過時間/ 誤差を宣言した保守的な境界を使用します。
このステップの完了条件は、各動的フィールドに単一の状態所有者、明確な サンプリング/適用時刻、安定した識別子/バージョン、制限された更新範囲、 および生成、削除、テレポート、スロット再利用、トポロジー変更、LOD の不連続、 プロバイダーの不連続に対する明示的なリセット規則があることです。リサイズで 変更するのは画面リソース/履歴であり、変更不可のワールド配置や構造状態では ありません。
5. 一度だけレンダリングして表示する
WebGPU リソースを割り当てる前に初期化します。
import { WebGPURenderer } from 'three/webgpu';
const renderer = new WebGPURenderer({ antialias: false });
await renderer.init();
if (renderer.backend.isWebGPUBackend !== true) {
throw new Error('WebGPU backend unavailable for the canonical vegetation path.');
}
- 草/樹皮には
MeshStandardNodeMaterialを使用し、ワックスの応答に必要な 場合は物理的なクリアコートの分岐を使用します。屈折を伴うtransmissionは、 薄い葉の拡散散乱モデルではありません。このライティング項は分けて扱い、 個別に検証します。 - カットアウトのカバレッジには
alphaTestまたはalphaHashを使用します。 r185 では、forceSinglePassは透明な両面描画の裏面/表面の描画を変更します。 不透明なカットアウトはもともと 1 回だけ描画されます。また、裏面の法線 ライティングは無効にしません。この最適化を選ぶ前に、透明オブジェクトの ソート/カバレッジを検証します。 - 実際の色エンコーディングを宣言します。エンコードされた sRGB は一度だけ
デコードし、リニア HDR はリニアのまま保持します。法線、粗さ、密度、アルファ、
風、LUT、その他のデータフィールドには
NoColorSpaceを使用します。 - 植物の根は支持点のアンカーに保持し、葉/子要素の根は動く親に接続します。 親の変形を一度だけ適用し、アタッチメント位置の重みをゼロにして追加の局所的な 揺れを適用します。可視ジオメトリとシャドウキャストジオメトリの両方で、 同じ関数を再利用します。
- AO、ブルーム、または時間方向のフィルタリングを追加する前に、カリングを行い、 ジオメトリ/アルファのカバレッジを減らします。利用側が使う MRT シグナルだけを 要求します。
- フレームを表示する一つのトーンマッピング/出力変換の所有者が処理するまで、 HDR バッファーはリニアのまま保持します。
このステップの完了条件は、可視、シャドウ、深度、モーションの各経路が同じ植物の 識別子と変形状態を解決し、すべての色/データが宣言された色空間を使用し、 トーンマッピングと出力変換を所有するコンポーネントがちょうど 1 つであることです。
6. 原因、コスト、ライフサイクルを検証する
最終出力/後処理なしの出力と、分岐固有の診断情報を確認します。
dense: chunk bounds, submitted pages, density rank, LOD/impostor state,
static versus dynamic storage, projected alpha layers
ecology: input fields, exclusions, response factors, candidate conflicts,
chunk halo/ownership, accepted and rejected causes
trees: branch levels/frames/junctions, bark UVs, leaf roots/normals,
wind displacement, swept bounds, shadow parity
画面上に表示/送信されたページ数とインスタンス数、却下されたものの処理済みの頂点数、 アルファレイヤーの平均値/p95、影に隠れた処理、アラインメント済みストレージのバイト数、動的フィールドの トラフィック/更新頻度、コンパイル/更新時間、フレーム全体およびペアごとの限界 CPU/GPU p50/p95、ピーク時の生存バイト数、目標負荷での持続的な挙動を記録します。
固定シードでのリプレイ、チャンク順序の変更、カメラの移動、LOD 遷移、風/接触によるインパルス、プロバイダーの不連続、リサイズ、スロットの再利用、 破棄をテストします。失敗の兆候には、生息環境がレンダリング LOD とともに移動する、シードの変化によって種が変わる、根がずれる、フレームに螺旋が生じる、カードの法線が平坦になる、配置がフレームごとに再生成される、画面外のページが描画処理の大半を占める、影の変形が一致しない、所有者の破棄後もリソース/状態が残る、といったものがあります。
検証は、選択したすべての分岐が因果関係、決定性、ジオメトリ、遷移、出力、予算、リセット、破棄の各チェックに合格した時点で完了です。選択していない分岐には、ペイロードも証拠も必要ありません。
ルーティングの境界
共有環境フィールドには $threejs-procedural-fields、汎用メッシュの生成には $threejs-procedural-geometry、再利用可能な PBR の特性には $threejs-procedural-materials、カスタムシャドウシステムには $threejs-scalable-real-time-shadows、最終的な HDR/後処理/出力の管理には $threejs-image-pipeline を使用します。このスキルは、植生の配置、成長トポロジー、葉、植生の表現、根を張った構造物の応答を担当します。