Real-Time Ray Tracing in the Browser
— Concave Mirrors, Cylinders and Shattering Glass

On a phone, touch the left half of the screen for a movement stick, drag on the right half to look around, and use ▲▼ on the right edge to climb and descend.

Rasterization paints shapes onto the screen. It is fast, but it has no idea what can be seen from a given point. So mirrors are faked: render the scene again from a mirrored camera and paste it in, or substitute a photo of the surroundings taken in advance (an environment map). These tricks fall apart for reflections of reflections, curved mirrors, and mirrors broken into pieces.

Ray tracing works the other way around: for every pixel it follows the light path backward. When a ray hits a mirror, it simply bends in the reflected direction and keeps going, so flat or curved, one bounce or dozens, it is all the same mechanism. Set View to Compare in ⚙ to see the difference at a glance.

Most setups have a mirror-polished Buddha statue (from a 3D scan published by the Cleveland Museum of Art) and candles at the center, to show a complex curved mirror reflecting and being reflected by the mirrors around it.

When the angle between mirrors divides 180° evenly, like 90° or 60°, the images line up in a perfectly regular pattern. The combinations of mirror reflections form a reflection group, the same mathematics behind kaleidoscope patterns and crystal symmetry.

Flat mirrors, the concave mirror, the cylinder, the statue and the broken shards are all drawn by the same computation: follow the ray, reflect it, repeat. Numerous objects such as the statue's triangles and the shards on the floor are organized in nested boxes (a bounding volume hierarchy), so each ray only tests the boxes it passes through. A cracked mirror's crack pattern is decided at the moment of impact, and the shifted reflections, the split light beams and the shapes of the falling shards all follow that same pattern. While the camera is still, slightly jittered frames are averaged to smooth out fine reflections.

For the basics of ray tracing versus rasterization, try Ray Tracing vs Rasterization in Explorables (Japanese).

What is real-time ray tracing?
Ray tracing draws an image by following, for every pixel, the path of light back from the eye into the scene. Real-time ray tracing does this dozens of times per second, so reflections, shadows and reflections of reflections follow the actual light paths instead of approximations.

How is ray tracing different from rasterization?
Rasterization paints shapes onto the screen. It is fast, but it does not know what can be seen from a given point, so mirrors are faked with a single planar reflection or an environment map. Ray tracing follows light paths, so dozens of bounces, curved mirrors and shattered mirrors all work the same way.

What do I need to run this demo?
A browser with WebGPU support (recent Chrome or Edge, for example). Nothing to install, and no ray-tracing-capable GPU is required.

Does it use the GPU's dedicated ray-tracing hardware (RT cores)?
No. WebGPU does not expose it yet, so ray intersections with the mirrors, the statue and the glass shards are computed in shaders. The statue's triangles and the shards piled on the floor are organized in bounding volume hierarchies (BVH) so that each ray only tests the boxes it passes through.