super-three 0.169.1 → 0.170.1

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/UVsDebug.js

@@ -6,7 +6,7 @@ import {
  * tool for "unwrapping" and debugging three.js geometries UV mapping
  *
  * Sample usage:
- *	document.body.appendChild( UVsDebug( new THREE.SphereGeometry( 10, 10, 10, 10 ) );
+ *	document.body.appendChild( UVsDebug( new THREE.SphereGeometry( 10, 10, 10, 10 ) ) );
  *
  */
 

package/examples/jsm/utils/{TextureUtilsGPU.js → WebGPUTextureUtils.js}

@@ -19,7 +19,8 @@ export async function decompress( blitTexture, maxTextureSize = Infinity, render
 	}
 
 	const material = new NodeMaterial();
-	material.fragmentNode = texture( blitTexture ).uv( uv().flipY() );
+
+	material.fragmentNode = texture( blitTexture, uv().flipY() );
 
 	const width = Math.min( blitTexture.image.width, maxTextureSize );
 	const height = Math.min( blitTexture.image.height, maxTextureSize );

package/examples/jsm/webxr/OculusHandPointerModel.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { BufferGeometry, Float32BufferAttribute, Matrix4, Mesh, MeshBasicMaterial, Object3D, Raycaster, SphereGeometry, Vector3 } from 'three';
 
 const PINCH_MAX = 0.05;
 const PINCH_THRESHOLD = 0.02;
@@ -13,13 +13,13 @@ const POINTER_LENGTH = 0.035;
 const POINTER_SEGMENTS = 16;
 const POINTER_RINGS = 12;
 const POINTER_HEMISPHERE_ANGLE = 110;
-const YAXIS = /* @__PURE__ */ new THREE.Vector3( 0, 1, 0 );
-const ZAXIS = /* @__PURE__ */ new THREE.Vector3( 0, 0, 1 );
+const YAXIS = /* @__PURE__ */ new Vector3( 0, 1, 0 );
+const ZAXIS = /* @__PURE__ */ new Vector3( 0, 0, 1 );
 
 const CURSOR_RADIUS = 0.02;
 const CURSOR_MAX_DISTANCE = 1.5;
 
-class OculusHandPointerModel extends THREE.Object3D {
+class OculusHandPointerModel extends Object3D {
 
 	constructor( hand, controller ) {
 
@@ -96,7 +96,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 		const vertices = this.pointerGeometry.attributes.position.array;
 		// first ring for front face
-		const frontFaceBase = new THREE.Vector3(
+		const frontFaceBase = new Vector3(
 			POINTER_FRONT_RADIUS,
 			0,
 			- 1 * ( POINTER_LENGTH - rearRadius )
@@ -104,7 +104,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		this._drawVerticesRing( vertices, frontFaceBase, 0 );
 
 		// rings for rear hemisphere
-		const rearBase = new THREE.Vector3(
+		const rearBase = new Vector3(
 			Math.sin( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
 			Math.cos( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
 			0
@@ -122,7 +122,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		// front and rear face center vertices
 		const frontCenterIndex = POINTER_SEGMENTS * ( 1 + POINTER_RINGS );
 		const rearCenterIndex = POINTER_SEGMENTS * ( 1 + POINTER_RINGS ) + 1;
-		const frontCenter = new THREE.Vector3(
+		const frontCenter = new Vector3(
 			0,
 			0,
 			- 1 * ( POINTER_LENGTH - rearRadius )
@@ -130,14 +130,14 @@ class OculusHandPointerModel extends THREE.Object3D {
 		vertices[ frontCenterIndex * 3 ] = frontCenter.x;
 		vertices[ frontCenterIndex * 3 + 1 ] = frontCenter.y;
 		vertices[ frontCenterIndex * 3 + 2 ] = frontCenter.z;
-		const rearCenter = new THREE.Vector3( 0, 0, rearRadius );
+		const rearCenter = new Vector3( 0, 0, rearRadius );
 		vertices[ rearCenterIndex * 3 ] = rearCenter.x;
 		vertices[ rearCenterIndex * 3 + 1 ] = rearCenter.y;
 		vertices[ rearCenterIndex * 3 + 2 ] = rearCenter.z;
 
 		this.pointerGeometry.setAttribute(
 			'position',
-			new THREE.Float32BufferAttribute( vertices, 3 )
+			new Float32BufferAttribute( vertices, 3 )
 		);
 		// verticesNeedUpdate = true;
 
@@ -151,11 +151,11 @@ class OculusHandPointerModel extends THREE.Object3D {
 		).fill( 0 );
 		// const vertices = [];
 		const indices = [];
-		this.pointerGeometry = new THREE.BufferGeometry();
+		this.pointerGeometry = new BufferGeometry();
 
 		this.pointerGeometry.setAttribute(
 			'position',
-			new THREE.Float32BufferAttribute( vertices, 3 )
+			new Float32BufferAttribute( vertices, 3 )
 		);
 
 		this._updatePointerVertices( POINTER_REAR_RADIUS );
@@ -213,27 +213,27 @@ class OculusHandPointerModel extends THREE.Object3D {
 			POINTER_SEGMENTS * POINTER_RINGS
 		);
 
-		const material = new THREE.MeshBasicMaterial();
+		const material = new MeshBasicMaterial();
 		material.transparent = true;
 		material.opacity = POINTER_OPACITY_MIN;
 
 		this.pointerGeometry.setIndex( indices );
 
-		this.pointerMesh = new THREE.Mesh( this.pointerGeometry, material );
+		this.pointerMesh = new Mesh( this.pointerGeometry, material );
 
 		this.pointerMesh.position.set( 0, 0, - 1 * POINTER_REAR_RADIUS );
-		this.pointerObject = new THREE.Object3D();
+		this.pointerObject = new Object3D();
 		this.pointerObject.add( this.pointerMesh );
 
-		this.raycaster = new THREE.Raycaster();
+		this.raycaster = new Raycaster();
 
 		// create cursor
-		const cursorGeometry = new THREE.SphereGeometry( CURSOR_RADIUS, 10, 10 );
-		const cursorMaterial = new THREE.MeshBasicMaterial();
+		const cursorGeometry = new SphereGeometry( CURSOR_RADIUS, 10, 10 );
+		const cursorMaterial = new MeshBasicMaterial();
 		cursorMaterial.transparent = true;
 		cursorMaterial.opacity = POINTER_OPACITY_MIN;
 
-		this.cursorObject = new THREE.Mesh( cursorGeometry, cursorMaterial );
+		this.cursorObject = new Mesh( cursorGeometry, cursorMaterial );
 		this.pointerObject.add( this.cursorObject );
 
 		this.add( this.pointerObject );
@@ -245,7 +245,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		if ( this.raycaster ) {
 
 			const pointerMatrix = this.pointerObject.matrixWorld;
-			const tempMatrix = new THREE.Matrix4();
+			const tempMatrix = new Matrix4();
 			tempMatrix.identity().extractRotation( pointerMatrix );
 			this.raycaster.ray.origin.setFromMatrixPosition( pointerMatrix );
 			this.raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
@@ -372,7 +372,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		if ( this.raycaster && ! this.attached ) {
 
 			const intersections = this.raycaster.intersectObjects( objects, recursive );
-			const direction = new THREE.Vector3( 0, 0, - 1 );
+			const direction = new Vector3( 0, 0, - 1 );
 			if ( intersections.length > 0 ) {
 
 				const intersection = intersections[ 0 ];
@@ -391,7 +391,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 	setCursor( distance ) {
 
-		const direction = new THREE.Vector3( 0, 0, - 1 );
+		const direction = new Vector3( 0, 0, - 1 );
 		if ( this.raycaster && ! this.attached ) {
 
 			this.cursorObject.position.copy( direction.multiplyScalar( distance ) );

package/examples/jsm/webxr/Text2D.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Texture } from 'three';
 
 function createText( message, height ) {
 
@@ -17,20 +17,20 @@ function createText( message, height ) {
 	context.fillStyle = '#ffffff';
 	context.fillText( message, textWidth / 2, textHeight / 2 );
 
-	const texture = new THREE.Texture( canvas );
+	const texture = new Texture( canvas );
 	texture.needsUpdate = true;
 
-	const material = new THREE.MeshBasicMaterial( {
+	const material = new MeshBasicMaterial( {
 		color: 0xffffff,
-		side: THREE.DoubleSide,
+		side: DoubleSide,
 		map: texture,
 		transparent: true,
 	} );
-	const geometry = new THREE.PlaneGeometry(
+	const geometry = new PlaneGeometry(
 		( height * textWidth ) / textHeight,
 		height
 	);
-	const plane = new THREE.Mesh( geometry, material );
+	const plane = new Mesh( geometry, material );
 	return plane;
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "super-three",
-  "version": "0.169.1",
+  "version": "0.170.1",
   "description": "JavaScript 3D library",
   "type": "module",
   "main": "./build/three.cjs",
@@ -16,7 +16,7 @@
     "./addons/*": "./examples/jsm/*",
     "./src/*": "./src/*",
     "./webgpu": "./build/three.webgpu.js",
-    "./tsl": "./build/three.webgpu.js"
+    "./tsl": "./build/three.tsl.js"
   },
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
     "eslint-plugin-html": "^8.0.0",
     "eslint-plugin-import": "^2.27.5",
     "failonlyreporter": "^1.0.0",
-    "jimp": "^0.22.7",
+    "jimp": "^1.6.0",
     "magic-string": "^0.30.0",
     "pixelmatch": "^6.0.0",
     "puppeteer": "^22.0.0",
@@ -109,7 +109,7 @@
     "rollup": "^4.6.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "servez": "^2.0.0"
+    "servez": "^2.2.4"
   },
   "overrides": {
     "jpeg-js": "^0.4.4"