@needle-tools/three 0.162.12 → 0.169.2

package/examples/jsm/utils/SceneUtils.js

@@ -245,10 +245,69 @@ function sortInstancedMesh( mesh, compareFn ) {
 
 }
 
+/**
+ * @param {Object3D} object Object to traverse.
+ * @yields {Object3D} Objects that passed the filter condition.
+ */
+function* traverseGenerator( object ) {
+
+	yield object;
+
+	const children = object.children;
+
+	for ( let i = 0, l = children.length; i < l; i ++ ) {
+
+		yield* traverseGenerator( children[ i ] );
+
+	}
+
+}
+
+/**
+ * @param {Object3D} object Object to traverse.
+ * @yields {Object3D} Objects that passed the filter condition.
+ */
+function* traverseVisibleGenerator( object ) {
+
+	if ( object.visible === false ) return;
+
+	yield object;
+
+	const children = object.children;
+
+	for ( let i = 0, l = children.length; i < l; i ++ ) {
+
+		yield* traverseVisibleGenerator( children[ i ] );
+
+	}
+
+}
+
+/**
+ * @param {Object3D} object Object to traverse.
+ * @yields {Object3D} Objects that passed the filter condition.
+ */
+function* traverseAncestorsGenerator( object ) {
+
+	const parent = object.parent;
+
+	if ( parent !== null ) {
+
+		yield parent;
+
+		yield* traverseAncestorsGenerator( parent );
+
+	}
+
+}
+
 export {
 	createMeshesFromInstancedMesh,
 	createMeshesFromMultiMaterialMesh,
 	createMultiMaterialObject,
 	reduceVertices,
-	sortInstancedMesh
+	sortInstancedMesh,
+	traverseGenerator,
+	traverseVisibleGenerator,
+	traverseAncestorsGenerator
 };

package/examples/jsm/utils/ShadowMapViewer.js

@@ -1,13 +1,12 @@
 import {
 	DoubleSide,
-	LinearFilter,
+	CanvasTexture,
 	Mesh,
 	MeshBasicMaterial,
 	OrthographicCamera,
 	PlaneGeometry,
 	Scene,
 	ShaderMaterial,
-	Texture,
 	UniformsUtils
 } from 'three';
 import { UnpackDepthRGBAShader } from '../shaders/UnpackDepthRGBAShader.js';
@@ -93,13 +92,9 @@ class ShadowMapViewer {
 			context.fillStyle = 'rgba( 255, 0, 0, 1 )';
 			context.fillText( light.name, 0, 20 );
 
-			const labelTexture = new Texture( labelCanvas );
-			labelTexture.magFilter = LinearFilter;
-			labelTexture.minFilter = LinearFilter;
-			labelTexture.needsUpdate = true;
+			const labelTexture = new CanvasTexture( labelCanvas );
 
-			const labelMaterial = new MeshBasicMaterial( { map: labelTexture, side: DoubleSide } );
-			labelMaterial.transparent = true;
+			const labelMaterial = new MeshBasicMaterial( { map: labelTexture, side: DoubleSide, transparent: true } );
 
 			const labelPlane = new PlaneGeometry( labelCanvas.width, labelCanvas.height );
 			labelMesh = new Mesh( labelPlane, labelMaterial );

package/examples/jsm/utils/ShadowMapViewerGPU.js

@@ -0,0 +1,201 @@
+import {
+	DoubleSide,
+	CanvasTexture,
+	Mesh,
+	MeshBasicMaterial,
+	NodeMaterial,
+	OrthographicCamera,
+	PlaneGeometry,
+	Scene,
+	Texture
+} from 'three';
+import { texture } from 'three/tsl';
+
+/**
+ * This is a helper for visualising a given light's shadow map.
+ * It works for shadow casting lights: DirectionalLight and SpotLight.
+ * It renders out the shadow map and displays it on a HUD.
+ *
+ * Example usage:
+ *	1) Import ShadowMapViewer into your app.
+ *
+ *	2) Create a shadow casting light and name it optionally:
+ *		let light = new DirectionalLight( 0xffffff, 1 );
+ *		light.castShadow = true;
+ *		light.name = 'Sun';
+ *
+ *	3) Create a shadow map viewer for that light and set its size and position optionally:
+ *		let shadowMapViewer = new ShadowMapViewer( light );
+ *		shadowMapViewer.size.set( 128, 128 );	//width, height  default: 256, 256
+ *		shadowMapViewer.position.set( 10, 10 );	//x, y in pixel	 default: 0, 0 (top left corner)
+ *
+ *	4) Render the shadow map viewer in your render loop:
+ *		shadowMapViewer.render( renderer );
+ *
+ *	5) Optionally: Update the shadow map viewer on window resize:
+ *		shadowMapViewer.updateForWindowResize();
+ *
+ *	6) If you set the position or size members directly, you need to call shadowMapViewer.update();
+ */
+
+class ShadowMapViewer {
+
+	constructor( light ) {
+
+		//- Internals
+		const scope = this;
+		const doRenderLabel = ( light.name !== undefined && light.name !== '' );
+		let currentAutoClear;
+
+		//Holds the initial position and dimension of the HUD
+		const frame = {
+			x: 10,
+			y: 10,
+			width: 256,
+			height: 256
+		};
+
+		const camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10 );
+		camera.position.set( 0, 0, 2 );
+		const scene = new Scene();
+
+		//HUD for shadow map
+
+		const material = new NodeMaterial();
+
+		const shadowMapUniform = texture( new Texture() );
+		material.fragmentNode = shadowMapUniform;
+
+		const plane = new PlaneGeometry( frame.width, frame.height );
+		const mesh = new Mesh( plane, material );
+
+		scene.add( mesh );
+
+		//Label for light's name
+		let labelCanvas, labelMesh;
+
+		if ( doRenderLabel ) {
+
+			labelCanvas = document.createElement( 'canvas' );
+
+			const context = labelCanvas.getContext( '2d' );
+			context.font = 'Bold 20px Arial';
+
+			const labelWidth = context.measureText( light.name ).width;
+			labelCanvas.width = labelWidth;
+			labelCanvas.height = 25;	//25 to account for g, p, etc.
+
+			context.font = 'Bold 20px Arial';
+			context.fillStyle = 'rgba( 255, 0, 0, 1 )';
+			context.fillText( light.name, 0, 20 );
+
+			const labelTexture = new CanvasTexture( labelCanvas );
+
+			const labelMaterial = new MeshBasicMaterial( { map: labelTexture, side: DoubleSide, transparent: true } );
+
+			const labelPlane = new PlaneGeometry( labelCanvas.width, labelCanvas.height );
+			labelMesh = new Mesh( labelPlane, labelMaterial );
+
+			scene.add( labelMesh );
+
+		}
+
+		function resetPosition() {
+
+			scope.position.set( scope.position.x, scope.position.y );
+
+		}
+
+		//- API
+		// Set to false to disable displaying this shadow map
+		this.enabled = true;
+
+		// Set the size of the displayed shadow map on the HUD
+		this.size = {
+			width: frame.width,
+			height: frame.height,
+			set: function ( width, height ) {
+
+				this.width = width;
+				this.height = height;
+
+				mesh.scale.set( this.width / frame.width, this.height / frame.height, 1 );
+
+				//Reset the position as it is off when we scale stuff
+				resetPosition();
+
+			}
+		};
+
+		// Set the position of the displayed shadow map on the HUD
+		this.position = {
+			x: frame.x,
+			y: frame.y,
+			set: function ( x, y ) {
+
+				this.x = x;
+				this.y = y;
+
+				const width = scope.size.width;
+				const height = scope.size.height;
+
+				mesh.position.set( - window.innerWidth / 2 + width / 2 + this.x, window.innerHeight / 2 - height / 2 - this.y, 0 );
+
+				if ( doRenderLabel ) labelMesh.position.set( mesh.position.x, mesh.position.y - scope.size.height / 2 + labelCanvas.height / 2, 0 );
+
+			}
+		};
+
+		this.render = function ( renderer ) {
+
+			if ( this.enabled ) {
+
+				//Because a light's .shadowMap is only initialised after the first render pass
+				//we have to make sure the correct map is sent into the shader, otherwise we
+				//always end up with the scene's first added shadow casting light's shadowMap
+				//in the shader
+				//See: https://github.com/mrdoob/three.js/issues/5932
+				shadowMapUniform.value = light.shadow.map.texture;
+
+				currentAutoClear = renderer.autoClear;
+				renderer.autoClear = false; // To allow render overlay
+				renderer.clearDepth();
+				renderer.render( scene, camera );
+				renderer.autoClear = currentAutoClear;
+
+			}
+
+		};
+
+		this.updateForWindowResize = function () {
+
+			if ( this.enabled ) {
+
+				 camera.left = window.innerWidth / - 2;
+				 camera.right = window.innerWidth / 2;
+				 camera.top = window.innerHeight / 2;
+				 camera.bottom = window.innerHeight / - 2;
+				 camera.updateProjectionMatrix();
+
+				 this.update();
+
+			}
+
+		};
+
+		this.update = function () {
+
+			this.position.set( this.position.x, this.position.y );
+			this.size.set( this.size.width, this.size.height );
+
+		};
+
+		//Force an update to set position/size
+		this.update();
+
+	}
+
+}
+
+
+export { ShadowMapViewer };

package/examples/jsm/utils/SkeletonUtils.js

@@ -9,28 +9,37 @@ import {
 	VectorKeyframeTrack
 } from 'three';
 
+function getBoneName( bone, options ) {
+
+	if ( options.getBoneName !== undefined ) {
+
+		return options.getBoneName( bone );
+
+	}
+
+	return options.names[ bone.name ];
+
+}
 
 function retarget( target, source, options = {} ) {
 
-	const pos = new Vector3(),
-		quat = new Quaternion(),
+	const quat = new Quaternion(),
 		scale = new Vector3(),
-		bindBoneMatrix = new Matrix4(),
 		relativeMatrix = new Matrix4(),
 		globalMatrix = new Matrix4();
 
-	options.preserveMatrix = options.preserveMatrix !== undefined ? options.preserveMatrix : true;
-	options.preservePosition = options.preservePosition !== undefined ? options.preservePosition : true;
-	options.preserveHipPosition = options.preserveHipPosition !== undefined ? options.preserveHipPosition : false;
+	options.preserveBoneMatrix = options.preserveBoneMatrix !== undefined ? options.preserveBoneMatrix : true;
+	options.preserveBonePositions = options.preserveBonePositions !== undefined ? options.preserveBonePositions : true;
 	options.useTargetMatrix = options.useTargetMatrix !== undefined ? options.useTargetMatrix : false;
 	options.hip = options.hip !== undefined ? options.hip : 'hip';
+	options.hipInfluence = options.hipInfluence !== undefined ? options.hipInfluence : new Vector3( 1, 1, 1 );
+	options.scale = options.scale !== undefined ? options.scale : 1;
 	options.names = options.names || {};
 
 	const sourceBones = source.isObject3D ? source.skeleton.bones : getBones( source ),
 		bones = target.isObject3D ? target.skeleton.bones : getBones( target );
 
-	let bindBones,
-		bone, name, boneTo,
+	let bone, name, boneTo,
 		bonesPosition;
 
 	// reset bones
@@ -42,11 +51,11 @@ function retarget( target, source, options = {} ) {
 	} else {
 
 		options.useTargetMatrix = true;
-		options.preserveMatrix = false;
+		options.preserveBoneMatrix = false;
 
 	}
 
-	if ( options.preservePosition ) {
+	if ( options.preserveBonePositions ) {
 
 		bonesPosition = [];
 
@@ -58,7 +67,7 @@ function retarget( target, source, options = {} ) {
 
 	}
 
-	if ( options.preserveMatrix ) {
+	if ( options.preserveBoneMatrix ) {
 
 		// reset matrix
 
@@ -76,35 +85,10 @@ function retarget( target, source, options = {} ) {
 
 	}
 
-	if ( options.offsets ) {
-
-		bindBones = [];
-
-		for ( let i = 0; i < bones.length; ++ i ) {
-
-			bone = bones[ i ];
-			name = options.names[ bone.name ] || bone.name;
-
-			if ( options.offsets[ name ] ) {
-
-				bone.matrix.multiply( options.offsets[ name ] );
-
-				bone.matrix.decompose( bone.position, bone.quaternion, bone.scale );
-
-				bone.updateMatrixWorld();
-
-			}
-
-			bindBones.push( bone.matrixWorld.clone() );
-
-		}
-
-	}
-
 	for ( let i = 0; i < bones.length; ++ i ) {
 
 		bone = bones[ i ];
-		name = options.names[ bone.name ] || bone.name;
+		name = getBoneName( bone, options );
 
 		boneTo = getBoneByName( name, sourceBones );
 
@@ -136,10 +120,15 @@ function retarget( target, source, options = {} ) {
 
 			if ( target.isObject3D ) {
 
-				const boneIndex = bones.indexOf( bone ),
-					wBindMatrix = bindBones ? bindBones[ boneIndex ] : bindBoneMatrix.copy( target.skeleton.boneInverses[ boneIndex ] ).invert();
+				if ( options.localOffsets ) {
+
+					if ( options.localOffsets[ bone.name ] ) {
 
-				globalMatrix.multiply( wBindMatrix );
+						globalMatrix.multiply( options.localOffsets[ bone.name ] );
+
+					}
+
+				}
 
 			}
 
@@ -147,20 +136,30 @@ function retarget( target, source, options = {} ) {
 
 		}
 
-		if ( bone.parent && bone.parent.isBone ) {
+		if ( name === options.hip ) {
 
-			bone.matrix.copy( bone.parent.matrixWorld ).invert();
-			bone.matrix.multiply( globalMatrix );
+			globalMatrix.elements[ 12 ] *= options.scale * options.hipInfluence.x;
+			globalMatrix.elements[ 13 ] *= options.scale * options.hipInfluence.y;
+			globalMatrix.elements[ 14 ] *= options.scale * options.hipInfluence.z;
 
-		} else {
+			if ( options.hipPosition !== undefined ) {
 
-			bone.matrix.copy( globalMatrix );
+				globalMatrix.elements[ 12 ] += options.hipPosition.x * options.scale;
+				globalMatrix.elements[ 13 ] += options.hipPosition.y * options.scale;
+				globalMatrix.elements[ 14 ] += options.hipPosition.z * options.scale;
+
+			}
 
 		}
 
-		if ( options.preserveHipPosition && name === options.hip ) {
+		if ( bone.parent ) {
 
-			bone.matrix.setPosition( pos.set( 0, bone.position.y, 0 ) );
+			bone.matrix.copy( bone.parent.matrixWorld ).invert();
+			bone.matrix.multiply( globalMatrix );
+
+		} else {
+
+			bone.matrix.copy( globalMatrix );
 
 		}
 
@@ -170,12 +169,12 @@ function retarget( target, source, options = {} ) {
 
 	}
 
-	if ( options.preservePosition ) {
+	if ( options.preserveBonePositions ) {
 
 		for ( let i = 0; i < bones.length; ++ i ) {
 
 			bone = bones[ i ];
-			name = options.names[ bone.name ] || bone.name;
+			name = getBoneName( bone, options ) || bone.name;
 
 			if ( name !== options.hip ) {
 
@@ -187,7 +186,7 @@ function retarget( target, source, options = {} ) {
 
 	}
 
-	if ( options.preserveMatrix ) {
+	if ( options.preserveBoneMatrix ) {
 
 		// restore matrix
 
@@ -200,6 +199,7 @@ function retarget( target, source, options = {} ) {
 function retargetClip( target, source, clip, options = {} ) {
 
 	options.useFirstFramePosition = options.useFirstFramePosition !== undefined ? options.useFirstFramePosition : false;
+
 	// Calculate the fps from the source clip based on the track with the most frames, unless fps is already provided.
 	options.fps = options.fps !== undefined ? options.fps : ( Math.max( ...clip.tracks.map( track => track.times.length ) ) / clip.duration );
 	options.names = options.names || [];
@@ -216,30 +216,48 @@ function retargetClip( target, source, clip, options = {} ) {
 		mixer = new AnimationMixer( source ),
 		bones = getBones( target.skeleton ),
 		boneDatas = [];
+
 	let positionOffset,
 		bone, boneTo, boneData,
 		name;
 
 	mixer.clipAction( clip ).play();
-	mixer.update( 0 );
+
+	// trim
+
+	let start = 0, end = numFrames;
+
+	if ( options.trim !== undefined ) {
+
+		start = Math.round( options.trim[ 0 ] * options.fps );
+		end = Math.min( Math.round( options.trim[ 1 ] * options.fps ), numFrames ) - start;
+
+		mixer.update( options.trim[ 0 ] );
+
+	} else {
+
+		mixer.update( 0 );
+
+	}
 
 	source.updateMatrixWorld();
 
-	for ( let i = 0; i < numFrames; ++ i ) {
+	//
+
+	for ( let frame = 0; frame < end; ++ frame ) {
 
-		const time = i * delta;
+		const time = frame * delta;
 
 		retarget( target, source, options );
 
 		for ( let j = 0; j < bones.length; ++ j ) {
 
-			name = options.names[ bones[ j ].name ] || bones[ j ].name;
-
+			bone = bones[ j ];
+			name = getBoneName( bone, options ) || bone.name;
 			boneTo = getBoneByName( name, source.skeleton );
 
 			if ( boneTo ) {
 
-				bone = bones[ j ];
 				boneData = boneDatas[ j ] = boneDatas[ j ] || { bone: bone };
 
 				if ( options.hip === name ) {
@@ -247,15 +265,15 @@ function retargetClip( target, source, clip, options = {} ) {
 					if ( ! boneData.pos ) {
 
 						boneData.pos = {
-							times: new Float32Array( numFrames ),
-							values: new Float32Array( numFrames * 3 )
+							times: new Float32Array( end ),
+							values: new Float32Array( end * 3 )
 						};
 
 					}
 
 					if ( options.useFirstFramePosition ) {
 
-						if ( i === 0 ) {
+						if ( frame === 0 ) {
 
 							positionOffset = bone.position.clone();
 
@@ -265,30 +283,30 @@ function retargetClip( target, source, clip, options = {} ) {
 
 					}
 
-					boneData.pos.times[ i ] = time;
+					boneData.pos.times[ frame ] = time;
 
-					bone.position.toArray( boneData.pos.values, i * 3 );
+					bone.position.toArray( boneData.pos.values, frame * 3 );
 
 				}
 
 				if ( ! boneData.quat ) {
 
 					boneData.quat = {
-						times: new Float32Array( numFrames ),
-						values: new Float32Array( numFrames * 4 )
+						times: new Float32Array( end ),
+						values: new Float32Array( end * 4 )
 					};
 
 				}
 
-				boneData.quat.times[ i ] = time;
+				boneData.quat.times[ frame ] = time;
 
-				bone.quaternion.toArray( boneData.quat.values, i * 4 );
+				bone.quaternion.toArray( boneData.quat.values, frame * 4 );
 
 			}
 
 		}
 
-		if ( i === numFrames - 2 ) {
+		if ( frame === end - 2 ) {
 
 			// last mixer update before final loop iteration
 			// make sure we do not go over or equal to clip duration

package/examples/jsm/utils/SortUtils.js

@@ -1,6 +1,9 @@
 // Hybrid radix sort from
 // - https://gist.github.com/sciecode/93ed864dd77c5c8803c6a86698d68dab
 // - https://github.com/mrdoob/three.js/pull/27202#issuecomment-1817640271
+//
+// expects unsigned 32b integer values
+
 const POWER = 3;
 const BIT_MAX = 32;
 const BIN_BITS = 1 << POWER;
@@ -102,11 +105,11 @@ export const radixSort = ( arr, opt ) => {
 
 		for ( let j = start + 1; j < start + len; j ++ ) {
 
-			const p = a[ j ], t = get( p );
+			const p = a[ j ], t = get( p ) >>> 0;
 			let i = j;
-			while ( i > 0 ) {
+			while ( i > start ) {
 
-				if ( compare( get( a[ i - 1 ] ), t ) )
+				if ( compare( get( a[ i - 1 ] ) >>> 0, t ) )
 					a[ i ] = a[ -- i ];
 				else
 					break;
@@ -140,14 +143,14 @@ export const radixSort = ( arr, opt ) => {
 		bin.fill( 0 );
 
 		for ( let j = start; j < end; j ++ )
-			bin[ ( get( a[ j ] ) >> shift ) & BIN_MAX ] ++;
+			bin[ ( get( a[ j ] ) >>> shift ) & BIN_MAX ] ++;
 
 		accumulate( bin );
 
 		cache.set( bin );
 
 		for ( let j = end - 1; j >= start; j -- )
-			b[ start + -- bin[ ( get( a[ j ] ) >> shift ) & BIN_MAX ] ] = a[ j ];
+			b[ start + -- bin[ ( get( a[ j ] ) >>> shift ) & BIN_MAX ] ] = a[ j ];
 
 		if ( depth == ITERATIONS - 1 ) return;
 

package/examples/jsm/utils/TextureUtils.js

@@ -34,7 +34,7 @@ export function decompress( texture, maxTextureSize = Infinity, renderer = null
 				gl_FragColor = vec4(vUv.xy, 0, 1);
 				
 				#ifdef IS_SRGB
-				gl_FragColor = LinearTosRGB( texture2D( blitTexture, vUv) );
+				gl_FragColor = sRGBTransferOETF( texture2D( blitTexture, vUv) );
 				#else
 				gl_FragColor = texture2D( blitTexture, vUv);
 				#endif
@@ -48,7 +48,7 @@ export function decompress( texture, maxTextureSize = Infinity, renderer = null
 	if ( ! fullscreenQuad ) {
 
 		fullscreenQuad = new Mesh( fullscreenQuadGeometry, fullscreenQuadMaterial );
-		fullscreenQuad.frustrumCulled = false;
+		fullscreenQuad.frustumCulled = false;
 
 	}
 
@@ -83,6 +83,7 @@ export function decompress( texture, maxTextureSize = Infinity, renderer = null
 	readableTexture.magFilter = texture.magFilter;
 	readableTexture.wrapS = texture.wrapS;
 	readableTexture.wrapT = texture.wrapT;
+	readableTexture.colorSpace = texture.colorSpace;
 	readableTexture.name = texture.name;
 
 	if ( _renderer ) {