shader-programming

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, so a branch whose condition differs between neighbouring pixels runs both sides. A branch on a uniform (same for the whole draw) is cheap.
5. Pass data via uniforms (constant per draw) and varyings (interpolated vertex→fragment). Keep texture samples few; they dominate cost.
6. Validate source before visual testing when the tools are already available. For GLSL, run glslangValidator path/to/shader.frag with the matching stage suffix; for WGSL, run naga path/to/shader.wgsl. Check Godot .gdshader files by opening the project in Godot, which has no standalone validator for them.
7. Verify visually and on target hardware. Shaders that look right on desktop can break on mobile (precision, missing features). Test where it ships.