Shader: a function for every pixel

A shader is a small program that the graphics card runs for every vertex and every pixel on the screen. The node graph of an Unreal material is that same program, drawn instead of typed. This page follows a triangle as it turns into pixels. It shows what a shader knows about its pixel and explains why some materials are almost free while others drag the frame rate down.

Why this matters

The first three lessons were full of formulas: multiply a color by a tint, blend rock and moss through a mask, get brightness from a dot product, multiply the UVs. But where do those formulas live, and what runs them? The shader does.

A material graph is a program that runs millions of times per frame, separately for each pixel. Seen that way, a lot becomes clear. You can see why a material cannot “look at the neighboring pixel,” and why a color changes instantly in a material instance while one checkbox starts a long compile. You can see why grass and smoke are so expensive, and how grass sways in the wind with no animation at all.

Further in the article

1. What a shader is
2. A triangle’s path to the screen
3. A function for every pixel
4. A node graph is code
5. The vertex shader: how grass sways without animation
6. What it costs
7. Where it breaks
8. Connections: the same idea in other fields
9. Key points
10. Test yourself