Produces a PMREM prefiltered, optionally downsampled equirectangular copy of an environment map. Blurring removes the small bright details that make an environment slow to converge.
import { EquirectangularReflectionMapping, Mesh, MeshStandardMaterial, SphereGeometry } from 'three/webgpu';
import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
import { BlurredEnvMapGenerator, WebGPUPathTracer } from 'three-gpu-pathtracer/webgpu';
// scene, camera and renderer are initialized here
const URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/hdri/chinese_garden_1k.hdr';
const environment = await new HDRLoader().loadAsync( URL );
environment.mapping = EquirectangularReflectionMapping;
// a pre-blurred environment converges faster, at the cost of sharp reflections
const generator = new BlurredEnvMapGenerator( renderer );
const blurred = await generator.generate( environment, 0.35 );
generator.dispose();
scene.environment = blurred;
scene.background = blurred;
scene.add( new Mesh( new SphereGeometry( 0.5, 64, 32 ), new MeshStandardMaterial( { metalness: 1, roughness: 0 } ) ) );
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 );
}
pathTracer.setScene( scene, camera );
controls.addEventListener( 'change', () => pathTracer.updateCamera() );
window.addEventListener( 'resize', () => pathTracer.updateCamera() );
renderer.setAnimationLoop( () => pathTracer.renderSample() );On this page
Methods
new BlurredEnvMapGenerator( renderer: WebGPURenderer )dispose(): voidFrees every GPU resource held by the generator.
async generate(
// Equirectangular environment map to blur.
texture: Texture,
// Blur amount, from 0 to 1.
blur: number = 0,
// Output width. Defaults to the source width.
width: number = null,
// Output height. Defaults to the source height.
height: number = null
): Promise<Texture>Renders a blurred copy of the given environment map. The source texture is left untouched.