Wavefront Tracer

How it works

The scene is a chess set of glass and gold pieces on a polished marble board, lit by a brass desk lamp and seen through a camera lens. Your device's graphics chip computes the lighting, the caustics (bright patterns where the glass focuses light onto the board), the reflections and the depth of field (the blur in front of and behind the point of focus) as you watch. Rendering is paused while this page is open.

Glass and gold chess pieces on a black-and-white marble board, the middle pieces sharp, the nearest and farthest softly out of focus. — The view when the page loads. The dark squares reflect the pieces, and only the middle of the board is in focus.

How the light is traced as a wavefront

Renderers that simulate light realistically usually trace huge numbers of independent rays or photons and average the results. The picture stays grainy until enough results have been averaged. In this renderer the lamp emits a mesh instead. The mesh is a grid of points on the wavefront, which is the advancing edge of the light as it spreads out from the lamp. Each point moves as a ray of light would, reflecting off the gold and bending through the glass, and stays joined to its neighbours as it moves.

A row of glowing discs crossing a dark room. They shrink to a point after passing through a lens, then widen into a bright disc on a screen. — A beam passing through a glass lens, drawn as its wavefront at successive moments. The lens is thicker at the centre, so it delays the middle of the wavefront more than the edges. The flat wavefront curves, narrows to a point at the focus and widens again before it reaches the screen.

Because the points stay joined, the lamp's light arrives without grain. When a patch of the mesh lands on a surface, its brightness is the light it carries divided by the area it covers. Light that converges onto a small area becomes brighter, and light that spreads out over distance becomes dimmer. Where the wavefront folds over itself, a patch's area shrinks towards zero and its light concentrates into a caustic. The mesh adds more points where it curves strongly, which keeps the edges of the caustics sharp.

A gold ring standing on a pale table, seen from above. Inside it, reflected light forms a bright curve that meets in a sharp point. — A caustic. Light reflected off the inside of a gold ring folds into a bright curve with a sharp point, the same shape sunlight makes in a coffee cup.

Why moving the camera doesn't recompute the lighting

The light that lands is stored on the surfaces, together with an estimate of the light that bounces between them. None of it depends on where the camera is. While you move, the lighting calculation pauses and only the camera's picture is redrawn, which keeps the image free of grain. The thin bar at the top of the screen shows the lighting settling after the page loads.

How the camera forms the picture

The camera traces one ray per pixel through the scene, through the glass and off the gold and the board, and reads the stored light where each ray lands. Each frame is drawn at less than the screen's resolution and shifted by a fraction of a pixel. Combining successive frames produces a sharp image at full resolution.

Depth of field is added afterwards, based on how far away the surface in each pixel is, in the way a real lens blurs what is nearer or farther than its focus. Reflections in the board are blurred according to the distance of the reflected image, which lies behind the surface as it does in a mirror. A reflection can therefore be blurred where the board itself is sharp. The lens focuses automatically on the nearest object close to the centre of the view and moves its focus there gradually. Double-tapping or double-clicking a spot focuses there instead and turns autofocus off until you reload the page.

The same view of the chess board twice. On the left everything is sharp. On the right only the middle of the board is sharp, and the near and far pieces are blurred. — The same view without and with depth of field. On the left is the camera's pinhole image, which is sharp at every distance. On the right, blur has been added according to the distance of what each pixel shows, with the lens focused on the middle of the board.

Controls

Requirements

The page needs a browser with WebGPU, which lets web pages use the graphics chip. That means a recent version of Chrome or Edge, or Safari 26 or later (iOS 26 or later on iPhone and iPad). Phones can run it, more slowly and at a lower resolution.

The chess pieces are Chess Set by Riley Queen, from Poly Haven (CC0). The lamp, wine glass and board are built from simple geometric shapes.