super-three 0.137.0 → 0.141.0

package/examples/jsm/exporters/GLTFExporter.js

@@ -17,7 +17,7 @@ import {
 	RGBAFormat,
 	RepeatWrapping,
 	Scene,
-	Texture,
+	Source,
 	Vector3
 } from 'three';
 
@@ -64,6 +64,12 @@ class GLTFExporter {
 
 		} );
 
+		this.register( function ( writer ) {
+
+			return new GLTFMaterialsIridescenceExtension( writer );
+
+		} );
+
 	}
 
 	register( callback ) {
@@ -225,24 +231,7 @@ function equalArray( array1, array2 ) {
  */
 function stringToArrayBuffer( text ) {
 
-	if ( window.TextEncoder !== undefined ) {
-
-		return new TextEncoder().encode( text ).buffer;
-
-	}
-
-	const array = new Uint8Array( new ArrayBuffer( text.length ) );
-
-	for ( let i = 0, il = text.length; i < il; i ++ ) {
-
-		const value = text.charCodeAt( i );
-
-		// Replacing multi-byte character with space(0x20).
-		array[ i ] = value > 0xFF ? 0x20 : value;
-
-	}
-
-	return array.buffer;
+	return new TextEncoder().encode( text ).buffer;
 
 }
 
@@ -356,6 +345,59 @@ function getPaddedArrayBuffer( arrayBuffer, paddingByte = 0 ) {
 
 let cachedCanvas = null;
 
+function getCanvas() {
+
+	if ( cachedCanvas ) {
+
+		return cachedCanvas;
+
+	}
+
+	if ( typeof document === 'undefined' && typeof OffscreenCanvas !== 'undefined' ) {
+
+		cachedCanvas = new OffscreenCanvas( 1, 1 );
+
+	} else {
+
+		cachedCanvas = document.createElement( 'canvas' );
+
+	}
+
+	return cachedCanvas;
+
+}
+
+function getToBlobPromise( canvas, mimeType ) {
+
+	if ( canvas.toBlob !== undefined ) {
+
+		return new Promise( ( resolve ) => canvas.toBlob( resolve, mimeType ) );
+
+	}
+
+	let quality;
+
+	// Blink's implementation of convertToBlob seems to default to a quality level of 100%
+	// Use the Blink default quality levels of toBlob instead so that file sizes are comparable.
+	if ( mimeType === 'image/jpeg' ) {
+
+		quality = 0.92;
+
+	} else if ( mimeType === 'image/webp' ) {
+
+		quality = 0.8;
+
+	}
+
+	return canvas.convertToBlob( {
+
+		type: mimeType,
+		quality: quality
+
+	} );
+
+}
+
 /**
  * Writer
  */
@@ -416,7 +458,6 @@ class GLTFWriter {
 			trs: false,
 			onlyVisible: true,
 			truncateDrawRange: true,
-			embedImages: true,
 			maxTextureSize: Infinity,
 			animations: [],
 			includeCustomExtensions: false
@@ -454,7 +495,7 @@ class GLTFWriter {
 
 			// https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#glb-file-format-specification
 
-			const reader = new window.FileReader();
+			const reader = new FileReader();
 			reader.readAsArrayBuffer( blob );
 			reader.onloadend = function () {
 
@@ -488,7 +529,7 @@ class GLTFWriter {
 					binaryChunk
 				], { type: 'application/octet-stream' } );
 
-				const glbReader = new window.FileReader();
+				const glbReader = new FileReader();
 				glbReader.readAsArrayBuffer( glbBlob );
 				glbReader.onloadend = function () {
 
@@ -502,7 +543,7 @@ class GLTFWriter {
 
 			if ( json.buffers && json.buffers.length > 0 ) {
 
-				const reader = new window.FileReader();
+				const reader = new FileReader();
 				reader.readAsDataURL( blob );
 				reader.onloadend = function () {
 
@@ -567,16 +608,26 @@ class GLTFWriter {
 	}
 
 	/**
-	 * Assign and return a temporal unique id for an object
-	 * especially which doesn't have .uuid
+	 * Returns ids for buffer attributes.
 	 * @param  {Object} object
 	 * @return {Integer}
 	 */
-	getUID( object ) {
+	getUID( attribute, isRelativeCopy = false ) {
+
+		if ( this.uids.has( attribute ) === false ) {
+
+			const uids = new Map();
 
-		if ( ! this.uids.has( object ) ) this.uids.set( object, this.uid ++ );
+			uids.set( true, this.uid ++ );
+			uids.set( false, this.uid ++ );
 
-		return this.uids.get( object );
+			this.uids.set( attribute, uids );
+
+		}
+
+		const uids = this.uids.get( attribute );
+
+		return uids.get( isRelativeCopy );
 
 	}
 
@@ -689,76 +740,67 @@ class GLTFWriter {
 
 	}
 
-	buildORMTexture( material ) {
+	buildMetalRoughTexture( metalnessMap, roughnessMap ) {
 
-		const occlusion = material.aoMap?.image;
-		const roughness = material.roughnessMap?.image;
-		const metalness = material.metalnessMap?.image;
+		if ( metalnessMap === roughnessMap ) return metalnessMap;
 
-		if ( occlusion === roughness && roughness === metalness ) return occlusion;
+		console.warn( 'THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.' );
 
-		if ( occlusion || roughness || metalness ) {
+		const metalness = metalnessMap?.image;
+		const roughness = roughnessMap?.image;
 
-			const width = Math.max( occlusion?.width || 0, roughness?.width || 0, metalness?.width || 0 );
-			const height = Math.max( occlusion?.height || 0, roughness?.height || 0, metalness?.height || 0 );
+		const width = Math.max( metalness?.width || 0, roughness?.width || 0 );
+		const height = Math.max( metalness?.height || 0, roughness?.height || 0 );
 
-			const canvas = document.createElement( 'canvas' );
-			canvas.width = width;
-			canvas.height = height;
+		const canvas = getCanvas();
+		canvas.width = width;
+		canvas.height = height;
 
-			const context = canvas.getContext( '2d' );
-			context.fillStyle = '#ffffff';
-			context.fillRect( 0, 0, width, height );
+		const context = canvas.getContext( '2d' );
+		context.fillStyle = '#00ffff';
+		context.fillRect( 0, 0, width, height );
 
-			const composite = context.getImageData( 0, 0, width, height );
+		const composite = context.getImageData( 0, 0, width, height );
 
-			if ( occlusion ) {
+		if ( metalness ) {
 
-				context.drawImage( occlusion, 0, 0, width, height );
+			context.drawImage( metalness, 0, 0, width, height );
 
-				const data = context.getImageData( 0, 0, width, height ).data;
+			const data = context.getImageData( 0, 0, width, height ).data;
 
-				for ( let i = 0; i < data.length; i += 4 ) {
+			for ( let i = 2; i < data.length; i += 4 ) {
 
-					composite.data[ i ] = data[ i ];
-
-				}
+				composite.data[ i ] = data[ i ];
 
 			}
 
-			if ( roughness ) {
+		}
 
-				context.drawImage( roughness, 0, 0, width, height );
+		if ( roughness ) {
 
-				const data = context.getImageData( 0, 0, width, height ).data;
+			context.drawImage( roughness, 0, 0, width, height );
 
-				for ( let i = 1; i < data.length; i += 4 ) {
+			const data = context.getImageData( 0, 0, width, height ).data;
 
-					composite.data[ i ] = data[ i ];
+			for ( let i = 1; i < data.length; i += 4 ) {
 
-				}
+				composite.data[ i ] = data[ i ];
 
 			}
 
-			if ( metalness ) {
-
-				context.drawImage( metalness, 0, 0, width, height );
-
-				const data = context.getImageData( 0, 0, width, height ).data;
-
-				for ( let i = 2; i < data.length; i += 4 ) {
+		}
 
-					composite.data[ i ] = data[ i ];
+		context.putImageData( composite, 0, 0 );
 
-				}
+		//
 
-			}
+		const reference = metalnessMap || roughnessMap;
 
-			context.putImageData( composite, 0, 0 );
+		const texture = reference.clone();
 
-			return new Texture( canvas );
+		texture.source = new Source( canvas );
 
-		}
+		return texture;
 
 	}
 
@@ -910,7 +952,7 @@ class GLTFWriter {
 
 		return new Promise( function ( resolve ) {
 
-			const reader = new window.FileReader();
+			const reader = new FileReader();
 			reader.readAsArrayBuffer( blob );
 			reader.onloadend = function () {
 
@@ -1037,9 +1079,10 @@ class GLTFWriter {
 	 * @param  {Image} image to process
 	 * @param  {Integer} format of the image (RGBAFormat)
 	 * @param  {Boolean} flipY before writing out the image
+	 * @param  {String} mimeType export format
 	 * @return {Integer}     Index of the processed texture in the "images" array
 	 */
-	processImage( image, format, flipY ) {
+	processImage( image, format, flipY, mimeType = 'image/png' ) {
 
 		const writer = this;
 		const cache = writer.cache;
@@ -1050,7 +1093,7 @@ class GLTFWriter {
 		if ( ! cache.images.has( image ) ) cache.images.set( image, {} );
 
 		const cachedImages = cache.images.get( image );
-		const mimeType = format === RGBAFormat ? 'image/png' : 'image/jpeg';
+
 		const key = mimeType + ':flipY/' + flipY.toString();
 
 		if ( cachedImages[ key ] !== undefined ) return cachedImages[ key ];
@@ -1059,84 +1102,88 @@ class GLTFWriter {
 
 		const imageDef = { mimeType: mimeType };
 
-		if ( options.embedImages ) {
+		const canvas = getCanvas();
 
-			const canvas = cachedCanvas = cachedCanvas || document.createElement( 'canvas' );
+		canvas.width = Math.min( image.width, options.maxTextureSize );
+		canvas.height = Math.min( image.height, options.maxTextureSize );
 
-			canvas.width = Math.min( image.width, options.maxTextureSize );
-			canvas.height = Math.min( image.height, options.maxTextureSize );
+		const ctx = canvas.getContext( '2d' );
 
-			const ctx = canvas.getContext( '2d' );
+		if ( flipY === true ) {
 
-			if ( flipY === true ) {
+			ctx.translate( 0, canvas.height );
+			ctx.scale( 1, - 1 );
 
-				ctx.translate( 0, canvas.height );
-				ctx.scale( 1, - 1 );
+		}
 
-			}
+		if ( image.data !== undefined ) { // THREE.DataTexture
 
-			if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
-				( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
-				( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ||
-				( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
+			if ( format !== RGBAFormat ) {
 
-				ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
+				console.error( 'GLTFExporter: Only RGBAFormat is supported.' );
 
-			} else {
+			}
 
-				if ( format !== RGBAFormat ) {
+			if ( image.width > options.maxTextureSize || image.height > options.maxTextureSize ) {
 
-					console.error( 'GLTFExporter: Only RGBAFormat is supported.' );
+				console.warn( 'GLTFExporter: Image size is bigger than maxTextureSize', image );
 
-				}
+			}
 
-				if ( image.width > options.maxTextureSize || image.height > options.maxTextureSize ) {
+			const data = new Uint8ClampedArray( image.height * image.width * 4 );
 
-					console.warn( 'GLTFExporter: Image size is bigger than maxTextureSize', image );
+			for ( let i = 0; i < data.length; i += 4 ) {
 
-				}
+				data[ i + 0 ] = image.data[ i + 0 ];
+				data[ i + 1 ] = image.data[ i + 1 ];
+				data[ i + 2 ] = image.data[ i + 2 ];
+				data[ i + 3 ] = image.data[ i + 3 ];
 
-				const data = new Uint8ClampedArray( image.height * image.width * 4 );
+			}
 
-				for ( let i = 0; i < data.length; i += 4 ) {
+			ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
 
-					data[ i + 0 ] = image.data[ i + 0 ];
-					data[ i + 1 ] = image.data[ i + 1 ];
-					data[ i + 2 ] = image.data[ i + 2 ];
-					data[ i + 3 ] = image.data[ i + 3 ];
+		} else {
 
-				}
+			ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
 
-				ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
+		}
 
-			}
+		if ( options.binary === true ) {
 
-			if ( options.binary === true ) {
+			pending.push(
 
-				pending.push( new Promise( function ( resolve ) {
+				getToBlobPromise( canvas, mimeType )
+					.then( blob => writer.processBufferViewImage( blob ) )
+					.then( bufferViewIndex => {
 
-					canvas.toBlob( function ( blob ) {
+						imageDef.bufferView = bufferViewIndex;
 
-						writer.processBufferViewImage( blob ).then( function ( bufferViewIndex ) {
+					} )
 
-							imageDef.bufferView = bufferViewIndex;
-							resolve();
+			);
 
-						} );
+		} else {
 
-					}, mimeType );
+			if ( canvas.toDataURL !== undefined ) {
 
-				} ) );
+				imageDef.uri = canvas.toDataURL( mimeType );
 
 			} else {
 
-				imageDef.uri = canvas.toDataURL( mimeType );
+				pending.push(
 
-			}
+					getToBlobPromise( canvas, mimeType )
+						.then( blob => new FileReader().readAsDataURL( blob ) )
+						.then( dataURL => {
 
-		} else {
+							imageDef.uri = dataURL;
+
+						} )
+
+				);
 
-			imageDef.uri = image.src;
+			}
 
 		}
 
@@ -1182,9 +1229,13 @@ class GLTFWriter {
 
 		if ( ! json.textures ) json.textures = [];
 
+		let mimeType = map.userData.mimeType;
+
+		if ( mimeType === 'image/webp' ) mimeType = 'image/png';
+
 		const textureDef = {
 			sampler: this.processSampler( map ),
-			source: this.processImage( map.image, map.format, map.flipY )
+			source: this.processImage( map.image, map.format, map.flipY, mimeType )
 		};
 
 		if ( map.name ) textureDef.name = map.name;
@@ -1252,13 +1303,13 @@ class GLTFWriter {
 
 		}
 
-		const ormTexture = this.buildORMTexture( material );
-
 		// pbrMetallicRoughness.metallicRoughnessTexture
 		if ( material.metalnessMap || material.roughnessMap ) {
 
-			const metalRoughMapDef = { index: this.processTexture( ormTexture ) };
-			this.applyTextureTransform( metalRoughMapDef, material.metalnessMap || material.roughnessMap );
+			const metalRoughTexture = this.buildMetalRoughTexture( material.metalnessMap, material.roughnessMap );
+
+			const metalRoughMapDef = { index: this.processTexture( metalRoughTexture ) };
+			this.applyTextureTransform( metalRoughMapDef, metalRoughTexture );
 			materialDef.pbrMetallicRoughness.metallicRoughnessTexture = metalRoughMapDef;
 
 		}
@@ -1325,7 +1376,7 @@ class GLTFWriter {
 		if ( material.aoMap ) {
 
 			const occlusionMapDef = {
-				index: this.processTexture( ormTexture ),
+				index: this.processTexture( material.aoMap ),
 				texCoord: 1
 			};
 
@@ -1405,6 +1456,7 @@ class GLTFWriter {
 		if ( cache.meshes.has( meshCacheKey ) ) return cache.meshes.get( meshCacheKey );
 
 		const geometry = mesh.geometry;
+
 		let mode;
 
 		// Use the correct mode
@@ -1467,7 +1519,7 @@ class GLTFWriter {
 		for ( let attributeName in geometry.attributes ) {
 
 			// Ignore morph target attributes, which are exported later.
-			if ( attributeName.substr( 0, 5 ) === 'morph' ) continue;
+			if ( attributeName.slice( 0, 5 ) === 'morph' ) continue;
 
 			const attribute = geometry.attributes[ attributeName ];
 			attributeName = nameConversion[ attributeName ] || attributeName.toUpperCase();
@@ -1565,9 +1617,9 @@ class GLTFWriter {
 
 					const baseAttribute = geometry.attributes[ attributeName ];
 
-					if ( cache.attributes.has( this.getUID( attribute ) ) ) {
+					if ( cache.attributes.has( this.getUID( attribute, true ) ) ) {
 
-						target[ gltfAttributeName ] = cache.attributes.get( this.getUID( attribute ) );
+						target[ gltfAttributeName ] = cache.attributes.get( this.getUID( attribute, true ) );
 						continue;
 
 					}
@@ -1591,7 +1643,7 @@ class GLTFWriter {
 					}
 
 					target[ gltfAttributeName ] = this.processAccessor( relativeAttribute, geometry );
-					cache.attributes.set( this.getUID( baseAttribute ), target[ gltfAttributeName ] );
+					cache.attributes.set( this.getUID( baseAttribute, true ), target[ gltfAttributeName ] );
 
 				}
 
@@ -2365,6 +2417,60 @@ class GLTFMaterialsClearcoatExtension {
 
 }
 
+/**
+ * Iridescence Materials Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence
+ */
+class GLTFMaterialsIridescenceExtension {
+
+	constructor( writer ) {
+
+		this.writer = writer;
+		this.name = 'KHR_materials_iridescence';
+
+	}
+
+	writeMaterial( material, materialDef ) {
+
+		if ( ! material.isMeshPhysicalMaterial ) return;
+
+		const writer = this.writer;
+		const extensionsUsed = writer.extensionsUsed;
+
+		const extensionDef = {};
+
+		extensionDef.iridescenceFactor = material.iridescence;
+
+		if ( material.iridescenceMap ) {
+
+			const iridescenceMapDef = { index: writer.processTexture( material.iridescenceMap ) };
+			writer.applyTextureTransform( iridescenceMapDef, material.iridescenceMap );
+			extensionDef.iridescenceTexture = iridescenceMapDef;
+
+		}
+
+		extensionDef.iridescenceIor = material.iridescenceIOR;
+		extensionDef.iridescenceThicknessMinimum = material.iridescenceThicknessRange[ 0 ];
+		extensionDef.iridescenceThicknessMaximum = material.iridescenceThicknessRange[ 1 ];
+
+		if ( material.iridescenceThicknessMap ) {
+
+			const iridescenceThicknessMapDef = { index: writer.processTexture( material.iridescenceThicknessMap ) };
+			writer.applyTextureTransform( iridescenceThicknessMapDef, material.iridescenceThicknessMap );
+			extensionDef.iridescenceThicknessTexture = iridescenceThicknessMapDef;
+
+		}
+
+		materialDef.extensions = materialDef.extensions || {};
+		materialDef.extensions[ this.name ] = extensionDef;
+
+		extensionsUsed[ this.name ] = true;
+
+	}
+
+}
+
 /**
  * Transmission Materials Extension
  *