Speeding Up Webamp's Music Visualizer with WebAssembly / Jordan Eldredge
Webamp.org's visualizer, Butterchurn, now uses WebAssembly (Wasm) to achieve better performance and improved security. Whereas most projects use Wasm by compiling pre-existing native code to Wasm, Butterchurn uses an in-browser compiler to compile untrusted user-supplied code to fast and secure Wasm at runtime. This blog post details why we undertook this project, the challenges we faced, the solutions we found, and the performance and security wins they unlocked.
Webamp's visualizer is provided by Butterchurn, an open source JavaScript and WebGL implementation of Winamp's infamous Milkdrop music visualizer. Milkdrop's iconic visuals are the product of .milk "presets" which contain HLSL shader code and code written Eel, a language that Nullsoft invented. Milkdrop uses this code to convert audio signal into pixels.
Butterchurn originally worked by transpiling the HLSL shader code to WebGL code and transpiling the Eel code to JavaScript. The resulting code was then distributed as .json files from which Butterchurn could read the code and eval() it.
