ak-shader

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)