ShaderBox — GLSL Playground
Learn fragment shaders from first principles to physically-based rendering. Every chapter features interactive live WebGL sandboxes, mathematical derivations, and hands-on exercises inspired by The Book of Shaders.
Live Sandbox Playground
Select a preset shader or write your own GLSL code with real-time sliders and parameters.
Curriculum Roadmap & Tracks
Explore individual chapters step-by-step or jump directly into advanced topics.
Series A — Shader Basics
Fundamental building blocks of fragment shaders: coordinates, mathematical shaping functions, color spaces, signed distance fields, patterns, noise, and complex fractals.
The First Pixel & GPU Pipeline
Normalized UV coordinates, gl_FragCoord, and screen rasterization.
Shaping Functions
step, smoothstep, sin, cos, and curve shaping.
Colors & Palettes
RGB, HSB color spaces, mix interpolation, and cosine palettes.
Shapes & Signed Distance Fields
Signed distance fields (SDFs), circles, boxes, and boolean CSG blending.
Repeating Patterns & Tiling
Tiling coordinates with fract, cell indexing, and periodic geometric structures.
Procedural Randomness & Hashes
Stateless pseudo-random number generation in massively parallel shaders.
Procedural Noise & FBM
Value noise, multi-octave synthesis (FBM), and domain warping.
Complex Fractals: Mandelbrot & Julia
Complex arithmetic, escape-time algorithms, and smooth cosine coloring.
Meta Variables & Editor Directives
Controlling refresh rates, auto-play, and compilation behavior with comment directives.
Series B — Technical Concepts
Essential graphics programming principles: anti-aliasing with derivatives, interpolation curves, classical illumination models, and normal perturbation.
Aliasing & Anti-aliasing
Screen-space derivatives with fwidth, sub-pixel smoothing, and SDF filtering.
Interpolation Techniques
Linear (LERP), bilinear, Hermite smoothstep, and quintic curve interpolation.
Classical Lighting: Lambert & Blinn-Phong
Surface normals, diffuse Lambertian reflection, Blinn-Phong specular highlights.
Normal Mapping & Surface Perturbation
Tangent space, heightmaps, derivative bump mapping, and normal perturbation.
Series C — Physically-Based Rendering (PBR)
Modern microfacet theory: Cook-Torrance BRDF, GGX normal distribution, Schlick Fresnel, and metallic-roughness parameterization.
PBR Primer: Microfacets & BRDF
Cook-Torrance microfacet BRDF, GGX distribution, Schlick Fresnel, and Smith shadowing.
Metallic-Roughness PBR Pipeline
Dielectrics vs conductors, $F_0$ base reflectance parameterization, and PBR shaders.
Series D — Raymarching & 3D Signed Distance Fields
Sphere tracing algorithms, 3D primitive distance functions, constructive solid geometry (CSG), and soft shadow marching.
Raymarching 101 & Sphere Tracing
Camera ray generation, marching loop, step bounds, and primitive spheres.
3D CSG, Primitive Combinations & Blending
Torus, cylinder, box SDFs, infinite repetition, and smooth polynomial unions.
3D Surface Normals, Soft Shadows & Ambient Occlusion
Tetrahedron normal estimation, raymarched penumbra soft shadows, and step-based AO.
Series E — Post-Processing & Screen-Space Effects
Full-screen post-processing passes: lens distortion, vignette, chromatic aberration, bloom thresholds, gaussian blurs, and ACES tonemapping.
Lens Distortion, Vignette & Chromatic Aberration
Barrel/pincushion optical distortion, radial vignetting, and wavelength RGB channel separation.
Bloom, Blur Passes & ACES Tonemapping
Luminance thresholds, separable blur kernels, and filmic ACES color grading.
Series F — Procedural Materials & Volumetrics
Advanced procedural synthesis: cellular Voronoi/Worley noise, reaction-diffusion modeling, procedural wood/marble, and raymarched volumetric fog.
Procedural Marble, Wood & Liquid Flow
Domain-warped turbulent noise, concentric rings, and velocity advection.
Cellular Noise (Worley / Voronoi) & Volumetric Fog
Nearest feature-point metrics, Delaunay cells, and raymarched density accumulation.