super-three 0.137.0 → 0.141.0

package/examples/js/exporters/GLTFExporter.js

@@ -35,6 +35,11 @@
 				return new GLTFMaterialsClearcoatExtension( writer );
 
 			} );
+			this.register( function ( writer ) {
+
+				return new GLTFMaterialsIridescenceExtension( writer );
+
+			} );
 
 		}
 
@@ -185,23 +190,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;
 
 	}
 	/**
@@ -312,10 +301,61 @@
 	}
 
 	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
  */
 
+
 	class GLTFWriter {
 
 		constructor() {
@@ -369,7 +409,6 @@
 				trs: false,
 				onlyVisible: true,
 				truncateDrawRange: true,
-				embedImages: true,
 				maxTextureSize: Infinity,
 				animations: [],
 				includeCustomExtensions: false
@@ -402,7 +441,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 +466,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 +481,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 +544,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 ) {
 
-			if ( ! this.uids.has( object ) ) this.uids.set( object, this.uid ++ );
-			return this.uids.get( object );
+				const uids = new Map();
+				uids.set( true, this.uid ++ );
+				uids.set( false, this.uid ++ );
+				this.uids.set( attribute, uids );
+
+			}
+
+			const uids = this.uids.get( attribute );
+			return uids.get( isRelativeCopy );
 
 		}
 		/**
@@ -626,68 +673,54 @@
 
 		}
 
-		buildORMTexture( material ) {
-
-			const occlusion = material.aoMap?.image;
-			const roughness = material.roughnessMap?.image;
-			const metalness = material.metalnessMap?.image;
-			if ( occlusion === roughness && roughness === metalness ) return occlusion;
-
-			if ( occlusion || roughness || metalness ) {
-
-				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 canvas = document.createElement( 'canvas' );
-				canvas.width = width;
-				canvas.height = height;
-				const context = canvas.getContext( '2d' );
-				context.fillStyle = '#ffffff';
-				context.fillRect( 0, 0, width, height );
-				const composite = context.getImageData( 0, 0, width, height );
+		buildMetalRoughTexture( metalnessMap, roughnessMap ) {
 
-				if ( occlusion ) {
+			if ( metalnessMap === roughnessMap ) return metalnessMap;
+			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 );
 
-					context.drawImage( occlusion, 0, 0, width, height );
-					const data = context.getImageData( 0, 0, width, height ).data;
+			if ( metalness ) {
 
-					for ( let i = 0; i < data.length; i += 4 ) {
+				context.drawImage( metalness, 0, 0, width, height );
+				const data = context.getImageData( 0, 0, width, height ).data;
 
-						composite.data[ i ] = data[ i ];
+				for ( let i = 2; i < data.length; i += 4 ) {
 
-					}
+					composite.data[ i ] = data[ i ];
 
 				}
 
-				if ( roughness ) {
+			}
 
-					context.drawImage( roughness, 0, 0, width, height );
-					const data = context.getImageData( 0, 0, width, height ).data;
+			if ( roughness ) {
 
-					for ( let i = 1; i < data.length; i += 4 ) {
+				context.drawImage( roughness, 0, 0, width, height );
+				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 );
-				return new THREE.Texture( canvas );
+			context.putImageData( composite, 0, 0 ); //
 
-			}
+			const reference = metalnessMap || roughnessMap;
+			const texture = reference.clone();
+			texture.source = new THREE.Source( canvas );
+			return texture;
 
 		}
 		/**
@@ -824,7 +857,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 () {
@@ -933,11 +966,12 @@
    * @param  {Image} image to process
    * @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;
@@ -946,87 +980,81 @@
 			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 ) {
 
-				}
+				ctx.translate( 0, canvas.height );
+				ctx.scale( 1, - 1 );
 
-				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.drawImage( image, 0, 0, canvas.width, canvas.height );
+			if ( image.data !== undefined ) {
 
-				} else {
+				// THREE.DataTexture
+				if ( format !== THREE.RGBAFormat ) {
 
-					if ( format !== THREE.RGBAFormat ) {
+					console.error( 'GLTFExporter: Only THREE.RGBAFormat is 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 );
+				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 );
 
-					ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
+			} else {
 
-				}
+				ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
 
-				if ( options.binary === true ) {
+			}
 
-					pending.push( new Promise( function ( resolve ) {
+			if ( options.binary === true ) {
 
-						canvas.toBlob( function ( blob ) {
+				pending.push( getToBlobPromise( canvas, mimeType ).then( blob => writer.processBufferViewImage( blob ) ).then( bufferViewIndex => {
 
-							writer.processBufferViewImage( blob ).then( function ( bufferViewIndex ) {
+					imageDef.bufferView = 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 => {
 
-				}
+						imageDef.uri = dataURL;
 
-			} else {
+					} ) );
 
-				imageDef.uri = image.src;
+				}
 
 			}
 
@@ -1037,7 +1065,7 @@
 		}
 		/**
    * Process sampler
-   * @param  {Texture} map THREE.Texture to process
+   * @param  {Texture} map Texture to process
    * @return {Integer}     Index of the processed texture in the "samplers" array
    */
 
@@ -1068,9 +1096,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;
 
@@ -1136,16 +1166,16 @@
 				materialDef.pbrMetallicRoughness.metallicFactor = 0.5;
 				materialDef.pbrMetallicRoughness.roughnessFactor = 0.5;
 
-			}
+			} // pbrMetallicRoughness.metallicRoughnessTexture
 
-			const ormTexture = this.buildORMTexture( material ); // pbrMetallicRoughness.metallicRoughnessTexture
 
 			if ( material.metalnessMap || material.roughnessMap ) {
 
+				const metalRoughTexture = this.buildMetalRoughTexture( material.metalnessMap, material.roughnessMap );
 				const metalRoughMapDef = {
-					index: this.processTexture( ormTexture )
+					index: this.processTexture( metalRoughTexture )
 				};
-				this.applyTextureTransform( metalRoughMapDef, material.metalnessMap || material.roughnessMap );
+				this.applyTextureTransform( metalRoughMapDef, metalRoughTexture );
 				materialDef.pbrMetallicRoughness.metallicRoughnessTexture = metalRoughMapDef;
 
 			} // pbrMetallicRoughness.baseColorTexture or pbrSpecularGlossiness diffuseTexture
@@ -1217,7 +1247,7 @@
 			if ( material.aoMap ) {
 
 				const occlusionMapDef = {
-					index: this.processTexture( ormTexture ),
+					index: this.processTexture( material.aoMap ),
 					texCoord: 1
 				};
 
@@ -1352,7 +1382,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.
@@ -1439,9 +1469,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
@@ -1460,7 +1490,7 @@
 						}
 
 						target[ gltfAttributeName ] = this.processAccessor( relativeAttribute, geometry );
-						cache.attributes.set( this.getUID( baseAttribute ), target[ gltfAttributeName ] );
+						cache.attributes.set( this.getUID( baseAttribute, true ), target[ gltfAttributeName ] );
 
 					}
 
@@ -2193,6 +2223,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

@@ -47,9 +47,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 +62,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 +77,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
 
@@ -155,9 +150,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
 
@@ -221,7 +214,7 @@
 
 						if ( colors !== undefined ) {
 
-							color.fromBufferAttribute( colors, i );
+							color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
 							output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
 
 						}
@@ -230,17 +223,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;