t1k:web:3d:shader

Field	Value
Module	`3d`
Version	`1.7.0`
Effort	`medium`
Tools	—

Keywords: fragment-shader, glsl, procedural, shaders, webgl

How to invoke

/t1k:web:3d:shader
[effect or pattern]

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

License Note

GLSL shader patterns are based on mathematical techniques that are generally in the public domain. The Book of Shaders is CC BY-NC-SA 4.0 — reference it for learning but write your own implementations.

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/

Gotchas

WebGL2 vs WebGPU shader languages diverge — GLSL ES 3.0 vs WGSL; cross-compilation requires explicit toolchain.
Mobile GPUs have tiled architectures — clear-on-bind matters, full-buffer reads kill perf.
Float32 precision differs by GPU vendor on mobile — Adreno is mediump enough; Mali sometimes isn’t.