threejs-procedural-geometry について
Three.js で描画用トポロジーを構築・管理するプロシージャルジオメトリのスキルです。表現形式と正確な割り当てから、メッシュ生成、バッチ処理、更新、トポロジー検証までを、意味と誤差の契約に沿って扱います。
主な機能
- 01割り当前にジオメトリ形式を選択
- 02意味領域と投影誤差の基準を定義
- 03頂点数とインデックス容量を正確に計画
- 04トポロジー、属性、グループ、フレームの生成
- 05バッチ処理と動的更新の管理
- 06トポロジー、属性、リソースの検証
活用シーン
- 01異なるマテリアル領域を持つメッシュの生成
- 02LOD誤差を制御した適応型地形の構築
- 03バッチ処理やインスタンシングによる反復オブジェクトの作成
- 04トポロジーとリソース制限を確認しながらジオメトリを更新
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ linegel/ threejs-complete-set-of-skill --skill threejs-procedural-geometryインストール後、Claude Code で/threejs-procedural-geometryを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSEagents/openai.yamlreferences/profile-sweeps-and-mesh-writers.md詳細
プロシージャルジオメトリ
ジオメトリ生成をコンパイラーとして扱います。表現を選択し、セマンティック領域と誤差上限を固定し、正確な容量を計算し、トポロジーとレンダリング属性を出力してから、両方を検証します。意味はジェネレーターの入力に属し、割り当て、トポロジー、グループ、更新、破棄はライターに属します。
複数のシステムを扱う場合、$threejs-choose-skills は任意のコーディネーターです。フィールドは連続的な要因を、マテリアルは PBR 応答を、モーションは変形状態を所有し、このスキルはレンダリングされるトポロジーを所有します。ジオメトリが別のシステムに情報を提供する場合は、レンダリング LOD や描画インデックスとは独立して、安定した単位、座標系/フレーム規約、生成元と利用側の所有者、リビジョン、サポート範囲、有効領域、誤差上限、更新フェーズを公開します。
1. 割り当ての前に表現を選択する
観測対象と更新パターンに応じて選択します。
| 契約 | 表現 |
|---|---|
| マテリアル領域を持つ、固有の手作業で作成されたサーフェス 1 つ | グループを持つインデックス付き BufferGeometry |
| トポロジーが異なる、同一マテリアルのオブジェクトが多数 | BatchedMesh |
| トポロジーが同一のオブジェクトの繰り返しが多数 | InstancedMesh |
| 同一トポロジーで、GPU がトランスフォームまたは可視性を所有する | ストレージバックの状態を用いる、行列を使わないインスタンスジオメトリ |
| 安定したバケットを使う、高頻度の可視性コンパクション | ストレージデータと間接描画コマンド |
| 連続的で単一値の起伏 | 継ぎ目ポリシーを備えた、インデックス付きアダプティブグリッド、クアッドツリー、またはクリップマップ |
| 明確な段丘、崖、またはトポロジーを持つ帯状領域 | 輪郭から生成したキャップと、明示的な壁/帯状メッシュ |
| 表面の張り出しや洞窟が見える | メモリ/トポロジーのゲートを通過した後の、範囲を制限したボリュームメッシング |
r185 WebGPU では、BatchedMesh はジオメトリとカリングを管理しますが、バックエンドは表示対象のマルチドローエントリーを引き続き反復します。これはネイティブ描画が 1 回であることを示すものではありません。InstancedMesh が有効なのは、トポロジーが同一の場合に限られます。
三角形もバッファも出力されておらず、各サーフェス/オブジェクトのクラスを単一の表現が所有し、そのカリング単位と更新単位が明示されているとき、このステップは完了です。
2. セマンティクスと誤差契約を固定する
座標系、セマンティックな寸法、名前付き領域、マテリアルスロット、スムージンググループ、UV チャート、ハード境界、トポロジー ID、LOD の視点エンベロープ、リソースの所有者を記録します。各 LOD は、実際のターゲットサイズとジッターなしのビューにおける、物理的なレンダーターゲットピクセル単位の保守的な誤差上限で判定します。ジオメトリ、有効なディスプレイスメントまたは変形、フィルタリング、再構成について、サポート範囲と誤差をすべて含めます。正確なカメラ投影を使用するか、遠近法による近似では有効な正のビュー深度のうち最も近い値を使用します。投影後の上限が、そのビューに定義されたしきい値以下の場合にのみ LOD を許可します。各ビューに個別の進入/退出しきい値とヒステリシス、最小滞在時間を設定し、遷移が終わるまで両方の遷移レベルを常駐させます。三角形の比率は参考となる数値であり、誤差上限ではありません。
輪郭駆動の処理では、バージョン管理された単一のフィールドソースを使用します。海岸線、段丘、帯状領域、崖、または穴のある領域を抽出する前に、輪郭トポロジーと地形のコンパイルを参照してください。
配置、ピッキング、または計測のアンカーを LOD や再構築後も維持する必要がある場合は、間引きを行う前にセマンティックアンカーと LOD バインディングを参照してください。
意図したすべての面にセマンティック領域、マテリアルスロット、スムージンググループ、UV チャート、トポロジー ID、および投影誤差ゲートが割り当てられ、必要なすべてのアンカーに安定したソース/トポロジー ID と LOD バインディングポリシーが設定されているとき、このステップは完了です。
3. 正確な容量を計算してから出力する
必要な重複をすべて適用した後にレンダリング頂点数を数え、割り当ての前にインデックス数を数えます。
vertexCount = unique (topological vertex, boundary domain, attribute values) tuples
indexCount = 3 * triangleCount
重複する分割理由は一度だけ数えます。マテリアルスロットだけを理由に、同一の頂点属性を重複させる必要はありません。安全な容量計算とメモリ制限を、割り当ての前に検証します。固定された r185 のパスでは、インデックス 65534 までは Uint16Array を使用し、それを超える場合は明示的に Uint32Array を使用してください。アップロードアダプターが Uint16 インデックスの 65535 を再開センチネルに書き換え、バッファの幅を拡張するためです。実際にアップロードされる幅は、CPU 配列とは別に考慮してください。次のような小さなライターインターフェースを通して出力します。
addVertex, addTriangle, addQuad
duplicateForBoundary
startSmoothingGroup, startUvChart, addGroup
finishGeometry
すべてのインデックスは、安定したマテリアルインデックスを持つ、重複のないグループのいずれか1つに属します。finishGeometry は、計画した数と書き込まれた数が一致することをアサートします。
計画した容量と割り当てが正確に一致し、出力されたすべてのインデックスがいずれか1つのグループに属し、オーバーフローや未使用容量が明示的なエラーになると、このステップは完了です。
4. トポロジー、法線、UV、フレームを確定する
トポロジー上の同一性とレンダリング頂点の同一性は分けて扱います。鋭い法線、マテリアル境界、UV シーム、ミラー化されたタンジェント空間ではレンダリング頂点を複製しますが、トポロジー上のエッジによって隣接性と閉包性を証明できるようにします。
生成器がパラメーター化を管理している場合は、解析的な法線/タンジェントを使用します。computeVertexNormals() は、共有頂点を意図的に滑らかにする領域で使用します。法線マップの互換性を保つには、computeMikkTSpaceTangents(...) の前に MikkTSpace.ready を待機してください。r185 ではインデックス付きジオメトリが非インデックス化されるため、この別表現に合わせてカウント、グループ、境界、バイト数を再計算します。この変換ではすべての情報が保持されるわけではないため、変換の前後でセマンティックメタデータ、アクティブな描画範囲、属性の型/使用方法を保持してください。GPU へ公開する前に変換します。
カーブに沿って出力する場合は、 プロファイルスイープと輸送フレーム を参照してください。
宣言されていないすべての境界でトポロジーが閉じ、法線/タンジェントがセマンティック境界と一致し、LOD 全体で UV 密度が安定し、曲率がゼロになる箇所や変曲点を通過しても輸送フレームが連続すると、このステップは完了です。
5. ワイヤーのバッチ処理と更新
GPU 所有ストレージや間接コマンドを割り当てる前に、レンダラーを初期化して利用可能か確認します。
await renderer.init();
if (renderer.backend.isWebGPUBackend !== true) {
throw new Error('Native WebGPU is required for geometry storage and indirect draws.');
}
コンパイル前に、選択したストレージバインディングとバッファーの使用方法が、初期化済みデバイスの制限に適合することを確認します。
初回レンダリングの前に属性の usage を設定します。レイアウトのコンパイル、レイキャスティング、境界の計算、シリアライズ、復元で引き続き参照される場合は、属性配列を保持してください。ジェネレーターの中間データの解放は、別の操作です。動的セクションでは、アダプターがアップロードするまで、未消費の addUpdateRange() コンポーネント区間が保持されます。空の範囲はアップロードなしではなく、全体のアップロードを意味します。r185 では、DynamicDrawUsage はバージョンに変更がなくてもアップロードします。断続的な編集には、バージョン駆動の使用方法と needsUpdate を使います。影響を受ける境界を再計算してください。容量、アイテムサイズ、または使用モデルを変更する場合は、検証済みのリソース世代として、所有するジオメトリを置き換え、以前のものを明示的に破棄します。
コンピュートがインスタンス状態を所有する場合は、描画で使用する前にコンピュートを送信し、変換の所有者を一つに保ちます。GPU 変換では、すべてのビューでポーズ後のインスタンス領域に対する境界が必要です。ベースメッシュの境界と CPU レイキャストでは、ストレージのみの変形は認識されません。r185 の computeAsync() は、GPU 完了フェンスではありません。間接コマンドでは、CPU が把握するバイトオフセットと安定した同質バケットを使用します。シェーダーによるマスキングは、可視性のコンパクションではありません。
バッチコンテナー、フレームごとの変更、ストレージ状態、または間接描画を追加する前に、 バッチ処理、動的更新、間接描画 を読んでください。
このステップの完了条件は、変更可能な各バイト範囲、ディスパッチ、描画エントリー、境界ボリューム、破棄箇所にそれぞれ一つの所有者があり、主張するカリング結果に非表示の処理が含まれていないことです。
6. トポロジーと描画ジオメトリを検証する
描画用に複製する前にトポロジー上の同一性を検証し、その後、最終的な BufferGeometry を検証します。
- 閉じた輪郭、単純な輪郭、入れ子になった輪郭のループと、宣言された開境界。
- 内部トポロジーエッジごとに、向きが反対の隣接面が二つあること。
- T 字接合、重複面、ボウタイ形状、意図しない非多様体エッジがないこと。
- 属性が有限値であること、インデックスが範囲内であること、三角形が非退化であること、巻き順が正しいこと。
- 法線が単位長であること、接線の向きが正しいこと、物理的な UV 密度、グループの網羅性、境界がすべての頂点を含むこと。
- すべての LOD と混在 LOD の継ぎ目で、保護対象の特徴とトポロジーが維持されていること。
- 安定したアンカーのソース ID とトポロジー ID、LOD ごとのバインディング、除外のリビジョン、再構築と LOD 変更を通じた位置とフレームの誤差が上限内であること。
- パフォーマンスを主張する場合、正確な常駐バイト数とアップロードバイト数、描画エントリーとバックエンドエントリー、更新範囲、および目標時間を維持できること。
診断情報では、トポロジー ID と描画 ID、境界、巻き順、法線、接線、UV 密度、マテリアルグループ、LOD と継ぎ目の誤差、バッチ ID、ダーティ範囲を確認できます。
このステップの完了条件は、アクティブな分岐で選択した敵対的な輪郭とフレームのケースも含め、すべてのセマンティック領域がトポロジー、属性、LOD、グループ、境界、バイト数、ライフサイクル、および主張するパフォーマンスのゲートに合格することです。
完了
ジオメトリシステムの完了条件は、割り当ての前に表現方法が決まっていること、正確な容量が出力データと一致すること、セマンティックトポロジーが描画用の複製、バッチ処理、更新、LOD を通じて維持されること、すべてのインデックスと変更可能なバイトに一つの所有者がいること、そして最終メッシュがトポロジー、属性、投影誤差、リソース、ライフサイクルの各チェックに合格することです。