SHADER ART WORLD
Inside a living procedural rendering engine.
WebGL
GLSL
Procedural
Section 02
Live Shader Playground
Edit GLSL fragment shader code — canvas recompiles in real time. Choose a preset or write your own.
-- fps
1.00
1.50
0.00
Section 03
SDF Shape Renderer
Signed Distance Functions define shapes mathematically. Every pixel tests its distance to the shape boundary — negative inside, positive outside.
0.015
0.50
0.50
Section 04
Procedural Texture Explorer
Six noise algorithms rendered in real time. Click any cell to expand with full controls and algorithm code.
Value Noise
Gradient (Perlin)
Simplex Noise
Worley / Cellular
FBM
Turbulence
4
0.50
2.00
3.00
0.30
Section 05
Feedback Distortion System
Ping-pong canvas buffers. Each frame is drawn into the previous frame — slight zoom, rotation, and decay create infinite visual recursion.
1.006
0.008
0.940
1.2°
0.0
0.0
Section 06
Audiovisual Shader Reactions
A simulated 32-band FFT drives the fragment shader in real time. Bass controls brightness, mids rotate hue, highs inject grain.
120
1.00
Section 07
Realtime Shader Gallery
Eight distinct generative algorithms, all running continuously. Scroll to explore.
Electric Arcs
Branching lightning from center — random walk with angle drift.
Lissajous Curves
Parametric XY oscillators evolving phase and frequency ratio.
Reaction-Diffusion
Gray-Scott approximation — emergent spots and stripes.
Polar Rose
r = cos(n·θ) — petal count morphing continuously.
Spiral Galaxy
Archimedean spiral with noise-displaced particles.
Cellular Automaton
Game of Life variant on a grid — emergent gliders.
Perlin Worm
Noise-driven path traces — organic directional drift.
Interference Pattern
Two oscillating point sources — constructive/destructive.
Section 08
Notable Artists
The figures who defined shader art as a discipline — their techniques, landmark works, and tools.
Inigo Quilez
SDF · Raymarching · Domain Warping
"Snail", "Happy Jumping", "Rainforest" — technically precise, aesthetically luminous. Defined the grammar of modern shader art.
Shadertoy · GLSL · C++
Shadertoy / Beautypi
Platform · Community · Live Coding
The central platform for GLSL art since 2013. Real-time shader editing in browser — democratized GPU art for thousands.
WebGL · GLSL ES
Robert Hodgin
Particle Systems · Physics Simulation
"Flight404" — pioneering Processing and GLSL work in fluid dynamics and particle visualization. Defined the generative aesthetic of the 2000s.
Processing · GLSL · Cinder
Casey Reas
Generative Systems · Process Art
Co-created Processing. "Software Structures" — computational art as conceptual practice. Where Bauhaus meets the GPU.
Processing · Java · GLSL
Zach Lieberman
OpenFrameworks · Live Performance
Daily sketches exploring gesture, typography, and space. Co-creator of openFrameworks. Performance-driven creative coding.
openFrameworks · GLSL · C++
Char Davies
Immersive VR · Breath Interface
"Osmose" (1995) — immersive virtual environment navigated by breath and balance. Poetic shader-rendered forests and water.
SGI · Custom GLSL · VR
Memo Akten
Neural Shaders · Deep Visual Systems
"Learning to See" — neural network trained on one dataset renders another. Shader aesthetics merged with AI inference in real time.
GLSL · Python · openFrameworks
Kim Asendorf
Pixel Sorting · Glitch · Net Art
"Pixel Sorting" — the defining glitch aesthetic of the 2010s. Custom pixel-sorting algorithms applied as real-time shader effects.
Processing · GLSL · Java
Section 09
Glossary
24 essential terms — from pipeline fundamentals to advanced rendering concepts.
Fragment Shader
Runs once per pixel during rasterization. Outputs a final color vec4(r,g,b,a). The primary arena for all shader art — a pure function from position to color.
Vertex Shader
Executes once per vertex. Transforms 3D positions to screen space. In fullscreen shader art, operates on a simple 2-triangle quad covering the viewport.
GLSL
OpenGL Shading Language. C-like language for writing GPU programs. Built-in vector types (vec2, vec3, vec4), math functions (sin, cos, mix, smoothstep). Runs on the GPU.
UV Coordinates
Normalized 2D space (0.0–1.0) mapping texture to surface. The fundamental coordinate system for shader art. Often remapped to (-1, +1) for centered math.
SDF (Signed Distance Function)
f(p) returns signed distance to a shape surface — negative inside, zero on surface, positive outside. Enables precise shapes, boolean ops, and smooth blending.
FBM (Fractional Brownian Motion)
Summed noise octaves: Σ amplitude×noise(p×frequency^i). Decreasing amplitude, increasing frequency creates natural-looking terrain, clouds, turbulence.
Voronoi
Diagram partitioning space into regions by nearest seed point. Distance to nearest point creates cellular textures — stone, soap bubbles, organic surfaces.
Noise
Pseudo-random continuous function — unlike hash(), noise has spatial coherence. Every shader noise (Perlin, Simplex, Worley) builds on this concept.
Perlin Noise
Ken Perlin's 1985 gradient noise. Smooth, controllable, continuous. Foundation of procedural texture generation for 40 years.
Simplex Noise
Perlin's 2001 improvement. Triangular simplex grid — fewer directional artifacts, lower complexity in higher dimensions. Preferred for most applications.
Worley Noise
Steven Worley's cellular noise (1996). Distance to nearest random point produces cells. Used for stone, reptile scales, cells, biological surfaces.
Smoothstep
GLSL built-in: smooth cubic Hermite between two values. smoothstep(a,b,x) → 0 below a, 1 above b, smooth S-curve between. Fundamental for shape anti-aliasing.
Mix
Linear interpolation: mix(a,b,t) = a*(1-t)+b*t. The most-used GLSL function. Blending colors, values, and entire visual systems.
Uniform
CPU→GPU variable, constant across all fragments in a draw call. Common: u_time (animation), u_resolution, u_mouse. The interface between app and shader.
Varying
Data interpolated from vertex shader to fragment shader. UV coordinates are varyings — smoothly interpolated across each triangle's surface.
WebGL
Browser GPU API based on OpenGL ES 2.0. Exposes GLSL shader programming to JavaScript. Powers Shadertoy, Three.js, and all browser-based shader art.
GLSL ES
GLSL Embedded Systems — the subset used in WebGL. No geometry shaders, limited texture types. Version 1.00 for WebGL 1; version 3.00 for WebGL 2.
Raymarching
Rendering by advancing rays through SDF space. Step forward by f(p) each iteration — the SDF guarantees no geometry within that distance. Enables 3D in a fragment shader.
Feedback Loop
Reading the previous frame's render as input to the current frame. Creates decay, echo, trails, and complex temporal dynamics. Core of analog video synthesis.
Ping-Pong Buffer
Two framebuffers alternating roles as source and target. Enables feedback loops and multi-pass rendering in WebGL without sampling the render target.
Texture Sampler
GLSL uniform for reading texture data: texture2D(sampler, uv). Can sample images, noise textures, or previous frame renders. Foundation of multi-pass effects.
Normal Map
Encodes surface orientation in an RGB texture. In raymarching: computed as gradient of the SDF — normal = normalize(∇f(p)). Enables lighting without geometry.
Occlusion
Ambient occlusion: surfaces near other surfaces receive less ambient light. In SDF scenes: computed by sampling the SDF along the surface normal at multiple distances.
Procedural
Generated entirely from mathematical functions rather than sampled assets. No resolution limit, infinite variety, fully parameterizable. The defining characteristic of shader art.