super-three 0.181.0 → 0.185.0

package/examples/jsm/exporters/GLTFExporter.js

@@ -88,6 +88,7 @@ const KHR_mesh_quantization_ExtraAttrTypes = {
  * - KHR_texture_transform
  * - EXT_materials_bump
  * - EXT_mesh_gpu_instancing
+ * - EXT_texture_webp
  *
  * The following glTF 2.0 extension is supported by an external user plugin:
  *
@@ -1045,6 +1046,57 @@ class GLTFWriter {
 	}
 
 
+	/**
+	 * Builds a copy of the given normal map with the red and/or green channels
+	 * inverted (`color = 255 - color`). This is used to bake the sign of
+	 * `material.normalScale` and the tangent-space convention into the texture,
+	 * since glTF only supports OpenGL-style normal maps with a univariate,
+	 * positive scale.
+	 *
+	 * @param {THREE.Texture} normalMap The source normal map.
+	 * @param {boolean} flipX Whether to invert the red channel (normal X).
+	 * @param {boolean} flipY Whether to invert the green channel (normal Y).
+	 * @return {Promise<THREE.Texture>} The derived normal map texture.
+	 */
+	async buildNormalMapTextureAsync( normalMap, flipX, flipY ) {
+
+		if ( normalMap instanceof CompressedTexture ) {
+
+			normalMap = await this.decompressTextureAsync( normalMap );
+
+		}
+
+		const image = normalMap.image;
+
+		const canvas = getCanvas();
+		canvas.width = image.width;
+		canvas.height = image.height;
+
+		const context = canvas.getContext( '2d', {
+			willReadFrequently: true,
+		} );
+
+		context.drawImage( image, 0, 0, canvas.width, canvas.height );
+
+		const imageData = context.getImageData( 0, 0, canvas.width, canvas.height );
+		const data = imageData.data;
+
+		for ( let i = 0; i < data.length; i += 4 ) {
+
+			if ( flipX ) data[ i + 0 ] = 255 - data[ i + 0 ];
+			if ( flipY ) data[ i + 1 ] = 255 - data[ i + 1 ];
+
+		}
+
+		context.putImageData( imageData, 0, 0 );
+
+		const texture = normalMap.clone();
+		texture.source = new Source( canvas );
+
+		return texture;
+
+	}
+
 	async decompressTextureAsync( texture, maxTextureSize = Infinity ) {
 
 		if ( this.textureUtils === null ) {
@@ -1533,15 +1585,30 @@ class GLTFWriter {
 
 		}
 
-		let mimeType = map.userData.mimeType;
+		const mimeType = map.userData.mimeType;
 
-		if ( mimeType === 'image/webp' ) mimeType = 'image/png';
+		const imageIndex = this.processImage( map.image, map.format, map.flipY, mimeType );
 
 		const textureDef = {
-			sampler: this.processSampler( map ),
-			source: this.processImage( map.image, map.format, map.flipY, mimeType )
+			sampler: this.processSampler( map )
 		};
 
+		if ( mimeType === 'image/webp' ) {
+
+			textureDef.extensions = textureDef.extensions || {};
+			textureDef.extensions[ 'EXT_texture_webp' ] = {
+				source: imageIndex
+			};
+
+			this.extensionsUsed[ 'EXT_texture_webp' ] = true;
+			this.extensionsRequired[ 'EXT_texture_webp' ] = true;
+
+		} else {
+
+			textureDef.source = imageIndex;
+
+		}
+
 		if ( map.name ) textureDef.name = map.name;
 
 		await this._invokeAllAsync( async function ( ext ) {
@@ -1559,14 +1626,20 @@ class GLTFWriter {
 	/**
 	 * Process material
 	 * @param {THREE.Material} material Material to process
+	 * @param {THREE.BufferGeometry} [geometry] Geometry the material is used with.
 	 * @return {Promise<?number>} Index of the processed material in the "materials" array
 	 */
-	async processMaterialAsync( material ) {
+	async processMaterialAsync( material, geometry ) {
 
 		const cache = this.cache;
 		const json = this.json;
 
-		if ( cache.materials.has( material ) ) return cache.materials.get( material );
+		// Whether the geometry provides explicit tangents. The exported normal map depends on
+		// this, so it is part of the material cache key.
+		const hasTangent = geometry !== undefined && geometry.hasAttribute( 'tangent' );
+		const cacheKey = material.normalMap ? material.uuid + ':' + hasTangent : material.uuid;
+
+		if ( cache.materials.has( cacheKey ) ) return cache.materials.get( cacheKey );
 
 		if ( material.isShaderMaterial ) {
 
@@ -1661,16 +1734,36 @@ class GLTFWriter {
 		// normalTexture
 		if ( material.normalMap ) {
 
+			const normalScale = material.normalScale;
+
+			// glTF only supports OpenGL-style normal maps with a univariate, positive scale.
+			// A negative `normalScale` component is baked into the texture by inverting the
+			// corresponding channel. Meshes without explicit tangents use the opposite
+			// green-channel convention, so the green channel is inverted in that case too.
+			//
+			// The no-tangent green flip is the counterpart of GLTFLoader, which negates
+			// `normalScale.y` on import for the same case.
+			const flipX = normalScale.x < 0;
+			const flipY = hasTangent ? normalScale.y < 0 : normalScale.y > 0;
+
+			let normalMap = material.normalMap;
+
+			if ( flipX || flipY ) {
+
+				normalMap = await this.buildNormalMapTextureAsync( material.normalMap, flipX, flipY );
+
+			}
+
 			const normalMapDef = {
-				index: await this.processTextureAsync( material.normalMap ),
+				index: await this.processTextureAsync( normalMap ),
 				texCoord: material.normalMap.channel
 			};
 
-			if ( material.normalScale && material.normalScale.x !== 1 ) {
+			if ( Math.abs( normalScale.x ) !== 1 ) {
 
-				// glTF normal scale is univariate. Ignore `y`, which may be flipped.
-				// Context: https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
-				normalMapDef.scale = material.normalScale.x;
+				// glTF normal scale is univariate. The magnitude of `x` is used; the sign of
+				// both components has already been baked into the texture above.
+				normalMapDef.scale = Math.abs( normalScale.x );
 
 			}
 
@@ -1727,7 +1820,7 @@ class GLTFWriter {
 		} );
 
 		const index = json.materials.push( materialDef ) - 1;
-		cache.materials.set( material, index );
+		cache.materials.set( cacheKey, index );
 		return index;
 
 	}
@@ -1832,7 +1925,7 @@ class GLTFWriter {
 			const validVertexAttributes =
 					/^(POSITION|NORMAL|TANGENT|TEXCOORD_\d+|COLOR_\d+|JOINTS_\d+|WEIGHTS_\d+)$/;
 
-			if ( ! validVertexAttributes.test( attributeName ) ) attributeName = '_' + attributeName;
+			if ( ! validVertexAttributes.test( attributeName ) && ! attributeName.startsWith( '_' ) ) attributeName = '_' + attributeName;
 
 			if ( cache.attributes.has( this.getUID( attribute ) ) ) {
 
@@ -1852,12 +1945,12 @@ class GLTFWriter {
 				! ( array instanceof Uint8Array ) ) {
 
 				console.warn( 'GLTFExporter: Attribute "skinIndex" converted to type UNSIGNED_SHORT.' );
-				modifiedAttribute = new BufferAttribute( new Uint16Array( array ), attribute.itemSize, attribute.normalized );
+				modifiedAttribute = GLTFExporter.Utils.toTypedBufferAttribute( attribute, Uint16Array );
 
 			} else if ( ( array instanceof Uint32Array || array instanceof Int32Array ) && ! attributeName.startsWith( '_' ) ) {
 
 				console.warn( `GLTFExporter: Attribute "${ attributeName }" converted to type FLOAT.` );
-				modifiedAttribute = GLTFExporter.Utils.toFloat32BufferAttribute( attribute );
+				modifiedAttribute = GLTFExporter.Utils.toTypedBufferAttribute( attribute, Float32Array );
 
 			}
 
@@ -2045,7 +2138,7 @@ class GLTFWriter {
 
 			}
 
-			const material = await this.processMaterialAsync( materials[ groups[ i ].materialIndex ] );
+			const material = await this.processMaterialAsync( materials[ groups[ i ].materialIndex ], geometry );
 
 			if ( material !== null ) primitive.material = material;
 
@@ -2355,6 +2448,13 @@ class GLTFWriter {
 
 		if ( ! json.nodes ) json.nodes = [];
 
+		// Handle pivot by creating a container node
+		if ( object.pivot !== null ) {
+
+			return await this._processNodeWithPivotAsync( object );
+
+		}
+
 		const nodeDef = {};
 
 		if ( options.trs ) {
@@ -2451,6 +2551,126 @@ class GLTFWriter {
 
 	}
 
+	/**
+	 * Process Object3D node with pivot using container approach
+	 * @param {THREE.Object3D} object Object3D with pivot
+	 * @return {Promise<number>} Index of the container node
+	 */
+	async _processNodeWithPivotAsync( object ) {
+
+		const json = this.json;
+		const options = this.options;
+		const nodeMap = this.nodeMap;
+
+		const pivot = object.pivot;
+
+		// Container node: holds position + pivot offset, rotation, scale
+		// Animations will target this node
+		const containerDef = {};
+
+		const rotation = object.quaternion.toArray();
+		const position = [
+			object.position.x + pivot.x,
+			object.position.y + pivot.y,
+			object.position.z + pivot.z
+		];
+		const scale = object.scale.toArray();
+
+		if ( ! equalArray( rotation, [ 0, 0, 0, 1 ] ) ) {
+
+			containerDef.rotation = rotation;
+
+		}
+
+		if ( ! equalArray( position, [ 0, 0, 0 ] ) ) {
+
+			containerDef.translation = position;
+
+		}
+
+		if ( ! equalArray( scale, [ 1, 1, 1 ] ) ) {
+
+			containerDef.scale = scale;
+
+		}
+
+		// Store pivot in extras for round-trip reconstruction
+		containerDef.extras = { pivot: pivot.toArray() };
+
+		if ( object.name !== '' ) containerDef.name = String( object.name );
+
+		this.serializeUserData( object, containerDef );
+
+		const containerIndex = json.nodes.push( containerDef ) - 1;
+
+		// Map original object to container so animations target it
+		nodeMap.set( object, containerIndex );
+
+		// Child node: holds mesh with -pivot offset
+		const childDef = {};
+
+		const childPosition = [ - pivot.x, - pivot.y, - pivot.z ];
+
+		if ( ! equalArray( childPosition, [ 0, 0, 0 ] ) ) {
+
+			childDef.translation = childPosition;
+
+		}
+
+		if ( object.isMesh || object.isLine || object.isPoints ) {
+
+			const meshIndex = await this.processMeshAsync( object );
+
+			if ( meshIndex !== null ) childDef.mesh = meshIndex;
+
+		} else if ( object.isCamera ) {
+
+			childDef.camera = this.processCamera( object );
+
+		}
+
+		if ( object.isSkinnedMesh ) this.skins.push( object );
+
+		const childIndex = json.nodes.push( childDef ) - 1;
+
+		// Build children array for container
+		const containerChildren = [ childIndex ];
+
+		// Process object's children as children of the child node
+		if ( object.children.length > 0 ) {
+
+			const grandchildren = [];
+
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+				const child = object.children[ i ];
+
+				if ( child.visible || options.onlyVisible === false ) {
+
+					const childNodeIndex = await this.processNodeAsync( child );
+
+					if ( childNodeIndex !== null ) grandchildren.push( childNodeIndex );
+
+				}
+
+			}
+
+			if ( grandchildren.length > 0 ) childDef.children = grandchildren;
+
+		}
+
+		containerDef.children = containerChildren;
+
+		await this._invokeAllAsync( function ( ext ) {
+
+			ext.writeNode && ext.writeNode( object, containerDef );
+
+		} );
+
+		return containerIndex;
+
+	}
+
 	/**
 	 * Process Scene
 	 * @param {Scene} scene Scene to process
@@ -2559,9 +2779,33 @@ class GLTFWriter {
 
 		}
 
-		for ( let i = 0; i < options.animations.length; ++ i ) {
+		// animations
+
+		if ( input.length === 1 ) {
+
+			// default: single input, flat animations array
+
+			for ( let i = 0; i < options.animations.length; ++ i ) {
+
+				this.processAnimation( options.animations[ i ], input[ 0 ] );
+
+			}
+
+		} else {
 
-			this.processAnimation( options.animations[ i ], input[ 0 ] );
+			// multi-input with multi-dimensional animations array
+
+			for ( let i = 0; i < input.length; i ++ ) {
+
+				const animations = options.animations[ i ] || [];
+
+				for ( let j = 0; j < animations.length; ++ j ) {
+
+					this.processAnimation( animations[ j ], input[ i ] );
+
+				}
+
+			}
 
 		}
 
@@ -3538,9 +3782,9 @@ GLTFExporter.Utils = {
 
 	},
 
-	toFloat32BufferAttribute: function ( srcAttribute ) {
+	toTypedBufferAttribute: function ( srcAttribute, TypedArray ) {
 
-		const dstAttribute = new BufferAttribute( new Float32Array( srcAttribute.count * srcAttribute.itemSize ), srcAttribute.itemSize, false );
+		const dstAttribute = new BufferAttribute( new TypedArray( srcAttribute.count * srcAttribute.itemSize ), srcAttribute.itemSize, false );
 
 		if ( ! srcAttribute.normalized && ! srcAttribute.isInterleavedBufferAttribute ) {
 
@@ -3574,7 +3818,8 @@ GLTFExporter.Utils = {
  * @property {boolean} [onlyVisible=true] - Export only visible 3D objects.
  * @property {boolean} [binary=false] - Export in binary (.glb) format, returning an ArrayBuffer.
  * @property {number} [maxTextureSize=Infinity] - Restricts the image maximum size (both width and height) to the given value.
- * @property {Array<AnimationClip>} [animations=[]] - List of animations to be included in the export.
+ * @property {Array<AnimationClip>|Array<Array<AnimationClip>>} [animations=[]] - List of animations to be included in the export. When exporting a single 3D object or scene, this is a flat list of clips.
+ * When exporting an array of multiple scenes, this must be a nested array with one list of clips per scene, matched to the input by index.
  * @property {boolean} [includeCustomExtensions=false] - Export custom glTF extensions defined on an object's `userData.gltfExtensions` property.
  **/