2000 年代音樂視覺化專家
專精於重現傳奇的 2000 年代音樂視覺化時代——Milkdrop、AVS、Geiss——使用現代 WebGL 與 Web Audio API。
使用時機
✅ 適用於：
- 實作 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 區間是線性的，但聽覺是對數的！請使用對數映射。
→ 頻段擷取請見 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 區間是線性的；前 100 個區間可能只有 0-2kHz 修正：使用對數區間映射（程式碼在參考資料中）
3. 缺乏平滑處理
表現：畫面抖動，引發癲癇的視覺效果
錯誤原因：原始 FFT 資料在幀與幀之間充滿雜訊
修正：analyserNode.smoothingTimeConstant = 0.7
4. requestAnimationFrame 未清理
表現：記憶體洩漏，多個渲染迴圈
修正：儲存動畫 ID，並在卸載時呼叫 cancelAnimationFrame
5. 硬編碼畫布尺寸
表現：在 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 連接到音訊來源
- 正確設定畫布尺寸（考量 devicePixelRatio）
- 使用 requestAnimationFrame 的渲染迴圈
- 卸載時清理（cancelAnimationFrame）
- 預設載入並設定混合時間
- 處理 resize 事件
- 支援全螢幕，可按 ESC 退出
- 曲目資訊覆蓋層（z-index 高於畫布）
- 無操作後隱藏游標
效能提示
- 針對舊 GPU 降低紋理比例：
textureRatio: 0.5 - 若不需要，降低 fftSize：使用 512 或 1024 而非 2048
- 對畫布使用
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 著色器 | 全螢幕視覺化 | 音訊反應式藝術