shader-sdf
shader-sdf enables you to construct procedural geometry using signed distance functions directly in GLSL shaders. This approach lets you define complex 2D and 3D shapes through mathematical functions rather than traditional mesh data, making it ideal for real-time graphics, raymarching, and generative visual effects.
shader-sdf enables you to construct procedural geometry using signed distance functions directly in GLSL shaders. SDFs are mathematical functions that return the minimum distance from any point in space to a surface—negative inside, positive outside. This representation lets you define complex 2D and 3D shapes through pure math rather than mesh data, making raymarching and real-time rendering highly efficient.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/shader-sdf · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/shader-sdf ~/.claude/skills/shader-sdfFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are signed distance functions in GLSL and how does shader-sdf use them?
shader-sdf enables you to construct procedural geometry using signed distance functions directly in GLSL shaders. SDFs are mathematical functions that return the minimum distance from any point in space to a surface—negative inside, positive outside. This representation lets you define complex 2D and 3D shapes through pure math rather than mesh data, making raymarching and real-time rendering highly efficient.
How do I implement raymarching for 3D scene rendering with SDFs?
shader-sdf provides the foundation for raymarching by letting you write SDF functions that describe your scene. Raymarching works by casting rays from the camera and stepping along each ray using the SDF to determine safe step distances. At each step, you query your SDF to find the distance to the nearest surface, advancing until you hit geometry or exit the scene. shader-sdf includes patterns for normal calculation and lighting integration.
Can shader-sdf handle smooth blending and boolean operations on shapes?
Yes. shader-sdf supports applying boolean operations and smooth blending to combine shapes. You can perform union, intersection, and subtraction on SDFs, and use smooth variants that blend boundaries rather than creating hard edges. These techniques let you build complex procedural forms from simpler primitives—for example, smoothly blending a sphere into a box or carving one shape from another.
What SDF shader primitives and transformations does shader-sdf reference?
shader-sdf provides a complete SDF primitive library covering 2D shapes (circle, box, polygon) and 3D primitives (sphere, box, torus, cone, capsule). It includes transformation code for domain repetition, twisting, bending, and other deformations. You can reference these building blocks directly in your shaders to rapidly prototype procedural geometry without writing distance functions from scratch.
How can I build text effects and morphing animations with distance fields?
shader-sdf enables text effects and morphing animations by leveraging distance field rendering. You can apply glow, outline, and shadow effects by sampling the distance field at different thresholds. Morphing works by interpolating between two SDF representations over time, creating smooth transitions. Anti-aliased SDF rendering ensures clean edges even at high zoom levels, making text and animated shapes look crisp.
Is shader-sdf suitable for real-time graphics and generative visual effects?
Absolutely. shader-sdf is ideal for real-time graphics and generative visual effects because SDFs are computationally efficient—they let you render complex geometry without storing mesh data. The MIT license permits both commercial and open-source use. Whether you're building interactive visualizations, procedural art, or game graphics, shader-sdf's mathematical approach scales well and integrates seamlessly into modern GPU pipelines.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
// 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
float sdCircle(vec2 p, float r) {
return length(p) - r;
}
Box
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)) +
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/shader-sdf/SKILL.md
skills/shader-sdf/_meta.json
skills/shader-sdf/references/2d-primitives.md