Shader Playground

Write GLSL fragment shaders and watch them render live on the GPU. Pick a starter template, edit the code, and see the result update instantly. All processing runs in your browser via WebGL.

How It Works

GLSL fragment shaders run on the GPU. Every pixel on the canvas calls your main() function independently, setting gl_FragColor (a vec4 of RGBA values from 0 to 1). Because thousands of pixels execute in parallel, complex visuals can render at 60fps.

Three uniforms feed data into your shader each frame. u_resolution is the canvas size in pixels. u_time counts seconds since the shader started. u_mouse is the cursor position in pixels (origin at bottom-left). Normalize UV coordinates with gl_FragCoord.xy / u_resolution.

The playground uses TWGL.js to manage WebGL state and a full-screen quad as the drawing surface. Compilation errors appear below the editor with GLSL-native line numbers. Auto mode recompiles after a short pause while you type. Toggle it off to compile manually.