Write GLSL fragment shaders for procedural graphics. Topics: shapes (SDF), patterns, noise (Perlin/simplex/cellular), fBm, colors (HSB/RGB), matrices, gradients, animations. Use for generative art, textures, visual effects, WebGL, Three.js shaders.
Write GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects.
Fragment shaders execute simultaneously on every pixel. Each thread:
gl_FragCoordgl_FragColor (vec4: RGBA 0.0-1.0)uniform float u_time; // Elapsed seconds
uniform vec2 u_resolution; // Canvas size (width, height)
uniform vec2 u_mouse; // Mouse position in pixels
Normalize coordinates: vec2 st = gl_FragCoord.xy / u_resolution;
| Function | Purpose | Example |
|---|---|---|
mix(a,b,t) | Linear interpolate | mix(red, blue, 0.5) |
step(edge,x) | Hard threshold | step(0.5, st.x) |
smoothstep(e0,e1,x) | Smooth threshold | smoothstep(0.2, 0.8, st.x) |
fract(x) | Fractional part | fract(st * 3.0) for tiling |
mod(x,y) | Modulo | mod(st.x, 0.25) |
clamp(x,min,max) | Constrain value | clamp(col, 0.0, 1.0) |
length(v) | Vector magnitude | length(st - 0.5) |
distance(a,b) | Euclidean distance | distance(st, center) |
dot(a,b) | Dot product | dot(normal, lightDir) |
normalize(v) | Unit vector | normalize(direction) |
atan(y,x) | Angle (radians) | atan(st.y-0.5, st.x-0.5) |
sin/cos/pow/abs | Math | Hardware-accelerated |
Circle:
float d = distance(st, vec2(0.5));
float circle = 1.0 - smoothstep(0.2, 0.21, d);
Rectangle:
vec2 bl = step(vec2(0.1), st);
vec2 tr = step(vec2(0.1), 1.0 - st);
float rect = bl.x * bl.y * tr.x * tr.y;
Tiling:
st = fract(st * 4.0); // 4x4 grid
Animation:
float wave = sin(st.x * 10.0 + u_time) * 0.5 + 0.5;
references/glsl-fundamentals-data-types-vectors-precision-coordinates.mdreferences/glsl-shaping-functions-step-smoothstep-curves-interpolation.mdreferences/glsl-colors-rgb-hsb-gradients-mixing-color-spaces.mdreferences/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.mdreferences/glsl-shapes-polygon-star-polar-sdf-combinations.mdreferences/glsl-patterns-tiling-fract-matrices-transformations.mdreferences/glsl-pattern-symmetry-truchet-domain-warping.mdreferences/glsl-noise-random-perlin-simplex-cellular-voronoi.mdreferences/glsl-cellular-voronoi-worley-noise-patterns.mdreferences/glsl-fbm-fractional-brownian-motion-turbulence-octaves.mdreferences/glsl-procedural-textures-clouds-marble-wood-terrain.mdreferences/glsl-shader-builtin-functions-complete-api-reference.md