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.mdreferences/glsl-shaping-functions-step-smoothstep-curves-interpolation.md
Drawing
references/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.md
Procedural
references/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.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
1---2name: ck-shader3description: 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.4---5
6# GLSL Fragment Shaders
7
8Write GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects.
9
10## When to Use
11
12- Creating procedural textures (wood, marble, clouds, terrain)
13- Drawing shapes with distance fields (SDF)
14- Generating patterns, noise, gradients
15- Building visual effects and animations
16- Writing custom shaders for Three.js, WebGL, Processing
17
18## Core Concepts
19
20Fragment shaders execute **simultaneously on every pixel**. Each thread:
21- Receives pixel position via `gl_FragCoord`
22- Returns color via `gl_FragColor` (vec4: RGBA 0.0-1.0)
23- Cannot communicate with other threads (stateless)
24
25## Standard Uniforms
26
27```glsl
28uniform float u_time; // Elapsed seconds
29uniform vec2 u_resolution; // Canvas size (width, height)
30uniform vec2 u_mouse; // Mouse position in pixels
31```
32
33Normalize coordinates: `vec2 st = gl_FragCoord.xy / u_resolution;`
34
35## Essential Functions
36
37| Function | Purpose | Example |
38|----------|---------|---------|
39| `mix(a,b,t)` | Linear interpolate | `mix(red, blue, 0.5)` |
40| `step(edge,x)` | Hard threshold | `step(0.5, st.x)` |
41| `smoothstep(e0,e1,x)` | Smooth threshold | `smoothstep(0.2, 0.8, st.x)` |
42| `fract(x)` | Fractional part | `fract(st * 3.0)` for tiling |
43| `mod(x,y)` | Modulo | `mod(st.x, 0.25)` |
44| `clamp(x,min,max)` | Constrain value | `clamp(col, 0.0, 1.0)` |
45| `length(v)` | Vector magnitude | `length(st - 0.5)` |
46| `distance(a,b)` | Euclidean distance | `distance(st, center)` |
47| `dot(a,b)` | Dot product | `dot(normal, lightDir)` |
48| `normalize(v)` | Unit vector | `normalize(direction)` |
49| `atan(y,x)` | Angle (radians) | `atan(st.y-0.5, st.x-0.5)` |
50| `sin/cos/pow/abs` | Math | Hardware-accelerated |
51
52## Quick Patterns
53
54**Circle:**
55```glsl
56float d = distance(st, vec2(0.5));
57float circle = 1.0 - smoothstep(0.2, 0.21, d);
58```
59
60**Rectangle:**
61```glsl
62vec2 bl = step(vec2(0.1), st);
63vec2 tr = step(vec2(0.1), 1.0 - st);
64float rect = bl.x * bl.y * tr.x * tr.y;
65```
66
67**Tiling:**
68```glsl
69st = fract(st * 4.0); // 4x4 grid
70```
71
72**Animation:**
73```glsl
74float wave = sin(st.x * 10.0 + u_time) * 0.5 + 0.5;
75```
76
77## References (Progressive Disclosure)
78
79### Fundamentals
80- `references/glsl-fundamentals-data-types-vectors-precision-coordinates.md`
81- `references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md`
82
83### Drawing
84- `references/glsl-colors-rgb-hsb-gradients-mixing-color-spaces.md`
85- `references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md`
86- `references/glsl-shapes-polygon-star-polar-sdf-combinations.md`
87
88### Procedural
89- `references/glsl-patterns-tiling-fract-matrices-transformations.md`
90- `references/glsl-pattern-symmetry-truchet-domain-warping.md`
91- `references/glsl-noise-random-perlin-simplex-cellular-voronoi.md`
92- `references/glsl-cellular-voronoi-worley-noise-patterns.md`
93- `references/glsl-fbm-fractional-brownian-motion-turbulence-octaves.md`
94- `references/glsl-procedural-textures-clouds-marble-wood-terrain.md`
95
96### API Reference
97- `references/glsl-shader-builtin-functions-complete-api-reference.md`
98
99## Tools
100
101- **Online Editor:** editor.thebookofshaders.com
102- **glslViewer:** CLI tool for running .frag files
103- **glslCanvas:** HTML embed for live shaders
104- **ShaderToy:** iTime, iResolution, iMouse uniforms
105
106## External Resources
107
108- The Book of Shaders: https://thebookofshaders.com
109- LYGIA Library: https://lygia.xyz (reusable shader functions)
110- ShaderToy: https://shadertoy.com
111- Inigo Quilez Articles: https://iquilezles.org/articles/
majiayu000