A experimental Path Tracing implementation using WebGPU.
This project is mainly used to explore the possibilities of modern Web graphics APIs in implementing Path Tracing. Due to the lack of support for ray tracing pipelines and bindless resources in WebGPU, it can currently only be implemented based on compute shaders and texture atlases.
| Cornell (No MIS/64spp) | Cornell (MIS/64spp) | Cornell (MIS/512spp) |
|---|---|---|
 |
 |
 |
# Install dependencies
npm install
# Run the development server
npm run dev- PBR Materials (with Metallic/Roughness/Transmission/Emissive)
- GLTF Scene Loading
- Drag and Drop model file to load (asynchronous via web worker)
- GPU and CPU Time Profiler
- BVH Acceleration (with SAH)
- Multiple Importance Sampling
- Texture support (based on texture atlas)
- Depth of Field
- Tone Mapping
- HDR support
The gpu.ts file contains the core logic for loading data from a GLTF file.
It uses the @loaders.gl/gltf library to load the GLTF file and preprocess the data to extract the scene's information.
All the data will be uploaded to the GPU at once.
The bvh.ts file contains the core logic for constructing the BVH.
It uses SAH (Surface Area Heuristic) to find the best split point for the BVH.
The renderer.ts file contains the core logic for rendering the scene using WebGPU.
There are two main passes:
-
Compute Pass: This pass is responsible for path tracing. It uses a compute shader to calculate the color of each pixel by simulating the paths of light rays through the scene. The results are stored in a buffer.
-
Render Pass: This pass takes the results from the compute pass and renders them to the screen. It uses a render pipeline to draw the final image onto the canvas.