three-gpu-pathtracer

Path tracing project using three-mesh-bvh and WebGPU compute shaders to accelerate high quality, physically based rendering on the GPU.

Examples

Setup

Basic glTF Setup Example

Basic Primitive Geometry Example

Beauty Demos

Physically Based Materials

Interior Scene w/ Equirect Rendering

Features

Denoising and Upscaling

Test Scenes

Material Test Orb

Model Viewer Fidelity Scene Comparisons

Tools

Animation Rendering

Running examples locally

To run and modify the examples locally, make sure you have Node and NPM installed. Check the supported versions in the test configuration.

To install dependencies, run npm install
To start the demos run npm start
Visit http://localhost:5173/

Use

Basic Renderer

import * as THREE from 'three/webgpu';
import { WebGPUPathTracer } from 'three-gpu-pathtracer/webgpu';
// init scene, camera, controls, etc
renderer = new THREE.WebGPURenderer();
renderer.toneMapping = THREE.ACESFilmicToneMapping;
await renderer.init();
pathTracer = new WebGPUPathTracer( renderer );
pathTracer.setScene( scene, camera );
animate();
function animate() {
requestAnimationFrame( animate );
	pathTracer.renderSample();
}

Blurred Environment Map

Using a pre blurred environment map can help improve frame convergence time at the cost of sharp environment reflections. If performance is a concern then multiple importance sampling can be disabled and a blurred environment map used.

import { BlurredEnvMapGenerator } from 'three-gpu-pathtracer/webgpu';
// ...
const envMap = await new HDRLoader().loadAsync( envMapUrl );
const generator = new BlurredEnvMapGenerator( renderer );
const blurredEnvMap = await generator.generate( envMap, 0.35 );
generator.dispose();
scene.environment = blurredEnvMap;
// render!