skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

makepad-2.0-shaders

Implements custom GPU pixel and vertex shaders for Makepad 2.0 widgets using SDF2D.

747|87|Updated Jan 10, 2026
Search Tags:#Rust#GPU#shader#makepad#sdf2d#ui rendering#pixel shader
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-shaders
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-2.0-shaders
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-shaders
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-shaders

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing correct GPU shaders in Makepad 2.0 requires knowing its custom shader syntax, variable types, premultiplied alpha rules, and SDF2D drawing API, which differ from standard GLSL and are easy to get wrong.

Core Features & Use Cases

  • Shader Authoring Guidance: Covers pixel/vertex function syntax, instance vs uniform vs varying variables, built-in variables like self.pos and draw_pass.time, and the mandatory Pal.premul alpha rule.
  • SDF2D Shape Drawing: Documents primitives (circle, box, arc, hexagon), combinators (union, subtract, gloop), transforms, and fill/stroke/glow operations for resolution-independent UI graphics.
  • Advanced Patterns: Includes custom DrawQuad structs in Rust with #[repr(C)], instanced particle rendering via begin_many_instances, capsule SDF shapes, and Splash scripting capability boundaries.
  • Use Case: Build a rounded button whose background color animates on hover by declaring an instance hover variable and mixing colors inside the pixel shader, then batch-render 10,000 interactive particles in a single GPU draw call.

Quick Start

Ask the AI to write a Makepad 2.0 pixel shader that draws a rounded rectangle with a hover color transition using SDF2D and premultiplied alpha.

Frequently Asked Questions about makepad-2.0-shaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a custom pixel shader in Makepad 2.0?▼

Define a pixel: fn() { ... } block inside a draw_bg +: { } merge block, using Sdf2d.viewport(self.pos * self.rect_size) for shape drawing. Always return a premultiplied color via Pal.premul() or sdf.result.

What is the difference between instance and uniform variables in Makepad shaders?▼

Instance variables are per-widget and animatable via the Animator, while uniform variables are shared across all instances and cannot be animated. Use instance for hover states and uniform for theme constants.

Why does my Makepad shader render with wrong transparency?▼

Makepad requires premultiplied alpha in every pixel shader return value. Returning raw vec4(r, g, b, a) causes incorrect blending; wrap the color with Pal.premul() or return sdf.result, which is already premultiplied.

Can Splash scripting create new shader draw types in Makepad?▼

No. Splash can only override pixel, vertex, and get_color functions on existing draw types via the +: operator. New draw types with custom instance fields must be defined in Rust with #[derive(Script, ScriptHook)] and #[repr(C)].

How do I render thousands of particles efficiently in Makepad?▼

Use begin_many_instances and end_many_instances around per-particle draw_abs calls to batch everything into one GPU draw call. Set per-instance data like color on the draw struct between calls; 10,000 particles at 60fps is achievable this way.

Why does sdf.box produce spiky shapes with large border radius?▼

When border_radius approaches half the widget size, the internal size calculation goes negative and breaks. Use a capsule SDF formula with clamp and length instead, which works correctly at any width.

Related Skills

Explore More Software Engineering Skills→
RoooyHeRoooyHe

makepad-shaders

Locate and apply Makepad shader patterns and SDF references.

Community
Intermediate
mmartinsolivmmartinsoliv

animation

Design UI animations with transform and opacity effects and reduced-motion fallbacks.

Community
Intermediate
mikkermikker
102

oklch-skill

Convert hex, rgb, hsl inputs to OKLCH values for Tailwind v4 theming.

Community
Intermediate
pixijspixijs
302

pixijs-scene-graphics

Draw and render vector graphics with PixiJS v8 Graphics API.

Official
Advanced