黄油搅拌机：浏览器里的 MilkDrop
Butterchurn，Jordan Berg，2018 年
正在布展…
它是怎么做的
- 第 1 步Web Audio 的 AnalyserNode 提供频谱与波形，计算 bass/mid/treb 等节拍变量
- 第 2 步每个预设包含逐帧方程和逐顶点方程，原本是 MilkDrop 的表达式语言，被转译成 JS
- 第 3 步核心是一张“上一帧”纹理：通过网格变形（缩放、旋转、扭曲）重新采样，形成无限反馈
- 第 4 步预设里的 HLSL warp/comp 着色器被转换为 GLSL，再叠加波形、形状与模糊层
- 第 5 步预设之间用像素级混合做平滑过渡
复刻配方
一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。
Keep two framebuffers and each frame render the previous frame through a coarse grid mesh whose vertex UVs are offset by zoom, rotation and a per-vertex warp equation. Drive those equations with audio features from an AnalyserNode (bass, mid and treble energy relative to their running average). Draw the waveform and simple shapes on top, then run a composite shader that adds colour shifts, blur and gamma. Swap buffers so the image feeds back into itself, which creates the characteristic tunnels and smears. Crossfade two presets by rendering both and lerping their outputs.
