Shader lab
Build an audio-reactive GLSL visual
Turn browser-local microphone analysis into bass, mid, high, level, and beat uniforms, then shape those signals into a visual that stays playable.
- Filed
- Read
- 9 minutes
- Note
- 03 / 05
Start with a running surface
Add a surface, select it, then choose Bars from the shader gallery or create a Blank shader. Projektor stores the GLSL source with the project and recompiles edits as you type. A successful compile updates the live surface; an error is reported at the line that failed.
Turn on Audio and grant microphone permission. Projektor analyses the signal in the browser and feeds the shader continuously. Audio is not recorded or uploaded. If Audio is off, the audio uniforms stay at zero, so a shader that depends on them should still have a quiet visual state.
Know the five signals
The shader receives continuous bass, mid, high, and overall level values, plus a beat pulse. These are control signals, not samples of the waveform. Use the bands for motion that should follow the texture of the sound, and use the beat pulse for short accents.
Sensitivity in the Audio controls scales the analyser response. Set it against the real source and room before tuning thresholds in code. A threshold written for a quiet laptop microphone can sit permanently on when it meets a loud mixer feed.
- uAudioBass: low-frequency energy for scale, weight, or large movement.
- uAudioMid: useful for the body of vocals, synths, and percussion.
- uAudioHigh: fast detail, edges, sparks, and fine modulation.
- uAudioLevel: broad energy when the visual should follow overall loudness.
- uAudioBeat: a short pulse for discrete flashes or state changes.
Write a stable response before a dramatic one
Raw energy mapped directly to full-screen brightness tends to flicker and exhaust the image. Start with a narrow role for each band. Let bass move a broad shape, let high frequencies reveal a small edge, and reserve the beat for an accent that decays visually through the rest of the shader.
Functions such as smoothstep and mix help turn a noisy control range into an intentional transition. Always clamp values that can combine beyond the range you expect, especially when several bands contribute to one color.
#version 300 es
precision highp float;
uniform vec2 uResolution;
uniform float uTime;
uniform float uAudioBass;
uniform float uAudioHigh;
uniform float uAudioBeat;
out vec4 outColor;
void main() {
vec2 uv = gl_FragCoord.xy / uResolution;
float bass = smoothstep(0.12, 0.72, uAudioBass);
float wave = sin((uv.x * 10.0) + uTime * 1.5) * 0.08;
float band = 1.0 - smoothstep(0.01, 0.045, abs(uv.y - 0.5 - wave));
float detail = smoothstep(0.3, 0.9, uAudioHigh);
vec3 lime = vec3(0.760, 0.968, 0.243);
vec3 cyan = vec3(0.129, 0.902, 1.0);
vec3 color = mix(lime, cyan, detail) * band * (0.2 + bass);
color += lime * uAudioBeat * 0.35;
outColor = vec4(color, 1.0);
}Compose for projection, not only the monitor
A projector cannot emit black. In a dark room, black is the material itself, which makes sparse bright graphics especially effective. Keep large regions near zero and spend brightness on edges or forms that describe the mapped object.
Test Add or Screen blending when the shader sits above another surface. Check the result on the projector because haze, wall color, throw distance, and ambient light all compress contrast differently from the laptop panel.
Make the shader playable
Once the visual behaves across quiet and loud material, capture it inside a Look. You can bind surface opacity or color adjustments to a MIDI fader, then place alternate shader states in neighboring Looks for pad recall.
Beat sync can advance the cue list on every first, second, or fourth detected beat. That is useful for a repeatable sequence, but it should be rehearsed against the source. For moments that need judgment, keep manual Go and Back control available.