playbooks

home / skills / jjuidev / jss / shader

shader skill

/.claude/skills/shader

This skill helps you create GPU-accelerated GLSL fragment shaders for procedural textures, patterns, and visual effects in WebGL and Three.js.

npx playbooks add skill jjuidev/jss --skill shader

Review the files below or copy the command above to add this skill to your agents.

Files (13)
SKILL.md
3.7 KB
---
name: 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."
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

```glsl
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:**
```glsl
float d = distance(st, vec2(0.5));
float circle = 1.0 - smoothstep(0.2, 0.21, d);
```

**Rectangle:**
```glsl
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:**
```glsl
st = fract(st * 4.0);  // 4x4 grid
```

**Animation:**
```glsl
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

## 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/

Overview

This skill writes GLSL fragment shaders for procedural graphics, textures, and visual effects. It focuses on signed distance fields (SDF), noise (Perlin, simplex, cellular), fBm, color handling (HSB/RGB), matrices, gradients, and animation. Use it to produce GPU-ready fragment code for WebGL, Three.js, and creative coding environments. The outputs are concise, practical shader snippets and reusable functions.

How this skill works

I generate GLSL fragment shader code and small helper functions tailored to your target platform (plain GLSL, ShaderToy, or Three.js). The skill uses standard uniforms (time, resolution, mouse) and common building blocks: coordinate normalization, SDF blending, tiling, noise, and fBm. It returns ready-to-run fragment functions, examples of usage, and suggestions for uniforms and performance trade-offs. Options include stylized color palettes, animation loops, and domain-warping patterns.

When to use it

  • Create procedural textures like wood, marble, clouds, or terrain.
  • Draw crisp shapes and outlines using SDFs for vector-like rendering.
  • Generate organic patterns with Perlin/simplex/cellular noise and fBm.
  • Prototype visual effects and pixel shaders for WebGL or Three.js materials.
  • Animate generative art, looping backgrounds, or interactive visuals.

Best practices

  • Normalize coordinates early (st = fragCoord.xy / resolution) and center for symmetry.
  • Favor smoothstep for anti-aliased edges and mix for color blending.
  • Keep noise functions and fBm at reasonable octave counts to balance detail and fps.
  • Use low-overhead math (sin/cos/fract) and avoid branching in hot loops.
  • Provide uniform defaults (u_time, u_resolution, u_mouse) and document ranges.

Example use cases

  • Compact ShaderToy fragment that renders looping procedural clouds with domain-warped Perlin noise.
  • Three.js fragment for a tiled truchet pattern with HSB palette controls and mouse-driven distortion.
  • SDF-based UI element shader producing scalable, crisp circles, rounded rectangles, and soft outlines.
  • Procedural texture generator producing marble or wood grain as a seamless tile for PBR workflows.
  • Animated background shader for a web page that adapts to resolution and supports pause/play via u_time.

FAQ

What uniforms should I include?

Include at minimum u_time (seconds) and u_resolution (width,height). Add u_mouse for interactivity and any custom controls like u_seed or u_colors.

How do I keep shaders performant?

Limit fBm octaves, reuse computed noise, avoid expensive loops, and prefer analytic SDFs. Test on target hardware and reduce precision where acceptable.