Aliasing & antialiasing

Lesson 03

Detail that's too fine to draw doesn't just vanish — it disguises itself as coarse junk that wasn't there: moiré rings, jagged edges, a shimmer that crawls when things move. Antialiasing is the art of sampling often enough, or in the right places, to keep that from happening.

Try this: the star's wedges get finer and finer toward the middle. Start on SSAA 2× — the center is calm. Switch to None and watch it dissolve into crawling rings. Now switch to MSAA 4× — and notice it looks exactly as bad as None. That surprise is the whole lesson.

Why the center shimmers

The star's stripes get closer together the nearer they are to the middle, so the detail's frequency climbs toward infinity at the center. A pixel grid has a fixed spacing, so past a certain point there are more stripes than pixels to hold them. When you sample high-frequency detail below the rate it needs (Nyquist's limit), the energy doesn't disappear — it folds back down and reappears as a low-frequency pattern that was never in the original. That's aliasing: the moiré rings, and the crawl as it spins.

Coverage is not the same as shading

To see the fix, separate two things a renderer does per pixel. Coverage is the geometry question: which parts of this pixel does the triangle touch? Shading is the color question: run the fragment shader to decide what those parts look like. For a hard triangle edge, coverage is where the jaggies live. For the star's interior, every pixel is fully covered by one big triangle — the ugliness is entirely in the shading.

MSAA: more coverage samples, same shading

MSAA (multisample antialiasing) takes several coverage-and-depth samples per pixel — four, here — but runs the fragment shader once per pixel and shares that single color across whichever samples the triangle covered. It's cheap and it works beautifully on edges, where samples differ in whether they're inside the triangle. But the star's interior is fully covered everywhere, so all four samples get the same one shaded color, and MSAA changes nothing. That's why MSAA 4× above looks identical to None: the problem was never coverage.

SSAA: actually shade more often

SSAA (supersampling) attacks the real problem: it runs the fragment shader more times. Render the whole scene into a target that's larger per axis — 2× here, so four shader evaluations per final pixel — then average each block back down. Now the high-frequency star is sampled densely enough that the average is a stable gray, and the center settles. It's the honest fix, and the expensive one: 4× the shading work. Real engines lean on MSAA for edges and reserve supersampling (or cleverer post-process and temporal methods) for the shader-detail case you're looking at here.