Skip to content
Projects

gkjohnson/three-gpu-pathtracer

View on GitHub

gkjohnson/three-gpu-pathtracer has 2,033 GitHub stars and 200 forks. GitHot measured 0 stars in 24 hours, +72 in 7 days, and +110 in 15 days. Last checked 2026-11-08 09:43 UTC. Last push 2026-11-04.

How these counts are measured

Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.

Measured star growth

in 24h
0
in 7 days
+72
in 15 days
+110
in 1 month
Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

three-gpu-pathtracer

npm version build docs github twitter sponsors

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

Depth of Field

HDR Image

Features

Area Light Support

Spot Light Support

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/<demo-name.html>

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!

API

See the docs site for the WebGPU API documentation.

The same documentation is also available as markdown in API.md.

Gotchas

  • The project requires WebGPU.
  • SpotLights, DirectionalLights, and PointLights are only supported with MIS.
  • Only MeshStandardMaterial and MeshPhysicalMaterial are supported.
  • Emissive materials are supported but do not take advantage of MIS.

Screenshots

Resources

Raytracing in One Weekend Book

PBR Book

knightcrawler25/GLSL-PathTracer

blender/cycles

AcademySoftwareFoundation/OpenPBR

Explore related projects