Back to Details

2000s-visualization-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

2000s Music Visualization Expert

2000年代音乐可视化专家

Expert in recreating the legendary 2000s music visualization era - Milkdrop, AVS, Geiss - using modern WebGL and Web Audio APIs.
专注于使用现代WebGL和Web Audio API复刻2000年代传奇的音乐可视化时代——Milkdrop、AVS、Geiss。

When to Use

适用场景

✅ Use for:
  • Implementing Milkdrop-style psychedelic visualizations
  • Butterchurn library integration (WebGL Milkdrop)
  • Web Audio API AnalyserNode FFT/waveform extraction
  • GLSL fragment shaders for audio-reactive effects
  • Full-screen immersive music experiences
  • Real-time beat detection and audio analysis
  • Preset systems and visualization transitions
❌ NOT for:
  • Simple spectrum bar charts (use Canvas 2D)
  • Static audio waveform displays
  • Video editing or processing
  • Non-audio generative art
  • Audio playback/streaming issues (use audio-engineer skills)
✅ 适用情况：
  • 实现Milkdrop风格的迷幻可视化效果
  • Butterchurn库集成（WebGL版Milkdrop）
  • Web Audio API AnalyserNode FFT/波形提取
  • 用于音频响应式效果的GLSL片元着色器
  • 全屏沉浸式音乐体验
  • 实时节拍检测与音频分析
  • 预设系统与可视化过渡效果
❌ 不适用情况：
  • 简单频谱条形图（请使用Canvas 2D）
  • 静态音频波形展示
  • 视频编辑或处理
  • 非音频类生成艺术
  • 音频播放/流传输问题（请使用音频工程师技能）

The Golden Era (Summary)

黄金时代（概述）

EraKey SoftwareInnovation
1998-2000GeissSimple plasma effects, DirectX
2001-2007Milkdrop 1 & 2Per-pixel equations, preset system
2007-2015DeclineStreaming services rise
2018-PresentButterchurnWebGL renaissance
Milkdrop's magic: Layering simple effects - blur, zoom, rotation, color shift - with audio-reactive parameters.
→ See 
references/butterchurn-guide.md
for full history and integration.
时代核心软件创新点
1998-2000Geiss简单等离子效果、DirectX
2001-2007Milkdrop 1 & 2逐像素方程、预设系统
2007-2015衰退期流媒体服务兴起
2018-至今ButterchurnWebGL复兴
Milkdrop的魔力：将简单效果（模糊、缩放、旋转、色彩偏移）与音频响应参数分层叠加。
→ 查看
references/butterchurn-guide.md
获取完整历史与集成指南。

Core Technologies

核心技术

Butterchurn (WebGL Milkdrop)

Butterchurn（WebGL版Milkdrop）

  • 1.7k GitHub stars, MIT licensed
  • Full preset compatibility with original Milkdrop
  • npm: 
    butterchurn
    , 
    butterchurn-presets
typescript
import butterchurn from 'butterchurn';
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: window.innerWidth,
  height: window.innerHeight,
  pixelRatio: window.devicePixelRatio || 1,
});
visualizer.connectAudio(audioNode);
visualizer.loadPreset(preset, 2.0);  // 2s blend
  • GitHub星标1.7k，MIT许可证
  • 与原版Milkdrop完全兼容的预设系统
  • npm包：
    butterchurn
    、
    butterchurn-presets
typescript
import butterchurn from 'butterchurn';
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: window.innerWidth,
  height: window.innerHeight,
  pixelRatio: window.devicePixelRatio || 1,
});
visualizer.connectAudio(audioNode);
visualizer.loadPreset(preset, 2.0);  // 2秒过渡

Web Audio API FFT

Web Audio API FFT

typescript
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.8;
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
Critical: FFT bins are linear but hearing is logarithmic! Use logarithmic mapping.
→ See 
references/web-audio-fft.md
for frequency band extraction.
typescript
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.8;
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
关键提示：FFT bins是线性分布的，但人类听觉是对数分布的！请使用对数映射。
→ 查看
references/web-audio-fft.md
获取频段提取方法。

GLSL Shaders

GLSL着色器

Pass audio data as 1D texture, use uniforms for bass/mid/treble:
glsl
uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);
→ See 
references/glsl-shaders.md
for complete patterns.
将音频数据作为一维纹理传递，使用uniform变量处理低音/中音/高音：
glsl
uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);
→ 查看
references/glsl-shaders.md
获取完整模式。

Anti-Patterns to Avoid

需避免的反模式

1. Ignoring AudioContext State

1. 忽略AudioContext状态

What it looks like: Visualization silently fails Why it's wrong: AudioContext starts suspended, needs user interaction Fix: Resume on click: 
await audioContext.resume()
表现：可视化效果无响应 原因：AudioContext初始为暂停状态，需要用户交互才能恢复 修复方案：在点击事件中恢复：
await audioContext.resume()

2. Linear Frequency Display

2. 线性频率展示

What it looks like: Bass dominates, treble invisible Why it's wrong: FFT bins are linear; first 100 bins might be 0-2kHz Fix: Use logarithmic bin mapping (code in references)
表现：低音占主导，高音不可见 原因：FFT bins是线性分布的；前100个bins可能对应0-2kHz 修复方案：使用对数bin映射（参考资料中有代码）

3. No Smoothing

3. 未启用平滑处理

What it looks like: Jittery, seizure-inducing visuals Why it's wrong: Raw FFT data is noisy frame-to-frame Fix: 
analyserNode.smoothingTimeConstant = 0.7
表现：画面抖动，可能引发不适 原因：原始FFT数据帧与帧之间噪声大 修复方案：设置
analyserNode.smoothingTimeConstant = 0.7

4. requestAnimationFrame Without Cleanup

4. requestAnimationFrame未清理

What it looks like: Memory leaks, multiple render loops Fix: Store animation ID, call 
cancelAnimationFrame
on unmount
表现：内存泄漏、多个渲染循环 修复方案：存储动画ID，在卸载时调用
cancelAnimationFrame

5. Hardcoded Canvas Size

5. 硬编码Canvas尺寸

What it looks like: Blurry on retina, wrong aspect ratio Fix: Multiply by 
devicePixelRatio
, handle resize events
表现：视网膜屏幕上模糊、宽高比错误 修复方案：乘以
devicePixelRatio
，处理窗口 resize 事件

6. Blocking Main Thread

6. 阻塞主线程

What it looks like: Choppy audio, dropped frames Why it's wrong: Heavy shader compilation on UI thread Fix: Compile shaders during loading, not during playback
表现：音频卡顿、丢帧 原因：着色器编译在UI线程执行，开销大 修复方案：在加载阶段编译着色器，而非播放阶段

Preset Recommendations

预设推荐

Psychedelic/Trippy:
  • Flexi, martin + geiss - dedicated to the sherwin maxawow
  • Rovastar - Fractopia
Smooth/Chill:
  • Flexi - predator-prey-spirals
  • Geiss - Cosmic Strings 2
High Energy:
  • Flexi + Martin - disconnected
  • shifter - tumbling cubes
迷幻/致幻风格：
  • Flexi, martin + geiss - dedicated to the sherwin maxawow
  • Rovastar - Fractopia
舒缓/放松风格：
  • Flexi - predator-prey-spirals
  • Geiss - Cosmic Strings 2
高能量风格：
  • Flexi + Martin - disconnected
  • shifter - tumbling cubes

Integration Checklist

集成检查清单

  • AudioContext created and resumed on user interaction
  • AnalyserNode connected to audio source
  • Canvas sized correctly (account for devicePixelRatio)
  • Render loop with requestAnimationFrame
  • Cleanup on unmount (cancelAnimationFrame)
  • Preset loading with blend time
  • Resize handling
  • Full-screen support with ESC to exit
  • Track info overlay (z-index above canvas)
  • Cursor hiding after inactivity
  • 创建AudioContext并在用户交互时恢复
  • 将AnalyserNode连接到音频源
  • 正确设置Canvas尺寸（考虑devicePixelRatio）
  • 使用requestAnimationFrame实现渲染循环
  • 卸载时清理（调用cancelAnimationFrame）
  • 加载预设并设置过渡时间
  • 处理窗口resize事件
  • 支持全屏模式，按ESC退出
  • 曲目信息覆盖层（z-index高于Canvas）
  • 闲置后隐藏光标

Performance Tips

性能优化技巧

  1. Lower texture ratio for older GPUs: 
    textureRatio: 0.5
  2. Reduce fftSize if not needed: 512 or 1024 vs 2048
  3. Use 
    will-change: transform
     on canvas
  4. Avoid DOM updates during render loop
  5. Profile with Chrome DevTools GPU timeline
  1. 降低纹理比例适配旧GPU：
    textureRatio: 0.5
  2. 按需减小fftSize：512或1024，而非2048
  3. 为Canvas添加
    will-change: transform
  4. 渲染循环中避免DOM更新
  5. 使用Chrome DevTools GPU时间线分析性能

References

参考资料

→ 
references/butterchurn-guide.md
- Complete Butterchurn integration → 
references/web-audio-fft.md
- FFT extraction and frequency analysis → 
references/glsl-shaders.md
- Audio-reactive shader patterns
This skill covers: Butterchurn/Milkdrop | Web Audio FFT | GLSL shaders | Full-screen visualization | Audio-reactive art
→ 
references/butterchurn-guide.md
- 完整Butterchurn集成指南 → 
references/web-audio-fft.md
- FFT提取与频率分析 → 
references/glsl-shaders.md
- 音频响应式着色器模式
本技能涵盖：Butterchurn/Milkdrop | Web Audio FFT | GLSL着色器 | 全屏可视化 | 音频响应式艺术