The Shader Math Toolkit

The Shader Math Toolkit

People think shaders need advanced math. They need about a dozen small functions, and each one reshapes a smooth run of numbers. Learn step, smoothstep, mix, clamp, abs, fract, floor, mod, length, distance, pow and sine, then build a ring from two steps and predict what a shader will draw before you run it. Part of a series on Godot shaders. Liam, in for Bear, narrates.

Chapters 0:00 Opening 0:07 The question 0:19 Key terms 0:37 I · Ramps and Plots 1:46 II · Cut and Blend 3:31 III · Repeat and Fold 5:11 IV · Distance and Curves 6:54 V · Build a Ring 8:00 Recap 8:22 Your turn

Your turn. Paste this into Claude: Write a Godot canvas item shader for a square Color Rect: a soft teal ring around the center, built from distance, smoothstep and mix. Give it one float uniform called radius, limited to a range that keeps the ring inside the square. Then tell me which line does which job. Then check two things yourself.

• Check: the ring is round and centered in the square.
• Check: the radius dial moves the ring in and out, with soft edges.

Sources

• Godot 4.7 documentation, read 2026-10-13: built-in shader functions, introduction to shaders, and the GDScript global scope reference (docs.godotengine.org/en/stable).
• Godot 4.7.2 itself: every result on screen is a scripted capture of a real run, with its renderer stated.

Honest notes. The narration is a synthetic voice (Liam, in for Bear) and has not yet been reviewed by ear. The Godot documentation passage shown at 2:34 is a quote card of the docs text, recorded 2026-10-13, not a screenshot of the page. The numbers in the film were run in Godot 4.7.2 on an Apple M4 Pro. The facts have not yet been signed off by Bear. Nobody has watched this film yet.

Made with the brutalist.art toolkit: Manim, Remotion and Kokoro, free and local. An independent educational film.

What this video covers

• 0:00 — Opening
• 0:07 — The question
• 0:19 — Key terms
• 0:37 — I · Ramps and Plots
• 1:46 — II · Cut and Blend
• 3:31 — III · Repeat and Fold
• 5:11 — IV · Distance and Curves
• 6:54 — V · Build a Ring
• 8:00 — Recap
• 8:22 — Your turn

Transcript

A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.

Opening

[0:00] The Shader Math Toolkit. Learn a dozen small functions that shape what a shader draws, then use three of them to build a soft ring.

The question

[0:07] Hello, this is Liam in for Bear. People think shaders need advanced math. They need about a dozen small functions, and each one reshapes a smooth run of numbers. Learn what each does and you can predict what a shader will draw.

Key terms

[0:19] Five terms. A shader is a small program the graphics card runs to decide how something is drawn. A pixel is one dot of the picture. UV is a point's address on a shape, zero to one across, zero to one down. A function takes numbers in and gives one number out, and a vector is a bundle of two to four numbers.

I · Ramps and Plots

[0:37] This ring is not an image. Three small functions draw it. One measures distance, one softens an edge, one blends two colors. By the end, you will be able to read every line of it. Start with a ramp, a smooth run of values from zero up to one. The simplest ramp is a pixel's address across the shape, zero at the left edge, one at the right. In code, that is UV.x. A shader can show a number as gray. Fragment runs once for each pixel the shape covers and sets its color. Here the color is three copies of the ramp, zero is black, one is white. From here on, every function gets

The same picture. The input runs along the bottom, the output up the side. A dot travels the line, and the strip below shows the output as gray. A function that changes nothing is a straight diagonal. Bend the line and the strip follows. Here the function is 1 - x. The line runs downhill, so the strip runs from white to black. Read the line and you can predict the picture before you see it. About a dozen functions come in three families: cut and blend, step, smoothstep, mix, clamp, repeat and fold, abs, fract, floor, mod, distance and curves, length, normalize, distance, power, sign. Then we use three of them to build a ring.

II · Cut and Blend

[1:46] Step is a switch. Give it an edge and a ramp. Where the ramp is below the edge, the answer is zero. At the edge or above, it is one. The plot is a single jump. In a shader, the edge goes first, then the ramp. Here the edge is a uniform, a dial your game can turn from outside. Slide it and the hard split slides with it. Clamp pins a number inside a range. Below the low end, you get the low end. Above the high end, you get the high end. In between, nothing changes. It is max first, then min. Smooth step is a switch that eases in and out. Give it two edges and a ramp. Below the first

Edge, zero. Above the second, one. Between them, a smooth S with no corners. It is not a straight line and one number shows it. Say the edges are zero and 10 and the input is one. A straight line would give .1. The S gives because it starts out slowly. The docs spell out the formula. Squeeze the input between the edges into zero to one, call that T, and return 3T squared minus 2T cubed. They also warn their first edge at or above the second gives undefined results. In code, the edges are the first two numbers. Here they sit either side of 1/2 and a dial sets how far. Pull them together and the S tightens toward a step. Mix

Slides between two values. Give it a start and end and a weight. Weight zero returns the start, one returns the end, 1/2 lands halfway. It does not pin the weight. A weight of two overshoots the end, so clamp it first. A color is a vector, so mix blends all of its numbers at once. Here it blends teal into gold with the ramp as the weight. The function that slid one number now slides a whole color. The weight can be any reshaped ramp. The plain ramp gives a smooth blend. Step gives a hard cut. Smooth step gives a soft one. A weight like this, a number from zero to one for each pixel, is called a mask. A ramp can

III · Repeat and Fold

[3:32] Be stretched and shifted. Multiply by two and subtract one and it runs from minus one to one with zero in the middle. Now negative numbers are part of the picture. Absolute value, written abs, drops the minus sign. Fold the ramp at zero and the left half lands on top of the right half. The plot is a V and the strip is a mirror. Bright, dark, bright. Fract keeps only what comes after the decimal point. 2.75 becomes .75. Multiply the ramp by four first and fract gives four ramps in a row, each starting over at zero. Fract is one line in a shader. The number you multiply by is how many copies you get. Turn that dial from one up to six, and the picture fills with repeating ramps. Floor keeps the whole part instead. It rounds down to the whole number below. Multiply the ramp

By four and take floor, 0 1 2 3, four flat steps with a jump between each. Every number splits in two. Floor is the whole part, fract is the leftover. 2.75 is 2 + .75. So, floor says which section you are in, and fract says where inside it. Combine fract with step. Fract makes the ramp restart, and step cuts each copy in half. Dark, light, dark, light stripes from two functions and no image. Change the multiplier, and you change the count. Mod gives the remainder after dividing, x - y * floor of x over y. With y equal to 1, it is exactly fract. With y of .25, the ramp repeats every quarter. One trap in a shader, mod of -.25 and 1 is .75. It follows floor. GDScript's fmod keeps the sign and says -.25. fposmod matches the shader. Check which one you wrote.

IV · Distance and Curves

[5:12] Now, two numbers at once. A vector bundles them, and length says how long that bundle is, measured from zero. Three across and four down has length five, the square root of 9 + 16. Normalize keeps a vector's direction and sets its length to one. Take the arrow three across, four down. Normalize it, and you get .6 across, .8 down, same direction, length one. Distance is the length of the gap between two points. Pick the middle of the shape, and ask every pixel how far it is from there. Pixels near the middle get small numbers, pixels far away get big ones. That is one line of shader, the distance from the pixel's address to the middle. The result is a ramp that grows outward in every direction. The middle of each edge is half away, the corners are about .7. A warning before we draw circles, use a square shape. On a wide one, the circle turns into an oval. The address always runs from

Zero to one on both sides, whatever the proportions, so the circle stretches with the shape. Distance is another ramp, so everything so far applies. One minus a smooth step of the distance gives a soft spot of light. It is brightest in the middle and fades to nothing at the edge. Power, written pow in code, raises each value to a power. On a ramp from zero to one, a power above one pulls the curve down, so only the far end stays bright. Below one, it pushes the curve up. Exactly one changes nothing. In code, pow takes the ramp and a power. Turn the power up and the bright part squeezes toward the right edge like a highlight tightening. Keep the first number at zero or above. The docs call a negative one undefined. One more curve, sign repeats smoothly, rolling between minus one and one. Half of sign plus a half squeezes it into zero to one. Think of it as the smooth cousin of fract.

V · Build a Ring

[6:55] Time to build, take the distance to the middle and cut it with step at point three. Closer than that is zero, farther is one. The result is a circle, dark inside, light outside. Swap the two inputs and the circle flips, one inside, zero outside. The edge always comes first, so this reads, is the radius at least the distance? For a ring, cut twice and subtract. Step at point three is one from there outward. Step at point three eight is one from there outward. The first minus the second is one only in between, a pulse. In code, that is step minus step. Here is the ring, a mask that is

One on the ring and zero everywhere else. The edges are hard since each pixel is either they're all in or all out. Now color it with mix using the ring as the weight. Where the mask is zero, you get cream. Where it is one, you get teal. The mask decides how much of each. Swap each step for a smooth step. Each edge now has a width, so the ring fades in and fades out instead of snapping. The same ring with soft edges. Here is the finished shader. Distance makes the ramp smooth step shapes it twice, mix paints it. The radius is a uniform, so your game can turn it and

Recap

[8:00] The ring grows. Let's recap with Claude. A ramp is a smooth run from zero to one and every function reshapes it. Step cuts, smooth step cut softly mix blends, clamp pins, abs folds, fract repeats, floor counts, mod repeats at any length. Length and distance measure normalize keeps a direction, power bends a curve. Distance, smooth step and mix together draw a ring. Read the line of a function and you can predict the picture.

Your turn

[8:23] Your turn, paste this into Claude. Write a Godot canvas item shader for a square color rect, a soft teal ring around the center built from distance, smooth step and mix. Give it one float uniform called radius limited to a range that keeps the ring inside the square. Then tell me which line does which job, then check two things yourself. Is the ring round and centered? And does the radius dial move the ring in and out with soft edges? The shader math toolkit at Nick Bear Brown.