GLTF: export same mimetype as import (#23592)

* export same mimetype as import

* Update GLTFLoader.js

Clean up.

* remove webp for now

* fix webp in the proper place this time

* fix bad revert

* remove ??

* cleanup

* addressing feedback

* factor out function

Co-authored-by: Michael Herzog <[email protected]>

examples/jsm/exporters/GLTFExporter.js

@@ -756,7 +756,11 @@ class GLTFWriter {
 
 			context.putImageData( composite, 0, 0 );
 
-			return new Texture( canvas );
+			const texture = new Texture( canvas );
+
+			texture.userData.mimeType = material.roughnessMap.userData.mimeType || material.metalnessMap.userData.mimeType || material.aoMap.userData.mimeType;
+
+			return texture;
 
 		}
 
@@ -1037,9 +1041,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 +1055,7 @@ class GLTFWriter {
 		if ( ! cache.images.has( image ) ) cache.images.set( image, {} );
 
 		const cachedImages = cache.images.get( image );
-		const mimeType = 'image/png';
+
 		const key = mimeType + ':flipY/' + flipY.toString();
 
 		if ( cachedImages[ key ] !== undefined ) return cachedImages[ key ];
@@ -1182,9 +1187,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;

examples/jsm/loaders/GLTFLoader.js

@@ -2234,6 +2234,15 @@ function getNormalizedComponentScale( constructor ) {
 
 }
 
+function getImageURIMimeType( uri ) {
+
+	if ( uri.search( /\.jpe?g($|\?)/i ) > 0 || uri.search( /^data\:image\/jpeg/ ) === 0 ) return 'image/jpeg';
+	if ( uri.search( /\.webp($|\?)/i ) > 0 || uri.search( /^data\:image\/webp/ ) === 0 ) return 'image/webp';
+
+	return 'image/png';
+
+}
+
 /* GLTF PARSER */
 
 class GLTFParser {
@@ -2966,6 +2975,8 @@ class GLTFParser {
 
 			}
 
+			texture.userData.mimeType = sourceDef.mimeType || getImageURIMimeType( sourceDef.uri );
+
 			return texture;
 
 		} ).catch( function ( error ) {