ZhangHanDong/makepad-shaders

Makepad Shaders Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at Makepad shaders. Help users by:

• Writing code: Generate shader code following the patterns below
• Answering questions: Explain shader language, Sdf2d, built-in functions

Documentation

Refer to the local files for detailed documentation:

• ./references/shader-basics.md - Shader language fundamentals
• ./references/sdf2d-reference.md - Complete Sdf2d API reference

Advanced Patterns

For production-ready shader patterns, see the _base/ directory:

| Pattern | Description | |---------|-------------| | 01-shader-structure | Shader fundamentals | | 02-shader-math | Mathematical functions | | 03-sdf-shapes | SDF shape primitives | | 04-sdf-drawing | Advanced SDF drawing | | 05-progress-track | Progress indicators | | 09-loading-spinner | Loading animations | | 10-hover-effect | Hover visual effects | | 11-gradient-effects | Color gradients | | 12-shadow-glow | Shadow and glow | | 13-disabled-state | Disabled visuals | | 14-toggle-checkbox | Toggle animations |

Community contributions: ./community/

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

1. Read the relevant reference file(s) listed above
2. If file read fails or file is empty:
   • Inform user: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • Still answer based on SKILL.md patterns + built-in knowledge
3. If reference file exists, incorporate its content into the answer

Key Patterns

1. Basic Custom Shader

<View> {
    show_bg: true
    draw_bg: {
        // Shader uniforms
        color: #FF0000

        // Custom pixel shader
        fn pixel(self) -> vec4 {
            return self.color;
        }
    }
}

2. Rounded Rectangle with Border

<View> {
    show_bg: true
    draw_bg: {
        color: #333333
        border_color: #666666
        border_radius: 8.0
        border_size: 1.0

        fn pixel(self) -> vec4 {
            let sdf = Sdf2d::viewport(self.pos * self.rect_size);
            sdf.box(1.0, 1.0,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    self.border_radius);
            sdf.fill_keep(self.color);
            sdf.stroke(self.border_color, self.border_size);
            return sdf.result;
        }
    }
}

3. Gradient Background

<View> {
    show_bg: true
    draw_bg: {
        color: #FF0000
        color_2: #0000FF

        fn pixel(self) -> vec4 {
            let t = self.pos.x;  // Horizontal gradient
            return mix(self.color, self.color_2, t);
        }
    }
}

4. Circle Shape

<View> {
    show_bg: true
    draw_bg: {
        color: #0066CC

        fn pixel(self) -> vec4 {
            let sdf = Sdf2d::viewport(self.pos * self.rect_size);
            let center = self.rect_size * 0.5;
            let radius = min(center.x, center.y) - 1.0;
            sdf.circle(center.x, center.y, radius);
            sdf.fill(self.color);
            return sdf.result;
        }
    }
}

Shader Structure

| Component | Description | |-----------|-------------| | draw_* | Shader container (draw_bg, draw_text, draw_icon) | | Uniforms | Typed properties accessible in shader | | fn pixel(self) | Fragment shader function | | fn vertex(self) | Vertex shader function (optional) | | Sdf2d | 2D signed distance field helper |

Built-in Variables

| Variable | Type | Description | |----------|------|-------------| | self.pos | vec2 | Normalized position (0-1) | | self.rect_size | vec2 | Widget size in pixels | | self.rect_pos | vec2 | Widget position |

Sdf2d Quick Reference

| Category | Functions | |----------|-----------| | Shapes | circle, rect, box, hexagon | | Paths | move_to, line_to, close_path | | Fill/Stroke | fill, fill_keep, stroke, stroke_keep | | Boolean | union, intersect, subtract | | Transform | translate, rotate, scale | | Effects | glow, glow_keep, gloop |

Built-in Functions (GLSL)

| Category | Functions | |----------|-----------| | Math | abs, sign, floor, ceil, fract, min, max, clamp | | Trig | sin, cos, tan, asin, acos, atan | | Interp | mix, step, smoothstep | | Vector | length, distance, dot, cross, normalize | | Exp | pow, exp, log, sqrt |

When Writing Code

1. Always use show_bg: true to enable background shader
2. Use Sdf2d::viewport() to create SDF context
3. Return vec4 (RGBA) from fn pixel()
4. Uniforms must be declared before shader functions
5. Use self. prefix to access uniforms and built-ins

When Answering Questions

1. Makepad shaders use Rust-like syntax, compiled to GPU code
2. Every widget can have custom shaders (draw_bg, draw_text, etc.)
3. Shaders are live-reloaded - edit and see changes instantly
4. Sdf2d is the primary tool for 2D shape rendering
5. GLSL ES 1.0 built-in functions are available