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 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         │              │
│  └──────────────────────────────┘              │
│                                                 │
└─────────────────────────────────────────────────┘

领域职责

领域	时间坍缩中的职责
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 个
• 着色器 uniform：尽量精简
• 音频 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 产品	●	-	-	●	●	-
生成式艺术	●	●	○	○	-	-

● 必需　○ 可选　- 不需要