immersive-visuals-router

Immersive Visuals Router

包括的なビジュアル体験を実現するため、6 つのドメインルーターに振り分けるマスタールーターです。

ルーティングプロトコル

1. 分類 — ユーザーのリクエストから主要なドメインを特定します
2. ドメインへのルーティング — 適切なドメインルーターを選択します
3. ドメインの組み合わせ — ほとんどのプロジェクトでは、3〜4 つのドメインを組み合わせて使用します
4. スキルの読み込み — ドメインルーターが特定のスキルを読み込みます

ドメインの概要

ドメイン	ルーター	スキル	主な用途
3D レンダリング	r3f-router	6	React Three Fiber、シーン、マテリアル、カメラ
シェーダー	shaders-router	5	GLSL、カスタムマテリアル、ビジュアルエフェクト
パーティクル	particles-router	4	パーティクルシステム、物理演算、GPU 最適化
ポストプロセッシング	postfx-router	3	ブルーム、エフェクト、EffectComposer
アニメーション	gsap-router	4	GSAP のトゥイーン、タイムライン、スクロール、React
オーディオ	audio-router	3	再生、解析、オーディオリアクティブ

合計：6 つのルーター、25 個の特化スキル

プロジェクトの種類からすばやくルーティング

3D シーン（R3F が中心）

Primary:   r3f-router → Scene setup, components, materials
Secondary: postfx-router → Bloom, cinematic effects
Optional:  gsap-router → Camera animations

オーディオビジュアライザー

Primary:   audio-router → Playback, analysis, reactive
Secondary: r3f-router → 3D scene for visuals
Supporting: shaders-router → Custom visual effects
           postfx-router → Bloom, glow
           particles-router → Beat-reactive particles

クリエイティブコーディング／ジェネレーティブアート

Primary:   shaders-router → Custom fragment shaders
Secondary: r3f-router → Render pipeline
Supporting: postfx-router → Effects chain

インタラクティブ体験

Primary:   r3f-router → 3D scene, interaction
Secondary: gsap-router → Smooth animations
Supporting: postfx-router → Visual polish
           audio-router → Sound feedback

カウントダウン／イベントページ

Primary:   gsap-router → Sequenced animations
Secondary: r3f-router → 3D elements
Supporting: postfx-router → Dramatic effects
           audio-router → Ambient, countdown audio
           particles-router → Celebration effects

パーティクルを多用するエフェクト

Primary:   particles-router → Particle systems
Secondary: r3f-router → Scene setup
Supporting: postfx-router → Bloom for particles
           shaders-router → Custom particle shaders

シグナルベースのルーティング

ドメイン検出シグナル

r3f-router（3D レンダリング）：

• 「3D」、「Three.js」、「R3F」、「React Three Fiber」
• 「シーン」、「メッシュ」、「ジオメトリ」、「カメラ」
• 「3D モデル」、「GLTF」、「環境」
• 「オービットコントロール」、「トランスフォーム」

shaders-router（カスタムシェーダー）：

• 「シェーダー」、「GLSL」、「フラグメント」、「頂点」
• 「カスタムマテリアル」、「uniform」
• 「プロシージャル」、「ノイズ」、「パターン」
• 「レイマーチング」、「SDF」

particles-router（パーティクルシステム）：

• 「パーティクル」、「エミッター」、「パーティクルシステム」
• 「ダスト」、「火花」、「紙吹雪」、「星」
• 「インスタンシング」、「GPU パーティクル」

postfx-router（ポストプロセッシング）：

• 「ブルーム」、「グロー」、「ポストプロセッシング」
• 「ビネット」、「色収差」
• 「被写界深度」、「カラーグレーディング」
• 「EffectComposer」

gsap-router（アニメーション）：

• 「GSAP」、「GreenSock」、「アニメーション」
• 「タイムライン」、「シーケンス」、「トゥイーン」
• 「スクロールアニメーション」、「ScrollTrigger」
• 「登場アニメーション」

audio-router（オーディオ）：

• 「オーディオ」、「音楽」、「サウンド」
• 「ビジュアライザー」、「オーディオリアクティブ」
• 「ビート」、「周波数」、「FFT」
• 「Tone.js」

ドメインの組み合わせ

映画のような 3D シーン

r3f-router     → Scene, camera, lighting
shaders-router → Custom materials
postfx-router  → Bloom, color grading, vignette
gsap-router    → Camera movements

ミュージックビジュアライザー

audio-router     → Load music, analyze frequencies
r3f-router       → 3D visualization geometry
shaders-router   → Audio-reactive shaders
particles-router → Beat-triggered particles
postfx-router    → Bloom, chromatic aberration

ランディングページのヒーロー

r3f-router     → Background 3D scene
gsap-router    → Text animations, scroll effects
postfx-router  → Subtle bloom, film grain

インタラクティブなインスタレーション

r3f-router       → 3D environment
particles-router → Interaction feedback
gsap-router      → Transition animations
audio-router     → Sound feedback
postfx-router    → Immersive effects

製品紹介

r3f-router     → 3D product model
gsap-router    → Rotation, zoom animations
postfx-router  → Lighting effects, environment

Temporal Collapse スタック

新年カウントダウンに必要なドメインルーティング一式：

┌─────────────────────────────────────────────────┐
│           TEMPORAL COLLAPSE PROJECT             │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌─────────────┐  ┌─────────────┐              │
│  │ r3f-router  │  │gsap-router  │              │
│  │ - Scene     │  │ - Digit flip│              │
│  │ - Digits    │  │ - Sequences │              │
│  │ - Camera    │  │ - Countdown │              │
│  └──────┬──────┘  └──────┬──────┘              │
│         │                │                      │
│  ┌──────┴────────────────┴──────┐              │
│  │       postfx-router          │              │
│  │  - Bloom (cosmic glow)       │              │
│  │  - Chromatic aberration      │              │
│  │  - Vignette (void edge)      │              │
│  └──────────────┬───────────────┘              │
│                 │                               │
│  ┌──────────────┴───────────────┐              │
│  │      particles-router        │              │
│  │  - Time dilation particles   │              │
│  │  - Star field                │              │
│  │  - Celebration burst         │              │
│  └──────────────┬───────────────┘              │
│                 │                               │
│  ┌──────────────┴───────────────┐              │
│  │       audio-router           │              │
│  │  - Cosmic ambient loop       │              │
│  │  - Countdown ticks           │              │
│  │  - Beat-reactive visuals     │              │
│  │  - Celebration music         │              │
│  └──────────────────────────────┘              │
│                                                 │
└─────────────────────────────────────────────────┘

ドメインの役割

ドメイン	Temporal Collapse での役割
r3f	3D カウントダウン数字、カメラのオービット、環境
shaders	数字のモーフィングエフェクト、カスタムのグローマテリアル
particles	時間の遅延を表現するパーティクル、星空、祝賀演出
postfx	数字のブルーム、ビネット、ビートに合わせた色収差
gsap	数字のフリップアニメーション、強度のランプアップ、祝賀演出
audio	アンビエントループ、刻み音、ビート検出、祝賀演出

カラーパレットのリファレンス

const TEMPORAL_PALETTE = {
  void: '#050508',      // Background
  cyan: '#00F5FF',      // Primary glow
  magenta: '#FF00FF',   // Accent
  gold: '#FFD700',      // Celebration highlight
  white: '#FFFFFF'      // Text, bright elements
};

プロジェクト初期化ガイド

ステップ 1：主要な要件を特定する

• 中心となるビジュアル体験は何ですか？
• オーディオを使用しますか？
• アニメーションやインタラクションが必要ですか？
• どの程度のビジュアル品質が必要ですか？

ステップ 2：主要なドメインを選択する

技術面での主な課題を表すドメインを選択します。

ステップ 3：補助的なドメインを追加する

副次的な要件に応じて、次のドメインを追加します。

• グローエフェクトが必要ですか？ → postfx-router
• 滑らかなアニメーションが必要ですか？ → gsap-router
• パーティクルが必要ですか？ → particles-router
• オーディオが必要ですか？ → audio-router
• カスタムマテリアルが必要ですか？ → shaders-router

ステップ 4：ドメインスキルを読み込む

各ドメインルーターが、適切なスキルに案内します。

パフォーマンスに関する考慮事項

ドメイン別

ドメイン	パフォーマンスへの影響	最適化
r3f	中〜高	LOD、視錐台カリング
shaders	低〜高*	数式を簡略化し、ループを減らす
particles	高	GPU インスタンシング、LOD
postfx	中〜高	パス数と解像度を減らす
gsap	低	未使用のトゥイーンを破棄
audio	低	適切な FFT サイズ

*シェーダーの複雑さによって異なります

推奨上限

• パーティクル：インスタンシング使用時で 10,000〜50,000
• ポストプロセッシングパス：最大 3〜5
• シェーダーのユニフォーム：最小限に抑える
• オーディオ FFT：リアクティブ用途では 128〜256、ビジュアライゼーションでは 1024 以上

フォールバックルーティング

• 「3D」が言及されている → r3f-router から開始
• 「Visualizer」が言及されている → audio-router + r3f-router
• 「Animation」のみ → gsap-router
• 「Effect」が曖昧 → postfx-router
• 明確な手がかりがない → プロジェクトの種類について確認

スキルの依存関係

r3f-router
├── Independent (can use alone)
└── Enhanced by: shaders, postfx, particles

shaders-router
├── Requires: r3f (for Three.js context)
└── Enhanced by: postfx

particles-router
├── Requires: r3f (for scene)
└── Enhanced by: postfx (bloom), shaders (custom)

postfx-router
├── Requires: r3f (for scene)
└── Enhanced by: shaders (custom effects)

gsap-router
├── Independent (can use alone)
└── Enhanced by: r3f (3D animation)

audio-router
├── Independent (can use alone)
└── Enhanced by: all domains for reactive visuals

クイックリファレンスマトリックス

プロジェクトの種類	R3F	Shaders	Particles	PostFX	GSAP	Audio
3D シーン	●	○	○	●	○	-
ビジュアライザー	●	●	●	●	-	●
ランディングページ	●	-	○	●	●	-
パーティクルエフェクト	●	○	●	●	-	-
カウントダウン	●	○	●	●	●	●
3D 製品	●	-	-	●	●	-
ジェネレーティブアート	●	●	○	○	-	-

● 必須 ○ 任意 - 不要