Fix GLTFExporter when exporting in GLTF with OffscreenCanvas (#24031)

* Fix GLTFExporter when exporting in GLTF with OffscreenCanvas

And simplify promises

* Remove identation before `.then()`

* Get `toBlobPromise` from a function

* Move `getToBlobPromise` function

* Fix `getToBlobPromise`

* Clean up.

Co-authored-by: mrdoob <[email protected]>

examples/jsm/exporters/GLTFExporter.js

@@ -361,6 +361,37 @@ function getCanvas() {
 
 }
 
+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
  */
@@ -1104,50 +1135,39 @@ class GLTFWriter {
 
 		if ( options.binary === true ) {
 
-			let toBlobPromise;
-
-			if ( canvas.toBlob !== undefined ) {
-
-				toBlobPromise = new Promise( ( resolve ) => canvas.toBlob( resolve, mimeType ) );
+			pending.push(
 
-			} else {
-
-				let quality;
+				getToBlobPromise( canvas, mimeType )
+					.then( blob => writer.processBufferViewImage( blob ) )
+					.then( bufferViewIndex => {
 
-				// 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' ) {
+						imageDef.bufferView = bufferViewIndex;
 
-					quality = 0.92;
+					} )
 
-				} else if ( mimeType === 'image/webp' ) {
+			);
 
-					quality = 0.8;
-
-				}
-
-				toBlobPromise = canvas.convertToBlob( {
-
-					type: mimeType,
-					quality: quality
+		} else {
 
-				} );
+			if ( canvas.toDataURL !== undefined ) {
 
-			}
+				imageDef.uri = canvas.toDataURL( mimeType );
 
-			pending.push( toBlobPromise.then( blob =>
+			} else {
 
-				writer.processBufferViewImage( blob ).then( bufferViewIndex => {
+				pending.push(
 
-					imageDef.bufferView = bufferViewIndex;
+					getToBlobPromise( canvas, mimeType )
+						.then( blob => new FileReader().readAsDataURL( blob ) )
+						.then( dataURL => {
 
-				} )
+							imageDef.uri = dataURL;
 
-			) );
+						} )
 
-		} else {
+				);
 
-			imageDef.uri = canvas.toDataURL( mimeType );
+			}
 
 		}