three-gpu-pathtracer 0.0.22 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-gpu-pathtracer",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.",
   "module": "src/index.js",
   "main": "build/index.umd.cjs",
@@ -30,35 +30,35 @@
     "tracer"
   ],
   "devDependencies": {
-    "@lookingglass/webxr": "^0.3.1",
+    "@lookingglass/webxr": "^0.6.0",
     "@monogrid/gainmap-js": "^3.0.5",
-    "@types/node": "^20.12.7",
-    "@types/three": "^0.163.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@types/node": "^24.3.1",
+    "@types/three": "^0.181.0",
+    "@typescript-eslint/eslint-plugin": "^8.40.0",
     "canvas-capture": "^2.0.5",
-    "eslint": "^7.32.0",
+    "eslint": "^8.56.0",
     "eslint-config-mdcs": "^5.0.0",
     "node-fetch": "^3.2.9",
-    "parcel": "^2.12.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",
     "process": "^0.11.10",
     "puppeteer": "^15.4.0",
     "rollup": "^2.70.0",
     "simple-git": "^3.10.0",
-    "three": "^0.163.0",
-    "three-mesh-bvh": "^0.7.4",
-    "typescript": "5.3.3",
+    "three": "^0.181.1",
+    "three-mesh-bvh": "^0.9.5",
+    "typescript": "^5.9.2",
+    "vite": "^6.2.2",
     "yargs": "^17.5.1"
   },
   "peerDependencies": {
-    "three": ">=0.151.0",
+    "three": ">=0.180.0",
     "three-mesh-bvh": ">=0.7.4",
     "xatlas-web": "^0.1.0"
   },
   "scripts": {
-    "start": "cd example && parcel serve ./*.html --dist-dir ./dev-bundle/ --no-cache --no-hmr",
-    "build-examples": "cd example && parcel build ./*.html --dist-dir ./bundle/ --public-url . --no-cache --no-content-hash",
+    "start": "vite --config ./vite.config.js",
+    "build-examples": "vite build --config ./vite.config.js",
     "update-screenshots": "node ./scripts/push-screenshots.js",
     "screenshot-diff": "node ./scripts/regression-test.js",
     "build": "rollup -c",

package/src/core/PathTracingRenderer.js

@@ -159,6 +159,9 @@ export class PathTracingRenderer {
 
 	set material( v ) {
 
+		this._fsQuad.material.removeEventListener( 'recompilation', this._compileFunction );
+		v.addEventListener( 'recompilation', this._compileFunction );
+
 		this._fsQuad.material = v;
 
 	}
@@ -195,6 +198,12 @@ export class PathTracingRenderer {
 
 	}
 
+	get isCompiling() {
+
+		return Boolean( this._compilePromise );
+
+	}
+
 	constructor( renderer ) {
 
 		this.camera = null;
@@ -212,6 +221,7 @@ export class PathTracingRenderer {
 		this._blendQuad = new FullScreenQuad( new BlendMaterial() );
 		this._task = null;
 		this._currentTile = 0;
+		this._compilePromise = null;
 
 		this._sobolTarget = new SobolNumberMapGenerator().generate( renderer );
 
@@ -236,6 +246,33 @@ export class PathTracingRenderer {
 			} ),
 		];
 
+		// function for listening to for triggered compilation so we can wait for compilation to finish
+		// before starting to render
+		this._compileFunction = () => {
+
+			const promise = this.compileMaterial( this._fsQuad._mesh );
+			promise.then( () => {
+
+				if ( this._compilePromise === promise ) {
+
+					this._compilePromise = null;
+
+				}
+
+			} );
+
+			this._compilePromise = promise;
+
+		};
+
+		this.material.addEventListener( 'recompilation', this._compileFunction );
+
+	}
+
+	compileMaterial() {
+
+		return this._renderer.compileAsync( this._fsQuad._mesh );
+
 	}
 
 	setCamera( camera ) {
@@ -267,7 +304,6 @@ export class PathTracingRenderer {
 		material.setDefine( 'CAMERA_TYPE', cameraType );
 
 		this.camera = camera;
-		// this.reset();
 
 	}
 
@@ -334,9 +370,11 @@ export class PathTracingRenderer {
 		this.samples = 0;
 		this._task = null;
 
+		this.material.stratifiedTexture.stableNoise = this.stableNoise;
 		if ( this.stableNoise ) {
 
 			this.material.seed = 0;
+			this.material.stratifiedTexture.reset();
 
 		}
 
@@ -344,6 +382,15 @@ export class PathTracingRenderer {
 
 	update() {
 
+		// ensure we've updated our defines before rendering so we can ensure we
+		// can wait for compilation to finish
+		this.material.onBeforeRender();
+		if ( this.isCompiling ) {
+
+			return;
+
+		}
+
 		if ( ! this._task ) {
 
 			this._task = renderTask.call( this );

package/src/core/PathTracingSceneGenerator.js

@@ -95,6 +95,7 @@ export class PathTracingSceneGenerator {
 		this._bvhWorker = null;
 		this._pendingGenerate = null;
 		this._buildAsync = false;
+		this._materialUuids = null;
 
 	}
 
@@ -176,12 +177,29 @@ export class PathTracingSceneGenerator {
 		// generate the geometry
 		const result = staticGeometryGenerator.generate( geometry );
 		const materials = result.materials;
+		let needsMaterialIndexUpdate = result.changeType !== NO_CHANGE || this._materialUuids === null || this._materialUuids.length !== length;
+		if ( ! needsMaterialIndexUpdate ) {
+
+			for ( let i = 0, length = materials.length; i < length; i ++ ) {
+
+				const material = materials[ i ];
+				if ( material.uuid !== this._materialUuids[ i ] ) {
+
+					needsMaterialIndexUpdate = true;
+					break;
+
+				}
+
+			}
+
+		}
+
 		const textures = getTextures( materials );
 		const { lights, iesTextures } = getLights( objects );
-
-		if ( result.changeType !== NO_CHANGE ) {
+		if ( needsMaterialIndexUpdate ) {
 
 			updateMaterialIndexAttribute( geometry, materials, materials );
+			this._materialUuids = materials.map( material => material.uuid );
 
 		}
 
@@ -225,6 +243,7 @@ export class PathTracingSceneGenerator {
 		return {
 			bvhChanged: result.changeType !== NO_CHANGE,
 			bvh: this.bvh,
+			needsMaterialIndexUpdate,
 			lights,
 			iesTextures,
 			geometry,

package/src/core/WebGLPathTracer.js

@@ -5,6 +5,7 @@ import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
 import { GradientEquirectTexture } from '../textures/GradientEquirectTexture.js';
 import { getIesTextures, getLights, getTextures } from './utils/sceneUpdateUtils.js';
 import { ClampedInterpolationMaterial } from '../materials/fullscreen/ClampedInterpolationMaterial.js';
+import { CubeToEquirectGenerator } from '../utils/CubeToEquirectGenerator.js';
 
 function supportsFloatBlending( renderer ) {
 
@@ -81,6 +82,24 @@ export class WebGLPathTracer {
 
 	}
 
+	get stableNoise() {
+
+		return this._pathTracer.stableNoise;
+
+	}
+
+	set stableNoise( v ) {
+
+		this._pathTracer.stableNoise = v;
+
+	}
+
+	get isCompiling() {
+
+		return Boolean( this._pathTracer.isCompiling );
+
+	}
+
 	constructor( renderer ) {
 
 		// members
@@ -89,6 +108,7 @@ export class WebGLPathTracer {
 		this._pathTracer = new PathTracingRenderer( renderer );
 		this._queueReset = false;
 		this._clock = new Clock();
+		this._compilePromise = null;
 
 		this._lowResPathTracer = new PathTracingRenderer( renderer );
 		this._lowResPathTracer.tiles.set( 1, 1 );
@@ -101,6 +121,10 @@ export class WebGLPathTracer {
 		} ) );
 		this._materials = null;
 
+		this._previousEnvironment = null;
+		this._previousBackground = null;
+		this._internalBackground = null;
+
 		// options
 		this.renderDelay = 100;
 		this.minSamples = 5;
@@ -229,6 +253,13 @@ export class WebGLPathTracer {
 		const scene = this.scene;
 		const material = this._pathTracer.material;
 
+		if ( this._internalBackground ) {
+
+			this._internalBackground.dispose();
+			this._internalBackground = null;
+
+		}
+
 		// update scene background
 		material.backgroundBlur = scene.backgroundBlurriness;
 		material.backgroundIntensity = scene.backgroundIntensity ?? 1;
@@ -256,6 +287,17 @@ export class WebGLPathTracer {
 			material.backgroundMap = colorBackground;
 			material.backgroundAlpha = 1;
 
+		} else if ( scene.background.isCubeTexture ) {
+
+			if ( scene.background !== this._previousBackground ) {
+
+				const background = new CubeToEquirectGenerator( this._renderer ).generate( scene.background );
+				this._internalBackground = background;
+				material.backgroundMap = background;
+				material.backgroundAlpha = 1;
+
+			}
+
 		} else {
 
 			material.backgroundMap = scene.background;
@@ -264,26 +306,32 @@ export class WebGLPathTracer {
 		}
 
 		// update scene environment
-		material.environmentIntensity = scene.environmentIntensity ?? 1;
+		material.environmentIntensity = scene.environment !== null ? ( scene.environmentIntensity ?? 1 ) : 0;
 		material.environmentRotation.makeRotationFromEuler( scene.environmentRotation ).invert();
 		if ( this._previousEnvironment !== scene.environment ) {
 
-			if ( scene.environment ) {
+			if ( scene.environment !== null ) {
 
-				// TODO: Consider setting this to the highest supported bit depth by checking for
-				// OES_texture_float_linear or OES_texture_half_float_linear. Requires changes to
-				// the equirect uniform
-				material.envMapInfo.updateFrom( scene.environment );
+				if ( scene.environment.isCubeTexture ) {
 
-			} else {
+					const environment = new CubeToEquirectGenerator( this._renderer ).generate( scene.environment );
+					material.envMapInfo.updateFrom( environment );
+
+				} else {
 
-				material.environmentIntensity = 0;
+					// TODO: Consider setting this to the highest supported bit depth by checking for
+					// OES_texture_float_linear or OES_texture_half_float_linear. Requires changes to
+					// the equirect uniform
+					material.envMapInfo.updateFrom( scene.environment );
+
+				}
 
 			}
 
 		}
 
 		this._previousEnvironment = scene.environment;
+		this._previousBackground = scene.background;
 		this.reset();
 
 	}
@@ -295,6 +343,7 @@ export class WebGLPathTracer {
 			geometry,
 			bvh,
 			bvhChanged,
+			needsMaterialIndexUpdate,
 		} = results;
 
 		this._materials = materials;
@@ -312,6 +361,10 @@ export class WebGLPathTracer {
 				geometry.attributes.color,
 			);
 
+		}
+
+		if ( needsMaterialIndexUpdate ) {
+
 			material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 
 		}
@@ -354,7 +407,7 @@ export class WebGLPathTracer {
 		// render the path tracing sample after enough time has passed
 		const delta = clock.getDelta() * 1e3;
 		const elapsedTime = clock.getElapsedTime() * 1e3;
-		if ( ! this.pausePathTracing && this.enablePathTracing && this.renderDelay <= elapsedTime ) {
+		if ( ! this.pausePathTracing && this.enablePathTracing && this.renderDelay <= elapsedTime && ! this.isCompiling ) {
 
 			pathTracer.update();
 
@@ -387,7 +440,7 @@ export class WebGLPathTracer {
 			// render the fallback if we haven't rendered enough samples, are paused, or are occluded
 			if ( ! this.enablePathTracing || this.samples < minSamples || quad.material.opacity < 1 ) {
 
-				if ( this.dynamicLowRes ) {
+				if ( this.dynamicLowRes && ! this.isCompiling ) {
 
 					if ( lowResPathTracer.samples < 1 ) {
 
@@ -402,7 +455,9 @@ export class WebGLPathTracer {
 					quad.render( renderer );
 					quad.material.opacity = currentOpacity;
 
-				} else if ( this.rasterizeScene ) {
+				}
+
+				if ( ! this.dynamicLowRes && this.rasterizeScene || this.dynamicLowRes && this.isCompiling ) {
 
 					this.rasterizeSceneCallback( this.scene, this.camera );
 
@@ -440,8 +495,8 @@ export class WebGLPathTracer {
 
 	dispose() {
 
-		this._renderQuad.dispose();
-		this._renderQuad.material.dispose();
+		this._quad.dispose();
+		this._quad.material.dispose();
 		this._pathTracer.dispose();
 
 	}

package/src/core/utils/BakedGeometry.js

@@ -1,6 +1,7 @@
 import { BufferGeometry } from 'three';
 import { MeshDiff } from './MeshDiff.js';
 import { convertToStaticGeometry } from './convertToStaticGeometry.js';
+import { validateAttributes } from './BufferAttributeUtils.js';
 
 export class BakedGeometry extends BufferGeometry {
 
@@ -13,6 +14,28 @@ export class BakedGeometry extends BufferGeometry {
 
 	}
 
+	// returns whether the passed mesh is compatible with this baked geometry
+	// such that it can be updated without resizing attributes
+	isCompatible( mesh, attributes ) {
+
+		const geometry = mesh.geometry;
+		for ( let i = 0; i < attributes.length; i ++ ) {
+
+			const key = attributes[ i ];
+			const attr1 = geometry.attributes[ key ];
+			const attr2 = this.attributes[ key ];
+			if ( attr1 && ! validateAttributes( attr1, attr2 ) ) {
+
+				return false;
+
+			}
+
+		}
+
+		return true;
+
+	}
+
 	updateFrom( mesh, options ) {
 
 		const diff = this._diff;

package/src/core/utils/BufferAttributeUtils.js

@@ -41,12 +41,18 @@ export function createAttributeClone( attr, countOverride = null ) {
 
 }
 
-// Confirms that the two provided attributes are compatible
+// Confirms that the two provided attributes are compatible. Returns false if they are not.
 export function validateAttributes( attr1, attr2 ) {
 
 	if ( ! attr1 && ! attr2 ) {
 
-		return;
+		return true;
+
+	}
+
+	if ( Boolean( attr1 ) !== Boolean( attr2 ) ) {
+
+		return false;
 
 	}
 
@@ -57,8 +63,10 @@ export function validateAttributes( attr1, attr2 ) {
 
 	if ( ! sameCount || ! sameNormalized || ! sameType || ! sameItemSize ) {
 
-		throw new Error();
+		return false;
 
 	}
 
+	return true;
+
 }

package/src/core/utils/MeshDiff.js

@@ -1,29 +1,22 @@
 import { Matrix4 } from 'three';
 import { bufferToHash } from '../../utils/bufferToHash.js';
 
-function attributeSort( a, b ) {
-
-	if ( a.uuid > b.uuid ) return 1;
-	if ( a.uuid < b.uuid ) return - 1;
-	return 0;
-
-}
-
 function getGeometryHash( geometry ) {
 
-	let hash = '';
+	let hash = geometry.uuid;
 	const attributes = Object.values( geometry.attributes );
 	if ( geometry.index ) {
 
 		attributes.push( geometry.index );
+		hash += `index|${ geometry.index.version }`;
 
 	}
 
-	attributes.sort( attributeSort );
-
-	for ( const attr of attributes ) {
+	const keys = Object.keys( attributes ).sort();
+	for ( const key of keys ) {
 
-		hash += `${ attr.uuid }_${ attr.version }|`;
+		const attr = attributes[ key ];
+		hash += `${ key }_${ attr.version }|`;
 
 	}
 

package/src/core/utils/StaticGeometryGenerator.js

@@ -171,15 +171,24 @@ export class StaticGeometryGenerator {
 			unusedMeshKeys.delete( meshKey );
 
 			// initialize the intermediate geometry
-			if ( ! _intermediateGeometry.has( meshKey ) ) {
+			// if the mesh and source geometry have changed in such a way that they are no longer
+			// compatible then regenerate the baked geometry from scratch
+			let geom = _intermediateGeometry.get( meshKey );
+			if ( ! geom || ! geom.isCompatible( mesh, this.attributes ) ) {
 
-				_intermediateGeometry.set( meshKey, new BakedGeometry() );
+				if ( geom ) {
+
+					geom.dispose();
+
+				}
+
+				geom = new BakedGeometry();
+				_intermediateGeometry.set( meshKey, geom );
 
 			}
 
 			// transform the geometry into the intermediate buffer geometry, saving whether
 			// or not it changed.
-			const geom = _intermediateGeometry.get( meshKey );
 			if ( geom.updateFrom( mesh, convertOptions ) ) {
 
 				// TODO: provide option for only generating the set of attributes that are present
@@ -231,6 +240,12 @@ export class StaticGeometryGenerator {
 
 		// get the list of geometries to merge
 		let forceUpdate = false;
+		if ( meshes.length !== previousMergeInfo.length ) {
+
+			forceUpdate = true;
+
+		}
+
 		for ( let i = 0, l = meshes.length; i < l; i ++ ) {
 
 			const mesh = meshes[ i ];

package/src/core/utils/mergeGeometries.js

@@ -205,7 +205,20 @@ export function mergeGeometries( geometries, options = {}, targetGeometry = new
 			const attr = geometry.getAttribute( key );
  			if ( ! skip ) {
 
-				copyAttributeContents( attr, targetAttribute, offset );
+				if ( key === 'color' && targetAttribute.itemSize !== attr.itemSize ) {
+
+					// make sure the color attribute is aligned with itemSize 3 to 4
+					for ( let index = offset, l = attr.count; index < l; index ++ ) {
+
+						attr.setXYZW( index, targetAttribute.getX( index ), targetAttribute.getY( index ), targetAttribute.getZ( index ), 1.0 );
+
+					}
+
+				} else {
+
+					copyAttributeContents( attr, targetAttribute, offset );
+
+				}
 
 			}
 

package/src/index.d.ts

@@ -21,7 +21,7 @@ import {
 	Scene,
 	PMREMGenerator
 } from 'three';
-import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass';
+import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
 import { MeshBVH, MeshBVHOptions } from 'three-mesh-bvh';
 
 // three.js type augmentation
@@ -57,6 +57,7 @@ export interface PathTracingSceneGeneratorResult {
 	lights: Array<Light>;
 	iesTextures: Array<DataTexture>;
 	geometry: BufferGeometry;
+	needsMaterialIndexUpdate: boolean;
 	materials: Array<Material>;
 	textures: Array<Texture>;
 	objects: Array<Object3D>;

package/src/materials/MaterialBase.js

@@ -2,6 +2,17 @@ import { ShaderMaterial } from 'three';
 
 export class MaterialBase extends ShaderMaterial {
 
+	set needsUpdate( v ) {
+
+		super.needsUpdate = true;
+		this.dispatchEvent( {
+
+			type: 'recompilation',
+
+		} );
+
+	}
+
 	constructor( shader ) {
 
 		super( shader );

package/src/materials/pathtracing/PhysicalPathTracingMaterial.js

@@ -10,7 +10,7 @@ import { PhysicalCameraUniform } from '../../uniforms/PhysicalCameraUniform.js';
 import { EquirectHdrInfoUniform } from '../../uniforms/EquirectHdrInfoUniform.js';
 import { LightsInfoUniformStruct } from '../../uniforms/LightsInfoUniformStruct.js';
 import { AttributesTextureArray } from '../../uniforms/AttributesTextureArray.js';
-import { MaterialsTexture } from '../../uniforms/MaterialsTexture.js';
+import { MaterialsTexture, MATERIAL_PIXELS } from '../../uniforms/MaterialsTexture.js';
 import { RenderTarget2DArray } from '../../uniforms/RenderTarget2DArray.js';
 import { StratifiedSamplesTexture } from '../../uniforms/StratifiedSamplesTexture.js';
 import { BlueNoiseTexture } from '../../textures/BlueNoiseTexture.js';
@@ -66,6 +66,7 @@ export class PhysicalPathTracingMaterial extends MaterialBase {
 				ATTR_TANGENT: 1,
 				ATTR_UV: 2,
 				ATTR_COLOR: 3,
+				MATERIAL_PIXELS: MATERIAL_PIXELS,
 			},
 
 			uniforms: {

package/src/materials/pathtracing/glsl/attenuate_hit_function.glsl.js

@@ -97,7 +97,8 @@ export const attenuate_hit_function = /* glsl */`
 				// alphaMap
 				if ( material.alphaMap != - 1 ) {
 
-					albedo.a *= texture2D( textures, vec3( uv, material.alphaMap ) ).x;
+					vec3 uvPrime = material.alphaMapTransform * vec3( uv, 1 );
+					albedo.a *= texture2D( textures, vec3( uvPrime.xy, material.alphaMap ) ).x;
 
 				}
 

package/src/materials/pathtracing/glsl/camera_util_functions.glsl.js

@@ -60,7 +60,7 @@ export const camera_util_functions = /* glsl */`
 			vec3 shapeUVW= rand3( 1 );
 			int blades = physicalCamera.apertureBlades;
 			float anamorphicRatio = physicalCamera.anamorphicRatio;
-			vec2 apertureSample = blades == 0 ? sampleCircle( shapeUVW.xy ) : sampleRegularPolygon( blades, shapeUVW );
+			vec2 apertureSample = sampleAperture( blades, shapeUVW );
 			apertureSample *= physicalCamera.bokehSize * 0.5 * 1e-3;
 
 			// rotate the aperture shape

package/src/materials/pathtracing/glsl/get_surface_record_function.glsl.js

@@ -48,7 +48,8 @@ export const get_surface_record_function = /* glsl */`
 		// alphaMap
 		if ( material.alphaMap != - 1 ) {
 
-			albedo.a *= texture2D( textures, vec3( uv, material.alphaMap ) ).x;
+			vec3 uvPrime = material.alphaMapTransform * vec3( uv, 1 );
+			albedo.a *= texture2D( textures, vec3( uvPrime.xy, material.alphaMap ) ).x;
 
 		}
 

package/src/materials/surface/AmbientOcclusionMaterial.js

@@ -1,6 +1,7 @@
 import { TangentSpaceNormalMap, Vector2 } from 'three';
 import { MaterialBase } from '../MaterialBase.js';
 import { MeshBVHUniformStruct, BVHShaderGLSL } from 'three-mesh-bvh';
+import { MATERIAL_PIXELS } from '../../uniforms/MaterialsTexture.js';
 
 import * as StructsGLSL from '../../shader/structs/index.js';
 import * as SamplingGLSL from '../../shader/sampling/index.js';
@@ -43,6 +44,7 @@ export class AmbientOcclusionMaterial extends MaterialBase {
 
 			defines: {
 				SAMPLES: 10,
+				MATERIAL_PIXELS: MATERIAL_PIXELS,
 			},
 
 			uniforms: {

package/src/shader/bvh/inside_fog_volume_function.glsl.js

@@ -7,7 +7,7 @@ export const inside_fog_volume_function = /* glsl */`
 // returns whether the given material is a fog material or not
 bool isMaterialFogVolume( sampler2D materials, uint materialIndex ) {
 
-	uint i = materialIndex * 45u;
+	uint i = materialIndex * uint( MATERIAL_PIXELS );
 	vec4 s14 = texelFetch1D( materials, i + 14u );
 	return bool( int( s14.b ) & 4 );