Introduction

Open any 3D game, pause on a bright scene, and look at the shadows. Every one of them — the sharp silhouette of a building, the soft penumbra under a tree — was calculated in a fraction of a millisecond by the same elegant trick invented by Lance Williams in 1978: shadow mapping.

The core idea is almost childishly simple. Before drawing the scene for your eye, the GPU draws it once more, pretending to be the light. From that vantage point it records only how far away each surface is — a depth value per pixel called the shadow map. Then, when drawing the scene for real, it asks for every visible point: was the light closer than that depth value, or farther? Closer means lit; farther means something blocked the light — shadow.

That depth-comparison is O(1)O(1) per pixel — a single texture lookup and one numerical test. Yet from this nearly trivial operation emerges the convincing shadows that make 3D graphics feel three-dimensional. Understanding shadow mapping means understanding the bridge between simple geometry and believable light.

Move the Light

The demo below runs a 2D version of the full algorithm. There is one point light, two rectangular blockers, and a receiver plane. Drag the light to move it and watch the shadows swing.

<!-- Shadow mapping demo — canvas receives shadow based on light position -->
<div class="hint">Move the sliders or <b>drag directly on the canvas</b> to reposition the light. The algorithm records the nearest blocker distance along every ray (the shadow map), then checks each point on the ground against that record to decide: lit or in shadow?</div>
<div class="scene-wrap">
  <canvas id="scene" width="420" height="320"></canvas>
  <div class="coords" id="coords"></div>
</div>
<div class="controls">
  <label>Light X: <input type="range" id="lx" min="60" max="360" value="210"></label>
  <label>Light Y: <input type="range" id="ly" min="20" max="140" value="50"></label>
</div>
<div class="status" id="status">Drag the light to cast shadows.</div>
<div class="legend">
  <span class="leg-lit">&#9632; Lit</span>
  <span class="leg-shadow">&#9632; Shadow</span>
  <span class="leg-blocker">&#9632; Blocker</span>
  <span class="leg-light">&#9711; Light</span>
</div>

/* Scene styles — dark background simulates night scene */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; color: #222; }
.hint { font-size: .88rem; color: #444; margin: 0 0 .6rem; line-height: 1.5; }
.scene-wrap { position: relative; display: inline-block; }
canvas { display: block; border: 1px solid #cdd9e3; border-radius: 8px; background: #0a0f1a; }
.coords { position: absolute; top: 6px; right: 8px; font-size: .75rem; color: #aaa; pointer-events: none; }
.controls { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
label { font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
input[type=range] { flex: 1; }
.status { font-size: .9rem; font-weight: 600; color: #1d3557; min-height: 1.3em; margin: .3rem 0; }
.legend { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .78rem; margin-top: .3rem; }
.leg-lit { color: #f4c842; }
.leg-shadow { color: #2d3d5a; }
.leg-blocker { color: #7a5c2e; }
.leg-light { color: #ffe680; }

// Shadow mapping 2D demo — interactive light with depth-based shadow test
// Algorithm: (1) build shadow map (nearest blocker distance per ray angle), (2) shade receiver by comparing point distance to shadow map entry.

const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;

// The horizontal receiver plane (ground) at the bottom of the canvas
const RECEIVER_Y = 280;

// Two rectangular blockers that cast shadows
const BLOCKERS = [
  { x: 90,  y: 160, w: 80, h: 30 },
  { x: 250, y: 190, w: 90, h: 25 }
];

// Shadow map = array of nearest blocker distances per ray direction
// One entry per discrete angle around the light source
const RAYS = 420;

// Current light position (pixels)
let lightX = 210, lightY = 50;

function buildShadowMap(lx, ly) {
  // Cast one ray per angle slot; record nearest blocker distance
  const map = new Float32Array(RAYS);
  for (let i = 0; i < RAYS; i++) {
    // Evenly-spaced angle for this ray
    const angle = (i / RAYS) * Math.PI * 2;
    const dx = Math.cos(angle), dy = Math.sin(angle);
    let minDist = Infinity;
    // Test intersection with every blocker and keep the nearest hit
    for (const b of BLOCKERS) {
      const d = rayBoxIntersect(lx, ly, dx, dy, b);
      if (d > 0 && d < minDist) minDist = d;
    }
    map[i] = minDist;
  }
  return map;
}

function rayBoxIntersect(ox, oy, dx, dy, b) {
  // Slab method ray-AABB intersection; returns distance along ray or -1 if no hit
  // Early-out when the ray is parallel to an axis and the origin is outside that slab
  if (dx === 0 && (ox < b.x || ox > b.x + b.w)) return -1;
  if (dy === 0 && (oy < b.y || oy > b.y + b.h)) return -1;
  const tMinX = dx !== 0 ? (b.x - ox) / dx : -Infinity;
  const tMaxX = dx !== 0 ? (b.x + b.w - ox) / dx : Infinity;
  const tMinY = dy !== 0 ? (b.y - oy) / dy : -Infinity;
  const tMaxY = dy !== 0 ? (b.y + b.h - oy) / dy : Infinity;
  const tEnter = Math.max(Math.min(tMinX, tMaxX), Math.min(tMinY, tMaxY));
  const tLeave = Math.min(Math.max(tMinX, tMaxX), Math.max(tMinY, tMaxY));
  if (tLeave < 0 || tEnter > tLeave) return -1;
  return tEnter > 0 ? tEnter : tLeave;
}

function angleTo(lx, ly, px, py) {
  // Angle from light to point in [0, 2*pi)
  let a = Math.atan2(py - ly, px - lx);
  if (a < 0) a += Math.PI * 2;
  return a;
}

function isInShadow(lx, ly, px, py, shadowMap) {
  // Look up the shadow map at the angle toward the point; shadow if point is farther than recorded depth
  const angle = angleTo(lx, ly, px, py);
  const idx = Math.round((angle / (Math.PI * 2)) * RAYS) % RAYS;
  const dist = Math.hypot(px - lx, py - ly);
  // Small bias to avoid self-shadowing artifacts (shadow acne)
  const BIAS = 2;
  return dist > shadowMap[idx] + BIAS;
}

function draw() {
  const shadowMap = buildShadowMap(lightX, lightY);
  ctx.clearRect(0, 0, W, H);

  // Draw the receiver strip pixel by pixel — lit or shadowed
  for (let x = 0; x < W; x++) {
    const inShadow = isInShadow(lightX, lightY, x, RECEIVER_Y, shadowMap);
    ctx.fillStyle = inShadow ? '#1a2540' : '#f4c842';
    ctx.fillRect(x, RECEIVER_Y, 1, 14);
  }

  // Draw faint light rays to visualize the shadow map sampling
  ctx.globalAlpha = 0.07;
  ctx.strokeStyle = '#ffe680';
  ctx.lineWidth = 1;
  for (let x = 0; x < W; x += 8) {
    ctx.beginPath();
    ctx.moveTo(lightX, lightY);
    ctx.lineTo(x, RECEIVER_Y);
    const inShadow = isInShadow(lightX, lightY, x, RECEIVER_Y, shadowMap);
    ctx.strokeStyle = inShadow ? '#334' : '#ffe680';
    ctx.stroke();
  }
  ctx.globalAlpha = 1;

  // Draw solid blocker rectangles
  for (const b of BLOCKERS) {
    ctx.fillStyle = '#7a5c2e';
    ctx.strokeStyle = '#c8982a';
    ctx.lineWidth = 1.5;
    ctx.fillRect(b.x, b.y, b.w, b.h);
    ctx.strokeRect(b.x, b.y, b.w, b.h);
  }

  // Visualize the shadow map as dots on an arc around the light
  // Red dot = blocker hit within arc radius; green = open ray
  const ARC_R = 36;
  ctx.strokeStyle = '#334466';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(lightX, lightY, ARC_R, 0, Math.PI * 2);
  ctx.stroke();
  for (let i = 0; i < RAYS; i += 4) {
    const angle = (i / RAYS) * Math.PI * 2;
    const r = Math.min(shadowMap[i], ARC_R * 2);
    const ex = lightX + Math.cos(angle) * Math.min(r, ARC_R);
    const ey = lightY + Math.sin(angle) * Math.min(r, ARC_R);
    ctx.fillStyle = r < ARC_R * 2 ? '#ff6644' : '#226622';
    ctx.fillRect(ex - 0.8, ey - 0.8, 1.6, 1.6);
  }

  // Draw the glowing light source
  ctx.beginPath();
  ctx.arc(lightX, lightY, 10, 0, Math.PI * 2);
  ctx.fillStyle = '#ffe680';
  ctx.shadowColor = '#ffe680';
  ctx.shadowBlur = 18;
  ctx.fill();
  ctx.shadowBlur = 0;

  // Label the light source
  ctx.font = '11px system-ui';
  ctx.fillStyle = '#fff';
  ctx.fillText('Light', lightX + 13, lightY + 4);

  // Update lit-percentage status text
  const litCount = [...Array(W)].filter((_, x) =>
    !isInShadow(lightX, lightY, x, RECEIVER_Y, shadowMap)).length;
  document.getElementById('status').textContent =
    `${Math.round((litCount / W) * 100)}% of the ground is lit`;
  document.getElementById('coords').textContent =
    `Light: (${lightX}, ${lightY})`;
}

// Update light position from sliders
document.getElementById('lx').addEventListener('input', e => {
  lightX = +e.target.value; draw();
});
document.getElementById('ly').addEventListener('input', e => {
  lightY = +e.target.value; draw();
});

// Allow clicking / dragging on the canvas to move the light
let dragging = false;
canvas.addEventListener('mousedown', e => { dragging = true; moveTo(e); });
canvas.addEventListener('mousemove', e => { if (dragging) moveTo(e); });
canvas.addEventListener('mouseup', () => { dragging = false; });
canvas.addEventListener('mouseleave', () => { dragging = false; });

canvas.addEventListener('touchstart', e => { e.preventDefault(); dragging = true; moveTo(e.touches[0]); }, { passive: false });
canvas.addEventListener('touchmove', e => { e.preventDefault(); if (dragging) moveTo(e.touches[0]); }, { passive: false });
canvas.addEventListener('touchend', () => { dragging = false; });

function moveTo(e) {
  // Convert mouse/touch position to canvas coordinates and update light
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width, scaleY = H / rect.height;
  lightX = Math.round((e.clientX - rect.left) * scaleX);
  lightY = Math.round((e.clientY - rect.top) * scaleY);
  lightX = Math.max(10, Math.min(W - 10, lightX));
  lightY = Math.max(10, Math.min(RECEIVER_Y - 10, lightY));
  document.getElementById('lx').value = lightX;
  document.getElementById('ly').value = lightY;
  draw();
}

draw();
Result
Console

Notice what happens step by step: the algorithm first traces rays from the light to record the nearest distance it can see along each angle (the shadow map), then checks every surface point against that recorded distance. Points the light cannot reach directly — because a blocker is closer — fall into shadow. The comparison is instantaneous; the tricky part is storing and sampling the depth values accurately enough to avoid the shimmering artifact known as shadow acne.

The Real Complexity

Shadow mapping is deceptively cheap on paper and surprisingly finicky in practice.

Why it is fast. The shadow-map pass renders the scene once from the light, writing a depth value per texel — O(T)O(T) work where TT is the shadow-map resolution. The shading pass then performs one texture lookup per screen pixel — O(P)O(P) work. Total cost is O(T+P)O(T + P), linear in pixels, with no rays cast at all.

Why it is tricky. Three problems conspire to ruin naïve shadow mapping:

  • Shadow acne. A surface can shadow itself when the depth stored in the shadow map is slightly off due to the finite resolution of floating-point numbers. The fix is to add a small bias — shift the stored depth by ε\varepsilon — but too large a bias causes light to leak underneath objects (Peter Panning).
  • Aliasing. A single shadow-map texel covers many screen pixels near the camera, producing jagged shadow edges. Cascaded Shadow Maps (CSM) split the view frustum into slices, using a high-resolution map close to the camera and coarser maps far away.
  • Hard vs. soft edges. Real light sources are not points, so shadows have a penumbra. Percentage Closer Filtering (PCF) averages several shadow-map samples to blur edges. PCSS (Percentage Closer Soft Shadows) varies the blur radius with estimated blocker distance to mimic area-light penumbrae.

These refinements do not change the asymptotic cost but multiply the constant: a production game renderer may issue 16 or more shadow-map samples per pixel per light. The fundamental insight — compare depth from the light's view — remains unchanged.

Where It Matters

Shadow mapping is not one algorithm among many — it is the default choice whenever shadows must be rendered at interactive frame rates:

  • Game engines. Unreal Engine, Unity, and Godot all ship cascaded shadow maps as their primary shadow method. The cascade count, resolution, and bias values are the most-tuned parameters in any outdoor scene.
  • Augmented and mixed reality. AR overlays virtual objects on camera feeds. For the overlay to look convincing, virtual shadows must fall on real surfaces, requiring a depth map of the real scene — the same depth-comparison logic applied to a captured depth buffer.
  • Film VFX previsualization. Feature-film rendering uses path tracing for final images, but directors and artists review shots in real time using shadow-mapped previews that are physically convincing enough for editorial decisions.
  • Architectural visualization. Interactive walkthroughs of buildings render thousands of shadow-casting lights with techniques derived from shadow mapping, including virtual shadow maps that tile the entire scene into one giant depth atlas.

The same depth-comparison idea also powers screen-space ambient occlusion (SSAO), which approximates how much ambient light reaches each surface point — another case where a single depth buffer unlocks a whole class of lighting effects. See also ray tracing for the complementary approach where every shadow ray is explicitly traced.

Conclusion

Shadow mapping distills an apparently difficult question — "is this point in shadow?" — into a single depth lookup. Render from the light, record distances, compare: three steps, and the scene fills with shadows that make it feel real.

The practical complications — acne, aliasing, soft penumbrae — are real, but they all live in the constant factor, not in the algorithm's fundamental cost. The insight that a change of viewpoint (from the camera to the light) can turn a hard visibility query into a trivial comparison is as elegant as anything in computer graphics.

Next time you see a crisp shadow stretching across a game world, remember: the GPU rendered that scene twice, once with the light's eyes, and the second time it just looked up a number.

Share this article

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

Comments

Loading comments...

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