Reflections, explained: probe, SSR, ray tracing

Reflection probe

Photograph the room once, in all six directions, from one point (a cubemap). Pre-blur copies of it for each roughness (PMREM). At draw time, look up the reflected direction. Box projection first works out where that ray would hit the room's walls, so walls line up.

good

No noise, no rays, almost free per frame. Perfect for rough surfaces.

bad

A snapshot: moving things freeze. Everything is treated as if painted on the walls, so objects inside the room reflect in the wrong place, and there's light leaking where it should be dark.

cost

A bake: 6 renders + a prefilter (about 2 ms here, on demand). Then a texture lookup per pixel.

Screen-space reflections (SSR)

The frame you just rendered already has the colour and depth of every visible surface. Walk along the reflected ray in screen space, step by step, and stop where it passes behind a surface in the depth buffer: that pixel's colour is the reflection. three.js's SSRNode does this.

good

Exact and live for anything on screen, including moving objects. Cost doesn't depend on how big the scene is.

bad

Knows nothing that isn't on screen: off the edges, behind the camera, behind other objects, the back of things. Those need a fallback (here, the probe).

cost

A fixed amount per pixel (a few dozen depth reads), plus a denoiser.

Ray tracing

Shoot a real ray into the scene's triangles. A BVH (a tree of boxes around the geometry, from three-mesh-bvh) lets it skip everything the ray can't hit. At the hit, shade the surface: here its colour, one shadow ray to the light, and ambient.

good

Right almost everywhere: off screen, behind the camera, hidden surfaces, moving objects.

bad

Noisy on rough surfaces. The BVH must be kept up to date when things move or deform. Shading at the hit is simplified (no textures here, one light bounce).

cost

Grows with triangle count and how many rays you shoot. Small here (27k triangles); much more in a big game level.

Hybrid

Use each method where it's good. Rougher than a cutoff: the prefiltered probe, no ray. Glossy: try SSR first (cheap, exact on screen). Where SSR finds nothing, trace a real ray. Where that ray leaves the room, use the probe. This is AMD's FidelityFX "hybrid reflections" recipe, and roughly what Unreal and Unity's high-end pipelines do.

good

Close to "ray traced" quality, while most pixels take the cheap path.

bad

Three systems to build and keep consistent (lighting has to match between them, or you see seams).

cost

SSR everywhere glossy, rays only where SSR misses. On a GPU, rays in a few pixels of a group cost the whole group, so savings are smaller than the pixel count suggests.

Rules of thumb

• Mostly rough or matte materials (fabric, stone, painted walls), a static scene, phones, or a product viewer on an HDRI: probes (or just the environment map). Blurry reflections hide the probe's errors.
• Glossy floors, roads or water seen at a low angle, where what's reflected is usually on screen: SSR with probes behind it. The standard for most games.
• Mirrors, windows, car paint, anything facing the camera, or moving objects that must reflect correctly: add rays, as a hybrid.
• A small scene on a fast GPU and you want the simplest thing that's right: ray trace. It's the least code, but even in this small room tracing every pixel costs about 1.2 ms over the probe, against 0.9 ms for the hybrid, and one ray on a rough surface is mostly noise, where the probe is smooth and free.
• Huge scenes, skinned characters, low-end GPUs: SSR + probes, with rays only on a few hero surfaces, if any.

In practice you stack them

Nearly every shipping engine layers these rather than picking one: probes everywhere as the base, SSR on top for glossy surfaces, and rays where the hardware allows. What differs is how far up the stack a given platform goes. The roughness cutoff is the knob between "cheap and blurry" and "exact and noisy".

Where denoising fits: anything that takes one random sample per pixel (SSR, rays, the hybrid) is noisy and needs a temporal denoiser such as ffxReflections(). Probes come pre-blurred and don't.

How this demo is built

• three.js WebGPURenderer raster pass with a G-buffer; the panel light's shadows are ray traced (see the shadows demo).
• Probe: the reflection probes of three.js PR #35046, ported to three r186: six renders, a GGX prefilter in a compute pass, a box-projected lookup in TSL. SSR: three's SSRNode. Rays: three-mesh-bvh's WebGPU BVH, called from a WGSL function.
• Every noisy mode draws its one direction per pixel with the same GGX sampler three's SSR uses, so they carry the same energy.
• Ray hits are shaded cheaply, as hybrid renderers do: albedo and metalness stored per vertex in the BVH, one shadow ray, ambient from the environment. Metals at the hit mirror the environment (no second bounce). The reference uses the same shading with many rays: it shows what the 1-sample modes should converge to, not a path-traced ground truth.

Words used on this page

Roughness

0 is a mirror, 1 is matte. Sets how wide the reflection lobe is.

Cubemap / probe

Six square renders around one point: a photo of the surroundings in every direction.

PMREM

Pre-blurred versions of a cubemap, one per roughness, so a rough reflection is one lookup.

Box projection

Correcting a probe lookup for the room's shape, so walls reflect in the right place.

Depth buffer

The distance to the visible surface at each pixel. All SSR knows about the scene.

BVH

A tree of boxes around the triangles, so a ray tests a few dozen boxes instead of every triangle.

Sample

One random direction tried for a pixel. 1 sample per pixel per frame is noisy; a denoiser fixes that.