Prefer ImageBitmapLoader and dispose of textures after GPU upload

examples/js/loaders/GLTFLoader.js

@@ -1669,6 +1669,8 @@ THREE.GLTFLoader = ( function () {
 
 			onLoad( result );
 
+			parser.cache.removeAll();
+
 		} ).catch( onError );
 
 	};

src/geometries/PlaneGeometry.js

@@ -9,7 +9,7 @@ import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 
 // PlaneGeometry
 
-function PlaneGeometry( width, height, widthSegments, heightSegments ) {
+function PlaneGeometry( width, height, widthSegments, heightSegments, flipY ) {
 
 	Geometry.call( this );
 
@@ -19,7 +19,8 @@ function PlaneGeometry( width, height, widthSegments, heightSegments ) {
 		width: width,
 		height: height,
 		widthSegments: widthSegments,
-		heightSegments: heightSegments
+		heightSegments: heightSegments,
+		flipY
 	};
 
 	this.fromBufferGeometry( new PlaneBufferGeometry( width, height, widthSegments, heightSegments ) );
@@ -32,7 +33,7 @@ PlaneGeometry.prototype.constructor = PlaneGeometry;
 
 // PlaneBufferGeometry
 
-function PlaneBufferGeometry( width, height, widthSegments, heightSegments ) {
+function PlaneBufferGeometry( width, height, widthSegments, heightSegments, flipY = true ) {
 
 	BufferGeometry.call( this );
 
@@ -42,7 +43,8 @@ function PlaneBufferGeometry( width, height, widthSegments, heightSegments ) {
 		width: width,
 		height: height,
 		widthSegments: widthSegments,
-		heightSegments: heightSegments
+		heightSegments: heightSegments,
+		flipY: flipY
 	};
 
 	width = width || 1;
@@ -84,7 +86,11 @@ function PlaneBufferGeometry( width, height, widthSegments, heightSegments ) {
 			normals.push( 0, 0, 1 );
 
 			uvs.push( ix / gridX );
-			uvs.push( 1 - ( iy / gridY ) );
+			uvs.push(
+				flipY ?
+					1 - ( iy / gridY ) :
+					iy / gridY
+			);
 
 		}
 

src/loaders/TextureLoader.js

@@ -4,9 +4,11 @@
 
 import { RGBAFormat, RGBFormat } from '../constants.js';
 import { ImageLoader } from './ImageLoader.js';
+import { ImageBitmapLoader } from './ImageBitmapLoader.js';
 import { Texture } from '../textures/Texture.js';
 import { DefaultLoadingManager } from './LoadingManager.js';
 
+import { Cache } from './Cache.js';
 
 function TextureLoader( manager ) {
 
@@ -22,12 +24,27 @@ Object.assign( TextureLoader.prototype, {
 
 		var texture = new Texture();
 
-		var loader = new ImageLoader( this.manager );
+		var loader;
+		if ( window.createImageBitmap !== undefined ) {
+
+			loader = new ImageBitmapLoader( this.manager );
+			texture.flipY = false;
+
+		} else {
+
+			loader = new ImageLoader( this.manager );
+
+		}
+
 		loader.setCrossOrigin( this.crossOrigin );
 		loader.setPath( this.path );
 
+		const cacheKey = this.manager.resolveURL( url );
 		loader.load( url, function ( image ) {
 
+			// Image was just added to cache before this function gets called, disable caching by immediatly removing it
+			Cache.remove( cacheKey );
+
 			texture.image = image;
 
 			// JPEGs can't have an alpha channel, so memory can be saved by storing them as RGB.
@@ -36,6 +53,13 @@ Object.assign( TextureLoader.prototype, {
 			texture.format = isJPEG ? RGBFormat : RGBAFormat;
 			texture.needsUpdate = true;
 
+			texture.onUpdate = function () {
+
+				texture.image.close && texture.image.close();
+				delete texture.image;
+
+			};
+
 			if ( onLoad !== undefined ) {
 
 				onLoad( texture );

src/renderers/webgl/WebGLTextures.js

@@ -736,6 +736,16 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 			}
 
+			// if ( window.ImageBitmap && texture.image instanceof ImageBitmap ) {
+
+			// 	console.info( "upload texture", "ImageBitmap", texture.id );
+
+			// } else if ( texture.image instanceof HTMLImageElement ) {
+
+			// 	console.info( "upload texture", "HTMLImageElement", texture.id, texture.image.src );
+
+			// }
+
 		}
 
 		if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {