Anti-Aliasing

Every image on your screen is a rectangular grid of pixels — tiny, square, uncompromising. A horizontal or vertical line maps perfectly onto that grid. A diagonal line does not.

When the renderer decides which pixels to light up for a 45-degree edge, it must round each intersection to the nearest whole pixel. The result is a staircase — the jagged zigzag pattern known as aliasing. You see it on game fonts, UI borders, 3D geometry, even SVG icons rendered at small sizes.

Anti-aliasing is any technique that softens that staircase by making boundary pixels partially transparent or blended. The core idea is simple: instead of asking "is this pixel inside or outside the edge?", ask "what fraction of this pixel does the edge cover?" — and color it proportionally.

The word comes from signal processing. A pixel grid is a sampler, and a diagonal edge is a high-frequency signal. Without enough sample points the grid aliases — it misrepresents the signal as a coarser, lower-frequency staircase. Anti-aliasing is the act of increasing or simulating higher sampling density before that misrepresentation happens.

The canvas below renders a white diagonal edge on a dark background. Switch between None, MSAA and FXAA to see what each technique does to the boundary pixels.

<!-- {{c_html_comment}} -->
<div class="controls">
  <span class="label">{{lbl_mode}}</span>
  <button id="btn-none" class="mode-btn active" data-mode="none">{{btn_none}}</button>
  <button id="btn-msaa" class="mode-btn" data-mode="msaa">{{btn_msaa}}</button>
  <button id="btn-fxaa" class="mode-btn" data-mode="fxaa">{{btn_fxaa}}</button>
</div>
<div class="canvases">
  <div class="panel">
    <div class="panel-label">{{lbl_zoom}}</div>
    <canvas id="zoom" width="200" height="200"></canvas>
  </div>
  <div class="panel">
    <div class="panel-label">{{lbl_full}}</div>
    <canvas id="full" width="320" height="200"></canvas>
  </div>
</div>
<div id="info" class="info">{{info_none}}</div>

/* {{c_css_comment}} */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f7fa; color: #222; }
.controls { display: flex; align-items: center; gap: .5rem; padding: .6rem 0 .8rem; flex-wrap: wrap; }
.label { font-size: .85rem; font-weight: 600; color: #555; }
.mode-btn { font: 600 13px system-ui; padding: .35rem .8rem; border: 1.5px solid #1d3557;
            background: #fff; color: #1d3557; border-radius: 6px; cursor: pointer; transition: all .15s; }
.mode-btn.active { background: #1d3557; color: #fff; }
.canvases { display: flex; gap: 1rem; flex-wrap: wrap; }
.panel { display: flex; flex-direction: column; gap: .3rem; }
.panel-label { font-size: .78rem; font-weight: 600; color: #666; text-align: center; }
canvas { display: block; border: 1px solid #cdd5dd; border-radius: 6px; background: #111;
         image-rendering: pixelated; }
#zoom { width: 200px; height: 200px; }
#full { width: 320px; height: 200px; }
.info { margin-top: .7rem; font-size: .85rem; color: #444; line-height: 1.5; min-height: 2.5em; }

// Code not found

None — each pixel is simply on or off; the staircase is sharp and obvious. MSAA (Multisample Anti-Aliasing) shoots multiple sub-pixel samples per pixel and averages the coverage — boundary pixels get a gray blend proportional to how much of the pixel area the edge covers. FXAA (Fast Approximate Anti-Aliasing) is a post-process filter: it reads the finished image, detects high-contrast edges by comparing luminance, then blurs along them. It costs far less than MSAA but can soften detail that isn't actually an edge.

Why does the staircase appear, and how much work does it take to remove it?

The aliasing root cause. A pixel covers a square area of the scene. If the edge crosses that square, the renderer must make a binary decision: lit or dark. That binary choice is the alias. Mathematically, the pixel grid has a Nyquist frequency of $\frac{1}{2}$ cycle per pixel; a diagonal edge changes faster than that, so it aliases.

Supersampling (SSAA). The brute-force fix: render the scene at $k \times k$ the final resolution, then box-filter (average) down. A $4 \times$ supersample takes 16 shading samples per output pixel. Cost: $O(k^2)$ shading work. Quality: near-perfect. Rarely used at full strength because shading is expensive.

MSAA. Multisample Anti-Aliasing separates geometry coverage from shading. For each pixel, $n$ sub-pixel positions are tested against triangle edges — only coverage is evaluated $n$ times, but shading runs once per visible triangle per pixel. A 4× MSAA pixel has 4 sample points; the final color is the edge's color multiplied by the fraction of samples inside the triangle. Cost scales with $n$ coverage tests, not $n$ full shader runs.

FXAA. A single-pass screen-space filter. It computes the luminance $L$ at each pixel and its four neighbors. High local contrast ($\max(L) - \min(L) > \text{threshold}$) signals an edge. The filter then blends the pixel along the detected edge direction. No geometry information is used; it works entirely on the final image. It runs in $O(1)$ per pixel but can blur fine detail.

TAA. Temporal Anti-Aliasing reuses samples from previous frames, accumulating a moving average over time. It achieves quality close to 8× MSAA at near-FXAA cost, but introduces ghosting when objects move fast. Modern engines (Unreal, Unity) default to TAA or its variants (DLSS, FSR) for this reason.

The common thread: trading shading cost for coverage information. The more sub-pixel information you gather — spatially or temporally — the smoother the edge, at a proportional computational price.

The staircase problem appears wherever continuous geometry meets a discrete grid:

• 3D games and film CGI. Triangle edges, shadow boundaries and specular highlights all alias violently at typical resolutions. MSAA, TAA and vendor-specific super-resolution (NVIDIA DLSS, AMD FSR) are the front line of modern rendering pipelines.
• Font rendering. Sub-pixel anti-aliasing (ClearType, FreeType hinting) exploits the RGB stripe layout of LCD panels to triple the effective horizontal resolution, making text at 12 px look sharp. Without it, small glyphs would be unreadable staircases.
• Vector-to-raster export. When a browser renders SVG or a design tool exports a PNG, it must decide how much of each pixel a Bézier curve covers. High-quality rasterizers use analytic coverage — integrating the exact area of the curve inside each pixel — rather than sampling.
• Medical and satellite imaging. Resampling a CT scan or resizing a satellite tile introduces aliasing in structures smaller than a pixel. Lanczos and sinc filters are the anti-aliasing equivalents for image resampling.
• Signal processing broadly. Anti-aliasing filters on ADC inputs are analog low-pass filters that remove frequencies above the Nyquist limit before the signal is sampled. The concept is the same: prevent high frequencies from folding back into the sampled signal as false low-frequency content.

Understand anti-aliasing and you understand dimensionality reduction and sampling theory — the same trade-off between resolution, cost and perceptual quality runs through all of them.

Every diagonal you see on screen is secretly a staircase — it's just that anti-aliasing blends the boundary pixels so convincingly that your eye fills in the gap. From simple coverage averaging in MSAA to luminance-guided blurring in FXAA to multi-frame accumulation in TAA, every approach answers the same question: how much of this pixel does the edge own?

The deeper lesson is about sampling. A pixel grid is a sampler with a fixed frequency ceiling. Any geometric detail finer than half a pixel spacing cannot be represented faithfully — only approximated. Anti-aliasing is the art of making that approximation perceptually invisible, one boundary blend at a time.

Next time a game menu lets you choose between MSAA, FXAA and TAA, you'll know the trade-off: sharp geometry coverage versus fast post-processing versus temporal quality — and why none of them is free.