super-three 0.136.1 → 0.144.0

package/examples/js/exporters/GLTFExporter.js

@@ -35,6 +35,11 @@
 				return new GLTFMaterialsClearcoatExtension( writer );
 
 			} );
+			this.register( function ( writer ) {
+
+				return new GLTFMaterialsIridescenceExtension( writer );
+
+			} );
 
 		}
 
@@ -72,13 +77,6 @@
 
 		parse( input, onDone, onError, options ) {
 
-			if ( typeof onError === 'object' ) {
-
-				console.warn( 'THREE.GLTFExporter: parse() expects options as the fourth argument now.' );
-				options = onError;
-
-			}
-
 			const writer = new GLTFWriter();
 			const plugins = [];
 
@@ -185,23 +183,7 @@
 
 	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;
 
 	}
 	/**
@@ -311,11 +293,50 @@
 
 	}
 
-	let cachedCanvas = null;
+	function getCanvas() {
+
+		if ( typeof document === 'undefined' && typeof OffscreenCanvas !== 'undefined' ) {
+
+			return new OffscreenCanvas( 1, 1 );
+
+		}
+
+		return document.createElement( 'canvas' );
+
+	}
+
+	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
  */
 
+
 	class GLTFWriter {
 
 		constructor() {
@@ -369,7 +390,6 @@
 				trs: false,
 				onlyVisible: true,
 				truncateDrawRange: true,
-				embedImages: true,
 				maxTextureSize: Infinity,
 				animations: [],
 				includeCustomExtensions: false
@@ -402,7 +422,7 @@
 			if ( options.binary === true ) {
 
 				// 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 () {
@@ -427,7 +447,7 @@
 					const glbBlob = new Blob( [ header, jsonChunkPrefix, jsonChunk, binaryChunkPrefix, binaryChunk ], {
 						type: 'application/octet-stream'
 					} );
-					const glbReader = new window.FileReader();
+					const glbReader = new FileReader();
 					glbReader.readAsArrayBuffer( glbBlob );
 
 					glbReader.onloadend = function () {
@@ -442,7 +462,7 @@
 
 				if ( json.buffers && json.buffers.length > 0 ) {
 
-					const reader = new window.FileReader();
+					const reader = new FileReader();
 					reader.readAsDataURL( blob );
 
 					reader.onloadend = function () {
@@ -505,17 +525,25 @@
 
 		}
 		/**
-   * 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();
+				uids.set( true, this.uid ++ );
+				uids.set( false, this.uid ++ );
+				this.uids.set( attribute, uids );
 
-			if ( ! this.uids.has( object ) ) this.uids.set( object, this.uid ++ );
-			return this.uids.get( object );
+			}
+
+			const uids = this.uids.get( attribute );
+			return uids.get( isRelativeCopy );
 
 		}
 		/**
@@ -624,6 +652,81 @@
 
 			}
 
+		}
+
+		buildMetalRoughTexture( metalnessMap, roughnessMap ) {
+
+			if ( metalnessMap === roughnessMap ) return metalnessMap;
+
+			function getEncodingConversion( map ) {
+
+				if ( map.encoding === THREE.sRGBEncoding ) {
+
+					return function SRGBToLinear( c ) {
+
+						return c < 0.04045 ? c * 0.0773993808 : Math.pow( c * 0.9478672986 + 0.0521327014, 2.4 );
+
+					};
+
+				}
+
+				return function LinearToLinear( c ) {
+
+					return c;
+
+				};
+
+			}
+
+			console.warn( 'THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.' );
+			const metalness = metalnessMap?.image;
+			const roughness = roughnessMap?.image;
+			const width = Math.max( metalness?.width || 0, roughness?.width || 0 );
+			const height = Math.max( metalness?.height || 0, roughness?.height || 0 );
+			const canvas = getCanvas();
+			canvas.width = width;
+			canvas.height = height;
+			const context = canvas.getContext( '2d' );
+			context.fillStyle = '#00ffff';
+			context.fillRect( 0, 0, width, height );
+			const composite = context.getImageData( 0, 0, width, height );
+
+			if ( metalness ) {
+
+				context.drawImage( metalness, 0, 0, width, height );
+				const convert = getEncodingConversion( metalnessMap );
+				const data = context.getImageData( 0, 0, width, height ).data;
+
+				for ( let i = 2; i < data.length; i += 4 ) {
+
+					composite.data[ i ] = convert( data[ i ] / 256 ) * 256;
+
+				}
+
+			}
+
+			if ( roughness ) {
+
+				context.drawImage( roughness, 0, 0, width, height );
+				const convert = getEncodingConversion( roughnessMap );
+				const data = context.getImageData( 0, 0, width, height ).data;
+
+				for ( let i = 1; i < data.length; i += 4 ) {
+
+					composite.data[ i ] = convert( data[ i ] / 256 ) * 256;
+
+				}
+
+			}
+
+			context.putImageData( composite, 0, 0 ); //
+
+			const reference = metalnessMap || roughnessMap;
+			const texture = reference.clone();
+			texture.source = new THREE.Source( canvas );
+			texture.encoding = THREE.LinearEncoding;
+			return texture;
+
 		}
 		/**
    * Process a buffer to append to the default one.
@@ -759,7 +862,7 @@
 			if ( ! json.bufferViews ) json.bufferViews = [];
 			return new Promise( function ( resolve ) {
 
-				const reader = new window.FileReader();
+				const reader = new FileReader();
 				reader.readAsArrayBuffer( blob );
 
 				reader.onloadend = function () {
@@ -866,13 +969,14 @@
 		/**
    * Process image
    * @param  {Image} image to process
-   * @param  {Integer} format of the image (e.g. THREE.RGBFormat, THREE.RGBAFormat etc)
+   * @param  {Integer} format of the image (THREE.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;
@@ -881,103 +985,82 @@
 			const pending = writer.pending;
 			if ( ! cache.images.has( image ) ) cache.images.set( image, {} );
 			const cachedImages = cache.images.get( image );
-			const mimeType = format === THREE.RGBAFormat ? 'image/png' : 'image/jpeg';
 			const key = mimeType + ':flipY/' + flipY.toString();
 			if ( cachedImages[ key ] !== undefined ) return cachedImages[ key ];
 			if ( ! json.images ) json.images = [];
 			const imageDef = {
 				mimeType: mimeType
 			};
+			const canvas = getCanvas();
+			canvas.width = Math.min( image.width, options.maxTextureSize );
+			canvas.height = Math.min( image.height, options.maxTextureSize );
+			const ctx = canvas.getContext( '2d' );
 
-			if ( options.embedImages ) {
-
-				const canvas = cachedCanvas = cachedCanvas || document.createElement( 'canvas' );
-				canvas.width = Math.min( image.width, options.maxTextureSize );
-				canvas.height = Math.min( image.height, options.maxTextureSize );
-				const ctx = canvas.getContext( '2d' );
-
-				if ( flipY === true ) {
-
-					ctx.translate( 0, canvas.height );
-					ctx.scale( 1, - 1 );
-
-				}
+			if ( flipY === true ) {
 
-				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 ) {
+				ctx.translate( 0, canvas.height );
+				ctx.scale( 1, - 1 );
 
-					ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
+			}
 
-				} else {
+			if ( image.data !== undefined ) {
 
-					if ( format !== THREE.RGBAFormat && format !== THREE.RGBFormat ) {
+				// THREE.DataTexture
+				if ( format !== THREE.RGBAFormat ) {
 
-						console.error( 'GLTFExporter: Only RGB and RGBA formats are supported.' );
+					console.error( 'GLTFExporter: Only THREE.RGBAFormat is supported.' );
 
-					}
+				}
 
-					if ( image.width > options.maxTextureSize || image.height > options.maxTextureSize ) {
+				if ( image.width > options.maxTextureSize || image.height > options.maxTextureSize ) {
 
-						console.warn( 'GLTFExporter: Image size is bigger than maxTextureSize', image );
+					console.warn( 'GLTFExporter: Image size is bigger than maxTextureSize', image );
 
-					}
+				}
 
-					const data = new Uint8ClampedArray( image.height * image.width * 4 );
+				const data = new Uint8ClampedArray( image.height * image.width * 4 );
 
-					if ( format === THREE.RGBAFormat ) {
+				for ( let i = 0; i < data.length; i += 4 ) {
 
-						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 ];
 
-							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 ];
+				}
 
-						}
+				ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
 
-					} else {
+			} else {
 
-						for ( let i = 0, j = 0; i < data.length; i += 4, j += 3 ) {
+				ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
 
-							data[ i + 0 ] = image.data[ j + 0 ];
-							data[ i + 1 ] = image.data[ j + 1 ];
-							data[ i + 2 ] = image.data[ j + 2 ];
-							data[ i + 3 ] = 255;
+			}
 
-						}
+			if ( options.binary === true ) {
 
-					}
+				pending.push( getToBlobPromise( canvas, mimeType ).then( blob => writer.processBufferViewImage( blob ) ).then( bufferViewIndex => {
 
-					ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
+					imageDef.bufferView = bufferViewIndex;
 
-				}
+				} ) );
 
-				if ( options.binary === true ) {
-
-					pending.push( new Promise( function ( resolve ) {
+			} else {
 
-						canvas.toBlob( function ( blob ) {
+				if ( canvas.toDataURL !== undefined ) {
 
-							writer.processBufferViewImage( blob ).then( function ( bufferViewIndex ) {
+					imageDef.uri = canvas.toDataURL( mimeType );
 
-								imageDef.bufferView = bufferViewIndex;
-								resolve();
+				} else {
 
-							} );
+					pending.push( getToBlobPromise( canvas, mimeType ).then( blob => new FileReader().readAsDataURL( blob ) ).then( dataURL => {
 
-						}, mimeType );
+						imageDef.uri = dataURL;
 
 					} ) );
 
-				} else {
-
-					imageDef.uri = canvas.toDataURL( mimeType );
-
 				}
 
-			} else {
-
-				imageDef.uri = image.src;
-
 			}
 
 			const index = json.images.push( imageDef ) - 1;
@@ -1018,9 +1101,11 @@
 			const json = this.json;
 			if ( cache.textures.has( map ) ) return cache.textures.get( map );
 			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;
 
@@ -1091,19 +1176,12 @@
 
 			if ( material.metalnessMap || material.roughnessMap ) {
 
-				if ( material.metalnessMap === material.roughnessMap ) {
-
-					const metalRoughMapDef = {
-						index: this.processTexture( material.metalnessMap )
-					};
-					this.applyTextureTransform( metalRoughMapDef, material.metalnessMap );
-					materialDef.pbrMetallicRoughness.metallicRoughnessTexture = metalRoughMapDef;
-
-				} else {
-
-					console.warn( 'THREE.GLTFExporter: Ignoring metalnessMap and roughnessMap because they are not the same Texture.' );
-
-				}
+				const metalRoughTexture = this.buildMetalRoughTexture( material.metalnessMap, material.roughnessMap );
+				const metalRoughMapDef = {
+					index: this.processTexture( metalRoughTexture )
+				};
+				this.applyTextureTransform( metalRoughMapDef, metalRoughTexture );
+				materialDef.pbrMetallicRoughness.metallicRoughnessTexture = metalRoughMapDef;
 
 			} // pbrMetallicRoughness.baseColorTexture or pbrSpecularGlossiness diffuseTexture
 
@@ -1275,12 +1353,6 @@
 
 			}
 
-			if ( geometry.isBufferGeometry !== true ) {
-
-				throw new Error( 'THREE.GLTFExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-			}
-
 			const meshDef = {};
 			const attributes = {};
 			const primitives = [];
@@ -1309,7 +1381,7 @@
 			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(); // Prefix all geometry attributes except the ones specifically
 				// listed in the spec; non-spec attributes are considered custom.
@@ -1396,9 +1468,9 @@
 
 						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;
 
 						} // Clones attribute not to override
@@ -1417,7 +1489,7 @@
 						}
 
 						target[ gltfAttributeName ] = this.processAccessor( relativeAttribute, geometry );
-						cache.attributes.set( this.getUID( baseAttribute ), target[ gltfAttributeName ] );
+						cache.attributes.set( this.getUID( baseAttribute, true ), target[ gltfAttributeName ] );
 
 					}
 
@@ -2150,6 +2222,61 @@
 
 		}
 
+	}
+	/**
+ * 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

package/examples/js/exporters/OBJExporter.js

@@ -20,14 +20,7 @@
 				let nbNormals = 0;
 				let nbVertexUvs = 0;
 				const geometry = mesh.geometry;
-				const normalMatrixWorld = new THREE.Matrix3();
-
-				if ( geometry.isBufferGeometry !== true ) {
-
-					throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-				} // shortcuts
-
+				const normalMatrixWorld = new THREE.Matrix3(); // shortcuts
 
 				const vertices = geometry.getAttribute( 'position' );
 				const normals = geometry.getAttribute( 'normal' );
@@ -47,9 +40,7 @@
 
 					for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
 
-						vertex.x = vertices.getX( i );
-						vertex.y = vertices.getY( i );
-						vertex.z = vertices.getZ( i ); // transform the vertex to world space
+						vertex.fromBufferAttribute( vertices, i ); // transform the vertex to world space
 
 						vertex.applyMatrix4( mesh.matrixWorld ); // transform the vertex to export format
 
@@ -64,8 +55,7 @@
 
 					for ( let i = 0, l = uvs.count; i < l; i ++, nbVertexUvs ++ ) {
 
-						uv.x = uvs.getX( i );
-						uv.y = uvs.getY( i ); // transform the uv to export format
+						uv.fromBufferAttribute( uvs, i ); // transform the uv to export format
 
 						output += 'vt ' + uv.x + ' ' + uv.y + '\n';
 
@@ -80,9 +70,7 @@
 
 					for ( let i = 0, l = normals.count; i < l; i ++, nbNormals ++ ) {
 
-						normal.x = normals.getX( i );
-						normal.y = normals.getY( i );
-						normal.z = normals.getZ( i ); // transform the normal to world space
+						normal.fromBufferAttribute( normals, i ); // transform the normal to world space
 
 						normal.applyMatrix3( normalMatrixWorld ).normalize(); // transform the normal to export format
 
@@ -138,14 +126,7 @@
 
 				let nbVertex = 0;
 				const geometry = line.geometry;
-				const type = line.type;
-
-				if ( geometry.isBufferGeometry !== true ) {
-
-					throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-				} // shortcuts
-
+				const type = line.type; // shortcuts
 
 				const vertices = geometry.getAttribute( 'position' ); // name of the line object
 
@@ -155,9 +136,7 @@
 
 					for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
 
-						vertex.x = vertices.getX( i );
-						vertex.y = vertices.getY( i );
-						vertex.z = vertices.getZ( i ); // transform the vertex to world space
+						vertex.fromBufferAttribute( vertices, i ); // transform the vertex to world space
 
 						vertex.applyMatrix4( line.matrixWorld ); // transform the vertex to export format
 
@@ -200,13 +179,6 @@
 
 				let nbVertex = 0;
 				const geometry = points.geometry;
-
-				if ( geometry.isBufferGeometry !== true ) {
-
-					throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-				}
-
 				const vertices = geometry.getAttribute( 'position' );
 				const colors = geometry.getAttribute( 'color' );
 				output += 'o ' + points.name + '\n';
@@ -221,7 +193,7 @@
 
 						if ( colors !== undefined ) {
 
-							color.fromBufferAttribute( colors, i );
+							color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
 							output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
 
 						}
@@ -230,17 +202,18 @@
 
 					}
 
-				}
+					output += 'p ';
+
+					for ( let j = 1, l = vertices.count; j <= l; j ++ ) {
 
-				output += 'p ';
+						output += indexVertex + j + ' ';
 
-				for ( let j = 1, l = vertices.count; j <= l; j ++ ) {
+					}
 
-					output += indexVertex + j + ' ';
+					output += '\n';
 
-				}
+				} // update index
 
-				output += '\n'; // update index
 
 				indexVertex += nbVertex;