Makepad Shaders 是一个面向 Makepad 着色器系统的技能，版本基于 makepad-widgets（dev 分支），最后更新时间为 2026-01-19，可通过 https://crates.io/crates/makepad-widgets 检查更新。
用途： 该技能用于帮助用户编写 Makepad 着色器代码，并解答关于着色器语言、Sdf2d 以及内置函数的问题。触发场景包括 makepad shader、makepad draw_bg、Sdf2d、makepad pixel、makepad glsl、makepad sdf、draw_quad 等。
文档与参考资源： 本地文件提供了详细文档，包括 ./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/ 社区贡献。
文档完整性检查： 在回答问题前，应先阅读上述相关参考文件。如果文件读取失败或文件为空，应告知用户“本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档”，同时仍基于 SKILL.md 模式与内置知识回答。如果参考文件存在，则将其内容纳入回答。
关键模式示例：
- 基础自定义着色器：在 View 中设置 show_bg: true，在 draw_bg 中声明 uniform（如 color），并实现 fn pixel(self) -> vec4。
- 带边框的圆角矩形：使用 Sdf2d::viewport(self.pos * self.rect_size)，调用 sdf.box(...)，再 fill_keep 与 stroke。
- 渐变背景：通过 mix(self.color, self.color_2, t) 实现水平渐变。
- 圆形：使用 Sdf2d 的 circle 与 fill。
着色器结构：
- 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
编写代码时：
- 始终使用 show_bg: true 启用背景着色器
- 使用 Sdf2d::viewport() 创建 SDF 上下文
- 从 fn pixel() 返回 vec4（RGBA）
- Uniform 必须在着色器函数之前声明
- 使用 self. 前缀访问 uniform 与内置变量
回答问题时：
- Makepad 着色器使用类 Rust 语法，编译为 GPU 代码
- 每个控件都可以有自定义着色器（draw_bg、draw_text 等）
- 着色器支持实时重载，编辑后可立即看到变化
- Sdf2d 是 2D 形状渲染的主要工具
- 可使用 GLSL ES 1.0 内置函数