Antialiasing with fwidth

Look closely at a circle drawn with step(): the edge is a staircase. Each pixel is asked a yes-or-no question (inside or outside?) and a pixel can only be fully one color. A diagonal or curved edge cannot be drawn with squares, so you see jaggies. The fix is to let the pixels on the edge be partly covered: a blend of the two colors.

The previous lessons did this with smoothstep(0.0, 0.02, d), a blur of a fixed width. That has a catch: 0.02 is measured in your own coordinates, not in pixels. On a small preview it is about three pixels wide, on a big screen it is a fraction of a pixel and the jaggies come back; make the picture bigger and the edge gets fuzzy or sharp for no reason.

fwidth: how big is one pixel?

The GPU draws pixels in small groups, so it can compare a value with the same value at the neighbouring pixel. fwidth(x) is exactly that: how much x changes from one pixel to the next. For a distance d, fwidth(d) is the size of one pixel in distance units, wherever you are and at any resolution.

float d = length(p) - 0.3;      // negative inside, positive outside
float w = fwidth(d);            // one pixel, in the same units as d
float m = 1.0 - smoothstep(-w, w, d);   // soft over about one pixel, always

Now the edge is always about one pixel soft: no staircase, and never blurry. This is how most real shader art and UI shaders draw crisp, smooth shapes, and why the heart in the daily challenge uses it.

Thin lines are the hard case. A line thinner than a pixel with step breaks into dashes. Use the distance to the line's center, subtract the half-width, and run that through the same fwidth smoothstep.