umar-ahmed / webgpu-pathtracer

✨ A simple pathtracer running in the browser using WebGPU

WebGPU Pathtracer

✨ A simple pathtracer running in the browser using WebGPU. ✨

Click the image above to see the live demo!

Features

• 💡 Indirect lighting
• 🫨 Depth of field
• 🎨 Tone-mapping
• 🌫️ Denoising
• 📸 Camera controls
• 🔺 Triangle meshes
• 📦 Bounding volume hierarchies (BVH)
• 🗺️ Environment maps
• 🪙 PBR materials
• 🤹 Multiple importance sampling (MIS)

Getting Started

Prerequisites

• Node.js (v18 or higher)

Installation

1. Clone repo
2. Run corepack enable to setup Yarn
3. Run yarn install to install dependencies
4. Run yarn dev to start the development server

Credits

Heavily based on:

• https://github.com/visionary-3d/raytracing-bloom-video/
• https://www.youtube.com/watch?v=Qz0KTGYJtUk
• https://webgpu.github.io/webgpu-samples
• https://webgpufundamentals.org/
• https://github.com/gkjohnson/three-gpu-pathtracer
• https://github.com/dmnsgn/glsl-tone-map