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
Decision gist · record as of 2026-07-27
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.
Use it when
- shader-sdf provides the foundation for raymarching by letting you write SDF functions that describe your scene.
- Yes.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/shader-sdf · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 3 files
skills/shader-sdf/SKILL.md
skills/shader-sdf/_meta.json
skills/shader-sdf/references/2d-primitives.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create procedural 2D/3D shapes using signed distance functions in GLSL”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill brings Shadertoy's shader library into your agent environment, letting you browse and run shader code with live rendering. Perfect for developers exploring GPU graphics, visual effects, or procedural art without leaving your workflow.
shader-effects provides ready-to-use shader implementations for common visual effects in graphics programming. Access code snippets for glow, bloom, chromatic aberration, and other post-processing techniques to enhance your rendering pipeline. Perfect for developers building interactive graphics or game engines.
Dive into the core concepts of shader programming with this comprehensive guide to GLSL. Learn how vertex and fragment shaders work together to control rendering pipelines, explore essential techniques for lighting and color manipulation, and build the foundation needed to create custom visual effects in graphics applications.
This skill teaches you how to craft and deploy custom GLSL shaders within the Three.js graphics library. You'll explore shader fundamentals, material integration, and practical techniques for building sophisticated visual effects that run efficiently in the browser.
R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. Access pre-built GLSL code and material definitions to accelerate your 3D graphics pipeline without reinventing visual effects from scratch.
shader-noise provides GLSL implementations for procedural noise generation, enabling realistic texture synthesis and visual effects in shader pipelines. Use Perlin, Simplex, or fractal noise algorithms to add organic variation and detail to your rendering workflows. Ideal for game development, creative coding, and graphics applications requiring dynamic, noise-driven visual content.
More skills Glsl (Unlicense) · shader-programming (Apache-2.0) · Godot Shader Developer (unlicensed) · implicit-cad (MIT) · shader-router (MIT)