shader-router について
視覚的な目標や技法に応じて、4種類のGLSLシェーダースキルから選ぶルーティングスキルです。プロシージャルテクスチャ、地形、レイマーチング3Dシーンなどに適した組み合わせを提案します。
主な機能
- 01視覚的な目標の分類
- 02シグナルに基づくスキル照合
- 03専門スキルの組み合わせ
- 04優先度と確度による振り分け
- 05スキル構成の提案
活用シーン
- 01プロシージャルテクスチャ向けスキルの選択
- 02地形シェーダー作業の計画
- 03スタイライズ形状とグロー効果の振り分け
- 04レイマーチングシーン向けスキルの選択
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ bbeierle12/ skill-mcp-claude --skill shader-routerインストール後、Claude Code で/shader-routerを入力して読み込まれたか確認します。
同梱ファイル_meta.json
詳細
シェーダールーター
タスクの要件に基づいて、4 つの専門的な GLSL シェーダースキルにルーティングします。
ルーティングプロトコル
- 分類 — 必要なビジュアル結果を特定します
- 照合 — 最も一致度の高いシグナルを持つスキルを見つけます
- 組み合わせ — 多くのシェーダーでは、2〜3 個のスキルを組み合わせます
- 読み込み — 実装前に、該当する SKILL.md ファイルを読みます
クイックルート
Tier 1:コア(常に検討)
| タスクの種類 | スキル | 主なシグナルワード |
|---|---|---|
| シェーダーの作成 | shader-fundamentals | GLSL、vertex、fragment、uniform、varying、coordinate |
| 有機的なパターン | shader-noise | noise、procedural、terrain、clouds、turbulence、organic |
Tier 2:専門(必要に応じて追加)
| タスクの種類 | スキル | 主なシグナルワード |
|---|---|---|
| 形状/ジオメトリ | shader-sdf | shape、circle、box、boolean、union、morph、raymarch |
| ビジュアルの仕上げ | shader-effects | glow、bloom、chromatic、distortion、vignette、glitch |
シグナル照合ルール
優先順位
複数のシグナルがある場合は、次の優先順位で判断します。
- 明示された手法 — 「simplex noise を使う」→
shader-noise - ビジュアル上の目標 — 「有機的な見た目」→
shader-noise - 形状のニーズ — 「角丸の長方形」→
shader-sdf - 仕上げのニーズ — 「glow を追加」→
shader-effects - デフォルト —
shader-fundamentalsから始めます
確信度のスコアリング
- 高(シグナル 3 つ以上) — すぐにルーティングします
- 中(シグナル 1〜2 つ) —
shader-fundamentalsをベースとしてルーティングします - 低(シグナル 0 個) — 「どのようなビジュアルエフェクトを実現したいですか?」と尋ねます
よくある組み合わせ
プロシージャルテクスチャ(2 スキル)
shader-fundamentals → Vertex/fragment setup, uniforms
shader-noise → Noise functions, FBM
連携:Fundamentals がシェーダーの構造を提供し、noise がパターンを生成します。
スタイライズされた形状(3 スキル)
shader-fundamentals → Shader setup, UV handling
shader-sdf → Shape definition, boolean ops
shader-effects → Glow, outline, anti-aliasing
連携:SDF が形状を定義し、effects がビジュアルを仕上げます。
地形/風景(2 スキル)
shader-fundamentals → Vertex displacement, lighting
shader-noise → Height generation, detail layers
連携:Noise がハイトマップを生成し、fundamentals が変位とシェーディングを処理します。
ホログラフィック/サイバーパンク(3 スキル)
shader-fundamentals → Fresnel, scanlines base
shader-noise → Animated distortion
shader-effects → Chromatic aberration, glitch, glow
連携:複数のエフェクトを重ねて、複雑なビジュアルスタイルを作ります。
UI/ロゴアニメーション(3 スキル)
shader-fundamentals → Animation timing, UV manipulation
shader-sdf → Shape primitives, morphing
shader-effects → Glow, dissolve, outline
連携:SDF が形状を作成し、effects がトランジションを加えます。
レイマーチング 3D(3 スキル)
shader-fundamentals → Ray setup, lighting math
shader-sdf → 3D primitives, scene composition
shader-noise → Surface detail, displacement
連携:SDF がジオメトリを定義し、noise が有機的なディテールを加えます。
判断テーブル
| ビジュアル上の目標 | 有機的? | 形状? | エフェクト? | ルーティング先 |
|---|---|---|---|---|
| 雲 | はい | いいえ | 場合による | fundamentals + noise |
| ロゴ | いいえ | はい | はい | fundamentals + sdf + effects |
| 地形 | はい | いいえ | いいえ | fundamentals + noise |
| 炎/煙 | はい | いいえ | はい | fundamentals + noise + effects |
| UI 要素 | いいえ | はい | はい | fundamentals + sdf + effects |
| 抽象アート | はい | 場合による | はい | すべてのスキル |
| 3D レイマーチング | 場合による | はい | 場合による | fundamentals + sdf + (noise) |
スキルの依存関係
shader-fundamentals (foundation)
├── shader-noise (extends fundamentals)
├── shader-sdf (extends fundamentals)
└── shader-effects (extends fundamentals)
- 常に
shader-fundamentalsから始めます shader-noiseとshader-sdfは、多くの場合それぞれ独立していますshader-effectsは通常、最後に適用します
ビジュアル上の目標 → 手法の対応表
| 目指すもの | 使うもの |
|---|---|
| 自然/有機的な見た目 | Noise(FBM、turbulence) |
| 幾何学的な形状 | SDF プリミティブ |
| 滑らかなモーフィング | SDF のスムーズ演算 |
| 無限パターン | SDF の反復 |
| 地形の高さ | Noise + 頂点変位 |
| 水/コースティクス | Noise + Worley |
| Glow/bloom | Effects(glow 関数) |
| レトロ/CRT の見た目 | Effects(走査線、グレイン) |
| トランジション | SDF の dissolve または Effects の dissolve |
| アウトライン | SDF または Effects(どちらにも手法があります) |
フォールバック動作
- 不明な手法 →
shader-fundamentalsから始めます - 明確なシグナルがない → 「作成したいビジュアルについて説明してください」と尋ねます
- パフォーマンス上の懸念 →
shader-noiseの最適化のヒントを確認します
クイック判断フローチャート
User Request
│
▼
┌─────────────────────┐
│ Writing shaders? │──Yes──▶ shader-fundamentals (always)
└─────────────────────┘
│
▼
┌─────────────────────┐
│ Organic/natural? │──Yes──▶ + shader-noise
└─────────────────────┘
│
▼
┌─────────────────────┐
│ Geometric shapes? │──Yes──▶ + shader-sdf
└─────────────────────┘
│
▼
┌─────────────────────┐
│ Visual polish? │──Yes──▶ + shader-effects
└─────────────────────┘
参考資料
詳細なパターンについては、各スキルファイルを参照してください。
/mnt/skills/user/shader-fundamentals/SKILL.md/mnt/skills/user/shader-noise/SKILL.md/mnt/skills/user/shader-sdf/SKILL.md/mnt/skills/user/shader-effects/SKILL.md
コメント
Markdown 対応