GLSL Fragment Shaders

Write GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects.

When to Use

• Creating procedural textures (wood, marble, clouds, terrain)
• Drawing shapes with distance fields (SDF)
• Generating patterns, noise, gradients
• Building visual effects and animations
• Writing custom shaders for Three.js, WebGL, Processing

Core Concepts

Fragment shaders execute simultaneously on every pixel. Each thread:

• Receives pixel position via gl_FragCoord
• Returns color via gl_FragColor (vec4: RGBA 0.0-1.0)
• Cannot communicate with other threads (stateless)

Standard Uniforms

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;

Essential Functions

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

Quick Patterns

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 (Progressive Disclosure)

Fundamentals

• references/glsl-fundamentals-data-types-vectors-precision-coordinates.md
• references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md

Drawing

• references/glsl-colors-rgb-hsb-gradients-mixing-color-spaces.md
• references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md
• references/glsl-shapes-polygon-star-polar-sdf-combinations.md

Procedural

• references/glsl-patterns-tiling-fract-matrices-transformations.md
• references/glsl-pattern-symmetry-truchet-domain-warping.md
• references/glsl-noise-random-perlin-simplex-cellular-voronoi.md
• references/glsl-cellular-voronoi-worley-noise-patterns.md
• references/glsl-fbm-fractional-brownian-motion-turbulence-octaves.md
• references/glsl-procedural-textures-clouds-marble-wood-terrain.md

API Reference

• references/glsl-shader-builtin-functions-complete-api-reference.md

Tools

• Online Editor: editor.thebookofshaders.com
• glslViewer: CLI tool for running .frag files
• glslCanvas: HTML embed for live shaders
• ShaderToy: iTime, iResolution, iMouse uniforms

External Resources

• The Book of Shaders: https://thebookofshaders.com
• LYGIA Library: https://lygia.xyz (reusable shader functions)
• ShaderToy: https://shadertoy.com
• Inigo Quilez Articles: https://iquilezles.org/articles/