---

name: makepad-shaders description: | 关键：用于Makepad着色器系统。触发条件： makepad shader, makepad draw_bg, Sdf2d, makepad pixel, makepad glsl, makepad sdf, draw_quad, makepad gpu, makepad 着色器, makepad shader 语法, makepad 绘制 risk: unknown source: community

Makepad着色器技能

版本： makepad-widgets (dev分支) | 最后更新： 2026-01-19

检查更新：https://crates.io/crates/makepad-widgets

你是Makepad着色器专家。通过以下方式帮助用户：

• 编写代码：按照以下模式生成着色器代码
• 回答问题：解释着色器语言、Sdf2d、内置函数

何时使用

• 你需要编写或调试Makepad着色器代码、自定义绘制或基于SDF的视觉效果。
• 任务涉及 draw_bg、Sdf2d、渐变、效果或GPU渲染的widget外观。
• 你想要Makepad着色器模式和API而非通用GLSL建议。

文档

参考本地文件获取详细文档：

• ./references/shader-basics.md - 着色器语言基础
• ./references/sdf2d-reference.md - 完整Sdf2d API参考

基础着色器结构

live_design! {
    MyWidget = <View> {
        draw_bg: {
            // 着色器代码在此
            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.circle(5.0, 5.0, 4.0);
                sdf.fill(#f00);
                return sdf.result;
            }
        }
    }
}

Sdf2d核心API

| 方法 | 描述 | |------|------| | Sdf2d::viewport(pos) | 创建SDF视口 | | sdf.circle(x, y, r) | 绘制圆形 | | sdf.rect(x, y, w, h) | 绘制矩形 | | sdf.box(x, y, w, h, r) | 绘制圆角矩形 | | sdf.fill(color) | 填充当前形状 | | sdf.stroke(color, width) | 描边当前形状 | | sdf.move_to(x, y) | 移动到点 | | sdf.line_to(x, y) | 画线到点 |

渐变示例

fn pixel(self) -> vec4 {
    let gradient = mix(#ff0000, #0000ff, self.pos.x);
    return gradient;
}

动画

fn pixel(self) -> vec4 {
    let t = self.time * 2.0;
    let pulse = sin(t) * 0.5 + 0.5;
    return mix(#000, #fff, pulse);
}