Music Visualization Shader V2

07 June 2015

In this post I want to explain more about The music visualization shader I am using in my current free time project Velocity VX.

I decided to put it in shadertoy for fun. But I came across some other nice music visualizers in shadertoy and I am probably going to rewrite mine in Unity now.

But for now, here is what I did with this shader. The shader needs 2 texture Inputs One for the spectrum data and one for the Music map it can also use a ColorMap. The texture below on the right is the Music map(which I also use as Color map because it looked nice and I am lazy). In the blue color channel the sound sample channel is saved, and in the red color channel the frequency needed to activate the pixel is saved. The green channel is used to exclude parts of the texture. The texture below on the left is the spectrum data which actually only is 1 pixel in width. But I rendered it like this to display it better.


musicMap Music spectrum data

The first thing the shader does is read the sound sample channel(blue music map). Next it uses that channel to pick a location in the spectrum data texture to read the music frequency of that channel. Then it compares the music frequency with the frequency in the red color channel, and if it is higher then the pixel can be displayed.

Result (the background uses a noise texture as music map):

screenshot of music shader demo

Shader
Script That Updates The Spectrum Data Texture of the music shaders


Same methods used in ShaderToy (open in website for version with sound):


First Version.