ShaderBox — Live WebGL Playground
Write, test, and render GLSL fragment shaders directly in your browser with real-time compilation, uniform controls, and interactive tutorial tracks inspired by The Book of Shaders.
Live Sandbox Editor
WebGL 2.0 • 60 FPSCurated Tutorial Curriculum (MVP)
From the very first pixel to advanced lighting models. Complete each chapter interactively.
The First Pixel & GPU Pipeline
Understanding normalized UV coordinates and gl_FragColor.
Shaping Functions
Mastering step, smoothstep, sin, cos, and curve shaping.
Colors & Palettes
RGB, HSB color spaces, mix interpolation, and procedural gradients.
2D Signed Distance Fields (SDFs)
Circles, rectangles, polar shapes, and boolean operations.
Patterns & Space Partitioning
Tiling with fract, rotation matrices, and kaleidoscopic grids.
Randomness & 2D Hash Functions
Deterministic pseudo-random generation on the GPU.
Procedural Noise & fBm
Value noise, 2D Perlin noise, and Fractal Brownian Motion.
Fractals: Mandelbrot & Julia
Complex number iterations and escape-time algorithms.
Basic Lighting & Surface Normals
Flat, Gouraud, and Blinn-Phong lighting models on 2D/3D shapes.