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: hs-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:2122- Receives pixel position via `gl_FragCoord`23- Returns color via `gl_FragColor` (vec4: RGBA 0.0-1.0)24- Cannot communicate with other threads (stateless)2526## Standard Uniforms2728```glsl29uniform float u_time; // Elapsed seconds30uniform vec2 u_resolution; // Canvas size (width, height)31uniform vec2 u_mouse; // Mouse position in pixels32```3334Normalize coordinates: `vec2 st = gl_FragCoord.xy / u_resolution;`3536## Essential Functions3738| Function | Purpose | Example |39| --------------------- | ------------------ | ---------------------------- |40| `mix(a,b,t)` | Linear interpolate | `mix(red, blue, 0.5)` |41| `step(edge,x)` | Hard threshold | `step(0.5, st.x)` |42| `smoothstep(e0,e1,x)` | Smooth threshold | `smoothstep(0.2, 0.8, st.x)` |43| `fract(x)` | Fractional part | `fract(st * 3.0)` for tiling |44| `mod(x,y)` | Modulo | `mod(st.x, 0.25)` |45| `clamp(x,min,max)` | Constrain value | `clamp(col, 0.0, 1.0)` |46| `length(v)` | Vector magnitude | `length(st - 0.5)` |47| `distance(a,b)` | Euclidean distance | `distance(st, center)` |48| `dot(a,b)` | Dot product | `dot(normal, lightDir)` |49| `normalize(v)` | Unit vector | `normalize(direction)` |50| `atan(y,x)` | Angle (radians) | `atan(st.y-0.5, st.x-0.5)` |51| `sin/cos/pow/abs` | Math | Hardware-accelerated |5253## Quick Patterns5455**Circle:**5657```glsl58float d = distance(st, vec2(0.5));59float circle = 1.0 - smoothstep(0.2, 0.21, d);60```6162**Rectangle:**6364```glsl65vec2 bl = step(vec2(0.1), st);66vec2 tr = step(vec2(0.1), 1.0 - st);67float rect = bl.x * bl.y * tr.x * tr.y;68```6970**Tiling:**7172```glsl73st = fract(st * 4.0); // 4x4 grid74```7576**Animation:**7778```glsl79float wave = sin(st.x * 10.0 + u_time) * 0.5 + 0.5;80```8182## References (Progressive Disclosure)8384### Fundamentals8586- `references/glsl-fundamentals-data-types-vectors-precision-coordinates.md`87- `references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md`8889### Drawing9091- `references/glsl-colors-rgb-hsb-gradients-mixing-color-spaces.md`92- `references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md`93- `references/glsl-shapes-polygon-star-polar-sdf-combinations.md`9495### Procedural9697- `references/glsl-patterns-tiling-fract-matrices-transformations.md`98- `references/glsl-pattern-symmetry-truchet-domain-warping.md`99- `references/glsl-noise-random-perlin-simplex-cellular-voronoi.md`100- `references/glsl-cellular-voronoi-worley-noise-patterns.md`101- `references/glsl-fbm-fractional-brownian-motion-turbulence-octaves.md`102- `references/glsl-procedural-textures-clouds-marble-wood-terrain.md`103104### API Reference105106- `references/glsl-shader-builtin-functions-complete-api-reference.md`107108## Tools109110- **Online Editor:** editor.thebookofshaders.com111- **glslViewer:** CLI tool for running .frag files112- **glslCanvas:** HTML embed for live shaders113- **ShaderToy:** iTime, iResolution, iMouse uniforms114115## External Resources116117- The Book of Shaders: https://thebookofshaders.com118- LYGIA Library: https://lygia.xyz (reusable shader functions)119- ShaderToy: https://shadertoy.com120- Inigo Quilez Articles: https://iquilezles.org/articles/
danielleit241