super-three 0.170.0 → 0.171.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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "super-three",
-  "version": "0.170.0",
+  "version": "0.171.0",
   "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",

package/src/Three.Core.js

@@ -0,0 +1,178 @@
+import { REVISION } from './constants.js';
+
+export { WebGLArrayRenderTarget } from './renderers/WebGLArrayRenderTarget.js';
+export { WebGL3DRenderTarget } from './renderers/WebGL3DRenderTarget.js';
+export { WebGLCubeRenderTarget } from './renderers/WebGLCubeRenderTarget.js';
+export { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
+export { FogExp2 } from './scenes/FogExp2.js';
+export { Fog } from './scenes/Fog.js';
+export { Scene } from './scenes/Scene.js';
+export { Sprite } from './objects/Sprite.js';
+export { LOD } from './objects/LOD.js';
+export { SkinnedMesh } from './objects/SkinnedMesh.js';
+export { Skeleton } from './objects/Skeleton.js';
+export { Bone } from './objects/Bone.js';
+export { Mesh } from './objects/Mesh.js';
+export { InstancedMesh } from './objects/InstancedMesh.js';
+export { BatchedMesh } from './objects/BatchedMesh.js';
+export { LineSegments } from './objects/LineSegments.js';
+export { LineLoop } from './objects/LineLoop.js';
+export { Line } from './objects/Line.js';
+export { Points } from './objects/Points.js';
+export { Group } from './objects/Group.js';
+export { VideoTexture } from './textures/VideoTexture.js';
+export { FramebufferTexture } from './textures/FramebufferTexture.js';
+export { Source } from './textures/Source.js';
+export { DataTexture } from './textures/DataTexture.js';
+export { DataArrayTexture } from './textures/DataArrayTexture.js';
+export { Data3DTexture } from './textures/Data3DTexture.js';
+export { CompressedTexture } from './textures/CompressedTexture.js';
+export { CompressedArrayTexture } from './textures/CompressedArrayTexture.js';
+export { CompressedCubeTexture } from './textures/CompressedCubeTexture.js';
+export { CubeTexture } from './textures/CubeTexture.js';
+export { CanvasTexture } from './textures/CanvasTexture.js';
+export { DepthTexture } from './textures/DepthTexture.js';
+export { Texture } from './textures/Texture.js';
+export * from './geometries/Geometries.js';
+export * from './materials/Materials.js';
+export { AnimationLoader } from './loaders/AnimationLoader.js';
+export { CompressedTextureLoader } from './loaders/CompressedTextureLoader.js';
+export { CubeTextureLoader } from './loaders/CubeTextureLoader.js';
+export { DataTextureLoader } from './loaders/DataTextureLoader.js';
+export { TextureLoader } from './loaders/TextureLoader.js';
+export { ObjectLoader } from './loaders/ObjectLoader.js';
+export { MaterialLoader } from './loaders/MaterialLoader.js';
+export { BufferGeometryLoader } from './loaders/BufferGeometryLoader.js';
+export { DefaultLoadingManager, LoadingManager } from './loaders/LoadingManager.js';
+export { ImageLoader } from './loaders/ImageLoader.js';
+export { ImageBitmapLoader } from './loaders/ImageBitmapLoader.js';
+export { FileLoader } from './loaders/FileLoader.js';
+export { Loader } from './loaders/Loader.js';
+export { LoaderUtils } from './loaders/LoaderUtils.js';
+export { Cache } from './loaders/Cache.js';
+export { AudioLoader } from './loaders/AudioLoader.js';
+export { SpotLight } from './lights/SpotLight.js';
+export { PointLight } from './lights/PointLight.js';
+export { RectAreaLight } from './lights/RectAreaLight.js';
+export { HemisphereLight } from './lights/HemisphereLight.js';
+export { DirectionalLight } from './lights/DirectionalLight.js';
+export { AmbientLight } from './lights/AmbientLight.js';
+export { Light } from './lights/Light.js';
+export { LightProbe } from './lights/LightProbe.js';
+export { StereoCamera } from './cameras/StereoCamera.js';
+export { PerspectiveCamera } from './cameras/PerspectiveCamera.js';
+export { OrthographicCamera } from './cameras/OrthographicCamera.js';
+export { CubeCamera } from './cameras/CubeCamera.js';
+export { ArrayCamera } from './cameras/ArrayCamera.js';
+export { Camera } from './cameras/Camera.js';
+export { AudioListener } from './audio/AudioListener.js';
+export { PositionalAudio } from './audio/PositionalAudio.js';
+export { AudioContext } from './audio/AudioContext.js';
+export { AudioAnalyser } from './audio/AudioAnalyser.js';
+export { Audio } from './audio/Audio.js';
+export { VectorKeyframeTrack } from './animation/tracks/VectorKeyframeTrack.js';
+export { StringKeyframeTrack } from './animation/tracks/StringKeyframeTrack.js';
+export { QuaternionKeyframeTrack } from './animation/tracks/QuaternionKeyframeTrack.js';
+export { NumberKeyframeTrack } from './animation/tracks/NumberKeyframeTrack.js';
+export { ColorKeyframeTrack } from './animation/tracks/ColorKeyframeTrack.js';
+export { BooleanKeyframeTrack } from './animation/tracks/BooleanKeyframeTrack.js';
+export { PropertyMixer } from './animation/PropertyMixer.js';
+export { PropertyBinding } from './animation/PropertyBinding.js';
+export { KeyframeTrack } from './animation/KeyframeTrack.js';
+export { AnimationUtils } from './animation/AnimationUtils.js';
+export { AnimationObjectGroup } from './animation/AnimationObjectGroup.js';
+export { AnimationMixer } from './animation/AnimationMixer.js';
+export { AnimationClip } from './animation/AnimationClip.js';
+export { AnimationAction } from './animation/AnimationAction.js';
+export { RenderTarget } from './core/RenderTarget.js';
+export { Uniform } from './core/Uniform.js';
+export { UniformsGroup } from './core/UniformsGroup.js';
+export { InstancedBufferGeometry } from './core/InstancedBufferGeometry.js';
+export { BufferGeometry } from './core/BufferGeometry.js';
+export { InterleavedBufferAttribute } from './core/InterleavedBufferAttribute.js';
+export { InstancedInterleavedBuffer } from './core/InstancedInterleavedBuffer.js';
+export { InterleavedBuffer } from './core/InterleavedBuffer.js';
+export { InstancedBufferAttribute } from './core/InstancedBufferAttribute.js';
+export { GLBufferAttribute } from './core/GLBufferAttribute.js';
+export * from './core/BufferAttribute.js';
+export { Object3D } from './core/Object3D.js';
+export { Raycaster } from './core/Raycaster.js';
+export { Layers } from './core/Layers.js';
+export { EventDispatcher } from './core/EventDispatcher.js';
+export { Clock } from './core/Clock.js';
+export { QuaternionLinearInterpolant } from './math/interpolants/QuaternionLinearInterpolant.js';
+export { LinearInterpolant } from './math/interpolants/LinearInterpolant.js';
+export { DiscreteInterpolant } from './math/interpolants/DiscreteInterpolant.js';
+export { CubicInterpolant } from './math/interpolants/CubicInterpolant.js';
+export { Interpolant } from './math/Interpolant.js';
+export { Triangle } from './math/Triangle.js';
+export { MathUtils } from './math/MathUtils.js';
+export { Spherical } from './math/Spherical.js';
+export { Cylindrical } from './math/Cylindrical.js';
+export { Plane } from './math/Plane.js';
+export { Frustum } from './math/Frustum.js';
+export { Sphere } from './math/Sphere.js';
+export { Ray } from './math/Ray.js';
+export { Matrix4 } from './math/Matrix4.js';
+export { Matrix3 } from './math/Matrix3.js';
+export { Matrix2 } from './math/Matrix2.js';
+export { Box3 } from './math/Box3.js';
+export { Box2 } from './math/Box2.js';
+export { Line3 } from './math/Line3.js';
+export { Euler } from './math/Euler.js';
+export { Vector4 } from './math/Vector4.js';
+export { Vector3 } from './math/Vector3.js';
+export { Vector2 } from './math/Vector2.js';
+export { Quaternion } from './math/Quaternion.js';
+export { Color } from './math/Color.js';
+export { ColorManagement } from './math/ColorManagement.js';
+export { SphericalHarmonics3 } from './math/SphericalHarmonics3.js';
+export { SpotLightHelper } from './helpers/SpotLightHelper.js';
+export { SkeletonHelper } from './helpers/SkeletonHelper.js';
+export { PointLightHelper } from './helpers/PointLightHelper.js';
+export { HemisphereLightHelper } from './helpers/HemisphereLightHelper.js';
+export { GridHelper } from './helpers/GridHelper.js';
+export { PolarGridHelper } from './helpers/PolarGridHelper.js';
+export { DirectionalLightHelper } from './helpers/DirectionalLightHelper.js';
+export { CameraHelper } from './helpers/CameraHelper.js';
+export { BoxHelper } from './helpers/BoxHelper.js';
+export { Box3Helper } from './helpers/Box3Helper.js';
+export { PlaneHelper } from './helpers/PlaneHelper.js';
+export { ArrowHelper } from './helpers/ArrowHelper.js';
+export { AxesHelper } from './helpers/AxesHelper.js';
+export * from './extras/curves/Curves.js';
+export { Shape } from './extras/core/Shape.js';
+export { Path } from './extras/core/Path.js';
+export { ShapePath } from './extras/core/ShapePath.js';
+export { CurvePath } from './extras/core/CurvePath.js';
+export { Curve } from './extras/core/Curve.js';
+export { Controls } from './extras/Controls.js';
+export { DataUtils } from './extras/DataUtils.js';
+export { ImageUtils } from './extras/ImageUtils.js';
+export { ShapeUtils } from './extras/ShapeUtils.js';
+export { TextureUtils } from './extras/TextureUtils.js';
+export { createCanvasElement } from './utils.js';
+export * from './constants.js';
+export * from './Three.Legacy.js';
+
+if ( typeof __THREE_DEVTOOLS__ !== 'undefined' ) {
+
+	__THREE_DEVTOOLS__.dispatchEvent( new CustomEvent( 'register', { detail: {
+		revision: REVISION,
+	} } ) );
+
+}
+
+if ( typeof window !== 'undefined' ) {
+
+	if ( window.__THREE__ ) {
+
+		console.warn( 'WARNING: Multiple instances of Three.js being imported.' );
+
+	} else {
+
+		window.__THREE__ = REVISION;
+
+	}
+
+}