⚡

Makepad着色器技能Skill makepad-shaders

这个技能专注于Makepad框架中的着色器编程，用于帮助用户编写和解释着色器代码，包括生成shader代码、回答问题、解释Sdf2d和GLSL函数。适用于前端开发和图形渲染，关键词包括：Makepad, 着色器, SDF, GLSL, 前端开发, 图形编程, UI设计。

前端开发 0 次安装 0 次浏览 更新于 3/13/2026

name: makepad-着色器 description: | 关键：用于Makepad着色器系统。触发词包括： makepad shader, makepad draw_bg, Sdf2d, makepad pixel, makepad glsl, makepad sdf, draw_quad, makepad gpu, makepad 着色器, makepad shader 语法, makepad 绘制

Makepad 着色器技能

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

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

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

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

文档

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

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

高级模式

对于生产就绪的着色器模式，请参见 _base/ 目录：

模式 描述
01-shader-structure 着色器基础
02-shader-math 数学函数
03-sdf-shapes SDF形状原语
04-sdf-drawing 高级SDF绘制
05-progress-track 进度指示器
09-loading-spinner 加载动画
10-hover-effect 悬停视觉效果
11-gradient-effects 颜色渐变
12-shadow-glow 阴影和发光
13-disabled-state 禁用状态视觉效果
14-toggle-checkbox 切换动画

社区贡献：./community/

重要：文档完整性检查

在回答问题前，Claude必须：

  1. 阅读上面列出的相关参考文件
  2. 如果文件读取失败或文件为空：
    • 通知用户：“本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档”
    • 仍基于SKILL.md模式+内置知识回答
  3. 如果参考文件存在，将其内容融入答案中

关键模式

1. 基本自定义着色器

<View> {
    show_bg: true
    draw_bg: {
        // 着色器uniforms
        color: #FF0000

        // 自定义像素着色器
        fn pixel(self) -> vec4 {
            return self.color;
        }
    }
}

2. 带边框的圆角矩形

<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. 渐变背景

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

        fn pixel(self) -> vec4 {
            let t = self.pos.x;  // 水平渐变
            return mix(self.color, self.color_2, t);
        }
    }
}

4. 圆形形状

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

着色器结构

组件 描述
draw_* 着色器容器（draw_bg, draw_text, draw_icon）
Uniforms 在着色器中可访问的类型化属性
fn pixel(self) 片段着色器函数
fn vertex(self) 顶点着色器函数（可选）
Sdf2d 2D有符号距离场辅助工具

内置变量

变量 类型 描述
self.pos vec2 归一化位置（0-1）
self.rect_size vec2 小部件大小（像素）
self.rect_pos vec2 小部件位置

Sdf2d快速参考

类别 函数
形状 circle, rect, box, hexagon
路径 move_to, line_to, close_path
填充/描边 fill, fill_keep, stroke, stroke_keep
布尔 union, intersect, subtract
变换 translate, rotate, scale
效果 glow, glow_keep, gloop

内置函数（GLSL）

类别 函数
数学 abs, sign, floor, ceil, fract, min, max, clamp
三角 sin, cos, tan, asin, acos, atan
插值 mix, step, smoothstep
向量 length, distance, dot, cross, normalize
指数 pow, exp, log, sqrt

编写代码时

  1. 始终使用 show_bg: true 启用背景着色器
  2. 使用 Sdf2d::viewport() 创建SDF上下文
  3. 从 fn pixel() 返回 vec4（RGBA）
  4. Uniforms必须在着色器函数之前声明
  5. 使用 self. 前缀访问uniforms和内置变量

回答问题时

  1. Makepad着色器使用类似Rust的语法，编译为GPU代码
  2. 每个小部件都可以有自定义着色器（draw_bg, draw_text等）
  3. 着色器实时重载 - 编辑并立即查看更改
  4. Sdf2d是2D形状渲染的主要工具
  5. 可使用GLSL ES 1.0内置函数