Introduction

Every photorealistic image in a film or video game is a lie — a calculated one. The computer never simulates how light actually travels, flooding out from lamps and bouncing around until some lands in your eye. That would be impossibly slow. Instead it cheats: for each pixel on screen, it shoots a single ray backwards, from the camera into the scene, and asks "what did this pixel see?"

That backwards ray hits something — a sphere, a wall, a mirror. If the surface is shiny, the algorithm spawns a reflected ray and follows it. If the surface is glass, it spawns a refracted ray and bends it. Each bounce can spawn more rays. The algorithm is elegantly recursive: the color of a pixel is the color of the nearest hit, which depends on the color of the reflected ray, which depends on the color of whatever that ray hits, and so on until a ray escapes the scene or hits a light source.

This simple recursive idea, first described by Arthur Appel in 1968 and extended by Turner Whitted in 1980, is the engine behind nearly every photorealistic render you have ever seen. Its computational cost — one recursive ray tree per pixel — is the tradeoff that kept it out of real-time graphics for four decades.

Trace the Spheres

Below is a miniature ray tracer running in your browser. It shoots one ray per pixel into a scene of colored spheres sitting on a floor plane, computing reflections and a point light source. Drag the Reflections slider to limit how many times a ray can bounce, and watch the mirror world deepen.

<!-- Ray tracing demo — canvas rendered by JS -->
<div class="controls">
  <label>Reflections: <span id="depthVal">3</span>
    <input type="range" id="depthSlider" min="0" max="5" value="3">
  </label>
  <button id="renderBtn" type="button">Render</button>
</div>
<canvas id="canvas" width="360" height="280" title="Ray-traced scene — spheres with reflections"></canvas>
<div id="status" class="status"></div>

/* Dark theme to match the rendered scene */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #0d1117; color: #e6edf3; }
.controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .5rem 0 .6rem; }
label { font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
input[type=range] { width: 110px; accent-color: #58a6ff; }
button { font: 600 13px system-ui; padding: .35rem .8rem; border: 1px solid #58a6ff;
         background: #1f6feb; color: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: #388bfd; }
canvas { display: block; border-radius: 6px; border: 1px solid #30363d; cursor: default; }
.status { font-size: .8rem; color: #8b949e; margin-top: .4rem; min-height: 1.2em; }

// Minimal ray tracer: shoot one ray per pixel, intersect spheres + floor plane,
// compute diffuse + reflection up to maxDepth bounces.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const i18nFmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));

// Scene: 4 colored spheres with varying reflectivity
const SPHERES = [
  { cx: -1.0, cy: 0.0, cz: 4.5, r: 0.9,  col: [220,  60,  60], refl: 0.3 },
  { cx:  1.2, cy: 0.3, cz: 3.5, r: 0.7,  col: [ 60, 180,  90], refl: 0.4 },
  { cx:  0.0, cy:-0.6, cz: 3.0, r: 0.45, col: [ 80, 140, 220], refl: 0.5 },
  { cx: -0.3, cy: 0.9, cz: 3.8, r: 0.35, col: [230, 190,  50], refl: 0.6 }
];
// Floor plane at y = FLOOR_Y
const FLOOR_Y = -1.0;
// Single point light
const LIGHT = { x: 1.5, y: 3.0, z: 1.0 };
const BG = [15, 20, 30]; // background color

function dot(a, b) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]; }
function norm(v) { const l = Math.sqrt(dot(v,v)); return [v[0]/l, v[1]/l, v[2]/l]; }
function add(a, b) { return [a[0]+b[0], a[1]+b[1], a[2]+b[2]]; }
function sub(a, b) { return [a[0]-b[0], a[1]-b[1], a[2]-b[2]]; }
function scale(v, s) { return [v[0]*s, v[1]*s, v[2]*s]; }
function reflect(d, n) { return sub(d, scale(n, 2*dot(d,n))); }
function clamp(x) { return Math.max(0, Math.min(255, x)); }

// Ray-sphere intersection: solve quadratic |o + t*d - center|^2 = r^2
function hitSphere(ox, oy, oz, dx, dy, dz, s) {
  const ex = ox-s.cx, ey = oy-s.cy, ez = oz-s.cz;
  const a = dx*dx+dy*dy+dz*dz;
  const b = 2*(ex*dx+ey*dy+ez*dz);
  const c = ex*ex+ey*ey+ez*ez - s.r*s.r;
  const disc = b*b - 4*a*c;
  if (disc < 0) return -1;
  const t = (-b - Math.sqrt(disc)) / (2*a);
  return t > 1e-4 ? t : -1;
}

// Ray-plane intersection: y = FLOOR_Y => t = (FLOOR_Y - oy) / dy
function hitFloor(oy, dy) {
  if (Math.abs(dy) < 1e-6) return -1;
  const t = (FLOOR_Y - oy) / dy;
  return t > 1e-4 ? t : -1;
}

// Recursive trace: returns [r,g,b] for a ray from (ox,oy,oz) in direction (dx,dy,dz)
function trace(ox, oy, oz, dx, dy, dz, depth, maxDepth) {
  let tMin = Infinity, hitIdx = -1, hitFloorHit = false;

  // find nearest intersection
  for (let i = 0; i < SPHERES.length; i++) {
    const t = hitSphere(ox, oy, oz, dx, dy, dz, SPHERES[i]);
    if (t > 0 && t < tMin) { tMin = t; hitIdx = i; hitFloorHit = false; }
  }
  const tf = hitFloor(oy, dy);
  if (tf > 0 && tf < tMin) { tMin = tf; hitFloorHit = true; hitIdx = -1; }

  if (tMin === Infinity) return BG; // ray missed everything — return background

  // compute surface normal and base color at hit point
  const px = ox+dx*tMin, py = oy+dy*tMin, pz = oz+dz*tMin;
  let nx, ny, nz, baseCol, refl;

  if (hitFloorHit) {
    // checkerboard floor
    nx = 0; ny = 1; nz = 0;
    const tile = (Math.floor(px) + Math.floor(pz)) & 1;
    baseCol = tile ? [200, 200, 200] : [50, 50, 60];
    refl = 0.2;
  } else {
    const s = SPHERES[hitIdx];
    nx = (px-s.cx)/s.r; ny = (py-s.cy)/s.r; nz = (pz-s.cz)/s.r;
    baseCol = s.col; refl = s.refl;
  }

  // diffuse shading from point light
  const lx = LIGHT.x-px, ly = LIGHT.y-py, lz = LIGHT.z-pz;
  const ld = Math.sqrt(lx*lx+ly*ly+lz*lz);
  const lnx = lx/ld, lny = ly/ld, lnz = lz/ld;
  const diff = Math.max(0, nx*lnx + ny*lny + nz*lnz);
  const ambient = 0.18;
  const light = ambient + (1-ambient)*diff;

  let r = baseCol[0]*light, g = baseCol[1]*light, b = baseCol[2]*light;

  // recursive reflection
  if (depth < maxDepth && refl > 0) {
    const rx = reflect([dx,dy,dz], [nx,ny,nz]);
    const rc = trace(px+rx[0]*1e-4, py+rx[1]*1e-4, pz+rx[2]*1e-4,
                     rx[0], rx[1], rx[2], depth+1, maxDepth);
    r = r*(1-refl) + rc[0]*refl;
    g = g*(1-refl) + rc[1]*refl;
    b = b*(1-refl) + rc[2]*refl;
  }

  return [clamp(r), clamp(g), clamp(b)];
}

let rendering = false;

function render() {
  if (rendering) return;
  rendering = true;
  const maxDepth = parseInt(document.getElementById('depthSlider').value);
  document.getElementById('status').textContent = 'Rendering...';
  document.getElementById('renderBtn').disabled = true;

  // render into an ImageData buffer row by row
  const img = ctx.createImageData(W, H);
  const aspect = W / H;
  // camera at origin looking +z, vertical FOV 60 degrees
  const fov = Math.tan(Math.PI / 6); // half-angle tangent (60 deg)

  let row = 0;
  function renderRow() {
    const y = row;
    for (let x = 0; x < W; x++) {
      // compute ray direction for this pixel (perspective projection)
      const px2 = (2*(x+0.5)/W - 1)*aspect*fov;
      const py2 = (1 - 2*(y+0.5)/H)*fov;
      const d = norm([px2, py2, 1.0]);
      const col = trace(0, 0.5, 0, d[0], d[1], d[2], 0, maxDepth);
      const idx = (y*W + x)*4;
      img.data[idx]   = col[0];
      img.data[idx+1] = col[1];
      img.data[idx+2] = col[2];
      img.data[idx+3] = 255;
    }
    row++;
    if (row < H) {
      // show partial progress every 20 rows
      if (row % 20 === 0) ctx.putImageData(img, 0, 0);
      requestAnimationFrame(renderRow);
    } else {
      ctx.putImageData(img, 0, 0);
      document.getElementById('status').textContent =
        i18nFmt('Rendered with %n% reflection bounce(s). Drag the slider and re-render.', { n: maxDepth });
      document.getElementById('renderBtn').disabled = false;
      rendering = false;
    }
  }
  requestAnimationFrame(renderRow);
}

document.getElementById('renderBtn').addEventListener('click', render);
document.getElementById('depthSlider').addEventListener('input', function() {
  document.getElementById('depthVal').textContent = this.value;
});
render();
Result
Console

Notice how setting reflections to 0 gives flat, unlit colors; each extra bounce adds mirror depth and costs proportionally more computation. A real production renderer uses the same recursive loop — just with physically accurate materials, area lights, and thousands of samples per pixel for Monte Carlo noise reduction.

The Real Complexity

Ray tracing is not a hard problem in the complexity-theoretic sense — it is not NP-complete or undecidable. But it is expensive, and understanding why reveals the entire architecture of modern renderers.

  • Per pixel, per bounce: a scene with W×HW \times H pixels and a maximum depth of dd bounces requires up to W⋅H⋅rdW \cdot H \cdot r^{d} ray–object intersection tests, where rr is the average branching factor (number of secondary rays per hit). Even with r=1r = 1 (one reflection per hit), depth-10 rendering of a 1920×10801920 \times 1080 image means over 20 million intersection tests.
  • Intersection cost: naively testing a ray against nn objects is O(n)O(n). With a Bounding Volume Hierarchy (BVH) — a tree of bounding boxes — this drops to O(log⁡n)O(\log n), making scenes with millions of triangles tractable.
  • Embarrassingly parallel: every pixel's ray tree is completely independent. This is the property that lets modern GPUs — with thousands of shader cores — trace millions of rays simultaneously. NVIDIA's RTX hardware adds dedicated ray-tracing cores that walk the BVH at hardware speed.
  • Path tracing and noise: the physically correct extension, path tracing, picks one random secondary ray at each bounce instead of many, reducing cost per pixel to O(d)O(d) but introducing noise. Convergence requires O(n)O(n) samples per pixel, where the variance falls as 1/n1/\sqrt{n}.

So the algorithm scales as: more pixels ×\times more bounces ×\times more objects == more time, all of it parallelizable. The hard part is not algorithmic complexity — it is fitting enough computation into a 16-millisecond frame budget.

Where It Matters

The recursive ray idea propagated far beyond academic rendering papers:

  • Film and animation: every Pixar, DreamWorks, and Marvel visual-effects shot since the 1990s is rendered with ray- or path-tracing engines (RenderMan, Arnold, V-Ray). A single frame can take hours even on a render farm.
  • Real-time games: NVIDIA's RTX 20-series (2018) put hardware BVH traversal on consumer GPUs, making real-time ray-traced reflections, shadows, and ambient occlusion practical for games like Cyberpunk 2077 and Minecraft RTX.
  • Product visualization and architecture: car manufacturers, furniture brands, and architects use offline ray tracers to produce photorealistic renders of products before they are built — indistinguishable from photography.
  • Scientific visualization: volumetric rendering of CT/MRI data, simulating light through atmospheric models, and radiosity in building energy simulations all borrow ray-tracing mathematics.
  • Global illumination research: path tracing, photon mapping, bidirectional path tracing, and Metropolis light transport are all variants that refine the core idea toward physically accurate light simulation.

Understanding ray tracing is the entry point to the whole field of physically based rendering — the same math that lights Monte Carlo simulations, powers neural network denoising, and underpins every pixel of modern cinema.

Conclusion

Ray tracing is one of those rare ideas that is both conceptually simple and practically profound. Shoot a ray backwards from the camera, ask what it hits, recurse on reflections and refractions — that is the whole algorithm, unchanged since Whitted wrote it down in 1980. What changed over forty years was hardware: the billions of parallel floating-point units on a modern GPU finally make the arithmetic fast enough to run in a game frame.

The deeper lesson is that embarrassing parallelism is as valuable as algorithmic cleverness. Ray tracing did not become fast because someone found a smarter algorithm — it became fast because engineers built hardware that matches the structure of the problem: independent rays, independent pixels, massively parallel. Next time a mirror reflection catches your eye in a game, remember: somewhere a tiny program shot a ray at that mirror, asked what the reflection saw, and recursed until the answer was a color.

Share this article

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

Comments

Loading comments...

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