mcpField
S
shader-sdf

shader-sdf

github.com/bbeierle12创意与媒体996 次安装今天更新
代码仓库

关于 shader-sdf

shader-sdf 是面向 GLSL 着色器开发者的有符号距离函数参考技能,介绍二维和三维图元、形状运算、变换及渲染技巧,可用于构建着色器图形与场景。

主要功能

  1. 01二维与三维形状图元
  2. 02布尔及平滑形状运算
  3. 03平移、旋转与缩放
  4. 04重复、扭曲与弯曲运算
  5. 05二维边缘与阴影技巧
  6. 06基础三维光线步进

适用场景

  1. 01在 GLSL 着色器中构建几何形状
  2. 02组合图元形成复杂形态
  3. 03创建重复或变形的图形
  4. 04渲染抗锯齿边缘和阴影

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill shader-sdf

安装后在 Claude Code 中输入/shader-sdf确认已加载。

附带文件_meta.jsonreferences/2d-primitives.md

详细介绍

Shader SDF

有符号距离函数返回某点到形状表面的距离。负值 = 内部,正值 = 外部,零 = 位于表面。

快速入门

// 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 基元

圆形
float sdCircle(vec2 p, float r) {
  return length(p) - r;
}
盒子
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);
}
圆角盒子
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;
}
线段
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);
}
三角形
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);
}
圆环
float sdRing(vec2 p, float r, float thickness) {
  return abs(length(p) - r) - thickness;
}
多边形(N 边)
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;
}
星形
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 基元

球体
float sdSphere(vec3 p, float r) {
  return length(p) - r;
}
盒子
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);
}
圆角盒子
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;
}
圆柱体
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));
}
圆环面
float sdTorus(vec3 p, vec2 t) {
  vec2 q = vec2(length(p.xz) - t.x, p.y);
  return length(q) - t.y;
}
圆锥体
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);
}
胶囊体
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;
}
平面
float sdPlane(vec3 p, vec3 n, float h) {
  return dot(p, n) + h;
}

布尔运算

并集(OR)
float opUnion(float d1, float d2) {
  return min(d1, d2);
}
交集(AND)
float opIntersection(float d1, float d2) {
  return max(d1, d2);
}
差集(NOT)
float opSubtraction(float d1, float d2) {
  return max(-d1, d2);
}
平滑并集
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);
}
平滑交集
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);
}
平滑差集
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);
}

变换

平移
// Move shape by offset
float d = sdCircle(p - offset, r);
旋转(2D)
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);
旋转(3D)
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 shape
float d = sdCircle(p / scale, r) * scale;
对称
// Mirror across Y axis
p.x = abs(p.x);
float d = sdCircle(p - vec2(0.3, 0.0), 0.1);

域运算

重复(无限)
float opRepeat(vec2 p, vec2 spacing) {
  vec2 q = mod(p + spacing * 0.5, spacing) - spacing * 0.5;
  return sdCircle(q, 0.1);
}
重复(有限)
float opRepeatLimited(vec3 p, float spacing, vec3 count) {
  vec3 q = p - spacing * clamp(round(p / spacing), -count, count);
  return sdSphere(q, 0.1);
}
扭曲
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));
}
弯曲
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));
}
洋葱(中空)
float opOnion(float d, float thickness) {
  return abs(d) - thickness;
}
圆角化
float opRound(float d, float r) {
  return d - r;
}

2D 渲染技术

抗锯齿边缘
float aa = fwidth(d) * 1.5;
float mask = smoothstep(aa, -aa, d);
轮廓
float outline = smoothstep(thickness + aa, thickness - aa, abs(d));
发光
float glow = exp(-d * falloff);
投影
float shadow = smoothstep(0.0, blur, sdShape(p - shadowOffset));

3D 光线步进(基础)

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);
}

文件结构

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

参考资料

  • references/2d-primitives.md — 完整的 2D 形状库
  • references/3d-primitives.md — 完整的 3D 形状库
  • references/operations.md — 所有布尔运算和域运算

评论

支持 Markdown