Shader Sdf

---
name: shader-sdf
description: Signed Distance Functions (SDFs) in GLSL—2D/3D shape primitives, boolean operations (union, intersection, subtraction), smooth blending, repetition, and raymarching fundamentals. Use when creating procedural shapes, text effects, smooth morphing, or raymarched 3D scenes.
---

# Shader SDFs

Signed Distance Functions return the distance from a point to a shape's surface. Negative = inside, positive = outside, zero = on surface.

## Quick Start

```glsl
// 2D circle SDF
float sdCircle(vec2 p, float r) {
  return length(p) - r;
}

// Usage
float d = sdCircle(uv - 0.5, 0.3);

// Render
vec3 color = d < 0.0 ? vec3(1.0) : vec3(0.0);           // Hard edge
vec3 color = vec3(smoothstep(0.01, 0.0, d));            // Soft edge
vec3 color = vec3(smoothstep(0.02, 0.0, abs(d)));       // Outline
```

## 2D Primitives

### Circle

```glsl
float sdCircle(vec2 p, float r) {
  return length(p) - r;
}
```

### Box

```glsl
float sdBox(vec2 p, vec2 b) {
  vec2 d = abs(p) - b;
  return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}
```

### Rounded Box

```glsl
float sdRoundedBox(vec2 p, vec2 b, float r) {
  vec2 d = abs(p) - b + r;
  return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - r;
}
```

### Line Segment

```glsl
float sdSegment(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a;
  vec2 ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h);
}
```

### Triangle

```glsl
float sdTriangle(vec2 p, vec2 p0, vec2 p1, vec2 p2) {
  vec2 e0 = p1 - p0, e1 = p2 - p1, e2 = p0 - p2;
  vec2 v0 = p - p0, v1 = p - p1, v2 = p - p2;
  vec2 pq0 = v0 - e0 * clamp(dot(v0, e0) / dot(e0, e0), 0.0, 1.0);
  vec2 pq1 = v1 - e1 * clamp(dot(v1, e1) / dot(e1, e1), 0.0, 1.0);
  vec2 pq2 = v2 - e2 * clamp(dot(v2, e2) / dot(e2, e2), 0.0, 1.0);
  float s = sign(e0.x * e2.y - e0.y * e2.x);
  vec2 d = min(min(
    vec2(dot(pq0, pq0), s * (v0.x * e0.y - v0.y * e0.x)),
    vec2(dot(pq1, pq1), s * (v1.x * e1.y - v1.y * e1.x))),
    vec2(dot(pq2, pq2), s * (v2.x * e2.y - v2.y * e2.x)));
  return -sqrt(d.x) * sign(d.y);
}
```

### Ring

```glsl
float sdRing(vec2 p, float r, float thickness) {
  return abs(length(p) - r) - thickness;
}
```

### Polygon (N-sided)

```glsl
float sdPolygon(vec2 p, float r, int n) {
  float a = atan(p.x, p.y) + 3.141592;
  float s = 6.283185 / float(n);
  return cos(floor(0.5 + a / s) * s - a) * length(p) - r;
}
```

### Star

```glsl
float sdStar(vec2 p, float r, int n, float m) {
  float an = 3.141592 / float(n);
  float en = 3.141592 / m;
  vec2 acs = vec2(cos(an), sin(an));
  vec2 ecs = vec2(cos(en), sin(en));
  
  float bn = mod(atan(p.x, p.y), 2.0 * an) - an;
  p = length(p) * vec2(cos(bn), abs(sin(bn)));
  p -= r * acs;
  p += ecs * clamp(-dot(p, ecs), 0.0, r * acs.y / ecs.y);
  
  return length(p) * sign(p.x);
}
```

## 3D Primitives

### Sphere

```glsl
float sdSphere(vec3 p, float r) {
  return length(p) - r;
}
```

### Box

```glsl
float sdBox(vec3 p, vec3 b) {
  vec3 q = abs(p) - b;
  return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}
```

### Rounded Box

```glsl
float sdRoundBox(vec3 p, vec3 b, float r) {
  vec3 q = abs(p) - b;
  return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0) - r;
}
```

### Cylinder

```glsl
float sdCylinder(vec3 p, float h, float r) {
  vec2 d = abs(vec2(length(p.xz), p.y)) - vec2(r, h);
  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
}
```

### Torus

```glsl
float sdTorus(vec3 p, vec2 t) {
  vec2 q = vec2(length(p.xz) - t.x, p.y);
  return length(q) - t.y;
}
```

### Cone

```glsl
float sdCone(vec3 p, vec2 c, float h) {
  vec2 q = h * vec2(c.x / c.y, -1.0);
  vec2 w = vec2(length(p.xz), p.y);
  vec2 a = w - q * clamp(dot(w, q) / dot(q, q), 0.0, 1.0);
  vec2 b = w - q * vec2(clamp(w.x / q.x, 0.0, 1.0), 1.0);
  float k = sign(q.y);
  float d = min(dot(a, a), dot(b, b));
  float s = max(k * (w.x * q.y - w.y * q.x), k * (w.y - q.y));
  return sqrt(d) * sign(s);
}
```

### Capsule

```glsl
float sdCapsule(vec3 p, vec3 a, vec3 b, float r) {
  vec3 pa = p - a, ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h) - r;
}
```

### Plane

```glsl
float sdPlane(vec3 p, vec3 n, float h) {
  return dot(p, n) + h;
}
```

## Boolean Operations

### Union (OR)

```glsl
float opUnion(float d1, float d2) {
  return min(d1, d2);
}
```

### Intersection (AND)

```glsl
float opIntersection(float d1, float d2) {
  return max(d1, d2);
}
```

### Subtraction (NOT)

```glsl
float opSubtraction(float d1, float d2) {
  return max(-d1, d2);
}
```

### Smooth Union

```glsl
float opSmoothUnion(float d1, float d2, float k) {
  float h = clamp(0.5 + 0.5 * (d2 - d1) / k, 0.0, 1.0);
  return mix(d2, d1, h) - k * h * (1.0 - h);
}
```

### Smooth Intersection

```glsl
float opSmoothIntersection(float d1, float d2, float k) {
  float h = clamp(0.5 - 0.5 * (d2 - d1) / k, 0.0, 1.0);
  return mix(d2, d1, h) + k * h * (1.0 - h);
}
```

### Smooth Subtraction

```glsl
float opSmoothSubtraction(float d1, float d2, float k) {
  float h = clamp(0.5 - 0.5 * (d2 + d1) / k, 0.0, 1.0);
  return mix(d2, -d1, h) + k * h * (1.0 - h);
}
```

## Transformations

### Translation

```glsl
// Move shape by offset
float d = sdCircle(p - offset, r);
```

### Rotation (2D)

```glsl
mat2 rot2D(float a) {
  float s = sin(a), c = cos(a);
  return mat2(c, -s, s, c);
}

// Rotate point around origin
vec2 rotatedP = rot2D(angle) * p;
float d = sdBox(rotatedP, size);
```

### Rotation (3D)

```glsl
mat3 rotateX(float a) {
  float s = sin(a), c = cos(a);
  return mat3(1, 0, 0, 0, c, -s, 0, s, c);
}

mat3 rotateY(float a) {
  float s = sin(a), c = cos(a);
  return mat3(c, 0, s, 0, 1, 0, -s, 0, c);
}

mat3 rotateZ(float a) {
  float s = sin(a), c = cos(a);
  return mat3(c, -s, 0, s, c, 0, 0, 0, 1);
}
```

### Scale

```glsl
// Scale shape
float d = sdCircle(p / scale, r) * scale;
```

### Symmetry

```glsl
// Mirror across Y axis
p.x = abs(p.x);
float d = sdCircle(p - vec2(0.3, 0.0), 0.1);
```

## Domain Operations

### Repetition (Infinite)

```glsl
float opRepeat(vec2 p, vec2 spacing) {
  vec2 q = mod(p + spacing * 0.5, spacing) - spacing * 0.5;
  return sdCircle(q, 0.1);
}
```

### Repetition (Limited)

```glsl
float opRepeatLimited(vec3 p, float spacing, vec3 count) {
  vec3 q = p - spacing * clamp(round(p / spacing), -count, count);
  return sdSphere(q, 0.1);
}
```

### Twist

```glsl
float opTwist(vec3 p, float k) {
  float c = cos(k * p.y);
  float s = sin(k * p.y);
  mat2 m = mat2(c, -s, s, c);
  vec3 q = vec3(m * p.xz, p.y);
  return sdBox(q, vec3(0.5));
}
```

### Bend

```glsl
float opBend(vec3 p, float k) {
  float c = cos(k * p.x);
  float s = sin(k * p.x);
  mat2 m = mat2(c, -s, s, c);
  vec3 q = vec3(m * p.xy, p.z);
  return sdBox(q, vec3(0.5));
}
```

### Onion (Hollow)

```glsl
float opOnion(float d, float thickness) {
  return abs(d) - thickness;
}
```

### Round

```glsl
float opRound(float d, float r) {
  return d - r;
}
```

## 2D Rendering Techniques

### Anti-aliased Edge

```glsl
float aa = fwidth(d) * 1.5;
float mask = smoothstep(aa, -aa, d);
```

### Outline

```glsl
float outline = smoothstep(thickness + aa, thickness - aa, abs(d));
```

### Glow

```glsl
float glow = exp(-d * falloff);
```

### Drop Shadow

```glsl
float shadow = smoothstep(0.0, blur, sdShape(p - shadowOffset));
```

## 3D Raymarching (Basic)

```glsl
float map(vec3 p) {
  float d = sdSphere(p, 1.0);
  d = opSmoothUnion(d, sdBox(p - vec3(1.0, 0.0, 0.0), vec3(0.5)), 0.2);
  return d;
}

vec3 calcNormal(vec3 p) {
  vec2 e = vec2(0.001, 0.0);
  return normalize(vec3(
    map(p + e.xyy) - map(p - e.xyy),
    map(p + e.yxy) - map(p - e.yxy),
    map(p + e.yyx) - map(p - e.yyx)
  ));
}

float raymarch(vec3 ro, vec3 rd) {
  float t = 0.0;
  for (int i = 0; i < 100; i++) {
    vec3 p = ro + rd * t;
    float d = map(p);
    if (d < 0.001) break;
    if (t > 100.0) break;
    t += d;
  }
  return t;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  
  vec3 ro = vec3(0.0, 0.0, 3.0);  // Ray origin
  vec3 rd = normalize(vec3(uv, -1.0));  // Ray direction
  
  float t = raymarch(ro, rd);
  
  vec3 color = vec3(0.0);
  if (t < 100.0) {
    vec3 p = ro + rd * t;
    vec3 n = calcNormal(p);
    vec3 light = normalize(vec3(1.0, 1.0, 1.0));
    float diff = max(dot(n, light), 0.0);
    color = vec3(diff);
  }
  
  fragColor = vec4(color, 1.0);
}
```

## File Structure

```
shader-sdf/
├── SKILL.md
├── references/
│   ├── 2d-primitives.md      # All 2D shapes
│   ├── 3d-primitives.md      # All 3D shapes
│   └── operations.md         # All operations
└── scripts/
    ├── primitives/
    │   ├── 2d.glsl           # 2D shape functions
    │   └── 3d.glsl           # 3D shape functions
    ├── operations.glsl       # Boolean & domain ops
    └── examples/
        ├── logo.glsl         # 2D logo example
        └── raymarch.glsl     # 3D raymarching example
```

## Reference

- `references/2d-primitives.md` — Complete 2D shape library
- `references/3d-primitives.md` — Complete 3D shape library
- `references/operations.md` — All boolean and domain operations