← Back to list
⚡

shader-programming Checked

Write game shaders from cross-engine fundamentals — the vertex→fragment pipeline, coordinate spac…
⚡ Productivity skills By gamedev-skills Version v1.0.0 Added 2026-10-21 Updated 2026-10-21 Source ↗
7.3Overall rating
0Views
0Downloads
2.0kStars

Installation

🤖 Install via AI

Copy the prompt below and send it to your AI assistant (e.g. Claude Code) — it will follow the instructions and install automatically.

Install the "shader-programming" skill by following the instructions at https://skill123.me/install/shader-programming.
⌨️ Command line install

Run in your terminal — downloads and installs to ~/.claude/skills/.

curl -fsSL https://skill123.me/install/shader-programming.sh | bash
📦 Download ZIP

Download the zip and extract it into your skills directory (e.g. ~/.claude/skills/), then restart your session.

⬇ Download v1.0.0 · 6 KB
📊 Static rating
7.3/10
Trigger
8.0
Structure
0.0
Workflow
7.0
Content
0.0
Engineering
0.0
Security
7.0

Six-dimension rubric with reviewer rationale.

View scorecard ↓
🛡 Dynamic test
—

Not live-tested yet — this skill is rated on static analysis only.

About this skill

Write game shaders from cross-engine fundamentals — the vertex→fragment pipeline, coordinate spaces, UV math, and common 2D/3D effects (tint, UV scroll, dissolve, outline, fresnel rim, vignette) in GLSL with HLSL equivalents. Use when the user mentions shaders, fragment/pixel shader, vertex shader, UV, GLSL, HLSL, or effects like dissolve, outline, or rim light.

Shader programming (cross-engine)

Shaders are small programs that run **per vertex** and **per pixel** on the GPU.

The concepts — the pipeline, coordinate spaces, UVs, and how common effects are

built — port across engines; only the language dialect and built-in variable

names change. This skill teaches those portable fundamentals in GLSL with HLSL

equivalents; use godot-shaders (or Unity/Unreal material docs) for the exact

engine syntax and built-ins.

Documentation

Write game shaders from cross-engine fundamentals — the vertex→fragment pipeline, coordinate spaces, UV math, and common 2D/3D effects (tint, UV scroll, dissolve, outline, fresnel rim, vignette) in GLSL with HLSL equivalents. Use when the user mentions shaders, fragment/pixel shader, vertex shader, UV, GLSL, HLSL, or effects like dissolve, outline, or rim light.

Shader programming (cross-engine)

Shaders are small programs that run **per vertex** and **per pixel** on the GPU.

The concepts — the pipeline, coordinate spaces, UVs, and how common effects are

built — port across engines; only the language dialect and built-in variable

names change. This skill teaches those portable fundamentals in GLSL with HLSL

equivalents; use godot-shaders (or Unity/Unreal material docs) for the exact

engine syntax and built-ins.

When to use

  • Use to understand or write vertex/fragment shaders and to reason about UVs,

coordinate spaces, and the GPU pipeline.

  • Use to build common effects: tint/recolor, scrolling textures, dissolve,

outlines, fresnel/rim light, vignette, color grading.

  • Use to translate a shader concept between GLSL and HLSL, or between engines.

**When *not* to use:** for an engine's exact shader language and built-ins, use

godot-shaders (Godot shading language) or the engine's material docs. For full

particle VFX systems, see unreal-niagara. For post-process *stacks*, defer to

the engine's renderer settings.

Core workflow

1. **Know which stage you're in.** The **vertex** shader transforms each vertex

into clip space and passes data (UVs, normals) onward; the **fragment/pixel**

shader runs per rasterized pixel and outputs a color. Most game effects live

in the fragment stage.

2. **Track coordinate spaces.** Positions move model → world → view → clip space;

normals belong in world or view space. Mixing spaces is the most common bug.

3. **Drive effects with UVs and time.** UVs are 0..1 texture coordinates;

offset, scale, or distort them, and animate with a time uniform.

4. **Work per pixel, branch-light.** Prefer mix, step, smoothstep, and

clamp over if where possible; GPUs run pixels in lockstep and dislike

divergent branches.

5. **Pass data via uniforms** (constant per draw) and **varyings** (interpolated

vertex→fragment). Keep texture samples few; they dominate cost.

6. **Verify visually and on target hardware.** Shaders that look right on desktop

can break on mobile (precision, missing features). Test where it ships.

Patterns

GLSL-style fragment snippets (close to Godot's canvas_item/spatial

shaders and OpenGL). See references/effects.md for the HLSL equivalents and

the full outline/fresnel/vignette shaders.

### 1. Fragment basics: sample, tint, and combine

View full documentation

// Per-pixel: read the texture at this UV, multiply by a color (tint), keep alpha.
uniform sampler2D tex;
uniform vec4 tint;          // e.g. (1,0,0,1) reddens; multiply is non-destructive
in vec2 uv;                 // interpolated 0..1 texture coordinate (a "varying")
out vec4 frag;
void main() {
    vec4 c = texture(tex, uv);   // HLSL: tex.Sample(samp, uv)
    frag = c * tint;             // component-wise multiply tints without clipping
}

### 2. Scrolling UVs (animated texture) — frame-rate independent


// Add time * speed to the UV to scroll. fract() wraps it into 0..1 so it tiles.
uniform sampler2D tex;
uniform float time;          // seconds, supplied by the engine
uniform vec2 scroll_speed;   // UV units per second, e.g. (0.1, 0.0)
in vec2 uv;
out vec4 frag;
void main() {
    vec2 scrolled = fract(uv + scroll_speed * time);  // HLSL: frac(...)
    frag = texture(tex, scrolled);
}
// Drive with a real time uniform, not a per-frame accumulator, so speed is stable.

### 3. Dissolve (threshold a noise map, glow the edge)


// Hide pixels where noise < threshold; tint a thin band at the boundary.
uniform sampler2D tex;
uniform sampler2D noise_tex;     // grayscale noise, 0..1
uniform float amount;            // 0 = fully visible, 1 = fully dissolved
uniform float edge = 0.05;       // width of the glowing edge band
uniform vec4 edge_color;
in vec2 uv;
out vec4 frag;
void main() {
    vec4 c = texture(tex, uv);
    float n = texture(noise_tex, uv).r;
    if (n < amount) discard;                 // cut away dissolved pixels
    float e = smoothstep(amount, amount + edge, n);  // 0 at the edge -> 1 inside
    frag = mix(edge_color, c, e);            // HLSL: lerp(edge_color, c, e)
}

### 4. Fresnel rim light (3D) — brighten glancing angles


// Rim = 1 where the surface faces away from the camera (silhouette glow).
in vec3 world_normal;        // normalized, world space (from the vertex stage)
in vec3 view_dir;            // normalized, surface -> camera, world space
uniform float power = 3.0;
uniform vec3 rim_color;
out vec4 frag;
void main() {
    float f = pow(1.0 - clamp(dot(world_normal, view_dir), 0.0, 1.0), power);
    frag = vec4(rim_color * f, 1.0);   // add to lighting; f peaks at the silhouette
}
// Correctness: normal and view_dir MUST be in the same space and normalized.

Pitfalls

  • **Mixing coordinate spaces** (lighting a world-space normal against a

view-space light) yields subtly wrong shading. Pick one space and convert

everything into it.

  • **Forgetting to normalize** interpolated normals/directions: interpolation

shortens vectors, so dot() results drift. normalize() in the fragment stage.

  • **UV assumptions across engines.** Some engines flip V (top-left vs bottom-left

origin); a texture may appear upside-down. Know your engine's convention.

  • **Heavy branching / dynamic loops** stall GPUs. Prefer step/smoothstep/

mix; reserve if/discard for genuinely cheap early-outs.

  • **discard defeats early-Z** and can hurt performance on tiled mobile GPUs;

prefer alpha blending where you can.

  • **Precision on mobile**: highp vs mediump matters; large UVs or time values

in low precision shimmer. Use adequate precision for coordinates and time.

  • **Assuming GLSL == HLSL.** mix↔lerp, fract↔frac, texture()↔.Sample(),

vec2↔float2, column- vs row-major matrices. See the reference mapping.

References

  • references/effects.md — full outline (2D sprite + 3D), vignette, and color

grading shaders; the GLSL↔HLSL function/type mapping table; per-engine notes

(Godot canvas_item/spatial, Unity ShaderLab/HLSL, Unreal material nodes).

Related skills

  • godot-shaders — Godot shading language syntax, built-ins, and screen-reading.
  • unreal-niagara — GPU particle VFX (a different shader use).
  • procedural-gen — the noise that drives dissolve and procedural texturing.

Score breakdown

Trigger
8.0
Structure
0.0
Workflow
7.0
Content
0.0
Engineering
0.0
Security
7.0