Shader concepts, explained

One idea per page: a short answer, a live example running in your browser, the code in every shader language, the mistakes to avoid, and the lessons where you can practise it. Looking for a quick syntax reference instead? See the HLSL, GLSL, WGSL and Metal cheat sheet.

• smoothstepsmoothstep(a, b, x) returns 0 when x is below a, 1 when it is above b, and a smooth S-shaped curve in between. It is the standard way to make a soft edge in a shader.
• signed distance fieldA signed distance field is a function that tells you, for any point, how far it is from the nearest edge of a shape: negative inside, positive outside, zero exactly on the edge. Shaders use them to draw crisp shapes and to combine them with simple math.
• hash functionShaders have no random() function, so they use a hash: a small formula that turns a position into a number that looks random but is always the same for the same input. It is the building block of every noise.
• value noiseValue noise is smooth randomness: random values are placed on a grid and the space between them is blended, so you get soft blobs instead of grain. It is the simplest kind of procedural noise.
• fBmfBm, short for fractal Brownian motion, adds several copies of a noise together, each with twice the detail and half the strength. The result looks like natural things: clouds, mountains, smoke and marble.
• domain warpingDomain warping means bending the coordinates before you look something up: you feed noise into the position that goes into another noise. It turns plain noise into swirling, marble-like, flowing patterns.
• Voronoi noiseVoronoi noise scatters random points over the plane and, for each pixel, measures the distance to the nearest point. It makes cells, cracked-earth patterns, scales and bubbles.
• UV coordinatesUV coordinates are the position of a pixel inside a picture or surface, written as two numbers from 0 to 1. A fragment shader reads them to decide what colour to draw at that point.
• polar coordinatesPolar coordinates describe a point by its distance from the centre (radius) and its angle, instead of x and y. In a shader they make flowers, stars, spirals and kaleidoscopes simple.
• rotation matrixTo rotate a point around the origin by an angle, you mix its x and y with the sine and cosine of that angle. A shader rotates a picture by rotating each pixel's position the opposite way before drawing.
• cosine paletteA cosine palette makes a smooth, repeating colour gradient from one formula: a + b * cos(6.28318 * (c * t + d)). Change four vectors and you get a different set of colours.
• Fresnel effectThe Fresnel effect is how surfaces look brighter and more reflective at glancing angles. In a shader it is usually written as pow(1 - dot(normal, viewDir), k) and used for rim glow, water and glass.
• shader anti-aliasingTo anti-alias an edge you draw yourself in a shader, fade it from 1 to 0 over about one pixel with smoothstep instead of cutting it with step. The staircase turns into a clean gradient.
• ray marchingRay marching draws a 3D scene without any triangles. For each pixel you send a ray into the scene and walk along it in steps, using a distance function to know how far it is safe to go, until you hit something.

New to all of this? Follow a learning path for a step-by-step order.