The Code Therapy

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 ║ 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);
}