2000s-visualization-expert

2000 年代音乐可视化专家

擅长使用现代 WebGL 和 Web Audio API 重现 2000 年代传奇音乐可视化时代的效果——Milkdrop、AVS、Geiss。

适用场景

✅ 适用于：

• 实现 Milkdrop 风格的迷幻可视化效果
• 集成 Butterchurn 库（WebGL Milkdrop）
• 使用 Web Audio API AnalyserNode 提取 FFT／波形数据
• 编写用于音频响应效果的 GLSL 片段着色器
• 打造沉浸式全屏音乐体验
• 实时节拍检测和音频分析
• 预设系统和可视化效果过渡

❌ 不适用于：

• 简单的频谱柱状图（使用 Canvas 2D）
• 静态音频波形显示
• 视频编辑或处理
• 非音频生成艺术
• 音频播放／流媒体问题（使用 audio-engineer skills）

黄金时代（概述）

时代	主要软件	创新
1998-2000	Geiss	简单的等离子效果、DirectX
2001-2007	Milkdrop 1 & 2	逐像素方程、预设系统
2007-2015	衰退期	流媒体服务兴起
2018 至今	Butterchurn	WebGL 复兴

Milkdrop 的魅力：将模糊、缩放、旋转、色彩偏移等简单效果叠加，并让参数响应音频。

→ 查看 references/butterchurn-guide.md，了解完整历史和集成方式。

核心技术

Butterchurn（WebGL Milkdrop）

• 1.7k 个 GitHub 星标，采用 MIT 许可证
• 与原版 Milkdrop 的预设完全兼容
• npm 包：butterchurn、butterchurn-presets

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

Web Audio API FFT

const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.8;
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);

重要：FFT 频率箱是线性分布的，但人耳听觉是对数分布的！请使用对数映射。

→ 查看 references/web-audio-fft.md，了解如何提取频段。

GLSL 着色器

将音频数据作为一维纹理传入，并使用 uniform 表示低音／中音／高音：

uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);

→ 查看 references/glsl-shaders.md，了解完整模式。

应避免的反模式

1. 忽略 AudioContext 状态

表现：可视化无声无息地失败
问题所在：AudioContext 初始处于挂起状态，需要用户交互才能启动
解决方法：点击时恢复：await audioContext.resume()

2. 线性频率显示

表现：低音占据主导，高音无法显示
问题所在：FFT 频率箱是线性分布的；前 100 个频率箱可能对应 0-2kHz
解决方法：使用对数频率箱映射（代码见参考资料）

3. 不进行平滑处理

表现：画面抖动，可能引发癫痫
问题所在：原始 FFT 数据在不同帧之间有噪声
解决方法：analyserNode.smoothingTimeConstant = 0.7

4. 使用 requestAnimationFrame 但不清理

表现：内存泄漏、出现多个渲染循环
解决方法：保存动画 ID，在卸载时调用 cancelAnimationFrame

5. 将 Canvas 尺寸硬编码

表现：视网膜屏幕上画面模糊，宽高比错误
解决方法：乘以 devicePixelRatio，并处理尺寸调整事件

6. 阻塞主线程

表现：音频卡顿、丢帧
问题所在：在 UI 线程上进行繁重的着色器编译
解决方法：在加载期间编译着色器，而不是播放期间

预设推荐

迷幻／令人沉醉：

• Flexi, martin + geiss - dedicated to the sherwin maxawow
• Rovastar - Fractopia

平滑／放松：

• Flexi - predator-prey-spirals
• Geiss - Cosmic Strings 2

高能量：

• Flexi + Martin - disconnected
• shifter - tumbling cubes

集成检查清单

• 创建 AudioContext，并在用户交互时恢复
• 将 AnalyserNode 连接到音频源
• 正确设置 Canvas 尺寸（考虑 devicePixelRatio）
• 使用 requestAnimationFrame 创建渲染循环
• 在卸载时清理（调用 cancelAnimationFrame）
• 加载预设并设置混合时间
• 处理尺寸调整
• 支持全屏，并可按 ESC 退出
• 显示曲目信息覆盖层（z-index 高于 Canvas）
• 鼠标光标在无操作一段时间后隐藏

性能提示

1. 对较旧的 GPU 降低纹理比例：textureRatio: 0.5
2. 如果不需要，可减小 fftSize：使用 512 或 1024，而不是 2048
3. 在 canvas 上使用 will-change: transform
4. 渲染循环期间避免更新 DOM
5. 使用 Chrome DevTools GPU 时间线进行性能分析

参考资料

→ references/butterchurn-guide.md - Butterchurn 集成完整指南 → references/web-audio-fft.md - FFT 提取和频率分析 → references/glsl-shaders.md - 音频响应型着色器模式

---

此技能涵盖：Butterchurn/Milkdrop | Web Audio FFT | GLSL 着色器 | 全屏可视化 | 音频响应型艺术