Alternate way of implementing image bitmap support

Doesn't add additional API surface to TextureLoader
mrdoob · Jun 9, 2020 · 9f3a786 · 9f3a786
1 parent 736a7f7
commit 9f3a786
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/examples/js/loaders/GLTFLoader.js b/examples/js/loaders/GLTFLoader.js
@@ -1413,14 +1413,16 @@ THREE.GLTFLoader = ( function () {
 		// BufferGeometry caching
 		this.primitiveCache = {};
 
-		this.textureLoader = new THREE.TextureLoader( this.options.manager );
-		this.textureLoader.setCrossOrigin( this.options.crossOrigin );
+		this.useImageBitmap = typeof createImageBitmap !== 'undefined';
 
 		// Use an ImageBitmapLoader if imageBitmaps are supported. Moves much of the
 		// expensive work of uploading a texture to the GPU off the main thread.
-		if ( typeof createImageBitmap !== 'undefined' ) {
-			this.textureLoader.setImageLoader( new THREE.ImageBitmapLoader( this.options.manager ) );
+		if ( this.useImageBitmap ) {
+			this.textureLoader = new THREE.ImageBitmapLoader( this.options.manager );
+		} else {
+			this.textureLoader = new THREE.TextureLoader( this.options.manager );
 		}
+		this.textureLoader.setCrossOrigin( this.options.crossOrigin );
 
 		this.fileLoader = new THREE.FileLoader( this.options.manager );
 		this.fileLoader.setResponseType( 'arraybuffer' );
@@ -1838,6 +1840,7 @@ THREE.GLTFLoader = ( function () {
 		var parser = this;
 		var json = this.json;
 		var options = this.options;
+		var useImageBitmap = this.useImageBitmap;
 		var textureLoader = this.textureLoader;
 
 		var URL = self.URL || self.webkitURL;
@@ -1892,7 +1895,19 @@ THREE.GLTFLoader = ( function () {
 
 			return new Promise( function ( resolve, reject ) {
 
-				loader.load( resolveURL( sourceURI, options.path ), resolve, undefined, reject );
+				let onLoad = resolve;
+
+				if ( useImageBitmap ) {
+
+					onLoad = function ( imageBitmap ) {
+
+						resolve( new THREE.CanvasTexture( imageBitmap ) );
+
+					};
+
+				}
+
+				loader.load( resolveURL( sourceURI, options.path ), onLoad, undefined, reject );
 
 			} );
 

diff --git a/examples/jsm/loaders/GLTFLoader.js b/examples/jsm/loaders/GLTFLoader.js
@@ -12,6 +12,7 @@ import {
 	Box3,
 	BufferAttribute,
 	BufferGeometry,
+	CanvasTexture,
 	ClampToEdgeWrapping,
 	Color,
 	DirectionalLight,
@@ -1477,14 +1478,16 @@ var GLTFLoader = ( function () {
 		// BufferGeometry caching
 		this.primitiveCache = {};
 
-		this.textureLoader = new TextureLoader( this.options.manager );
-		this.textureLoader.setCrossOrigin( this.options.crossOrigin );
+		this.useImageBitmap = typeof createImageBitmap !== 'undefined';
 
 		// Use an ImageBitmapLoader if imageBitmaps are supported. Moves much of the
 		// expensive work of uploading a texture to the GPU off the main thread.
-		if ( typeof createImageBitmap !== 'undefined' ) {
-			this.textureLoader.setImageLoader( new ImageBitmapLoader( this.options.manager ) );
+		if ( this.useImageBitmap ) {
+			this.textureLoader = new ImageBitmapLoader( this.options.manager );
+		} else {
+			this.textureLoader = new TextureLoader( this.options.manager );
 		}
+		this.textureLoader.setCrossOrigin( this.options.crossOrigin );
 
 		this.fileLoader = new FileLoader( this.options.manager );
 		this.fileLoader.setResponseType( 'arraybuffer' );
@@ -1902,6 +1905,7 @@ var GLTFLoader = ( function () {
 		var parser = this;
 		var json = this.json;
 		var options = this.options;
+		var useImageBitmap = this.useImageBitmap;
 		var textureLoader = this.textureLoader;
 
 		var URL = self.URL || self.webkitURL;
@@ -1956,7 +1960,19 @@ var GLTFLoader = ( function () {
 
 			return new Promise( function ( resolve, reject ) {
 
-				loader.load( resolveURL( sourceURI, options.path ), resolve, undefined, reject );
+				let onLoad = resolve;
+
+				if ( useImageBitmap ) {
+
+					onLoad = function ( imageBitmap ) {
+
+						resolve( new CanvasTexture( imageBitmap ) );
+
+					};
+
+				}
+
+				loader.load( resolveURL( sourceURI, options.path ), onLoad, undefined, reject );
 
 			} );
 

diff --git a/src/loaders/TextureLoader.js b/src/loaders/TextureLoader.js
@@ -11,8 +11,6 @@ function TextureLoader( manager ) {
 
 	Loader.call( this, manager );
 
-	this.imageLoader = null;
-
 }
 
 TextureLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
@@ -23,13 +21,7 @@ TextureLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		const texture = new Texture();
 
-		if ( ! this.imageLoader ) {
-
-			this.imageLoader = new ImageLoader( this.manager );
-
-		}
-
-		const loader = this.imageLoader;
+		const loader = new ImageLoader( this.manager );
 		loader.setCrossOrigin( this.crossOrigin );
 		loader.setPath( this.path );
 
@@ -55,13 +47,6 @@ TextureLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 	},
 
-	setImageLoader: function ( imageLoader ) {
-
-		this.imageLoader = imageLoader;
-		return this;
-
-	}
-
 } );