Shader Playground
Write GLSL fragment shaders and see them render in real time. GPU-powered procedural art in your browser.
✨
Describe a shader
- spinning ball
- ocean waves
- fire
- neon heart
- starfield
- rainbow noise
- glowing torus
- matrix rain
Runs locally
Presets
- Plasma Wave
- Mandelbrot Set
- Simplex Noise
- Hypnotic Rings
- Voronoi Cells
- Ray Marching Sphere
- Matrix Rain
- Fractal Julia
- Sunset Gradient
- Starfield
Fragment Shader
1
2
3
4
5
6
7
8
9
10
11
Preview
0 FPSUniforms
u_time:
0.00su_resolution:
0 x 0
How It Works
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.