url - https://gnikoloff.github.io/webgpu-raytracer/

code - https://github.com/gnikoloff/webgpu-raytracer

Technologies Used:

Typescript, WebGPU, WGSL

Role:

Development

After doing rasterization for years, I was very intrigued by raytracing. After all, it is the holy grail of computer graphics, producing incredible photorealistic imagery with soft shadows, ambient occlusion and blurred reflections. These effects are difficult to achieve using a real-time 3D rasterizer but here you essentially get them for free with little to no rendering tricks involved.

At the end of the day I ended up with what's called a path tracer. It requires a large quantity of rays to be fired through each pixel in a stochastic manner for convergence thus removing noise from the rendered image.

The app is compromised of two parths: code that runs on the CPU and code on the GPU.

CPU side is managed by Typescript. It loads Wavefront objects and material files, creates bounding volume hierarchy, prepares all the scene triangles in buffers and uploads them to the GPU. It also handles user interaction and camera movement.

GPU side is managed by WGSL shader code. This is the heart of the raytracer and runs in parallel on the GPU via compute shader. It bounces rays around the scene and gathers the accumulated color that it finally writes to the pixel in a image buffer. The image buffer is then blitted to the device screen.

You can check out more info at the github repo.

References and Readings:

1. Raytracing in a Weekend - this is where everybody starts with raytracing it seems. I followed Book 1 and 2 and implemented them in C++ before switching to a compute shader approach.
2. Intel Path-Tracing Workshop - Raytracing in a Weekend runs on the CPU and does not really explain how to port it to the GPU (where recursion is not allowed). This 2 videos show very well how to do the same task via loops in GLSL. The theory and math presented are also really good.
3. Weekend Raytracing with wgpu - Porting "Raytracing in a Weekend" Book 1 to WebGPU. I got the idea to use storage buffers for the frame pixel contents here.
4. WebGL Ray Tracer - Path tracer written in WebGL. I studied the code and implemented my model parsing and BVH generation based on it.
5. WebGPU Spec
6. WGSL Spec