WebGL Path Tracing

Path tracing is a realistic lighting algorithm that simulates light bouncing around a scene. This path tracer uses WebGL for realtime performance and supports diffuse, mirrored, and glossy surfaces. The path tracer is continually rendering, so the scene will start off grainy and become smoother over time. Here's how to interact with it:

Add an object using the "Add Sphere", "Add Cube" or "Add Extruded Rectangle" buttons
Select an object by clicking on it
Move the selection along the face of its selection box by dragging around on that face
Delete the selection using the backspace key
Rotate the camera by dragging the background
Switch the camera between a perspective and an orthographic projection with the "Camera" menu

Material:
with glossiness factor: 0 < < 1
Environment:
Camera:

Load preset scene:

Rendering:

The entire scene is dynamically compiled into a GLSL shader. Everything can be repositioned using the current shader, but any geometry or material change means a recompilation. To calculate a pixel color, a ray is shot into the scene and allowed to bounce around five times. At each bounce, the direct light incoming at that point (including shadows) is multiplied by all previous material colors and accumulated. Soft shadows come from jittering the light position per pixel at every bounce. Rather than drawing those jitters independently at random, each pixel walks a scrambled Halton sequence, which spreads its samples out evenly instead of letting them clump, and the renderer fits as many samples into each animation frame as the hardware has time for instead of exactly one. The path tracing solution will only completely converge if your browser can render to floating point textures. All of that runs in a web worker, drawing into an OffscreenCanvas, so the page stays responsive no matter how long a frame of tracing takes.