WebGL Shader Playground

A fragment shader editor that runs your GLSL live on the GPU. Pick a preset, tweak the uniforms, or open the code editor and write your own — compile errors show up inline so you can iterate quickly.

What's in it

• Four presets: mouse-reactive ripples, a polar-coordinate fractal spiral, a classic plasma field, and animated Voronoi cells
• Live editing: edit the fragment shader source and recompile with one click; GLSL compile and link errors are surfaced in the preview
• Uniform controls: intensity, speed, and base color sliders wired to shader uniforms in real time
• Mouse interaction: cursor position is passed as uMouse, so shaders can react to pointer movement
• FPS counter to see what your shader costs, and export to download your shader + uniform settings as JSON

How it works

The playground is raw WebGL — no Three.js. A fullscreen quad (two triangles) is drawn every frame, and all the visual work happens in the fragment shader. Each recompile builds a fresh program, and the previous program and geometry buffer are explicitly deleted so repeated edits don't leak GPU memory.

precision mediump float;

uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uMouse;

void main() {
    vec2 uv = gl_FragCoord.xy / uResolution.xy;
    vec2 mouse = uMouse / uResolution.xy;

    // Ripples radiating from the cursor
    float dist = distance(uv, mouse);
    float wave = sin(dist * 20.0 - uTime * 2.0) * 0.1;

    gl_FragColor = vec4(vec3(0.2, 0.6, 1.0) + wave, 1.0);
}

Things to try

• Open Edit Code and change the 20.0 frequency in the ripple preset — small constants make big visual differences
• Break the shader on purpose to see the compile error reporting
• Push the Voronoi preset's intensity up and watch the cell borders sharpen
• Write a signed-distance-function shape from scratch — the uTime and uMouse uniforms are already plumbed through