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---56# GLSL Fragment Shaders78Write GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects.910## When to Use1112- Creating procedural textures (wood, marble, clouds, terrain)13- Drawing shapes with distance fields (SDF)14- Generating patterns, noise, gradients15- Building visual effects and animations16- Writing custom shaders for Three.js, WebGL, Processing1718## Core Concepts1920Fragment 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)2425## Standard Uniforms2627```glsl28uniform float u_time; // Elapsed seconds29uniform vec2 u_resolution; // Canvas size (width, height)30uniform vec2 u_mouse; // Mouse position in pixels31```3233Normalize coordinates: `vec2 st = gl_FragCoord.xy / u_resolution;`3435## Essential Functions3637| 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 |5152## Quick Patterns5354**Circle:**55```glsl56float d = distance(st, vec2(0.5));57float circle = 1.0 - smoothstep(0.2, 0.21, d);58```5960**Rectangle:**61```glsl62vec2 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```6667**Tiling:**68```glsl69st = fract(st * 4.0); // 4x4 grid70```7172**Animation:**73```glsl74float wave = sin(st.x * 10.0 + u_time) * 0.5 + 0.5;75```7677## References (Progressive Disclosure)7879### Fundamentals80- `references/glsl-fundamentals-data-types-vectors-precision-coordinates.md`81- `references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md`8283### Drawing84- `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`8788### Procedural89- `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`9596### API Reference97- `references/glsl-shader-builtin-functions-complete-api-reference.md`9899## Tools100101- **Online Editor:** editor.thebookofshaders.com102- **glslViewer:** CLI tool for running .frag files103- **glslCanvas:** HTML embed for live shaders104- **ShaderToy:** iTime, iResolution, iMouse uniforms105106## External Resources107108- The Book of Shaders: https://thebookofshaders.com109- LYGIA Library: https://lygia.xyz (reusable shader functions)110- ShaderToy: https://shadertoy.com111- Inigo Quilez Articles: https://iquilezles.org/articles/
phuc-nt