@unikia/upe-renderer 0.186.110 → 0.187.11

package/examples/jsm/lighting/vxgi/VXGIVolume.js

@@ -1,8 +1,8 @@
-import { Box3, Vector3, Vector4, Matrix4, Layers, Storage3DTexture, StorageBufferAttribute, StorageTexture3DNode, CubeTextureNode, RendererUtils, HalfFloatType, UnsignedByteType, RGBAFormat, LinearFilter, LinearMipmapLinearFilter, ClampToEdgeWrapping, MathUtils } from 'three/webgpu';
-import { Fn, If, Loop, nodeObject, uniform, uniformArray, storage, instanceIndex, textureStore, texture3D, texture, float, int, uint, vec2, vec3, vec4, ivec3, uvec3, max, min, abs, dot, cross, normalize, floor, sign, select, countOneBits, atomicOr, smoothstep, hash, fract, sqrt, cos, sin, length, PI, getDistanceAttenuation, viewZToPerspectiveDepth, viewZToReversedPerspectiveDepth } from 'three/tsl';
+import { Box3, Vector3, Vector4, Matrix4, Layers, Storage3DTexture, StorageBufferAttribute, StorageTexture3DNode, RendererUtils, HalfFloatType, UnsignedByteType, RGBAFormat, LinearFilter, LinearMipmapLinearFilter, ClampToEdgeWrapping, MathUtils } from 'three/webgpu';
+import { Fn, If, Loop, uniform, uniformArray, storage, instanceIndex, textureStore, texture3D, texture, cubeTexture, float, int, uint, vec2, vec3, vec4, ivec3, uvec3, max, min, abs, dot, cross, normalize, floor, sign, select, countOneBits, atomicOr, smoothstep, hash, length, PI, getDistanceAttenuation, viewZToPerspectiveDepth, viewZToReversedPerspectiveDepth } from 'three/tsl';
 
-import { collectSceneTriangles, computeSceneBounds, TRIANGLE_STRIDE } from './VXGISceneCollector.js';
-import { createConeTracer } from './VXGIConeTracer.js';
+import { collectSceneTriangles, computeSceneBounds, computeSolidVoxels, TRIANGLE_STRIDE } from './VXGISceneCollector.js';
+import { createConeTracer, gather } from './VXGIConeTracer.js';
 
 const _box = /*@__PURE__*/ new Box3();
 const _size = /*@__PURE__*/ new Vector3();
@@ -44,28 +44,6 @@ class MipStorageTexture3DNode extends StorageTexture3DNode {
 
 }
 
-/**
- * Cube texture node without the material's environment rotation, which requires a material and
- * scene context that compute passes lack. Used for point light shadow maps.
- *
- * @private
- */
-class PlainCubeTextureNode extends CubeTextureNode {
-
-	setupUV( builder, uvNode ) {
-
-		if ( this.value.isDepthTexture === true ) {
-
-			return vec3( uvNode.x, uvNode.y.negate(), uvNode.z );
-
-		}
-
-		return vec3( uvNode.x.negate(), uvNode.yz );
-
-	}
-
-}
-
 /**
  * Holds the voxel representation of a scene for {@link VXGINode}: an anisotropic opacity
  * mip chain, a direct radiance volume and a radiance volume with cached bounces.
@@ -76,6 +54,8 @@ class PlainCubeTextureNode extends CubeTextureNode {
  * along the axis, averaging across it), radiance is stored opacity-premultiplied and indirect bounces
  * are cached in the volume via cone tracing. Only direct lights are injected.
  * Voxelization uses conservative rasterization along the dominant triangle axis in a compute shader.
+ * The interiors of closed meshes are filled, so cones starting inside an object (e.g. near contact
+ * points) are blocked.
  *
  * Direct light is injected per voxel instead of splatting photons from a light-view map as in the
  * paper: the shadow maps rendered by the renderer are the light-view maps, and every occupied voxel
@@ -91,6 +71,8 @@ class PlainCubeTextureNode extends CubeTextureNode {
  * - {@link https://research.nvidia.com/publication/2011-09_interactive-indirect-illumination-using-voxel-cone-tracing}:
  *   Crassin et al., Interactive Indirect Illumination Using Voxel Cone Tracing, Pacific Graphics 2011.
  * - {@link https://developer.nvidia.com/content/basics-gpu-voxelization}: Basics of GPU voxelization.
+ * - {@link https://doi.org/10.1145/1882261.1866201}: Schwarz and Seidel, Fast Parallel Surface and Solid
+ *   Voxelization on GPUs, ACM Transactions on Graphics 2010.
  *
  * Note: This class can only be used with `WebGPURenderer` and a WebGPU backend.
  *
@@ -326,6 +308,7 @@ class VXGIVolume {
 
 		this._occupancyAttribute = null;
 		this._triangleIdAttribute = null;
+		this._solidAttribute = null;
 		this._triangleAttribute = null;
 		this._trianglesNode = null;
 		this._triangleCount = 0;
@@ -453,7 +436,7 @@ class VXGIVolume {
 		this.voxelSizeNode.value = voxelSize;
 		this.maxLevelNode.value = levels - 1;
 
-		if ( gridSize.equals( this._gridSize ) === false || levels !== this._levels || this._directional !== this.directionalRadiance ) {
+		if ( this._allocated === false || gridSize.equals( this._gridSize ) === false || levels !== this._levels || this._directional !== this.directionalRadiance ) {
 
 			this._allocateGrid( gridSize, levels );
 
@@ -475,12 +458,21 @@ class VXGIVolume {
 
 		this._triangleCount = count;
 		this._triangleCountNode.value = count;
+
+		if ( this._triangleAttribute !== null ) this._triangleAttribute.dispose();
+
 		this._triangleAttribute = new StorageBufferAttribute( count > 0 ? data : new Float32Array( TRIANGLE_STRIDE ), 4 );
 		this._trianglesNode = storage( this._triangleAttribute, 'vec4', this._triangleAttribute.count ).toReadOnly();
 
+		const solid = this._solidAttribute.array;
+
+		solid.fill( 0 );
+		computeSolidVoxels( scene, { boundsMin: this.boundsMinNode.value, voxelSize, gridSize, layers: this.layers, exclude: this._exclude }, new Uint8Array( solid.buffer ) );
+		this._solidAttribute.needsUpdate = true;
+
 		// kernels depend on the triangle buffer and grid
 
-		this._kernels = null;
+		this._disposeKernels();
 		const kernels = this._getKernels();
 
 		renderer.compute( kernels.clear );
@@ -540,6 +532,7 @@ class VXGIVolume {
 
 		this._occupancyAttribute = new StorageBufferAttribute( this._voxelCount, 1, Uint32Array );
 		this._triangleIdAttribute = new StorageBufferAttribute( this._voxelCount, 1, Uint32Array );
+		this._solidAttribute = new StorageBufferAttribute( Math.ceil( this._voxelCount / 4 ), 1, Uint32Array );
 
 	}
 
@@ -561,6 +554,8 @@ class VXGIVolume {
 
 	_disposeGrid() {
 
+		this._disposeKernels();
+
 		this.opacityTexture.dispose();
 		this.radianceTexture.dispose();
 		this.directionalTexture.dispose();
@@ -585,9 +580,27 @@ class VXGIVolume {
 
 		}
 
-		this._occupancyAttribute = null;
-		this._triangleIdAttribute = null;
-		this._kernels = null;
+		if ( this._occupancyAttribute !== null ) {
+
+			this._occupancyAttribute.dispose();
+			this._triangleIdAttribute.dispose();
+			this._solidAttribute.dispose();
+
+			this._occupancyAttribute = null;
+			this._triangleIdAttribute = null;
+			this._solidAttribute = null;
+
+		}
+
+		if ( this._triangleAttribute !== null ) {
+
+			this._triangleAttribute.dispose();
+
+			this._triangleAttribute = null;
+			this._trianglesNode = null;
+
+		}
+
 		this._allocated = false;
 
 	}
@@ -702,6 +715,8 @@ class VXGIVolume {
 
 		if ( kernels.inject[ index ] === null || kernels.injectKey[ index ] !== this._lightsKey ) {
 
+			if ( kernels.inject[ index ] !== null ) kernels.inject[ index ].dispose();
+
 			kernels.inject[ index ] = this._createInjectKernel( renderer, index );
 			kernels.injectKey[ index ] = this._lightsKey;
 
@@ -777,6 +792,22 @@ class VXGIVolume {
 
 	}
 
+	_disposeKernels() {
+
+		if ( this._kernels === null ) return;
+
+		const { clear, voxelize, resolve, opacityMips, radianceMips, inject, bounce } = this._kernels;
+
+		for ( const kernel of [ clear, voxelize, resolve, ...opacityMips, ...radianceMips.flat(), ...inject, ...bounce ] ) {
+
+			if ( kernel !== null ) kernel.dispose();
+
+		}
+
+		this._kernels = null;
+
+	}
+
 	_getLevelSize( level ) {
 
 		return [ this._gridSize.x >> level, this._gridSize.y >> level, this._gridSize.z >> level ];
@@ -926,6 +957,7 @@ class VXGIVolume {
 	_createResolveKernel() {
 
 		const occupancy = storage( this._occupancyAttribute, 'uint', this._voxelCount ).toReadOnly();
+		const solid = storage( this._solidAttribute, 'uint', this._solidAttribute.count ).toReadOnly();
 		const opacityTexture = this.opacityTexture;
 		const voxelCount = this._voxelCountNode;
 		const size = this._getLevelSize( 0 );
@@ -935,7 +967,8 @@ class VXGIVolume {
 			If( instanceIndex.lessThan( voxelCount ), () => {
 
 				const coords = this._coords( instanceIndex, size ).toConst();
-				const bits = occupancy.element( instanceIndex ).toConst();
+				const solidBits = solid.element( instanceIndex.shiftRight( uint( 2 ) ) ).shiftRight( instanceIndex.bitAnd( uint( 3 ) ).mul( uint( 8 ) ) ).bitAnd( uint( 0xFF ) );
+				const bits = occupancy.element( instanceIndex ).bitOr( solidBits ).toConst();
 
 				// per-axis coverage from the 2x2x2 sub-voxel occupancy
 
@@ -1280,7 +1313,7 @@ class VXGIVolume {
 
 								If( viewZ.greaterThanEqual( near ).and( viewZ.lessThanEqual( far ) ), () => {
 
-									const depth = nodeObject( new PlainCubeTextureNode( shadowTexture, normalize( lightToVoxel ) ) ).r; // depth cubes need an integer level, which the compute path emits by default
+									const depth = cubeTexture( shadowTexture, normalize( lightToVoxel ) ).r; // depth cubes need an integer level, which the compute path emits by default
 
 									if ( reversedDepth ) {
 
@@ -1383,35 +1416,12 @@ class VXGIVolume {
 
 					const direct = texture3D( directTexture, vec3( coords ).add( 0.5 ).div( vec3( size[ 0 ], size[ 1 ], size[ 2 ] ) ), float( 0 ) ).toConst();
 
-					// tangent frame
-
-					const up = select( abs( normal.y ).lessThan( 0.99 ), vec3( 0, 1, 0 ), vec3( 1, 0, 0 ) );
-					const tangent = normalize( cross( normal, up ) ).toConst();
-					const bitangent = cross( normal, tangent ).toConst();
-
 					const rotation = hash( instanceIndex ).toConst();
-					const gathered = vec3( 0 ).toVar();
+					const origin = position.add( normal.mul( voxelSize.mul( 1.5 ) ) ).toConst();
 
-					Loop( { start: 0, end: BOUNCE_CONE_COUNT, type: 'int', condition: '<', name: 'c' }, ( { c } ) => {
-
-						// cosine-weighted directions, rotated per voxel
-
-						const u1 = float( c ).add( 0.5 ).div( BOUNCE_CONE_COUNT ).toConst();
-						const u2 = fract( float( c ).mul( 0.618034 ).add( rotation ) ).toConst();
-						const sinTheta = sqrt( u1 ).toConst();
-						const cosTheta = sqrt( u1.oneMinus() ).toConst();
-						const phi = u2.mul( PI.mul( 2 ) ).toConst();
-
-						const direction = normalize( tangent.mul( cos( phi ).mul( sinTheta ) ).add( bitangent.mul( sin( phi ).mul( sinTheta ) ) ).add( normal.mul( cosTheta ) ) ).toConst();
-						const origin = position.add( normal.mul( voxelSize.mul( 1.5 ) ) ).toConst();
-
-						const cone = trace( origin, direction, tanHalfAngle, traceDistance );
-
-						gathered.addAssign( cone.color );
-
-					} );
+					const { color } = gather( trace, origin, normal, BOUNCE_CONE_COUNT, tanHalfAngle, traceDistance, rotation, 0.5 );
 
-					const bounce = albedo.mul( gathered.div( BOUNCE_CONE_COUNT ) );
+					const bounce = albedo.mul( color );
 
 					result.assign( vec4( direct.rgb.add( bounce.mul( direct.a ) ), direct.a ) );
 

package/examples/jsm/lights/SunLight.js

@@ -3,9 +3,14 @@ import { SunLightShadow } from './SunLightShadow.js';
 
 /**
  * A sun-like light that gets emitted in a specific direction, with rays that
- * are all parallel, and casts cascaded shadow maps via {@link SunLightShadow},
+ * are all parallel, and casts Cascaded Shadow Maps (CSM) via {@link SunLightShadow},
  * suited for lighting large scenes.
  *
+ * Please be aware that `SunLight` is not a good fit for small, bounded scenes like
+ * dioramas, single rooms or model-viewers. Small scenes don't benefit from
+ * CSM because most content will be located in the last shadow cascade with the
+ * lowest shadow map resolution.
+ *
  * Unlike {@link DirectionalLight}, the light has no target: like
  * {@link HemisphereLight}, its direction is defined by its position. The
  * light shines from its position towards the origin and points straight
@@ -18,10 +23,10 @@ import { SunLightShadow } from './SunLightShadow.js';
  * scene.add( sun );
  * ```
  *
- * When used with `WebGPURenderer`, the light must be registered with the
- * renderer's node library first:
+ * When used with `WebGPURenderer`, the light must be assigned its node
+ * implementation first:
  * ```js
- * renderer.library.addLight( SunLightNode, SunLight );
+ * SunLight.registerNode( SunLightNode );
  * ```
  *
  * @augments Light

package/examples/jsm/lights/SunLightNode.js

@@ -3,10 +3,10 @@ import { cameraViewMatrix, lightPosition } from 'three/tsl';
 import { sunShadow } from './SunShadowNode.js';
 
 /**
- * Module for representing sun lights as nodes. Register it with the
- * renderer's node library to use {@link SunLight} with `WebGPURenderer`:
+ * Module for representing sun lights as nodes. Register it with {@link SunLight}
+ * to use the light with `WebGPURenderer`:
  * ```js
- * renderer.library.addLight( SunLightNode, SunLight );
+ * SunLight.registerNode( SunLightNode );
  * ```
  *
  * @augments AnalyticLightNode

package/examples/jsm/lines/LineMaterial.js

@@ -179,7 +179,7 @@ ShaderLib[ 'line' ] = {
 			#ifdef WORLD_UNITS
 
 				vec3 worldDir = normalize( end.xyz - start.xyz );
-				vec3 tmpFwd = normalize( mix( start.xyz, end.xyz, 0.5 ) );
+				vec3 tmpFwd = perspective ? normalize( mix( start.xyz, end.xyz, 0.5 ) ) : vec3( 0.0, 0.0, - 1.0 );
 				vec3 worldUp = normalize( cross( worldDir, tmpFwd ) );
 				vec3 worldFwd = cross( worldDir, worldUp );
 				worldPos = position.y < 0.5 ? start: end;
@@ -213,7 +213,9 @@ ShaderLib[ 'line' ] = {
 				// shift the depth of the projected points so the line
 				// segments overlap neatly
 				vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd;
-				clip.z = clipPose.z * clip.w;
+
+				// only shift the depth of vertices in front of the camera (#35137)
+				if ( clip.w > 0.0 ) clip.z = clipPose.z * clip.w;
 
 			#else
 
@@ -349,15 +351,29 @@ ShaderLib[ 'line' ] = {
 
 			#ifdef WORLD_UNITS
 
-				// Find the closest points on the view ray and the line segment
-				vec3 rayEnd = normalize( worldPos.xyz ) * 1e5;
-				vec3 lineDir = worldEnd - worldStart;
-				vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd );
+				float len;
+
+				if ( isOrthographic ) {
+
+					// View rays are parallel to the z axis so the distance reduces to camera-space XY
+					vec2 lineDir = worldEnd.xy - worldStart.xy;
+					float t = clamp( dot( worldPos.xy - worldStart.xy, lineDir ) / dot( lineDir, lineDir ), 0.0, 1.0 );
+					len = length( worldStart.xy + lineDir * t - worldPos.xy );
+
+				} else {
+
+					// Find the closest points on the view ray and the line segment
+					vec3 rayEnd = normalize( worldPos.xyz ) * 1e5;
+					vec3 lineDir = worldEnd - worldStart;
+					vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd );
+
+					vec3 p1 = worldStart + lineDir * params.x;
+					vec3 p2 = rayEnd * params.y;
+					vec3 delta = p1 - p2;
+					len = length( delta );
+
+				}
 
-				vec3 p1 = worldStart + lineDir * params.x;
-				vec3 p2 = rayEnd * params.y;
-				vec3 delta = p1 - p2;
-				float len = length( delta );
 				float norm = len / linewidth;
 
 				#ifndef USE_DASH

package/examples/jsm/loaders/3DMLoader.js

@@ -147,10 +147,13 @@ class Rhino3dmLoader extends Loader {
 	load( url, onLoad, onProgress, onError ) {
 
 		const loader = new FileLoader( this.manager );
+		loader.setPriority( this.priority );
+		loader.setCache( this.cache );
 
 		loader.setPath( this.path );
 		loader.setResponseType( 'arraybuffer' );
 		loader.setRequestHeader( this.requestHeader );
+		loader.setWithCredentials( this.withCredentials );
 
 		this.url = url;
 
@@ -378,6 +381,8 @@ class Rhino3dmLoader extends Loader {
 		}
 
 		const textureLoader = new TextureLoader();
+		textureLoader.setPriority( this.priority );
+		textureLoader.setCache( this.cache );
 
 		for ( let i = 0; i < material.textures.length; i ++ ) {
 
@@ -532,7 +537,7 @@ class Rhino3dmLoader extends Loader {
 
 		if ( renderEnvironment ) {
 
-			new EXRLoader().load( renderEnvironment.image, function ( texture ) {
+			new EXRLoader().setPriority( this.priority ).setCache( this.cache ).load( renderEnvironment.image, function ( texture ) {
 
 				texture.mapping = EquirectangularReflectionMapping;
 				mat.envMap = texture;
@@ -967,6 +972,8 @@ class Rhino3dmLoader extends Loader {
 
 			// Load rhino3dm wrapper.
 			const jsLoader = new FileLoader( this.manager );
+			jsLoader.setPriority( this.priority );
+			jsLoader.setCache( this.cache );
 			jsLoader.setPath( this.libraryPath );
 			const jsContent = new Promise( ( resolve, reject ) => {
 
@@ -976,6 +983,8 @@ class Rhino3dmLoader extends Loader {
 
 			// Load rhino3dm WASM binary.
 			const binaryLoader = new FileLoader( this.manager );
+			binaryLoader.setPriority( this.priority );
+			binaryLoader.setCache( this.cache );
 			binaryLoader.setPath( this.libraryPath );
 			binaryLoader.setResponseType( 'arraybuffer' );
 			const binaryContent = new Promise( ( resolve, reject ) => {

package/examples/jsm/loaders/3MFLoader.js

@@ -92,6 +92,8 @@ class ThreeMFLoader extends Loader {
 
 		const scope = this;
 		const loader = new FileLoader( scope.manager );
+		loader.setPriority( scope.priority );
+		loader.setCache( scope.cache );
 		loader.setPath( scope.path );
 		loader.setResponseType( 'arraybuffer' );
 		loader.setRequestHeader( scope.requestHeader );
@@ -132,6 +134,8 @@ class ThreeMFLoader extends Loader {
 
 		const scope = this;
 		const textureLoader = new TextureLoader( this.manager );
+		textureLoader.setPriority( this.priority );
+		textureLoader.setCache( this.cache );
 
 		function loadDocument( data ) {
 
@@ -181,7 +185,7 @@ class ThreeMFLoader extends Loader {
 
 					rootModelFile = file;
 
-				} else if ( file.match( /^3D\/.*\/.*\.model$/ ) ) {
+				} else if ( file.match( /^3D\/.*\/[^\/]*\.model$/ ) ) {
 
 					modelPartNames.push( file ); // sub models
 

package/examples/jsm/loaders/AMFLoader.js

@@ -53,6 +53,8 @@ class AMFLoader extends Loader {
 		const scope = this;
 
 		const loader = new FileLoader( scope.manager );
+		loader.setPriority( scope.priority );
+		loader.setCache( scope.cache );
 		loader.setPath( scope.path );
 		loader.setResponseType( 'arraybuffer' );
 		loader.setRequestHeader( scope.requestHeader );

package/examples/jsm/loaders/BVHLoader.js

@@ -76,6 +76,8 @@ class BVHLoader extends Loader {
 		const scope = this;
 
 		const loader = new FileLoader( scope.manager );
+		loader.setPriority( scope.priority );
+		loader.setCache( scope.cache );
 		loader.setPath( scope.path );
 		loader.setRequestHeader( scope.requestHeader );
 		loader.setWithCredentials( scope.withCredentials );

package/examples/jsm/loaders/ColladaLoader.js

@@ -47,6 +47,8 @@ class ColladaLoader extends Loader {
 		const path = ( scope.path === '' ) ? LoaderUtils.extractUrlBase( url ) : scope.path;
 
 		const loader = new FileLoader( scope.manager );
+		loader.setPriority( scope.priority );
+		loader.setCache( scope.cache );
 		loader.setPath( scope.path );
 		loader.setRequestHeader( scope.requestHeader );
 		loader.setWithCredentials( scope.withCredentials );
@@ -106,6 +108,8 @@ class ColladaLoader extends Loader {
 
 		// Setup texture loaders
 		const textureLoader = new TextureLoader( this.manager );
+		textureLoader.setPriority( this.priority );
+		textureLoader.setCache( this.cache );
 		textureLoader.setPath( this.resourcePath || path ).setCrossOrigin( this.crossOrigin );
 
 		let tgaLoader;
@@ -113,7 +117,11 @@ class ColladaLoader extends Loader {
 		if ( TGALoader ) {
 
 			tgaLoader = new TGALoader( this.manager );
+			tgaLoader.setPriority( this.priority );
+			tgaLoader.setCache( this.cache );
 			tgaLoader.setPath( this.resourcePath || path );
+			tgaLoader.setRequestHeader( this.requestHeader );
+			tgaLoader.setWithCredentials( this.withCredentials );
 
 		}
 

package/examples/jsm/loaders/DDSLoader.js

@@ -359,7 +359,7 @@ class DDSLoader extends CompressedTextureLoader {
 
 				} else {
 
-					dataLength = Math.max( 4, width ) / 4 * Math.max( 4, height ) / 4 * blockBytes;
+					dataLength = Math.ceil( width / 4 ) * Math.ceil( height / 4 ) * blockBytes;
 					byteArray = new Uint8Array( buffer, dataOffset, dataLength );
 
 				}

package/examples/jsm/loaders/DRACOLoader.js

@@ -163,6 +163,8 @@ class DRACOLoader extends Loader {
 	load( url, onLoad, onProgress, onError ) {
 
 		const loader = new FileLoader( this.manager );
+		loader.setPriority( this.priority );
+		loader.setCache( this.cache );
 
 		loader.setPath( this.path );
 		loader.setResponseType( 'arraybuffer' );
@@ -358,6 +360,8 @@ class DRACOLoader extends Loader {
 	_loadLibrary( url, responseType ) {
 
 		const loader = new FileLoader( this.manager );
+		loader.setPriority( this.priority );
+		loader.setCache( this.cache );
 		loader.setResponseType( responseType );
 		loader.setWithCredentials( this.withCredentials );
 
@@ -725,7 +729,7 @@ function DRACOWorker() {
 
 			let dstOffset = 0;
 
-			for ( let i = 0, il = srcArray.length; i < il; i ++ ) {
+			for ( let i = 0; i < count; i ++ ) {
 
 				for ( let j = 0; j < itemSize; j ++ ) {