| name | ak:shader |
| description | 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. |
| user-invocable | true |
| when_to_use | Invoke for GLSL, procedural visuals, or WebGL effects. |
| category | frontend |
| keywords | ["glsl","shaders","procedural","webgl"] |
| argument-hint | [effect or pattern] |
| metadata | {"author":"agentkit","version":"1.0.0"} |
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) |
