2000年代音乐可视化专家 是做什么的？
精通使用现代WebGL和Web Audio API重现传奇的2000年代音乐可视化时代——Milkdrop、AVS、Geiss。
何时使用
✅ 适用于：
- 实现Milkdrop风格的迷幻可视化效果
- Butterchurn库集成（WebGL版Milkdrop）
- Web Audio API AnalyserNode的FFT/波形提取
- 用于音频响应效果的GLSL片段着色器
- 全屏沉浸式音乐体验
- 实时节拍检测和音频分析
- 预设系统和可视化过渡
❌ 不适用于：
- 简单的频谱柱状图（使用Canvas 2D）
- 静态音频波形显示
- 视频编辑或处理
- 非音频生成艺术
- 音频播放/流媒体问题（使用音频工程师技能）
黄金时代（概述）
| 时代 | 关键软件 | 创新 |
|---|---|---|
| 1998-2000 | Geiss | 简单等离子效果，DirectX |
| 2001-2007 | Milkdrop 1 & 2 | 逐像素方程，预设系统 |
| 2007-2015 | 衰落 | 流媒体服务兴起 |
| 2018-至今 | Butterchurn | WebGL复兴 |
Milkdrop的魔力：将简单效果（模糊、缩放、旋转、色彩偏移）与音频响应参数分层叠加。
→ 参见 references/butterchurn-guide.md 了解完整历史和集成方法。
核心技术
Butterchurn（WebGL版Milkdrop）
- GitHub星标1.7k，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); // 2秒混合过渡
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 bin是线性的，但人耳听觉是对数的！请使用对数映射。
→ 参见 references/web-audio-fft.md 了解频带提取方法。
GLSL着色器
将音频数据作为1D纹理传递，使用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 bin是线性的；前100个bin可能只覆盖0-2kHz 修复：使用对数bin映射（代码见参考资料）
3. 无平滑处理
表现：画面抖动，易引发癫痫
原因：原始FFT数据帧间噪音大
修复：analyserNode.smoothingTimeConstant = 0.7
4. 使用requestAnimationFrame但未清理
表现：内存泄漏，多个渲染循环
修复：存储动画ID，在组件卸载时调用 cancelAnimationFrame
5. 硬编码Canvas尺寸
表现：在Retina屏幕上模糊，宽高比错误
修复：乘以 devicePixelRatio，处理resize事件
6. 阻塞主线程
表现：音频卡顿，帧率下降 原因：在UI线程上进行繁重的着色器编译 修复：在加载时编译着色器，而非播放期间
预设推荐
迷幻/致幻风格：
Flexi, martin + geiss - dedicated to the sherwin maxawowRovastar - Fractopia
柔和/放松风格：
Flexi - predator-prey-spiralsGeiss - Cosmic Strings 2
高能量风格：
Flexi + Martin - disconnectedshifter - tumbling cubes
集成检查清单
- AudioContext已创建并在用户交互时恢复
- AnalyserNode已连接到音频源
- Canvas尺寸正确（考虑 devicePixelRatio）
- 使用 requestAnimationFrame 的渲染循环
- 组件卸载时清理（cancelAnimationFrame）
- 带混合时间的预设加载
- 处理resize事件
- 全屏支持，ESC退出
- 曲目信息叠加层（z-index高于canvas）
- 鼠标闲置后隐藏光标
性能提示
- 降低纹理比例以适应旧GPU：
textureRatio: 0.5 - 减少fftSize如果不需要：512或1024替代2048
- 在canvas上使用
will-change: transform - 渲染循环期间避免DOM更新
- 使用Chrome DevTools GPU时间线进行分析
参考资料
→ references/butterchurn-guide.md - 完整的Butterchurn集成
→ references/web-audio-fft.md - FFT提取和频率分析
→ references/glsl-shaders.md - 音频响应着色器模式
本技能涵盖：Butterchurn/Milkdrop | Web Audio FFT | GLSL着色器 | 全屏可视化 | 音频响应艺术