Allow GLTFLoader to use ImageBitmapLoader

Fixes #19511

This is one potential approach for allowing GLTFLoader to utilize ImageBitmaps, which significantly reduce stalls in rendering when uploading textures to the GPU. Alternatively, if allowing a custom ImageLoader to be supplied to the TextureLoader is not desirable, we could use ImageBitmapLoader and CanvasTexture in this class directly when ImageBitmaps are supported and fallback to TextureLoader otherwise.

The reason this is limited to GLTFLoader for now is that ImageBitmap-based textures don't support Y-flipping in the same way that the traditional approach does. If a workaround is figured out for that then ImageBitmaps could be used more widely.

examples/jsm/loaders/GLTFLoader.js

@@ -19,6 +19,7 @@ import {
 	FileLoader,
 	FrontSide,
 	Group,
+	ImageBitmapLoader,
 	InterleavedBuffer,
 	InterleavedBufferAttribute,
 	Interpolant,
@@ -1476,7 +1477,14 @@ var GLTFLoader = ( function () {
 		// BufferGeometry caching
 		this.primitiveCache = {};
 
-		this.textureLoader = new TextureLoader( this.options.manager );
+		// Use an ImageBitmapLoader if imageBitmaps are supported. Moves much of the
+		// expensive work of uploading a texture to the GPU off the main thread.
+		var imageLoader = null;
+		if (typeof createImageBitmap !== 'undefined') {
+			imageLoader = new ImageBitmapLoader( this.options.manager );
+		}
+
+		this.textureLoader = new TextureLoader( this.options.manager, imageLoader );
 		this.textureLoader.setCrossOrigin( this.options.crossOrigin );
 
 		this.fileLoader = new FileLoader( this.options.manager );

src/loaders/TextureLoader.js

@@ -7,10 +7,12 @@ import { ImageLoader } from './ImageLoader.js';
 import { Texture } from '../textures/Texture.js';
 import { Loader } from './Loader.js';
 
-function TextureLoader( manager ) {
+function TextureLoader( manager, imageLoader ) {
 
 	Loader.call( this, manager );
 
+	this.imageLoader = imageLoader || new ImageLoader( manager );
+
 }
 
 TextureLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
@@ -21,7 +23,7 @@ TextureLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		const texture = new Texture();
 
-		const loader = new ImageLoader( this.manager );
+		const loader = this.imageLoader;
 		loader.setCrossOrigin( this.crossOrigin );
 		loader.setPath( this.path );