immersive-visuals-router

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Immersive Visuals Router

沉浸式视觉体验主路由

Master router dispatching to 6 domain routers for comprehensive visual experiences.

用于构建全面视觉体验的主路由，可调度至6个领域路由。

Routing Protocol

路由协议

Classify — Identify primary domains from user request
Route to Domain — Select appropriate domain router(s)
Combine Domains — Most projects need 3-4 domains together
Load Skills — Domain routers will load specific skills

分类 — 从用户需求中识别核心领域
调度至对应领域 — 选择合适的领域路由（可多个）
领域组合 — 大多数项目需要结合3-4个领域
加载技能 — 领域路由将加载特定技能

Domain Overview

领域概览

Domain	Router	Skills	Focus
3D Rendering	`r3f-router`	6	React Three Fiber, scenes, materials, camera
Shaders	`shaders-router`	5	GLSL, custom materials, visual effects
Particles	`particles-router`	4	Particle systems, physics, GPU optimization
Post-Processing	`postfx-router`	3	Bloom, effects, EffectComposer
Animation	`gsap-router`	4	GSAP tweens, timelines, scroll, React
Audio	`audio-router`	3	Playback, analysis, audio-reactive

Total: 6 routers, 25 specialized skills

领域	路由	技能数量	核心方向
3D渲染	`r3f-router`	6	React Three Fiber、场景、材质、相机
着色器	`shaders-router`	5	GLSL、自定义材质、视觉效果
粒子系统	`particles-router`	4	粒子系统、物理效果、GPU优化
后期处理	`postfx-router`	3	Bloom效果、视觉特效、EffectComposer
动画	`gsap-router`	4	GSAP补间动画、时间线、滚动动画、React集成
音频	`audio-router`	3	播放控制、音频分析、音频响应式效果

总计：6个路由，25项专业技能

Quick Route by Project Type

按项目类型快速路由

3D Scene (R3F Focus)

3D场景（以R3F为核心）

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

核心路由:   r3f-router → 场景搭建、组件、材质
次要路由: postfx-router → Bloom、电影级特效
可选路由:  gsap-router → 相机动画

Audio Visualizer

音频可视化工具

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

核心路由:   audio-router → 播放控制、音频分析、响应式效果
次要路由: r3f-router → 用于视觉呈现的3D场景
辅助路由: shaders-router → 自定义视觉特效
           postfx-router → Bloom、发光效果
           particles-router → 节拍响应式粒子

Creative Coding / Generative Art

创意编码/生成艺术

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

核心路由:   shaders-router → 自定义片元着色器
次要路由: r3f-router → 渲染管线
辅助路由: postfx-router → 特效链

Interactive Experience

交互式体验

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

核心路由:   r3f-router → 3D场景、交互功能
次要路由: gsap-router → 流畅动画
辅助路由: postfx-router → 视觉优化
           audio-router → 声音反馈

Countdown / Event Page

倒计时/活动页面

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

核心路由:   gsap-router → 序列动画
次要路由: r3f-router → 3D元素
辅助路由: postfx-router → 戏剧性特效
           audio-router → 环境音、倒计时音效
           particles-router → 庆祝特效

Particle-Heavy Effect

粒子密集型特效

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

核心路由:   particles-router → 粒子系统
次要路由: r3f-router → 场景搭建
辅助路由: postfx-router → 粒子Bloom效果
           shaders-router → 自定义粒子着色器

Signal-Based Routing

基于信号的路由

Domain Detection Signals

领域检测信号

r3f-router (3D Rendering):

"3D", "Three.js", "R3F", "React Three Fiber"
"scene", "mesh", "geometry", "camera"
"3D model", "GLTF", "environment"
"orbit controls", "transform"

shaders-router (Custom Shaders):

"shader", "GLSL", "fragment", "vertex"
"custom material", "uniform"
"procedural", "noise", "pattern"
"ray marching", "SDF"

particles-router (Particle Systems):

"particle", "emitter", "particle system"
"dust", "sparks", "confetti", "stars"
"instancing", "GPU particles"

postfx-router (Post-Processing):

"bloom", "glow", "post-processing"
"vignette", "chromatic aberration"
"depth of field", "color grading"
"EffectComposer"

gsap-router (Animation):

"GSAP", "GreenSock", "animate"
"timeline", "sequence", "tween"
"scroll animation", "ScrollTrigger"
"entrance animation"

audio-router (Audio):

"audio", "music", "sound"
"visualizer", "audio reactive"
"beat", "frequency", "FFT"
"Tone.js"

r3f-router（3D渲染）:

"3D"、"Three.js"、"R3F"、"React Three Fiber"
"scene"、"mesh"、"geometry"、"camera"
"3D model"、"GLTF"、"environment"
"orbit controls"、"transform"

shaders-router（自定义着色器）:

"shader"、"GLSL"、"fragment"、"vertex"
"custom material"、"uniform"
"procedural"、"noise"、"pattern"
"ray marching"、"SDF"

particles-router（粒子系统）:

"particle"、"emitter"、"particle system"
"dust"、"sparks"、"confetti"、"stars"
"instancing"、"GPU particles"

postfx-router（后期处理）:

"bloom"、"glow"、"post-processing"
"vignette"、"chromatic aberration"
"depth of field"、"color grading"
"EffectComposer"

gsap-router（动画）:

"GSAP"、"GreenSock"、"animate"
"timeline"、"sequence"、"tween"
"scroll animation"、"ScrollTrigger"
"entrance animation"

audio-router（音频）:

"audio"、"music"、"sound"
"visualizer"、"audio reactive"
"beat"、"frequency"、"FFT"
"Tone.js"

Domain Combinations

领域组合示例

Cinematic 3D Scene

电影级3D场景

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

r3f-router     → 场景、相机、灯光
shaders-router → 自定义材质
postfx-router  → Bloom、色彩分级、暗角
gsap-router    → 相机运动

Music Visualizer

音乐可视化工具

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

audio-router     → 加载音乐、分析频率
r3f-router       → 3D可视化几何结构
shaders-router   → 音频响应式着色器
particles-router → 节拍触发粒子
postfx-router    → Bloom、色差效果

Landing Page Hero

着陆页头部特效

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

r3f-router     → 背景3D场景
gsap-router    → 文字动画、滚动效果
postfx-router  → 柔和Bloom、胶片颗粒感

Interactive Installation

交互式装置

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

r3f-router       → 3D环境
particles-router → 交互反馈
gsap-router      → 过渡动画
audio-router     → 声音反馈
postfx-router    → 沉浸式特效

Product Showcase

产品3D展示

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

r3f-router     → 3D产品模型
gsap-router    → 旋转、缩放动画
postfx-router  → 灯光效果、环境氛围

Temporal Collapse Stack

时空坍缩项目栈

Complete domain routing for the New Year countdown:

┌─────────────────────────────────────────────────┐
│           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-router  │  │gsap-router  │              │
│  │ - 3D倒计时数字 │  │ - 数字翻转动画 │              │
│  │ - 相机环绕 │  │ - 动画序列 │              │
│  │ - 环境场景 │  │ - 倒计时控制 │              │
│  └──────┬──────┘  └──────┬──────┘              │
│         │                │                      │
│  ┌──────┴────────────────┴──────┐              │
│  │       postfx-router          │              │
│  │  - 数字Bloom（宇宙发光）       │              │
│  │  - 色差效果      │              │
│  │  - 暗角（边缘虚化）      │              │
│  └──────────────┬───────────────┘              │
│                 │                               │
│  ┌──────────────┴───────────────┐              │
│  │      particles-router        │              │
│  │  - 时间膨胀粒子效果   │              │
│  │  - 星空背景                │              │
│  │  - 庆祝爆发特效         │              │
│  └──────────────┬───────────────┘              │
│                 │                               │
│  ┌──────────────┴───────────────┐              │
│  │       audio-router           │              │
│  │  - 宇宙环境音循环       │              │
│  │  - 倒计时滴答声           │              │
│  │  - 节拍响应式视觉效果     │              │
│  │  - 庆祝音乐         │              │
│  └──────────────────────────────┘              │
│                                                 │
└─────────────────────────────────────────────────┘

Domain Responsibilities

领域职责

Domain	Temporal Collapse Role
r3f	3D countdown digits, camera orbit, environment
shaders	Digit morphing effect, custom glow material
particles	Time dilation particles, star field, celebration
postfx	Bloom on digits, vignette, chromatic on beat
gsap	Digit flip animation, intensity ramp, celebration
audio	Ambient loop, ticks, beat detection, celebration

领域	时空坍缩项目职责
r3f	3D倒计时数字、相机环绕、环境场景
着色器	数字变形效果、自定义发光材质
粒子系统	时间膨胀粒子、星空背景、庆祝特效
后期处理	数字Bloom效果、暗角、节拍触发色差
gsap	数字翻转动画、强度渐变、庆祝动画
音频	环境音循环、滴答声、节拍检测、庆祝音乐

Color Palette Reference

调色板参考

javascript

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

javascript

const TEMPORAL_PALETTE = {
  void: '#050508',      // 背景色
  cyan: '#00F5FF',      // 主发光色
  magenta: '#FF00FF',   // 强调色
  gold: '#FFD700',      // 庆祝高亮色
  white: '#FFFFFF'      // 文字及明亮元素色
};

Project Initialization Guide

项目初始化指南

Step 1: Identify Core Requirements

步骤1：明确核心需求

What is the primary visual experience?
Is there audio involvement?
Does it need animation/interaction?
What level of visual fidelity?

核心视觉体验是什么？
是否需要音频功能？
是否需要动画/交互？
视觉保真度要求如何？

Step 2: Select Primary Domain

步骤2：选择核心领域路由

Choose the domain that represents the main technical challenge.

选择最能代表主要技术挑战的领域路由。

Step 3: Add Supporting Domains

步骤3：添加辅助领域路由

Based on secondary requirements:

Need glow effects? →
```
postfx-router
```
Need smooth animations? →
```
gsap-router
```
Need particles? →
```
particles-router
```
Need audio? →
```
audio-router
```
Need custom materials? →
```
shaders-router
```

根据次要需求选择：

需要发光效果？ →
```
postfx-router
```
需要流畅动画？ →
```
gsap-router
```
需要粒子特效？ →
```
particles-router
```
需要音频功能？ →
```
audio-router
```
需要自定义材质？ →
```
shaders-router
```

Step 4: Load Domain Skills

步骤4：加载领域技能

Each domain router will direct to specific skills.

每个领域路由会引导加载对应的特定技能。

Performance Considerations

性能考量

By Domain

各领域性能影响

Domain	Performance Impact	Optimization
r3f	Medium-High	LOD, frustum culling
shaders	Low-High*	Simplify math, reduce loops
particles	High	GPU instancing, LOD
postfx	Medium-High	Reduce passes, resolution
gsap	Low	Kill unused tweens
audio	Low	Appropriate FFT size

*Depends on shader complexity

领域	性能影响	优化方案
r3f	中-高	细节层次（LOD）、视锥体剔除
着色器	低-高*	简化数学运算、减少循环
粒子系统	高	GPU实例化、细节层次（LOD）
后期处理	中-高	减少处理通道、降低分辨率
gsap	低	清理未使用的补间动画
音频	低	选择合适的FFT尺寸

*取决于着色器复杂度

Recommended Limits

Fallback Routing

回退路由规则

"3D" mentioned → Start with
```
r3f-router
```
"Visualizer" mentioned →
```
audio-router
```
+
```
r3f-router
```
"Animation" only →
```
gsap-router
```
"Effect" unclear →
```
postfx-router
```
No clear signals → Ask about project type

提及"3D" → 从
```
r3f-router
```
开始
提及"可视化工具" →
```
audio-router
```
+
```
r3f-router
```
仅提及"动画" →
```
gsap-router
```
"特效"需求不明确 →
```
postfx-router
```
无明确信号 → 询问项目类型

Skill Dependencies

技能依赖关系

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-router
├── 独立使用（可单独使用）
└── 可通过以下领域增强：着色器、后期处理、粒子系统

shaders-router
├── 依赖：r3f（提供Three.js上下文）
└── 可通过后期处理增强效果

particles-router
├── 依赖：r3f（提供场景环境）
└── 可通过后期处理（Bloom）、着色器（自定义效果）增强

postfx-router
├── 依赖：r3f（提供场景环境）
└── 可通过着色器（自定义特效）增强效果

gsap-router
├── 独立使用（可单独使用）
└── 可通过r3f（3D动画）增强效果

audio-router
├── 独立使用（可单独使用）
└── 可通过所有领域实现响应式视觉效果

Quick Reference Matrix

快速参考矩阵

Project Type	R3F	Shaders	Particles	PostFX	GSAP	Audio
3D Scene	●	○	○	●	○	-
Visualizer	●	●	●	●	-	●
Landing Page	●	-	○	●	●	-
Particle Effect	●	○	●	●	-	-
Countdown	●	○	●	●	●	●
Product 3D	●	-	-	●	●	-
Generative Art	●	●	○	○	-	-

● Required ○ Optional - Not needed

项目类型	R3F	着色器	粒子系统	后期处理	GSAP	音频
3D场景	●	○	○	●	○	-
可视化工具	●	●	●	●	-	●
着陆页	●	-	○	●	●	-
粒子特效	●	○	●	●	-	-
倒计时页面	●	○	●	●	●	●
产品3D展示	●	-	-	●	●	-
生成艺术	●	●	○	○	-	-

● 必需 ○ 可选 - 无需