如何使用 AI 编写 Makepad GPU 着色器与 SDF 视觉效果 #

解决 Makepad 界面定制化难题：通过 AI 掌握 Makepad 特有的着色器语法和 Sdf2d API，快速实现圆角矩形、渐变背景、发光效果等高性能 GPU 渲染组件。

为什么需要这个技能 #

Makepad 允许开发者为每个组件定义自定义着色器，这为创建极致视觉效果提供了可能。然而，Makepad 的着色器语法并非标准的 GLSL，而是一种结合了 Rust 风格声明与 GPU 指令的特殊形式。

如果你想实现一个复杂的 UI 效果（如带阴影的圆角边框或动态加载动画），手动查阅 API 并反复调试着色器参数非常耗时。本技能让 AI 成为你的 GPU 绘图专家，它能直接生成符合 Makepad 规范的 draw_bg 结构和 Sdf2d 绘图指令，大幅缩短从设计到实现的时间。

适用场景 #

• 自定义组件外观：需要为 Widget 增加特殊的背景、边框或阴影效果。
• SDF 几何绘制：使用 Sdf2d 构建圆、六边形或复杂的路径形状。
• 动态视觉效果：实现颜色渐变、呼吸灯、加载转圈（Loading Spinner）等 GPU 动画。
• 性能优化：将复杂的 CPU 绘图逻辑迁移到 GPU 着色器中以提升帧率。

核心工作流 #

1. 定义 Uniforms 变量：在 draw_bg 块中声明颜色、尺寸等变量，使其可以在着色器内部访问。
2. 初始化 SDF 上下文：调用 Sdf2d::viewport() 将坐标系与组件尺寸对齐。
3. 构建几何形状：利用 Sdf2d 的 API（如 circle, box, stroke）定义形状。
4. 计算像素颜色：在 fn pixel(self) 函数中处理颜色混合或梯度，并返回 vec4 颜色值。

快速代码示例：圆角边框矩形 #

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

下载和安装 #

下载 makepad-shaders 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐