FFT Texture

The simplest possible audio visualizer to serve as an example of how to use the fftTexture uniform.

Created by marcogomez on Sun, 13 Jun 2021 16:00:18 GMT.


// ╔═════════════╦═════════════════╦════════════════╗
// ║ Marco Gomez ║ @TheCodeTherapy ║ https://mgz.me ║
// ╚═════════════╩═════════════════╩════════════════╝
precision highp float;

uniform sampler2D fftTexture;
uniform vec2 resolution;

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  uv.x = (uv.x - 0.5 > 0.0) ? uv.x - 0.5 : 0.5 - uv.x;
  uv *= 1.5;
  uv.y *= 1.2;
  const float bands = 64.0;
  const float segs = 32.0;
  vec2 p;
  p.x = floor(uv.x * bands) / bands;
  p.y = floor(uv.y * segs) / segs;
  float fftData  = texture2D(fftTexture, vec2(p.x, 0.0)).x;
  vec3 color = mix(vec3(0.0, 0.5, 2.0), vec3(0.7, 0.0, 0.9), sqrt(uv.y + 0.5));
  float mask = (p.y < fftData) ? 1.0 : 0.5;
  vec2 d = fract((uv - p) * vec2(bands, segs)) - 0.5;
  float led = smoothstep(0.5, 0.35, abs(d.x)) * smoothstep(0.75, 0.25, abs(d.y));
  vec3 ledColor = led * color * mask;
  ledColor.x = smoothstep(0.0, 1.0, ledColor.x);
  ledColor.x = smoothstep(0.0, 1.0, ledColor.x);
  ledColor.x = pow(abs(ledColor.x), 3.0);
  gl_FragColor = vec4(ledColor * ledColor, 1.0);
}