Z-Fighting

What it is

The depth buffer stores one value per pixel, usually 24 bits. When two triangles land on the same pixel with depths that round to the same value, which one wins depends on tiny interpolation differences, so the winner changes from pixel to pixel and frame to frame. That noisy, crawling pattern is z-fighting.

Perspective depth is not linear: it is proportional to 1/z, so most of the precision sits right in front of the near plane and very little is left far away. The depth step grows with the square of distance and shrinks as you push the near plane out. Going from near = 0.01 to near = 0.1 buys ten times more precision everywhere; moving the far plane barely matters.

Fixes, in order of preference: don't author coplanar surfaces (cut the hole, or lift decals by a few millimetres); raise camera.near as far as the game allows; use material.polygonOffset to bias one surface toward the camera; and for huge worlds, a logarithmic or reversed-Z float depth buffer (logarithmicDepthBuffer: true or reverseDepthBuffer: true on the renderer).

Nearby, related artefacts share the same cause: shadow acne is z-fighting between a surface and its own shadow map, cured with a depth bias, and flickering outlines on billboards or decals often are too.

Key formulas

Stored depth (perspective)

$z_{buf}=\frac{f}{f-n}\left(1-\frac{n}{z}\right)$

0 at the near plane, 1 at the far plane; hyperbolic in z.

Smallest resolvable gap

$\Delta z\approx \frac{z^2}{n\cdot 2^b}(f\gg n)$

b = depth bits (24). Doubling n halves Δz; doubling z quadruples it.

Polygon offset

$z^{\prime }=z+\text{factor}\cdot \max \left|\frac{\partial z}{\partial x},\frac{\partial z}{\partial y}\right|+\text{units}\cdot r$

r is the smallest resolvable depth step. Negative values pull toward the camera.

Rules of thumb

• Pick near as large as possible: 0.1 for first-person, 0.5–1 for third-person or strategy cameras.
• Keep far/near under about 10,000 with a standard 24-bit buffer.
• Decals: lift 0.001–0.01 world units or use polygonOffsetFactor: -1, polygonOffsetUnits: -4.
• Never place two meshes with exactly coincident faces; boolean them or delete the hidden face.
• Planet-scale or space scenes: use a logarithmic or reversed-Z depth buffer.

Implementation

const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000) // not 0.0001!

const decalMaterial = new THREE.MeshStandardMaterial({
  map: decalTexture,
  transparent: true,
  depthWrite: false,       // decals shouldn't occlude each other
  polygonOffset: true,
  polygonOffsetFactor: -1, // scales with the surface slope
  polygonOffsetUnits: -4,  // constant bias in depth steps
})

// Large worlds: trade a little speed for far more depth precision.
const renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true })

Common mistakes

• Setting near to 0.0001 "to be safe" and destroying precision for the whole scene.
• Raising far to fix fighting; it barely helps. The near plane is what matters.
• Using a fixed tiny offset for decals at all distances; far away it is below one depth step and fights again.
• Huge polygonOffset values that make decals show through walls.
• Coincident faces from modular kits (floors overlapping at seams).

Prompt

In a TypeScript Three.js project, add a `DecalLayer` helper that creates a decal mesh over a surface without z-fighting. Use a material with polygonOffset (factor -1, units -4), depthWrite false and transparent true, and also lift the mesh along the surface normal by an amount that grows with camera distance (e.g. 0.0005 × distance, clamped to 0.02) updated each frame without allocations. Expose a `depthStep(z, near, bits = 24)` utility returning z² / (near × 2^bits) and log a warning on startup if the camera's near is below 0.05. Write a Vitest test for depthStep (doubling near halves it; doubling z quadruples it).

Related

• Surface Normalsthe unit arrow that says which way a surface faces
• Frustum Cullingdon't draw what the camera can't see
• Fragment Shadersa tiny program that runs once for every pixel

Further reading

• Three.js docs — Material.polygonOffset
• Khronos OpenGL wiki — Depth Buffer Precision