Implemented a Path Tracer with WebGPU

Published on 2024-07-06

tags: [ path-tracing gpu webgpu wgsl typescript ]

Path tracing is a rendering technique that simulates the behavior of light within the bounds of geometric optics to create photorealistic images. It is widely used in the fields of computer graphics for movies and modern games. Two well-known books on the algorithms and implementation of path tracing are:

• Ray Tracing in One Weekend
• Physically Based Rendering

Recently, I decided to implement a path tracer using TypeScript and WebGPU, inspired by these books. Below is a YouTube video showing the path tracer in action.

The path tracing logic is written in WebGPU’s WGSL, while the UI is implemented in TypeScript.

Currently, the supported features are as follows:

• Materials
  • Light
  • Diffuse
  • Specular
  • Dielectrics
  • GGX
• Shapes
  • Sphere
  • Triangle

Below is an example of a Cornell Box rendered with my path tracer.

Thanks to WebGPU, I was able to implement a fast path tracer without needing an NVIDIA GPU. Stay tuned for more updates.