https://github.com/re-ovo/wgpu-path-tracing

Monte Carlo Path Tracing on WebGPU compute shader
https://github.com/re-ovo/wgpu-path-tracing

computeshader monto-carlo path-tracer path-tracing raytracer raytracing renderer webgpu wgsl

Last synced: 6 months ago
JSON representation

Monte Carlo Path Tracing on WebGPU compute shader

• Host: GitHub
• URL: https://github.com/re-ovo/wgpu-path-tracing
• Owner: re-ovo
• License: gpl-3.0
• Created: 2025-01-28T05:55:40.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-03-18T12:25:38.000Z (7 months ago)
• Last Synced: 2025-04-03T16:06:15.237Z (6 months ago)
• Topics: computeshader, monto-carlo, path-tracer, path-tracing, raytracer, raytracing, renderer, webgpu, wgsl
• Language: TypeScript
• Homepage: https://wgpu-path-tracing.vercel.app
• Size: 89.3 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# wgpu-path-tracing

[**中文版文档**](README_ZH.md)

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](https://github.com/gpuweb/gpuweb/issues/535) and [bindless resources](https://github.com/gpuweb/gpuweb/issues/380) 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)                                     |

| ----------------------------------------------------------------- | ------------------------------------------------------ | -------------------------------------------------------- |

| ![CornellBox (No MIS/64spp)](/docs/img/cornell_64spp_mis_off.png) | ![CornellBox (MIS/64spp)](/docs/img/cornell_64spp.png) | ![CornellBox (MIS/512spp)](/docs/img/cornell_512spp.png) |

## Usage

```bash

# Install dependencies

npm install

# Run the development server

npm run dev

```

## Features

- [x] PBR Materials (with Metallic/Roughness/Transmission/Emissive)

- [x] GLTF Scene Loading

- [x] Drag and Drop model file to load (asynchronous via web worker)

- [x] GPU and CPU Time Profiler

- [x] BVH Acceleration (with SAH)

- [x] Multiple Importance Sampling

- [x] Texture support (based on texture atlas)

- [x] Depth of Field

- [x] Tone Mapping

- [x] HDR support

## GLTF Extensions Supported

- [KHR_lights_punctual](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_lights_punctual/README.md)

- [KHR_materials_ior](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_ior/README.md)

- [KHR_materials_transmission](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_transmission/README.md)

- [KHR_materials_emissive_strength](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_emissive_strength/README.md)

## How it works

### Data Loading

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.

### BVH Construction

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.

### Rendering

The `renderer.ts` file contains the core logic for rendering the scene using WebGPU.

There are two main passes:

1. **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.

2. **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.

## Libraries

- [wesl-js](https://github.com/wgsl-tooling-wg/wesl-js)

- [webgpu-utils](https://github.com/greggman/webgpu-utils)

- [@loaders.gl/gltf](https://www.npmjs.com/package/@loaders.gl/gltf)

- [potpack](https://github.com/mapbox/potpack)

## References

- [Demystifying multiple importance sampling](https://lisyarus.github.io/blog/posts/multiple-importance-sampling.html#section-monte-carlo-integration)

- [sample microfacet brdf](https://agraphicsguynotes.com/posts/sample_microfacet_brdf/)

- [RayTracing (by pozero)](https://github.com/pozero/RayTracing)

- [BVH with SAH](https://www.cnblogs.com/lookof/p/3546320.html)