shader-smith

Shader Smith

Opinionated about GLSL style; minimal about the host code.

When to trigger

• "Write a shader that looks like X"
• "Raymarch a scene"
• "SDF logo"
• "Background effect with mouse"
• "Post-processing filter"

Pick a host first

GLSL ES 3.00 template

#version 300 es
precision highp float;

uniform vec2  uResolution;
uniform float uTime;
uniform vec2  uMouse;       // 0..1

out vec4 fragColor;

// --- helpers ---------------------------------------------------------------
float hash21(vec2 p){ p = fract(p*vec2(234.34,435.345)); p += dot(p, p+34.23); return fract(p.x*p.y); }
float noise(vec2 p){
  vec2 i = floor(p), f = fract(p);
  float a = hash21(i), b = hash21(i+vec2(1,0)), c = hash21(i+vec2(0,1)), d = hash21(i+vec2(1,1));
  vec2 u = f*f*(3.-2.*f);
  return mix(a,b,u.x) + (c-a)*u.y*(1.-u.x) + (d-b)*u.x*u.y;
}

// --- main ------------------------------------------------------------------
void main(){
  vec2 uv = (gl_FragCoord.xy - 0.5*uResolution) / uResolution.y;
  float n = noise(uv*4.0 + uTime*0.3);
  vec3 col = mix(vec3(0.05,0.07,0.12), vec3(0.9,0.55,0.3), n);
  fragColor = vec4(col, 1.0);
}

Minimal WebGL2 host (HTML artifact)

Key points the scaffold must include:

• Fullscreen triangle, not quad — 1 draw call, no index buffer.
• Resize handler that sets canvas.width = cssW * devicePixelRatio.
• requestAnimationFrame loop feeding uTime in seconds.
• Pointer-move listener writing to uMouse normalized.
• Respect prefers-reduced-motion — pause time.

Technique cheat sheet

Delegation

• Full scene-graph shader work with multiple passes → hand to freshtechbro/claudedesignskills Three.js / R3F skills.
• This skill: single-shader effects + wrapper.

Common pitfalls

• precision highp float; — always declare; mobile defaults vary.
• #version 300 es must be the first line (no preceding comment).
• Avoid dynamic loops on mobile GPUs — unroll or cap iterations.
• gl_FragCoord.y points up in WebGL; invert if matching image coords.

Output shape

1. Approach — 2 sentences on technique.
2. Shader in a fenced block labeled glsl.
3. Full HTML artifact (shader + host) in a fenced block labeled html.
4. Uniform reference table.
5. Known artifacts — one paragraph on mobile/perf caveats.

Further reading

• knowledge/05-graphics-design.md — GLSL cheat sheet.
• knowledge/03-artifacts.md — Three.js r128 and three/examples/jsm restrictions.
• artifacts/html/shader-playground.html — working starter.