Introduction

Every time a GPU draws a 3D scene, it faces a question millions of times per frame: which surface is closest to the camera at this pixel? Everything behind that surface must be hidden. Get it wrong and a distant mountain pokes through a wall, or a character's arm floats in front of their face.

Before the mid-1970s, the standard answer was the painter's algorithm: sort every polygon by depth, then paint them back-to-front so closer ones cover farther ones. It sounds reasonable, until two polygons overlap each other cyclically — a situation that simply has no valid painting order.

In 1974, Edwin Catmull proposed a radical simplification: forget sorting the whole scene. Instead, keep a depth value (the zz-coordinate) for every pixel on screen. Each time a surface covers a pixel, compare its depth against the stored value. If it is closer, update the pixel's color and its stored depth. If it is farther, discard it. One array of numbers — the z-buffer — replaces all that sorting, and hidden-surface removal becomes an O(n)O(n) per-pixel test rather than an O(nlog⁡n)O(n \log n) sort.

That insight is now baked into every GPU ever made.

Try It

The canvas below renders two overlapping colored quads in a simple software rasterizer. Use the toggle to enable or disable the depth buffer.

<!-- Demo controls and canvas -->
<div class="controls">
  <label class="toggle-label">
    <input type="checkbox" id="depthToggle" checked />
    <span class="toggle-track"><span class="toggle-thumb"></span></span>
    <span id="toggleText">Depth buffer ON</span>
  </label>
  <button id="resetBtn" type="button" class="ghost">Reset</button>
</div>
<canvas id="canvas" width="400" height="280"></canvas>
<div id="info" class="info">Toggle the depth buffer to see the difference.</div>
<div class="legend">
  <span class="leg-item"><span class="leg-swatch green"></span> Green quad (near, z=0.3)</span>
  <span class="leg-item"><span class="leg-swatch red"></span> Red quad (far, z=0.8)</span>
</div>

/* Styles for the z-buffer demo */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; background: #f7f9fb; }
.controls { display: flex; align-items: center; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; }
.toggle-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; font-size: .95rem; }
.toggle-track { width: 44px; height: 24px; border-radius: 12px; background: #aaa; position: relative; transition: background .2s; flex-shrink: 0; }
input[type=checkbox]:checked + .toggle-track { background: #1d6fa5; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px #0003; }
input[type=checkbox]:checked + .toggle-track .toggle-thumb { left: 23px; }
input[type=checkbox] { display: none; }
canvas { display: block; width: 100%; max-width: 400px; border-radius: 10px; border: 1px solid #cdd9e3; background: #1a1a2e; }
.info { font-size: .88rem; color: #555; margin-top: .5rem; min-height: 1.3em; }
.legend { display: flex; gap: 1.2rem; margin-top: .5rem; font-size: .85rem; }
.leg-item { display: flex; align-items: center; gap: .35rem; }
.leg-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.leg-swatch.green { background: #4ade80; }
.leg-swatch.red { background: #f87171; }
button.ghost { font: 600 13px system-ui, sans-serif; padding: .35rem .8rem; border: 1px solid #1d3557; background: #fff; color: #1d3557; border-radius: 8px; cursor: pointer; }

// Software rasterizer with optional per-pixel depth test
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width;
const H = canvas.height;

// Two overlapping quads. Red is far (z=0.8), green is near (z=0.3).
// Each vertex has x, y screen coords and a z depth value (0=near, 1=far).
// Lower z = closer to camera.
const QUADS = [
  {
    verts: [ {x:60,y:180,z:0.8}, {x:260,y:180,z:0.8}, {x:220,y:60,z:0.8}, {x:100,y:60,z:0.8} ],
    color: [248, 113, 113]
  },
  {
    verts: [ {x:140,y:230,z:0.3}, {x:340,y:230,z:0.3}, {x:300,y:90,z:0.3}, {x:180,y:90,z:0.3} ],
    color: [74, 222, 128]
  }
];

// Allocate z-buffer (one float per pixel, initialized to Infinity = nothing drawn yet).
let zBuffer = new Float32Array(W * H);
let pixelData;

function resetBuffers() {
  // Reset z-buffer to Infinity and fill canvas with dark background.
  zBuffer.fill(Infinity);
  const imageData = ctx.createImageData(W, H);
  pixelData = imageData.data;
  // Fill background color (dark navy).
  for (let i = 0; i < pixelData.length; i += 4) {
    pixelData[i]     = 26;
    pixelData[i + 1] = 26;
    pixelData[i + 2] = 46;
    pixelData[i + 3] = 255;
  }
  return imageData;
}

// Edge function: positive means point is on the left side of the edge AB.
function edgeFn(ax, ay, bx, by, px, py) {
  return (bx - ax) * (py - ay) - (by - ay) * (px - ax);
}

// Bounding box of a triangle: only test pixels inside it.
function boundingBox(verts) {
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  for (const v of verts) {
    if (v.x < minX) minX = v.x;
    if (v.y < minY) minY = v.y;
    if (v.x > maxX) maxX = v.x;
    if (v.y > maxY) maxY = v.y;
  }
  return {
    minX: Math.max(0, Math.floor(minX)),
    minY: Math.max(0, Math.floor(minY)),
    maxX: Math.min(W - 1, Math.ceil(maxX)),
    maxY: Math.min(H - 1, Math.ceil(maxY))
  };
}

// Rasterize a quad (split into 2 triangles). For each pixel in the bounding box,
// test if it is inside the triangle and perform the depth test.
function rasterizeQuad(quad, imageData, useDepth) {
  const v = quad.verts;
  const [r, g, b] = quad.color;
  // Split quad into two triangles.
  const tris = [
    [v[0], v[1], v[2]],
    [v[0], v[2], v[3]]
  ];
  for (const [a, b2, c] of tris) {
    const box = boundingBox([a, b2, c]);
    const area = edgeFn(a.x, a.y, b2.x, b2.y, c.x, c.y);
    if (Math.abs(area) < 0.0001) continue;
    for (let py = box.minY; py <= box.maxY; py++) {
      for (let px = box.minX; px <= box.maxX; px++) {
        // Barycentric weights — if all same sign as area, pixel is inside the triangle.
        const w0 = edgeFn(a.x, a.y, b2.x, b2.y, px + 0.5, py + 0.5);
        const w1 = edgeFn(b2.x, b2.y, c.x, c.y, px + 0.5, py + 0.5);
        const w2 = edgeFn(c.x, c.y, a.x, a.y, px + 0.5, py + 0.5);
        const inside = (area > 0)
          ? (w0 >= 0 && w1 >= 0 && w2 >= 0)
          : (w0 <= 0 && w1 <= 0 && w2 <= 0);
        if (!inside) continue;
        // Interpolate depth using barycentric coordinates.
        const bA = w1 / area;
        const bB = w2 / area;
        const bC = w0 / area;
        const z = bA * a.z + bB * b2.z + bC * c.z;
        const idx = py * W + px;
        if (useDepth && z >= zBuffer[idx]) continue;
        if (useDepth) zBuffer[idx] = z;
        const p = idx * 4;
        imageData.data[p]     = r;
        imageData.data[p + 1] = g;
        imageData.data[p + 2] = b;
        imageData.data[p + 3] = 255;
      }
    }
  }
}

function draw() {
  const useDepth = document.getElementById('depthToggle').checked;
  const imageData = resetBuffers();
  for (const quad of QUADS) {
    rasterizeQuad(quad, imageData, useDepth);
  }
  ctx.putImageData(imageData, 0, 0);
  const info = document.getElementById('info');
  if (useDepth) {
    info.textContent = 'Depth buffer ON: green (z=0.3) correctly covers red (z=0.8) in the overlap.';
  } else {
    info.textContent = 'Depth buffer OFF: draw order decides — red is drawn first, so green paints over it everywhere (correct by accident here, but order is arbitrary).';
  }
  document.getElementById('toggleText').textContent = useDepth
    ? 'Depth buffer ON'
    : 'Depth buffer OFF';
}

document.getElementById('depthToggle').addEventListener('change', draw);
document.getElementById('resetBtn').addEventListener('click', () => {
  document.getElementById('depthToggle').checked = true;
  draw();
});

draw();
Result
Console

With the depth buffer on, the green quad (closer to the camera) correctly covers the red quad where they overlap. With it off, whichever quad was drawn last simply paints over the other — order matters and the result is wrong. The depth buffer frees the renderer from caring about draw order at all.

The Real Complexity

Hidden-surface removal looks like a sorting problem, and for decades it was treated as one. The z-buffer reframed it entirely.

  • The painter's algorithm sorts nn polygons by depth: O(nlog⁡n)O(n \log n) in the best case, but it fails on cyclic overlaps — three polygons A, B, C where A is partly in front of B, B in front of C, and C in front of A. No back-to-front order exists.
  • Binary Space Partitioning (BSP) pre-processes the scene into a tree that always gives a valid painting order, but the pre-processing is expensive and the tree must be rebuilt for every scene change.
  • The z-buffer is O(n⋅p)O(n \cdot p) where nn is the number of triangles and pp is the average number of pixels each triangle covers. For a typical scene that is effectively O(n)O(n) — a single pass, no sorting, no BSP tree.
  • The cost is memory: one depth value per pixel. At 4K resolution (3840×21603840 \times 2160) that is about 33 million depth values. With 32-bit floats, roughly 128 MB — well within a modern GPU's frame buffer.

The z-buffer is a classic space-time tradeoff: spend O(w⋅h)O(w \cdot h) memory (screen width times height) to avoid a global sort. It also introduces precision artifacts when two surfaces are very close in depth (zz-fighting), because the limited precision of the depth values cannot distinguish them.

One subtle issue: standard z-buffers distribute precision non-uniformly. Values near the camera get more precision than distant ones. The reversed-z trick (mapping the near plane to 1.0 and the far plane to 0.0) improves this, and is now standard in modern engines.

Where It Matters

The z-buffer is so fundamental that it has become invisible — it is simply assumed by every rasterization pipeline:

  • Real-time games and engines: every frame drawn by a GPU uses a depth buffer. Disabling it is only done deliberately for effects like transparent surfaces or UI overlays.
  • Shadow mapping: to compute shadows, a depth buffer is rendered from the light's point of view. A pixel in the main scene is in shadow if its depth from the light is greater than the stored value — the same comparison, reused.
  • Deferred rendering: modern engines render scene geometry into a G-buffer (geometry buffer) that stores depth, normals, and albedo in separate textures. Lighting is then computed in a second pass using only the visible surfaces — all selected by the depth buffer.
  • Augmented reality: AR headsets must blend virtual objects with the real world. A depth sensor provides real-world zz-values; virtual objects write to the same depth buffer and are correctly occluded by real surfaces.
  • Medical imaging: CT and MRI volume rendering uses depth compositing to correctly display layered tissue.

Even the painter's algorithm is still used for a narrow case: transparent surfaces, which must be sorted and blended back-to-front after all opaque geometry has been depth-tested. The two approaches coexist in every modern rendering pipeline.

Conclusion

Edwin Catmull's insight — store one depth value per pixel and update it greedily — transformed hidden-surface removal from an O(nlog⁡n)O(n \log n) sorting puzzle into an O(n)O(n) linear scan. The tradeoff is memory, and on any hardware made after 1990 that memory is essentially free.

The z-buffer does not solve every depth problem: zz-fighting, transparent surfaces, and the limitations of finite depth precision all require extra care. But as a default assumption baked into the silicon of every GPU, it is one of the most successful algorithmic simplifications in the history of computing.

The next time a distant mountain stays behind a wall in a video game, or a virtual chair sits correctly on a real floor in an AR headset, the z-buffer is doing its quiet per-pixel work — one comparison, millions of times per second.

Share this article

Pick a channel — or use your device's native share sheet.

Comments

Loading comments...

https://www.kipuhub.com/en/article/z-buffer/Content licensed under CC BY-NC 4.0.