v0.0.26
three-gpu-pathtracer
GPU-accelerated path tracing renderer for physically based rendering on the web. Supports PBR materials, area lights, depth of field, and volumetric fog for high-quality rendering visuals.
renderingvisualizationphysically-based
import { ACESFilmicToneMapping, Color, RectAreaLight } from 'three/webgpu';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { GradientEquirectTexture } from 'three-gpu-pathtracer';
import { WebGPUPathTracer } from 'three-gpu-pathtracer/webgpu';
import { createFloor } from './floor.js';
// scene, camera and renderer are initialized here
const URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/nasa-m2020/MER_static.glb';
const { scene: model } = await new GLTFLoader()
.setDRACOLoader( new DRACOLoader() )
.loadAsync( URL );
scene.background = new Color( 0xeeeeee );
renderer.toneMapping = ACESFilmicToneMapping;
scene.add( model, createFloor() );
camera.position.set( 1.65, 1.95, 2.9 );
controls.target.set( 0, 0.6, 0 );
controls.update();
// area lights: a warm key, a cool fill and a back light
const key = new RectAreaLight( 0xfff0dd, 9, 3.2, 3.2 );
key.position.set( 3.2, 3.4, 2.8 );
key.lookAt( 0, 1.35, 0 );
const fill = new RectAreaLight( 0xdfeaff, 2.25, 4, 4 );
fill.position.set( - 3.9, 2.1, 2.5 );
fill.lookAt( 0, 1.35, 0 );
const back = new RectAreaLight( 0xffffff, 13.5, 2.6, 2.6 );
back.position.set( - 1.9, 3.7, - 3.6 );
back.lookAt( 0, 1.35, 0 );
scene.add( key, fill, back );
// a dim gradient environment for soft fill light
const environment = new GradientEquirectTexture();
environment.topColor.set( 0x333333 );
environment.bottomColor.set( 0x111111 );
environment.update();
scene.environment = environment;
const pathTracer = new WebGPUPathTracer( renderer );
// mobile GPUs are slower: fewer paths per frame keep frames fast, and fewer pixels converge sooner
if ( matchMedia( '(pointer: coarse)' ).matches ) {
pathTracer.frameBudget = 50000;
renderer.setPixelRatio( window.devicePixelRatio / 2 );
}
// samples accumulate while the camera is still, up to 32, and restart when it moves
pathTracer.maxSamples = 32;
pathTracer.setScene( scene, camera );
controls.addEventListener( 'change', () => pathTracer.updateCamera() );
window.addEventListener( 'resize', () => pathTracer.updateCamera() );
renderer.setAnimationLoop( () => pathTracer.renderSample() );Install
npm install three-gpu-pathtracerChangelog
0.0.26
Fixed
- Import missing a file extension that broke loading the WebGPU path tracer from a CDN.
0.0.25
Added
- WebGPUPathTracer, available from "three-gpu-pathtracer/webgpu".
Changed
- Minimum three.js version is now r185.
- Deprecated WebGLPathTracer. It will be removed in a future release.
0.0.24
Fixed
- Case where the background alpha was not set correctly when changing the scene background.
- Alpha map texture transform not being respected.
- WebGLPathTracer.dispose throwing an error.
Changed
- Minimum three.js version is now r180.
- Changed use of RGBELoader to HDRLoader.