@needle-tools/three 0.146.10 → 0.153.0

package/examples/jsm/loaders/KTX2Loader.js

@@ -19,7 +19,7 @@ import {
 	FileLoader,
 	FloatType,
 	HalfFloatType,
-	LinearEncoding,
+	NoColorSpace,
 	LinearFilter,
 	LinearMipmapLinearFilter,
 	Loader,
@@ -35,7 +35,7 @@ import {
 	RGBA_S3TC_DXT5_Format,
 	RGBAFormat,
 	RGFormat,
-	sRGBEncoding,
+	SRGBColorSpace,
 	UnsignedByteType,
 } from 'three';
 import { WorkerPool } from '../utils/WorkerPool.js';
@@ -112,21 +112,35 @@ class KTX2Loader extends Loader {
 
 	detectSupport( renderer ) {
 
-		this.workerConfig = {
-			astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
-			etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
-			etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
-			dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
-			bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
-			pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
-				|| renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
-		};
+		if ( renderer.isWebGPURenderer === true ) {
 
+			this.workerConfig = {
+				astcSupported: renderer.hasFeature( 'texture-compression-astc' ),
+				etc1Supported: false,
+				etc2Supported: renderer.hasFeature( 'texture-compression-etc2' ),
+				dxtSupported: renderer.hasFeature( 'texture-compression-bc' ),
+				bptcSupported: false,
+				pvrtcSupported: false
+			};
 
-		if ( renderer.capabilities.isWebGL2 ) {
+		} else {
 
-			// https://github.com/mrdoob/three.js/pull/22928
-			this.workerConfig.etc1Supported = false;
+			this.workerConfig = {
+				astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
+				etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
+				etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
+				dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
+				bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
+				pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
+					|| renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
+			};
+
+			if ( renderer.capabilities.isWebGL2 ) {
+
+				// https://github.com/mrdoob/three.js/pull/22928
+				this.workerConfig.etc1Supported = false;
+
+			}
 
 		}
 
@@ -239,21 +253,36 @@ class KTX2Loader extends Loader {
 
 	_createTextureFrom( transcodeResult, container ) {
 
-		const { mipmaps, width, height, format, type, error, dfdTransferFn, dfdFlags } = transcodeResult;
+		const { faces, width, height, format, type, error, dfdTransferFn, dfdFlags } = transcodeResult;
 
 		if ( type === 'error' ) return Promise.reject( error );
 
-		const texture = container.layerCount > 1
-			? new CompressedArrayTexture( mipmaps, width, height, container.layerCount, format, UnsignedByteType )
-			: new CompressedTexture( mipmaps, width, height, format, UnsignedByteType );
+		let texture;
+
+		if ( container.faceCount === 6 ) {
+
+			texture = new CompressedTexture();
+			texture.image = faces;
+			texture.format = format;
+			texture.type = UnsignedByteType;
 
+		} else {
 
-		texture.minFilter = mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
+			const mipmaps = faces[ 0 ].mipmaps;
+
+			texture = container.layerCount > 1
+				? new CompressedArrayTexture( mipmaps, width, height, container.layerCount, format, UnsignedByteType )
+				: new CompressedTexture( mipmaps, width, height, format, UnsignedByteType );
+
+		}
+
+		texture.minFilter = faces[ 0 ].mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
 		texture.magFilter = LinearFilter;
 		texture.generateMipmaps = false;
 
 		texture.needsUpdate = true;
-		texture.encoding = dfdTransferFn === KHR_DF_TRANSFER_SRGB ? sRGBEncoding : LinearEncoding;
+		// TODO: Detect NoColorSpace vs. LinearSRGBColorSpace based on primaries.
+		texture.colorSpace = dfdTransferFn === KHR_DF_TRANSFER_SRGB ? SRGBColorSpace : NoColorSpace;
 		texture.premultiplyAlpha = !! ( dfdFlags & KHR_DF_FLAG_ALPHA_PREMULTIPLIED );
 
 		return texture;
@@ -271,7 +300,31 @@ class KTX2Loader extends Loader {
 
 		if ( container.vkFormat !== VK_FORMAT_UNDEFINED ) {
 
-			return createDataTexture( container );
+			const mipmaps = [];
+			const pendings = [];
+
+			for ( let levelIndex = 0; levelIndex < container.levels.length; levelIndex ++ ) {
+
+				pendings.push( createDataTexture( container, levelIndex ).then( function ( dataTexture ) {
+
+					mipmaps[ levelIndex ] = dataTexture;
+
+				} ) );
+
+			}
+
+			await Promise.all( pendings );
+
+			const texture = mipmaps[ 0 ];
+			texture.mipmaps = mipmaps.map( dt => {
+				return {
+					data: dt.source.data,
+					width: dt.source.data.width,
+					height: dt.source.data.height,
+					depth: dt.source.data.depth
+				};
+			} );
+			return texture;
 
 		}
 
@@ -373,17 +426,9 @@ KTX2Loader.BasisWorker = function () {
 
 					try {
 
-						const { width, height, hasAlpha, mipmaps, format, dfdTransferFn, dfdFlags } = transcode( message.buffer );
-
-						const buffers = [];
-
-						for ( let i = 0; i < mipmaps.length; ++ i ) {
+						const { faces, buffers, width, height, hasAlpha, format, dfdTransferFn, dfdFlags } = transcode( message.buffer );
 
-							buffers.push( mipmaps[ i ].data.buffer );
-
-						}
-
-						self.postMessage( { type: 'transcode', id: message.id, width, height, hasAlpha, mipmaps, format, dfdTransferFn, dfdFlags }, buffers );
+						self.postMessage( { type: 'transcode', id: message.id, faces, width, height, hasAlpha, format, dfdTransferFn, dfdFlags }, buffers );
 
 					} catch ( error ) {
 
@@ -442,15 +487,16 @@ KTX2Loader.BasisWorker = function () {
 		const basisFormat = ktx2File.isUASTC() ? BasisFormat.UASTC_4x4 : BasisFormat.ETC1S;
 		const width = ktx2File.getWidth();
 		const height = ktx2File.getHeight();
-		const layers = ktx2File.getLayers() || 1;
-		const levels = ktx2File.getLevels();
+		const layerCount = ktx2File.getLayers() || 1;
+		const levelCount = ktx2File.getLevels();
+		const faceCount = ktx2File.getFaces();
 		const hasAlpha = ktx2File.getHasAlpha();
 		const dfdTransferFn = ktx2File.getDFDTransferFunc();
 		const dfdFlags = ktx2File.getDFDFlags();
 
 		const { transcoderFormat, engineFormat } = getTranscoderFormat( basisFormat, width, height, hasAlpha );
 
-		if ( ! width || ! height || ! levels ) {
+		if ( ! width || ! height || ! levelCount ) {
 
 			cleanup();
 			throw new Error( 'THREE.KTX2Loader:	Invalid texture' );
@@ -464,49 +510,72 @@ KTX2Loader.BasisWorker = function () {
 
 		}
 
-		const mipmaps = [];
+		const faces = [];
+		const buffers = [];
 
-		for ( let mip = 0; mip < levels; mip ++ ) {
+		for ( let face = 0; face < faceCount; face ++ ) {
 
-			const layerMips = [];
+			const mipmaps = [];
 
-			let mipWidth, mipHeight;
+			for ( let mip = 0; mip < levelCount; mip ++ ) {
 
-			for ( let layer = 0; layer < layers; layer ++ ) {
+				const layerMips = [];
 
-				const levelInfo = ktx2File.getImageLevelInfo( mip, layer, 0 );
-				mipWidth = levelInfo.origWidth;
-				mipHeight = levelInfo.origHeight;
-				const dst = new Uint8Array( ktx2File.getImageTranscodedSizeInBytes( mip, layer, 0, transcoderFormat ) );
-				const status = ktx2File.transcodeImage(
-					dst,
-					mip,
-					layer,
-					0,
-					transcoderFormat,
-					0,
-					- 1,
-					- 1,
-				);
+				let mipWidth, mipHeight;
+
+				for ( let layer = 0; layer < layerCount; layer ++ ) {
+
+					const levelInfo = ktx2File.getImageLevelInfo( mip, layer, face );
+
+					if ( face === 0 && mip === 0 && layer === 0 && ( levelInfo.origWidth % 4 !== 0 || levelInfo.origHeight % 4 !== 0 ) ) {
+
+						console.warn( 'THREE.KTX2Loader: ETC1S and UASTC textures should use multiple-of-four dimensions.' );
+
+					}
+
+					if ( levelCount > 1 ) {
+
+						mipWidth = levelInfo.origWidth;
+						mipHeight = levelInfo.origHeight;
 
-				if ( ! status ) {
+					} else {
 
-					cleanup();
-					throw new Error( 'THREE.KTX2Loader: .transcodeImage failed.' );
+						// Handles non-multiple-of-four dimensions in textures without mipmaps. Textures with
+						// mipmaps must use multiple-of-four dimensions, for some texture formats and APIs.
+						// See mrdoob/three.js#25908.
+						mipWidth = levelInfo.width;
+						mipHeight = levelInfo.height;
+
+					}
+
+					const dst = new Uint8Array( ktx2File.getImageTranscodedSizeInBytes( mip, layer, 0, transcoderFormat ) );
+					const status = ktx2File.transcodeImage( dst, mip, layer, face, transcoderFormat, 0, - 1, - 1 );
+
+					if ( ! status ) {
+
+						cleanup();
+						throw new Error( 'THREE.KTX2Loader: .transcodeImage failed.' );
+
+					}
+
+					layerMips.push( dst );
 
 				}
 
-				layerMips.push( dst );
+				const mipData = concat( layerMips );
+
+				mipmaps.push( { data: mipData, width: mipWidth, height: mipHeight } );
+				buffers.push( mipData.buffer );
 
 			}
 
-			mipmaps.push( { data: concat( layerMips ), width: mipWidth, height: mipHeight } );
+			faces.push( { mipmaps, width, height, format: engineFormat } );
 
 		}
 
 		cleanup();
 
-		return { width, height, hasAlpha, mipmaps, format: engineFormat, dfdTransferFn, dfdFlags };
+		return { faces, buffers, width, height, hasAlpha, format: engineFormat, dfdTransferFn, dfdFlags };
 
 	}
 
@@ -630,10 +699,13 @@ KTX2Loader.BasisWorker = function () {
 	/** Concatenates N byte arrays. */
 	function concat( arrays ) {
 
+		if ( arrays.length === 1 ) return arrays[ 0 ];
+
 		let totalByteLength = 0;
 
-		for ( const array of arrays ) {
+		for ( let i = 0; i < arrays.length; i ++ ) {
 
+			const array = arrays[ i ];
 			totalByteLength += array.byteLength;
 
 		}
@@ -642,8 +714,9 @@ KTX2Loader.BasisWorker = function () {
 
 		let byteOffset = 0;
 
-		for ( const array of arrays ) {
+		for ( let i = 0; i < arrays.length; i ++ ) {
 
+			const array = arrays[ i ];
 			result.set( array, byteOffset );
 
 			byteOffset += array.byteLength;
@@ -697,17 +770,20 @@ const TYPE_MAP = {
 
 };
 
-const ENCODING_MAP = {
+const COLOR_SPACE_MAP = {
 
-	[ VK_FORMAT_R8G8B8A8_SRGB ]: sRGBEncoding,
-	[ VK_FORMAT_R8G8_SRGB ]: sRGBEncoding,
-	[ VK_FORMAT_R8_SRGB ]: sRGBEncoding,
+	[ VK_FORMAT_R8G8B8A8_SRGB ]: SRGBColorSpace,
+	[ VK_FORMAT_R8G8_SRGB ]: SRGBColorSpace,
+	[ VK_FORMAT_R8_SRGB ]: SRGBColorSpace,
 
 };
 
-async function createDataTexture( container ) {
+async function createDataTexture( container, levelIndex = 0 ) {
 
-	const { vkFormat, pixelWidth, pixelHeight, pixelDepth } = container;
+	const { vkFormat } = container;
+	const pixelWidth = Math.max( 1, container.pixelWidth >> levelIndex );
+	const pixelHeight = Math.max( 1, container.pixelHeight >> levelIndex );
+	const pixelDepth = Math.max( 1, container.pixelDepth >> levelIndex );
 
 	if ( FORMAT_MAP[ vkFormat ] === undefined ) {
 
@@ -715,7 +791,7 @@ async function createDataTexture( container ) {
 
 	}
 
-	const level = container.levels[ 0 ];
+	const level = container.levels[ levelIndex ];
 
 	let levelData;
 	let view;
@@ -779,7 +855,7 @@ async function createDataTexture( container ) {
 
 	texture.type = TYPE_MAP[ vkFormat ];
 	texture.format = FORMAT_MAP[ vkFormat ];
-	texture.encoding = ENCODING_MAP[ vkFormat ] || LinearEncoding;
+	texture.colorSpace = COLOR_SPACE_MAP[ vkFormat ] || NoColorSpace;
 
 	texture.needsUpdate = true;
 

package/examples/jsm/loaders/LDrawLoader.js

@@ -11,6 +11,7 @@ import {
 	Mesh,
 	MeshStandardMaterial,
 	ShaderMaterial,
+	SRGBColorSpace,
 	UniformsLib,
 	UniformsUtils,
 	Vector3,
@@ -39,6 +40,8 @@ const FILE_LOCATION_NOT_FOUND = 6;
 const MAIN_COLOUR_CODE = '16';
 const MAIN_EDGE_COLOUR_CODE = '24';
 
+const COLOR_SPACE_LDRAW = SRGBColorSpace;
+
 const _tempVec0 = new Vector3();
 const _tempVec1 = new Vector3();
 
@@ -2162,8 +2165,8 @@ class LDrawLoader extends Loader {
 		let code = null;
 
 		// Triangle and line colors
-		let color = 0xFF00FF;
-		let edgeColor = 0xFF00FF;
+		let fillColor = '#FF00FF';
+		let edgeColor = '#FF00FF';
 
 		// Transparency
 		let alpha = 1;
@@ -2205,12 +2208,12 @@ class LDrawLoader extends Loader {
 
 					case 'VALUE':
 
-						color = lineParser.getToken();
-						if ( color.startsWith( '0x' ) ) {
+						fillColor = lineParser.getToken();
+						if ( fillColor.startsWith( '0x' ) ) {
 
-							color = '#' + color.substring( 2 );
+							fillColor = '#' + fillColor.substring( 2 );
 
-						} else if ( ! color.startsWith( '#' ) ) {
+						} else if ( ! fillColor.startsWith( '#' ) ) {
 
 							throw new Error( 'LDrawLoader: Invalid color while parsing material' + lineParser.getLineNumberString() + '.' );
 
@@ -2312,37 +2315,37 @@ class LDrawLoader extends Loader {
 
 			case FINISH_TYPE_DEFAULT:
 
-				material = new MeshStandardMaterial( { color: color, roughness: 0.3, metalness: 0 } );
+				material = new MeshStandardMaterial( { roughness: 0.3, metalness: 0 } );
 				break;
 
 			case FINISH_TYPE_PEARLESCENT:
 
 				// Try to imitate pearlescency by making the surface glossy
-				material = new MeshStandardMaterial( { color: color, roughness: 0.3, metalness: 0.25 } );
+				material = new MeshStandardMaterial( { roughness: 0.3, metalness: 0.25 } );
 				break;
 
 			case FINISH_TYPE_CHROME:
 
 				// Mirror finish surface
-				material = new MeshStandardMaterial( { color: color, roughness: 0, metalness: 1 } );
+				material = new MeshStandardMaterial( { roughness: 0, metalness: 1 } );
 				break;
 
 			case FINISH_TYPE_RUBBER:
 
 				// Rubber finish
-				material = new MeshStandardMaterial( { color: color, roughness: 0.9, metalness: 0 } );
+				material = new MeshStandardMaterial( { roughness: 0.9, metalness: 0 } );
 				break;
 
 			case FINISH_TYPE_MATTE_METALLIC:
 
 				// Brushed metal finish
-				material = new MeshStandardMaterial( { color: color, roughness: 0.8, metalness: 0.4 } );
+				material = new MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
 				break;
 
 			case FINISH_TYPE_METAL:
 
 				// Average metal finish
-				material = new MeshStandardMaterial( { color: color, roughness: 0.2, metalness: 0.85 } );
+				material = new MeshStandardMaterial( { roughness: 0.2, metalness: 0.85 } );
 				break;
 
 			default:
@@ -2351,18 +2354,18 @@ class LDrawLoader extends Loader {
 
 		}
 
+		material.color.setStyle( fillColor, COLOR_SPACE_LDRAW );
 		material.transparent = isTransparent;
 		material.premultipliedAlpha = true;
 		material.opacity = alpha;
 		material.depthWrite = ! isTransparent;
-		material.color.convertSRGBToLinear();
 
 		material.polygonOffset = true;
 		material.polygonOffsetFactor = 1;
 
 		if ( luminance !== 0 ) {
 
-			material.emissive.set( material.color ).multiplyScalar( luminance );
+			material.emissive.setStyle( fillColor, COLOR_SPACE_LDRAW ).multiplyScalar( luminance );
 
 		}
 
@@ -2370,14 +2373,14 @@ class LDrawLoader extends Loader {
 
 			// This is the material used for edges
 			edgeMaterial = new LineBasicMaterial( {
-				color: edgeColor,
+				color: new Color().setStyle( edgeColor, COLOR_SPACE_LDRAW ),
 				transparent: isTransparent,
 				opacity: alpha,
 				depthWrite: ! isTransparent
 			} );
+			edgeMaterial.color;
 			edgeMaterial.userData.code = code;
 			edgeMaterial.name = name + ' - Edge';
-			edgeMaterial.color.convertSRGBToLinear();
 
 			// This is the material used for conditional edges
 			edgeMaterial.userData.conditionalEdgeMaterial = new LDrawConditionalLineMaterial( {
@@ -2385,11 +2388,10 @@ class LDrawLoader extends Loader {
 				fog: true,
 				transparent: isTransparent,
 				depthWrite: ! isTransparent,
-				color: edgeColor,
+				color: new Color().setStyle( edgeColor, COLOR_SPACE_LDRAW ),
 				opacity: alpha,
 
 			} );
-			edgeMaterial.userData.conditionalEdgeMaterial.color.convertSRGBToLinear();
 			edgeMaterial.userData.conditionalEdgeMaterial.userData.code = code;
 			edgeMaterial.userData.conditionalEdgeMaterial.name = name + ' - Conditional Edge';
 

package/examples/jsm/loaders/LWOLoader.js

@@ -14,7 +14,6 @@
 import {
 	AddOperation,
 	BackSide,
-	BufferAttribute,
 	BufferGeometry,
 	ClampToEdgeWrapping,
 	Color,
@@ -35,6 +34,7 @@ import {
 	Points,
 	PointsMaterial,
 	RepeatWrapping,
+	SRGBColorSpace,
 	TextureLoader,
 	Vector2
 } from 'three';
@@ -170,8 +170,6 @@ class LWOTreeParser {
 
 		const materials = this.getMaterials( geometry.userData.matNames, layer.geometry.type );
 
-		this.duplicateUVs( geometry, materials );
-
 		if ( layer.geometry.type === 'points' ) mesh = new Points( geometry, materials );
 		else if ( layer.geometry.type === 'lines' ) mesh = new LineSegments( geometry, materials );
 		else mesh = new Mesh( geometry, materials );
@@ -269,31 +267,6 @@ class LWOTreeParser {
 
 	}
 
-	// If the material has an aoMap, duplicate UVs
-	duplicateUVs( geometry, materials ) {
-
-		let duplicateUVs = false;
-
-		if ( ! Array.isArray( materials ) ) {
-
-			if ( materials.aoMap ) duplicateUVs = true;
-
-		} else {
-
-			materials.forEach( function ( material ) {
-
-				if ( material.aoMap ) duplicateUVs = true;
-
-			} );
-
-		}
-
-		if ( ! duplicateUVs ) return;
-
-		geometry.setAttribute( 'uv2', new BufferAttribute( geometry.attributes.uv.array, 2 ) );
-
-	}
-
 }
 
 class MaterialParser {
@@ -464,6 +437,7 @@ class MaterialParser {
 
 				case 'Color':
 					maps.map = texture;
+					maps.map.colorSpace = SRGBColorSpace;
 					break;
 				case 'Roughness':
 					maps.roughnessMap = texture;
@@ -471,10 +445,12 @@ class MaterialParser {
 					break;
 				case 'Specular':
 					maps.specularMap = texture;
+					maps.specularMap.colorSpace = SRGBColorSpace;
 					maps.specular = 0xffffff;
 					break;
 				case 'Luminous':
 					maps.emissiveMap = texture;
+					maps.emissiveMap.colorSpace = SRGBColorSpace;
 					maps.emissive = 0x808080;
 					break;
 				case 'Luminous Color':
@@ -532,6 +508,7 @@ class MaterialParser {
 
 					case 'Color':
 						maps.map = texture;
+						maps.map.colorSpace = SRGBColorSpace;
 						break;
 					case 'Diffuse':
 						maps.aoMap = texture;
@@ -542,10 +519,12 @@ class MaterialParser {
 						break;
 					case 'Specular':
 						maps.specularMap = texture;
+						maps.specularMap.colorSpace = SRGBColorSpace;
 						maps.specular = 0xffffff;
 						break;
 					case 'Luminosity':
 						maps.emissiveMap = texture;
+						maps.emissiveMap.colorSpace = SRGBColorSpace;
 						maps.emissive = 0x808080;
 						break;
 					case 'Metallic':
@@ -581,7 +560,11 @@ class MaterialParser {
 
 			params.color = new Color().fromArray( attributes.Color.value );
 
-		} else params.color = new Color();
+		} else {
+
+			params.color = new Color();
+
+		}
 
 
 		if ( attributes.Transparency && attributes.Transparency.value !== 0 ) {

package/examples/jsm/loaders/LottieLoader.js

@@ -2,7 +2,8 @@ import {
 	FileLoader,
 	Loader,
 	CanvasTexture,
-	NearestFilter
+	NearestFilter,
+	SRGBColorSpace
 } from 'three';
 
 import lottie from '../libs/lottie_canvas.module.js';
@@ -21,6 +22,7 @@ class LottieLoader extends Loader {
 
 		const texture = new CanvasTexture();
 		texture.minFilter = NearestFilter;
+		texture.colorSpace = SRGBColorSpace;
 
 		const loader = new FileLoader( this.manager );
 		loader.setPath( this.path );