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/