Shader editor

Fragment Shaders

A fragment shader is a small program that runs on the GPU for every pixel on screen. It receives the pixel coordinate (gl_FragCoord) and outputs a color (gl_FragColor). Because the GPU runs thousands of these in parallel, complex mathematical patterns render in real time.

Uniforms

Uniforms are values passed from JavaScript to the shader each frame. Here we provide u_time (seconds since start) for animation and u_resolution (canvas dimensions in pixels) so the shader can normalize coordinates. When audio mode is enabled, u_bass, u_mid, and u_treble provide real-time FFT frequency data from your microphone.

The Rendering Pipeline

A full-screen quad (two triangles) is drawn each frame. The vertex shader positions the quad to cover the entire canvas. The fragment shader then computes the color for each pixel. JavaScript updates the uniforms and calls requestAnimationFrame to keep the loop running at display refresh rate.