threejs-skill-router について
作成する視覚システムに応じて 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-skill-routerインストール後、Claude Code で/threejs-skill-routerを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
Three.js ビジュアルスキルルーター
モデルの Three.js に関する知識と公式ドキュメントを前提知識として扱います。ビジュアルの仕上がりを変える専門知識だけを読み込みます。
このパックは、手順のガイダンスにとどまりません。実用的な実装価値の多くは、動作するサンプルとサポート用アセットに含まれています。関連する場合は、それらに特に注意を払ってください。
作成するビジュアルシステムに応じてルーティングする
| 必要な結果 | 読み込むもの |
|---|---|
| ショット構成、追従/サイド/周回リグ、カメラの受け渡し、投影の所有権、ポインターによる視点操作、浮動原点 | $threejs-camera-direction |
| 発射とドッキングのタイムライン、プロシージャルなトランスフォームフェーズ、スプリング、ステージング、回転座標系でのアライメント、破片の動き | $threejs-procedural-animation |
| 再利用可能なスカラー/ベクトルフィールド、ドメインワーピング、因果マスク、プロシージャル法線 | $threejs-procedural-fields |
| シートの燃焼と熱流体を連成させた紙の燃焼シミュレーション、付属肢のシミュレーションと層状の組織光学を備えた発光クラゲ、関節化された鱗のグリントと有限翼エミッターを備えた発光する蝶、アトラスフィルタリングされたブロック、惑星表面、プロシージャルなディスプレイスメントとマスクを備えたテクスチャベースのハイブリッドPBR土壌/苔、地面とモデルへの苔の堆積、地形の濡れ、質量連成グレインシェーディングを備えた変形可能な粒状の砂、陰的な糸力学とほつれた繊維を備えた破れるデニムのシミュレーション、GPU XPBDと糸の微細構造を用いた織物、インタラクティブなグルーミングとストランドシェーディングを備えた毛皮のシミュレーション、溶岩/発光表面、反射性の波動光学回折格子、Airy干渉を伴う薄膜シャボン玉、レイトレースによるダイヤモンド/宝石の屈折、内部反射と体積吸収を伴う分散ガラス透過、XPBD力学と屈折コースティクスを備えた変形するソフトボディのゼリー素材、作成済みフレームPBR、スペキュラーAA | $threejs-procedural-materials |
| 高さフィールドのレイマーチング、シルエットを考慮したPOM、曲面レリーフシェル、レリーフのセルフシャドウ | $threejs-parallax-occlusion-mapping |
| 丁寧に作り込まれた完全なハードサーフェスオブジェクトのアセンブリ、プロシージャルな乗り物と人型ロボット、パラメーターカーブの断面トラック、傾斜シェルと背骨のロフト、ピローパネル、正確なポリゴンカット、UVが所有する開口部、翼幅方向の翼型ロフト、彫刻的なレール/フレーム、枝リング、フィンロフト、プロファイル押し出し、インセット、回転、スイープ、ソリッド化、ベベルとフィレット、シェルの厚み、トポロジーへの直接開口、意味情報を保持するメッシュライター、マテリアルスロットとグループ、プリミティブで構築した形状、同一平面でのちらつき、非連結/非多様体ジオメトリ、分離したパーツ、貫通、支持、クリアランス、スイープ包絡線の不具合 | $threejs-procedural-geometry |
| 樹木、表面に沿うアイビー、ペイントされたつる、スタイライズドな草、GPU計算による草、GPUカリングされた仮想花畑、距離別の植物ジオメトリ、根、葉、根元からの風による変形 | $threejs-procedural-vegetation |
| 建物、ファサード文法、プロファイル、装飾、モジュラーメッシュライター | $threejs-procedural-architecture |
| 惑星、地形、クレーター、バイオームフィールド、海岸線、球面のディテール | $threejs-procedural-planets |
| 空の散乱、惑星シェル、深度ベースの空気遠近法 | $threejs-atmosphere-aerial-perspective |
| 天候に応じたレイマーチング雲と雲の影 | $threejs-volumetric-clouds |
| FFT海洋、沿岸の砕波遷移、有限体積法による浅瀬の波、符号付き距離海岸線、浅瀬の遡上連鎖、濡れた砂、岩への衝突で生じる飛沫、海面上/海中のスタイライズドな光学効果、水中のスネルの窓、全反射、前方屈折する構造、ピクセルフットプリントに基づくスペクトルLOD、水中の遠近法、コースティクスのゴッドレイ、スペクトルカスケード、急峻な微分、ヤコビアンによる白波 | $threejs-spectral-ocean |
| 流れ、発光励起、移流する泡、RGBコースティクスを連成させた発光する浅瀬の河川、重力・毛細管FFT波、分散コースティクス、回折グレアを備えたフォトリアルな浅瀬、作成済み解析波、境界付きハイトフィールドプール、オブジェクトの波紋、微分面積コースティクス、レイトレースによるプールの体積光学、共有法線、ヒューリスティックな屈折、フォールバック吸収、波頭の泡 | $threejs-water-optics |
| 降雪、雪の堆積、モデル上の雪帽子、濡れたアスファルトの水たまり、プロシージャルな波紋法線、スプラッシュフリップブック、雨筋、共有ウェザーエンベロープ、表面の濡れ | $threejs-precipitation-surfaces |
| 光線を曲げるブラックホール、降着円盤、ワームホールと喉部通過、ヌル測地線の積分、重力レンズ効果のある天球と星野 | $threejs-raymarched-space-effects |
| フィルム調HDRレンズフレアコンポジター、ハイライトから生成する放射状ゴースト、視野角による瞳孔変形、スペクトル瞳孔リング、局所的なグレアとブルーム、レイマーチングによるオーロラカーテン、有限フットプリントの発光スラブ、一様な体積積分、正距円筒放射輝度プローブ、WebGPUによるボクセル火炎と煙、体積流体フィールド、メッシュ表面エミッター、SDF火炎衝突、パーティクル、軌跡、プラズマ、衝撃波、ホログラフィック投影、フレネルリムシェル、走査線のバンディング、レイヤー化されたイベントエフェクト | $threejs-procedural-vfx |
| 蓄積する画面上の霜、タッチによる除去、濡れた窓の雨、視点に整列した水滴の屈折とぼかし | $threejs-temporal-surfaces |
| 大規模ワールドで安定したシャドウ、カスケード、クリップマップ、キャッシュ更新 | $threejs-shadow-systems |
| GTAO、ベント法線、バイラテラル再構成 | $threejs-screen-space-ambient-occlusion |
| HDRブルームと選択的な発光寄与 | $threejs-bloom |
| 目の順応、トーンマッピング、LUTグレーディング、出力カラー | $threejs-exposure-color-grading |
| 共有深度/法線/速度の所有権とマルチパスの順序 | $threejs-image-pipeline |
| 固定視点の診断、シードのスイープ、時間方向と予算のエビデンス | $threejs-visual-validation |
実行順序
新しいプロシージャルシーンを作成する場合:
- ビジュアルコントラクトを定義します。対象、スケール、カメラとの距離、動き、目標とするフレーム予算を指定します。
- フレーミング、レンズ、カメラフレーム、モード遷移が目標に影響する場合は、
$threejs-camera-directionを読み込みます。 - 対象生成スキルを読み込みます。
- オブジェクトの動きに、作成したフェーズ、動きのあるフレーム、またはスプリング収束が必要な場合は、
$threejs-procedural-animationを追加します。 - 複数の視覚チャンネルで一貫した構造を共有する必要がある場合は、
$threejs-procedural-fieldsを追加します。 - シルエットとマテリアルマスクをエフェクトなしで確認できる状態にしてから、ライティング/シャドウと雰囲気を追加します。
- 最後に
$threejs-image-pipelineを追加します。 - 実際に必要なアトミックな画像エフェクトのみを読み込みます。
- 再現可能なエビデンスセットには
$threejs-visual-validationを使用します。
ルーティングの制約
- API のセットアップだけを理由にスキルを読み込まないでください。インストールされている Three.js のバージョンを確認し、公式ドキュメントを使用してください。
- 「美しくして」という要望を、後処理へ直接ルーティングしないでください。作成が必要なシステムの不足を特定してください。
- 独立した複数のノイズレイヤーよりも、明確で検証しやすい視覚ルールを 1 つ優先してください。
- 提供されたリファレンスを応用する場合、その特徴を生み出すメカニズムを維持してください。一般的なエフェクト分類に単純化しないでください。
- 構図上、明示的な連動が必要な場合を除き、オブジェクト空間、ワールド空間、スクリーン空間のシステムは分離してください。
- 該当するスキルが見つからない場合は、そのシステムに関する専門知識をパックがカバーしていないと明記してください。最も近いスキルを無理に当てはめないでください。
受け入れゲート
ルーティングされたタスクは、実装で次の項目が確認できるまで完了ではありません。
- 決定論的なシード、または再現可能な入力
- 制御フィールドを確認するための視覚的なデバッグモード
- 知覚上の役割ごとにグループ化されたパラメーター
- システムで品質または解像度の段階を定義する場合、そのメカニズムに基づいた意図的な品質または解像度の段階
- ポスト処理なしでも内容を判別できるベースライン
コメント
Markdown 対応