@plastic-software/three 0.167.3 → 0.174.0

package/examples/jsm/utils/SceneOptimizer.js

@@ -0,0 +1,410 @@
+import * as THREE from 'three';
+
+class SceneOptimizer {
+
+	constructor( scene, options = {} ) {
+
+		this.scene = scene;
+		this.debug = options.debug || false;
+
+	}
+
+	bufferToHash( buffer ) {
+
+		let hash = 0;
+		if ( buffer.byteLength !== 0 ) {
+
+			let uintArray;
+			if ( buffer.buffer ) {
+
+				uintArray = new Uint8Array(
+					buffer.buffer,
+					buffer.byteOffset,
+					buffer.byteLength
+				);
+
+			} else {
+
+				uintArray = new Uint8Array( buffer );
+
+			}
+
+			for ( let i = 0; i < buffer.byteLength; i ++ ) {
+
+				const byte = uintArray[ i ];
+				hash = ( hash << 5 ) - hash + byte;
+				hash |= 0;
+
+			}
+
+		}
+
+		return hash;
+
+	}
+
+	getMaterialPropertiesHash( material ) {
+
+		const mapProps = [
+			'map',
+			'alphaMap',
+			'aoMap',
+			'bumpMap',
+			'displacementMap',
+			'emissiveMap',
+			'envMap',
+			'lightMap',
+			'metalnessMap',
+			'normalMap',
+			'roughnessMap',
+		];
+
+		const mapHash = mapProps
+			.map( ( prop ) => {
+
+				const map = material[ prop ];
+				if ( ! map ) return 0;
+				return `${map.uuid}_${map.offset.x}_${map.offset.y}_${map.repeat.x}_${map.repeat.y}_${map.rotation}`;
+
+			} )
+			.join( '|' );
+
+		const physicalProps = [
+			'transparent',
+			'opacity',
+			'alphaTest',
+			'alphaToCoverage',
+			'side',
+			'vertexColors',
+			'visible',
+			'blending',
+			'wireframe',
+			'flatShading',
+			'premultipliedAlpha',
+			'dithering',
+			'toneMapped',
+			'depthTest',
+			'depthWrite',
+			'metalness',
+			'roughness',
+			'clearcoat',
+			'clearcoatRoughness',
+			'sheen',
+			'sheenRoughness',
+			'transmission',
+			'thickness',
+			'attenuationDistance',
+			'ior',
+			'iridescence',
+			'iridescenceIOR',
+			'iridescenceThicknessRange',
+			'reflectivity',
+		]
+			.map( ( prop ) => {
+
+				if ( typeof material[ prop ] === 'undefined' ) return 0;
+				if ( material[ prop ] === null ) return 0;
+				return material[ prop ].toString();
+
+			} )
+			.join( '|' );
+
+		const emissiveHash = material.emissive ? material.emissive.getHexString() : 0;
+		const attenuationHash = material.attenuationColor
+			? material.attenuationColor.getHexString()
+			: 0;
+		const sheenColorHash = material.sheenColor
+			? material.sheenColor.getHexString()
+			: 0;
+
+		return [
+			material.type,
+			physicalProps,
+			mapHash,
+			emissiveHash,
+			attenuationHash,
+			sheenColorHash,
+		].join( '_' );
+
+	}
+
+	getAttributesSignature( geometry ) {
+
+		return Object.keys( geometry.attributes )
+			.sort()
+			.map( ( name ) => {
+
+				const attribute = geometry.attributes[ name ];
+				return `${name}_${attribute.itemSize}_${attribute.normalized}`;
+
+			} )
+			.join( '|' );
+
+	}
+
+	getGeometryHash( geometry ) {
+
+		const indexHash = geometry.index
+			? this.bufferToHash( geometry.index.array )
+			: 'noIndex';
+		const positionHash = this.bufferToHash( geometry.attributes.position.array );
+		const attributesSignature = this.getAttributesSignature( geometry );
+		return `${indexHash}_${positionHash}_${attributesSignature}`;
+
+	}
+
+	getBatchKey( materialProps, attributesSignature ) {
+
+		return `${materialProps}_${attributesSignature}`;
+
+	}
+
+	analyzeModel() {
+
+		const batchGroups = new Map();
+		const singleGroups = new Map();
+		const uniqueGeometries = new Set();
+
+		this.scene.updateMatrixWorld( true );
+		this.scene.traverse( ( node ) => {
+
+			if ( ! node.isMesh ) return;
+
+			const materialProps = this.getMaterialPropertiesHash( node.material );
+			const attributesSignature = this.getAttributesSignature( node.geometry );
+			const batchKey = this.getBatchKey( materialProps, attributesSignature );
+			const geometryHash = this.getGeometryHash( node.geometry );
+			uniqueGeometries.add( geometryHash );
+
+			if ( ! batchGroups.has( batchKey ) ) {
+
+				batchGroups.set( batchKey, {
+					meshes: [],
+					geometryStats: new Map(),
+					totalInstances: 0,
+					materialProps: node.material.clone(),
+				} );
+
+			}
+
+			const group = batchGroups.get( batchKey );
+			group.meshes.push( node );
+			group.totalInstances ++;
+
+			if ( ! group.geometryStats.has( geometryHash ) ) {
+
+				group.geometryStats.set( geometryHash, {
+					count: 0,
+					vertices: node.geometry.attributes.position.count,
+					indices: node.geometry.index ? node.geometry.index.count : 0,
+					geometry: node.geometry,
+				} );
+
+			}
+
+			group.geometryStats.get( geometryHash ).count ++;
+
+		} );
+
+		// Move single instance groups to singleGroups
+		for ( const [ batchKey, group ] of batchGroups ) {
+
+			if ( group.totalInstances === 1 ) {
+
+				singleGroups.set( batchKey, group );
+				batchGroups.delete( batchKey );
+
+			}
+
+		}
+
+		return { batchGroups, singleGroups, uniqueGeometries: uniqueGeometries.size };
+
+	}
+
+	createBatchedMeshes( batchGroups ) {
+
+		const meshesToRemove = new Set();
+
+		for ( const [ , group ] of batchGroups ) {
+
+			const maxGeometries = group.totalInstances;
+			const maxVertices = Array.from( group.geometryStats.values() ).reduce(
+				( sum, stats ) => sum + stats.vertices,
+				0
+			);
+			const maxIndices = Array.from( group.geometryStats.values() ).reduce(
+				( sum, stats ) => sum + stats.indices,
+				0
+			);
+
+			const batchedMaterial = new group.materialProps.constructor( group.materialProps );
+
+			if ( batchedMaterial.color !== undefined ) {
+
+				// Reset color to white, color will be set per instance
+				batchedMaterial.color.set( 1, 1, 1 );
+
+			}
+
+			const batchedMesh = new THREE.BatchedMesh(
+				maxGeometries,
+				maxVertices,
+				maxIndices,
+				batchedMaterial
+			);
+
+			const referenceMesh = group.meshes[ 0 ];
+			batchedMesh.name = `${referenceMesh.name}_batch`;
+
+			const geometryIds = new Map();
+			const inverseParentMatrix = new THREE.Matrix4();
+
+			if ( referenceMesh.parent ) {
+
+				referenceMesh.parent.updateWorldMatrix( true, false );
+				inverseParentMatrix.copy( referenceMesh.parent.matrixWorld ).invert();
+
+			}
+
+			for ( const mesh of group.meshes ) {
+
+				const geometryHash = this.getGeometryHash( mesh.geometry );
+
+				if ( ! geometryIds.has( geometryHash ) ) {
+
+					geometryIds.set( geometryHash, batchedMesh.addGeometry( mesh.geometry ) );
+
+				}
+
+				const geometryId = geometryIds.get( geometryHash );
+				const instanceId = batchedMesh.addInstance( geometryId );
+
+				const localMatrix = new THREE.Matrix4();
+				mesh.updateWorldMatrix( true, false );
+				localMatrix.copy( mesh.matrixWorld );
+				if ( referenceMesh.parent ) {
+
+					localMatrix.premultiply( inverseParentMatrix );
+
+				}
+
+				batchedMesh.setMatrixAt( instanceId, localMatrix );
+				batchedMesh.setColorAt( instanceId, mesh.material.color );
+
+				meshesToRemove.add( mesh );
+
+			}
+
+			if ( referenceMesh.parent ) {
+
+				referenceMesh.parent.add( batchedMesh );
+
+			}
+
+		}
+
+		return meshesToRemove;
+
+	}
+
+	removeEmptyNodes( object ) {
+
+		const children = [ ...object.children ];
+
+		for ( const child of children ) {
+
+			this.removeEmptyNodes( child );
+
+			if ( ( child instanceof THREE.Group || child.constructor === THREE.Object3D )
+                && child.children.length === 0 ) {
+
+				object.remove( child );
+
+			}
+
+		}
+
+	}
+
+	disposeMeshes( meshesToRemove ) {
+
+		meshesToRemove.forEach( ( mesh ) => {
+
+			if ( mesh.parent ) {
+
+				mesh.parent.remove( mesh );
+
+			}
+
+			if ( mesh.geometry ) mesh.geometry.dispose();
+			if ( mesh.material ) {
+
+				if ( Array.isArray( mesh.material ) ) {
+
+					mesh.material.forEach( ( m ) => m.dispose() );
+
+				} else {
+
+					mesh.material.dispose();
+
+				}
+
+			}
+
+		} );
+
+	}
+
+	logDebugInfo( stats ) {
+
+		console.group( 'Scene Optimization Results' );
+		console.log( `Original meshes: ${stats.originalMeshes}` );
+		console.log( `Batched into: ${stats.batchedMeshes} BatchedMesh` );
+		console.log( `Single meshes: ${stats.singleMeshes} Mesh` );
+		console.log( `Total draw calls: ${stats.drawCalls}` );
+		console.log( `Reduction Ratio: ${stats.reductionRatio}% fewer draw calls` );
+		console.groupEnd();
+
+	}
+
+	toBatchedMesh() {
+
+		const { batchGroups, singleGroups, uniqueGeometries } = this.analyzeModel();
+		const meshesToRemove = this.createBatchedMeshes( batchGroups );
+
+		this.disposeMeshes( meshesToRemove );
+		this.removeEmptyNodes( this.scene );
+
+		if ( this.debug ) {
+
+			const totalOriginalMeshes = meshesToRemove.size + singleGroups.size;
+			const totalFinalMeshes = batchGroups.size + singleGroups.size;
+
+			const stats = {
+				originalMeshes: totalOriginalMeshes,
+				batchedMeshes: batchGroups.size,
+				singleMeshes: singleGroups.size,
+				drawCalls: totalFinalMeshes,
+				uniqueGeometries: uniqueGeometries,
+				reductionRatio: ( ( 1 - totalFinalMeshes / totalOriginalMeshes ) * 100 ).toFixed( 1 ),
+			};
+
+			this.logDebugInfo( stats );
+
+		}
+
+		return this.scene;
+
+	}
+
+	// Placeholder for future implementation
+	toInstancingMesh() {
+
+		throw new Error( 'InstancedMesh optimization not implemented yet' );
+
+	}
+
+}
+
+export { SceneOptimizer };

package/examples/jsm/utils/SceneUtils.js

@@ -174,8 +174,8 @@ function reduceVertices( object, func, initialValue ) {
 }
 
 /**
- * @param {InstancedMesh}
- * @param {function(int, int):int}
+ * @param {InstancedMesh} mesh
+ * @param {function(int, int):int} compareFn
  */
 function sortInstancedMesh( mesh, compareFn ) {
 

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 };