Initial commit: antigravity-claudekit
This commit is contained in:
99
skills/ck-shader/SKILL.md
Normal file
99
skills/ck-shader/SKILL.md
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
name: ck-shader
|
||||
description: Write GLSL fragment shaders for procedural graphics. Use for generative art, procedural textures, visual effects, WebGL shaders, Three.js materials, shapes (SDF), noise, patterns, and animations.
|
||||
---
|
||||
|
||||
# GLSL Fragment Shaders
|
||||
|
||||
GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Creating procedural textures (wood, marble, clouds, terrain)
|
||||
- Drawing shapes with signed distance fields (SDF)
|
||||
- Generating patterns, noise, gradients, animations
|
||||
- Writing custom shaders for Three.js, WebGL, Processing, ShaderToy
|
||||
|
||||
## Don't Use When
|
||||
|
||||
- Simple CSS animations suffice
|
||||
- Image manipulation that doesn't need GPU parallelism
|
||||
|
||||
## Core Concepts
|
||||
|
||||
Each thread receives pixel position via `gl_FragCoord`, returns color via `gl_FragColor` (vec4 RGBA 0.0–1.0). Threads cannot communicate — fully 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 |
|
||||
|----------|---------|
|
||||
| `mix(a,b,t)` | Linear interpolate |
|
||||
| `step(edge,x)` | Hard threshold |
|
||||
| `smoothstep(e0,e1,x)` | Smooth threshold |
|
||||
| `fract(x)` | Fractional part (tiling) |
|
||||
| `length(v)` | Vector magnitude |
|
||||
| `distance(a,b)` | Euclidean distance |
|
||||
| `atan(y,x)` | Angle in radians |
|
||||
| `sin/cos/pow/abs` | Math (hardware-accelerated) |
|
||||
|
||||
## Quick Patterns
|
||||
|
||||
```glsl
|
||||
// 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;
|
||||
```
|
||||
|
||||
## Reference Files (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-noise-random-perlin-simplex-cellular-voronoi.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
|
||||
- **ShaderToy:** iTime, iResolution, iMouse uniforms
|
||||
- **LYGIA Library:** https://lygia.xyz (reusable shader functions)
|
||||
|
||||
## Resources
|
||||
|
||||
- The Book of Shaders: https://thebookofshaders.com
|
||||
- Inigo Quilez Articles: https://iquilezles.org/articles/
|
||||
- ShaderToy: https://shadertoy.com
|
||||
Reference in New Issue
Block a user