Ghadeer Abou-Saleh | Path Tracing with WebGPU - Attempt #1 [No Audio] @gee8sh | Uploaded June 2022 | Updated October 2024, 4 days ago.
This is my very first attempt at trying to perform close-to-real-time path tracing with WebGPU.

To simplify things, I did stick to axis-aligned boxes placed in an axis-aligned 3D grid, of which each cell could hold (or intersect with) up to 8 boxes of arbitrary sizes. The ray/box "hit" function is easy to implement in this case, and the axis-aligned grid is easy to traverse, though it is likely not the most optimal solution.

Three kinds of materials are currently supported: diffuse/matte, reflective, and emissive (for lights). Each face of each box could be assigned its own material.

There is almost no rasterization in this demo except for one inevitable big square to cover the canvas. Ray tracing here starts from each pixel. The Monte-Carlo integration is done to estimate the color arriving at each pixel by averaging multiple samples per pixel. This averaging is done in two ways, once in the fragment shader of the tracer, and once by stacking up to 256 frames.

The number of samples/frames averaged decreases significantly as you move around in the procedurally constructed maze, and increases when you stop moving. This is why the rendering becomes too noisy while navigating the maze.

Clearly, this attempt did not meet the sought and hoped-for objective (i.e. real-time rendering), but it is a step in the right direction. I will need to try a few other tricks, like: hybrid of rasterization/path-tracing, breaking down each render pass to smaller more efficient render passes, denoising techniques, and smarter averaging of frames that accounts to movements.

The demo: ghadeeras.github.io/pages/path-tracing.html
The source code: github.com/ghadeeras/ghadeeras.github.io/tree/master/src/path-tracing

Cheers!