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" or "Add Cube" 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

Please enable JavaScript. Select Light Add Sphere Add Cube Material: Diffuse Mirror Glossy

with glossiness factor: 0 < < 1

Environment: Cornell Box - Yellow and Blue Cornell Box - Red and Green Load preset scene:

Sphere Column

Sphere Pyramid

Sphere and Cube

Cube and Spheres

Table and Chair

Stacks

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 are achieved by randomly jittering the light position per-pixel. The path tracing solution will only completely converge if your browser supports the OES_texture_float extension.