super-three 0.152.0 → 0.154.1

package/examples/jsm/renderers/webgpu/{WebGPUTextures.js → utils/WebGPUTextureUtils.js}

@@ -1,476 +1,451 @@
-import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension, GPUFeatureName } from './constants.js';
-import { VideoTexture, CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping, RGB_ETC2_Format, RGBA_ETC2_EAC_Format,
-	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace, DepthFormat, DepthStencilFormat, DepthTexture,
+import {
+	GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension, GPUFeatureName
+} from './WebGPUConstants.js';
+
+import {
+	CubeTexture, Texture,
+	NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter,
+	RepeatWrapping, MirroredRepeatWrapping,
+	RGB_ETC2_Format, RGBA_ETC2_EAC_Format,
+	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace, DepthFormat, DepthStencilFormat,
 	RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format,
-	RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, UnsignedIntType, UnsignedShortType, UnsignedInt248Type
+	RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, UnsignedIntType, UnsignedShortType, UnsignedInt248Type,
+	NeverCompare, AlwaysCompare, LessCompare, LessEqualCompare, EqualCompare, GreaterEqualCompare, GreaterCompare, NotEqualCompare
 } from 'three';
-import WebGPUTextureUtils from './WebGPUTextureUtils.js';
 
-class WebGPUTextures {
+import { CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
 
-	constructor( device, properties, info ) {
+import WebGPUTextureMipmapUtils from './WebGPUTextureMipmapUtils.js';
 
-		this.device = device;
-		this.properties = properties;
-		this.info = info;
+const _compareToWebGPU = {
+	[ NeverCompare ]: 'never',
+	[ AlwaysCompare ]: 'less',
+	[ LessCompare ]: 'equal',
+	[ LessEqualCompare ]: 'less-equal',
+	[ EqualCompare ]: 'greater',
+	[ GreaterEqualCompare ]: 'not-equal',
+	[ GreaterCompare ]: 'greater-equal',
+	[ NotEqualCompare ]: 'always'
+};
 
-		this.defaultTexture = null;
-		this.depthDefaultTexture = null;
-		this.defaultVideoTexture = null;
-		this.defaultCubeTexture = null;
-		this.defaultSampler = null;
-
-		this.samplerCache = new Map();
-		this.utils = null;
-
-	}
-
-	getDefaultSampler() {
+class WebGPUTextureUtils {
 
-		if ( this.defaultSampler === null ) {
+	constructor( backend ) {
 
-			this.defaultSampler = this.device.createSampler( {} );
+		this.backend = backend;
 
-		}
+		this.mipmapUtils = null;
 
-		return this.defaultSampler;
+		this.defaultTexture = null;
+		this.defaultCubeTexture = null;
 
 	}
 
-	getDefaultDepthTexture() {
-
-		if ( this.depthDefaultTexture === null ) {
-
-			const depthTexture = new DepthTexture();
-			depthTexture.image.width = 1;
-			depthTexture.image.height = 1;
-
-			this._uploadTexture( depthTexture );
-
-			this.depthDefaultTexture = this.getTextureGPU( depthTexture );
-
-		}
-
-		return this.depthDefaultTexture;
-
-	}
+	createSampler( texture ) {
 
-	getDefaultTexture() {
+		const backend = this.backend;
+		const device = backend.device;
 
-		if ( this.defaultTexture === null ) {
+		const textureGPU = backend.get( texture );
 
-			const texture = new Texture();
-			texture.minFilter = NearestFilter;
-			texture.magFilter = NearestFilter;
+		const samplerDescriptorGPU = {
+			addressModeU: this._convertAddressMode( texture.wrapS ),
+			addressModeV: this._convertAddressMode( texture.wrapT ),
+			addressModeW: this._convertAddressMode( texture.wrapR ),
+			magFilter: this._convertFilterMode( texture.magFilter ),
+			minFilter: this._convertFilterMode( texture.minFilter ),
+			mipmapFilter: this._convertFilterMode( texture.minFilter ),
+			maxAnisotropy: texture.anisotropy
+		};
 
-			this._uploadTexture( texture );
+		if ( texture.isDepthTexture && texture.compareFunction !== null ) {
 
-			this.defaultTexture = this.getTextureGPU( texture );
+			samplerDescriptorGPU.compare = _compareToWebGPU[ texture.compareFunction ];
 
 		}
 
-		return this.defaultTexture;
+		textureGPU.sampler = device.createSampler( samplerDescriptorGPU );
 
 	}
 
-	getDefaultVideoTexture() {
+	createDefaultTexture( texture ) {
 
-		if ( this.defaultVideoTexture === null ) {
+		let textureGPU;
 
-			const video = document.getElementById( 'video' );
+		if ( texture.isCubeTexture ) {
 
-			const texture = new VideoTexture( video );
-			texture.minFilter = NearestFilter;
-			texture.magFilter = NearestFilter;
+			textureGPU = this._getDefaultCubeTextureGPU();
 
-			this._uploadVideoTexture( texture );
+		} else {
 
-			this.defaultVideoTexture = this.getTextureGPU( texture );
+			textureGPU = this._getDefaultTextureGPU();
 
 		}
 
-		return this.defaultVideoTexture;
+		this.backend.get( texture ).texture = textureGPU;
 
 	}
 
-	getDefaultCubeTexture() {
-
-		if ( this.defaultCubeTexture === null ) {
+	createTexture( texture, options = {} ) {
 
-			const texture = new CubeTexture();
-			texture.minFilter = NearestFilter;
-			texture.magFilter = NearestFilter;
+		const backend = this.backend;
+		const textureData = backend.get( texture );
 
-			this._uploadTexture( texture );
+		if ( textureData.initialized ) {
 
-			this.defaultCubeTexture = this.getTextureGPU( texture );
+			throw new Error( 'WebGPUTextureUtils: Texture already initialized.' );
 
 		}
 
-		return this.defaultCubeTexture;
+		const { width, height, depth } = this._getSize( texture );
 
-	}
+		const needsMipmaps = this._needsMipmaps( texture );
+		const dimension = this._getDimension( texture );
+		const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
+		const format = texture.internalFormat || this._getFormat( texture );
+		//const sampleCount = texture.isRenderTargetTexture || texture.isDepthTexture ? backend.utils.getSampleCount( renderContext ) : 1;
+		const sampleCount = options.sampleCount !== undefined ? options.sampleCount : 1;
 
-	getTextureGPU( texture ) {
+		let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC;
 
-		const textureProperties = this.properties.get( texture );
+		if ( texture.isCompressedTexture !== true ) {
 
-		return textureProperties.textureGPU;
+			usage |= GPUTextureUsage.RENDER_ATTACHMENT;
 
-	}
+		}
 
-	getSampler( texture ) {
+		const textureDescriptorGPU = {
+			label: texture.name,
+			size: {
+				width: width,
+				height: height,
+				depthOrArrayLayers: depth,
+			},
+			mipLevelCount: mipLevelCount,
+			sampleCount: sampleCount,
+			dimension: dimension,
+			format: format,
+			usage: usage
+		};
 
-		const textureProperties = this.properties.get( texture );
+		// texture creation
 
-		return textureProperties.samplerGPU;
+		if ( texture.isVideoTexture ) {
 
-	}
+			const video = texture.source.data;
+			const videoFrame = new VideoFrame( video );
 
-	updateTexture( texture ) {
+			textureDescriptorGPU.size.width = videoFrame.displayWidth;
+			textureDescriptorGPU.size.height = videoFrame.displayHeight;
 
-		let needsUpdate = false;
+			videoFrame.close();
 
-		const textureProperties = this.properties.get( texture );
+			textureData.externalTexture = video;
 
-		if ( texture.version > 0 && textureProperties.version !== texture.version ) {
+		} else {
 
-			const image = texture.image;
+			textureData.texture = backend.device.createTexture( textureDescriptorGPU );
 
-			if ( image === undefined ) {
+		}
 
-				console.warn( 'THREE.WebGPURenderer: Texture marked for update but image is undefined.' );
+		textureData.initialized = true;
 
-			} else if ( image.complete === false ) {
+		textureData.needsMipmaps = needsMipmaps;
+		textureData.textureDescriptorGPU = textureDescriptorGPU;
 
-				console.warn( 'THREE.WebGPURenderer: Texture marked for update but image is incomplete.' );
+	}
 
-			} else {
+	destroyTexture( texture ) {
 
-				// texture init
+		const backend = this.backend;
+		const textureData = backend.get( texture );
 
-				if ( textureProperties.initialized === undefined ) {
+		textureData.texture.destroy();
 
-					textureProperties.initialized = true;
+		backend.delete( texture );
 
-					const disposeCallback = onTextureDispose.bind( this );
-					textureProperties.disposeCallback = disposeCallback;
+	}
 
-					texture.addEventListener( 'dispose', disposeCallback );
+	destroySampler( texture ) {
 
-					this.info.memory.textures ++;
+		const backend = this.backend;
+		const textureData = backend.get( texture );
 
-				}
+		delete textureData.sampler;
 
-				//
+	}
 
-				if ( texture.isVideoTexture ) {
+	generateMipmaps( texture ) {
 
-					needsUpdate = this._uploadVideoTexture( texture );
+		const textureData = this.backend.get( texture );
 
-				} else {
+		if ( texture.isCubeTexture ) {
 
-					needsUpdate = this._uploadTexture( texture );
+			for ( let i = 0; i < 6; i ++ ) {
 
-				}
+				this._generateMipmaps( textureData.texture, textureData.textureDescriptorGPU, i );
 
 			}
 
-		}
-
-		// if the texture is used for RTT, it's necessary to init it once so the binding
-		// group's resource definition points to the respective GPUTexture
-
-		if ( textureProperties.initializedRTT === false ) {
+		} else {
 
-			textureProperties.initializedRTT = true;
-			needsUpdate = true;
+			this._generateMipmaps( textureData.texture, textureData.textureDescriptorGPU );
 
 		}
 
-		return needsUpdate;
-
 	}
 
-	updateSampler( texture ) {
+	updateTexture( texture ) {
 
-		const array = [];
+		const textureData = this.backend.get( texture );
 
-		array.push( texture.wrapS );
-		array.push( texture.wrapT );
-		array.push( texture.wrapR );
-		array.push( texture.magFilter );
-		array.push( texture.minFilter );
-		array.push( texture.anisotropy );
+		const { needsMipmaps, textureDescriptorGPU } = textureData;
 
-		const key = array.join();
-		let samplerGPU = this.samplerCache.get( key );
+		// transfer texture data
 
-		if ( samplerGPU === undefined ) {
+		if ( texture.isDataTexture || texture.isDataArrayTexture || texture.isData3DTexture ) {
 
-			samplerGPU = this.device.createSampler( {
-				addressModeU: this._convertAddressMode( texture.wrapS ),
-				addressModeV: this._convertAddressMode( texture.wrapT ),
-				addressModeW: this._convertAddressMode( texture.wrapR ),
-				magFilter: this._convertFilterMode( texture.magFilter ),
-				minFilter: this._convertFilterMode( texture.minFilter ),
-				mipmapFilter: this._convertFilterMode( texture.minFilter ),
-				maxAnisotropy: texture.anisotropy
-			} );
+			this._copyBufferToTexture( texture.image, textureData.texture, textureDescriptorGPU, needsMipmaps );
 
-			this.samplerCache.set( key, samplerGPU );
+		} else if ( texture.isCompressedTexture ) {
 
-		}
+			this._copyCompressedBufferToTexture( texture.mipmaps, textureData.texture, textureDescriptorGPU );
 
-		const textureProperties = this.properties.get( texture );
-		textureProperties.samplerGPU = samplerGPU;
+		} else if ( texture.isCubeTexture ) {
 
-	}
+			if ( texture.image.length === 6 ) {
 
-	initRenderTarget( renderTarget ) {
+				this._copyCubeMapToTexture( texture.image, texture, textureData.texture, textureDescriptorGPU, needsMipmaps );
 
-		const properties = this.properties;
-		const renderTargetProperties = properties.get( renderTarget );
+			}
 
-		if ( renderTargetProperties.initialized === undefined ) {
+		} else if ( texture.isRenderTargetTexture ) {
 
-			const device = this.device;
+			if ( needsMipmaps === true ) this._generateMipmaps( textureData.texture, textureDescriptorGPU );
 
-			const width = renderTarget.width;
-			const height = renderTarget.height;
+		} else if ( texture.isVideoTexture ) {
 
-			const texture = renderTarget.texture;
+			const video = texture.source.data;
 
-			const colorTextureFormat = texture.internalFormat || this._getFormat( texture );
-			const label = texture.name ? '_' + texture.name : '';
-			const needsMipmaps = this._needsMipmaps( texture );
-			const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
+			textureData.externalTexture = video;
 
-			const colorTextureGPU = device.createTexture( {
-				label: 'renderTarget' + label,
-				size: {
-					width: width,
-					height: height,
-					depthOrArrayLayers: 1
-				},
-				mipLevelCount: mipLevelCount,
-				format: colorTextureFormat,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
-			} );
+		} else if ( texture.image !== null ) {
 
-			this.info.memory.textures ++;
+			this._copyImageToTexture( texture.image, texture, textureData.texture, textureDescriptorGPU, needsMipmaps );
 
-			renderTargetProperties.colorTextureGPU = colorTextureGPU;
-			renderTargetProperties.colorTextureFormat = colorTextureFormat;
+		} else {
 
-			// When the ".texture" or ".depthTexture" property of a render target is used as a map,
-			// the renderer has to find the respective GPUTexture objects to setup the bind groups.
-			// Since it's not possible to see just from a texture object whether it belongs to a render
-			// target or not, we need the initializedRTT flag.
+			console.warn( 'WebGPUTextureUtils: Unable to update texture.' );
 
-			const textureProperties = properties.get( texture );
-			textureProperties.textureGPU = colorTextureGPU;
-			textureProperties.initializedRTT = false;
+		}
 
-			if ( renderTarget.depthBuffer === true ) {
+		//
 
-				const depthTextureFormat = renderTarget.depthTexture !== null ? this._getFormat( renderTarget.depthTexture ) : GPUTextureFormat.Depth24PlusStencil8;
+		textureData.version = texture.version;
 
-				const depthTextureGPU = device.createTexture( {
-					label: 'renderTarget' + label + '_depthBuffer',
-					size: {
-						width: width,
-						height: height,
-						depthOrArrayLayers: 1
-					},
-					format: depthTextureFormat,
-					usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
-				} );
+	}
 
-				this.info.memory.textures ++;
+	async copyTextureToBuffer( texture, x, y, width, height ) {
 
-				renderTargetProperties.depthTextureGPU = depthTextureGPU;
-				renderTargetProperties.depthTextureFormat = depthTextureFormat;
+		const device = this.backend.device;
 
-				if ( renderTarget.depthTexture !== null ) {
+		const textureData = this.backend.get( texture );
+		const textureGPU = textureData.texture;
+		const format = textureData.textureDescriptorGPU.format;
+		const bytesPerTexel = this._getBytesPerTexel( format );
 
-					const depthTextureProperties = properties.get( renderTarget.depthTexture );
-					depthTextureProperties.textureGPU = depthTextureGPU;
-					depthTextureProperties.initializedRTT = false;
+		const readBuffer = device.createBuffer(
+			{
+				size: width * height * bytesPerTexel,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			}
+		);
 
-				}
+		const encoder = device.createCommandEncoder();
 
+		encoder.copyTextureToBuffer(
+			{
+				texture: textureGPU,
+				origin: { x, y },
+			},
+			{
+				buffer: readBuffer,
+				bytesPerRow: width * bytesPerTexel
+			},
+			{
+				width: width,
+				height: height
 			}
 
-			//
+		);
 
-			const disposeCallback = onRenderTargetDispose.bind( this );
-			renderTargetProperties.disposeCallback = disposeCallback;
+		const typedArrayType = this._getTypedArrayType( format );
 
-			renderTarget.addEventListener( 'dispose', disposeCallback );
+		device.queue.submit( [ encoder.finish() ] );
 
-			//
+		await readBuffer.mapAsync( GPUMapMode.READ );
 
-			renderTargetProperties.initialized = true;
+		const buffer = readBuffer.getMappedRange();
 
-		}
+		return new typedArrayType( buffer );
 
 	}
 
-	dispose() {
+	_isEnvironmentTexture( texture ) {
+
+		const mapping = texture.mapping;
 
-		this.samplerCache.clear();
+		return ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ) || ( mapping === CubeReflectionMapping || mapping === CubeRefractionMapping );
 
 	}
 
-	_convertAddressMode( value ) {
+	_getDefaultTextureGPU() {
 
-		let addressMode = GPUAddressMode.ClampToEdge;
+		let defaultTexture = this.defaultTexture;
 
-		if ( value === RepeatWrapping ) {
+		if ( defaultTexture === null ) {
 
-			addressMode = GPUAddressMode.Repeat;
+			const texture = new Texture();
+			texture.minFilter = NearestFilter;
+			texture.magFilter = NearestFilter;
 
-		} else if ( value === MirroredRepeatWrapping ) {
+			this.createTexture( texture );
 
-			addressMode = GPUAddressMode.MirrorRepeat;
+			this.defaultTexture = defaultTexture = texture;
 
 		}
 
-		return addressMode;
+		return this.backend.get( defaultTexture ).texture;
 
 	}
 
-	_convertFilterMode( value ) {
+	_getDefaultCubeTextureGPU() {
 
-		let filterMode = GPUFilterMode.Linear;
+		let defaultCubeTexture = this.defaultTexture;
 
-		if ( value === NearestFilter || value === NearestMipmapNearestFilter || value === NearestMipmapLinearFilter ) {
+		if ( defaultCubeTexture === null ) {
 
-			filterMode = GPUFilterMode.Nearest;
+			const texture = new CubeTexture();
+			texture.minFilter = NearestFilter;
+			texture.magFilter = NearestFilter;
 
-		}
+			this.createTexture( texture );
 
-		return filterMode;
+			this.defaultCubeTexture = defaultCubeTexture = texture;
 
-	}
+		}
 
-	_uploadVideoTexture( texture ) {
+		return this.backend.get( defaultCubeTexture ).texture;
 
-		const device = this.device;
+	}
 
-		const textureProperties = this.properties.get( texture );
+	_copyImageToTexture( image, texture, textureGPU, textureDescriptorGPU, needsMipmaps, originDepth ) {
 
-		const textureGPU = device.importExternalTexture( {
-			source: texture.source.data
-		} );
+		if ( this._isHTMLImage( image ) ) {
 
-		textureProperties.textureGPU = textureGPU;
-		//textureProperties.version = texture.version; // @TODO: Force update for now, study a better solution soon using native VideoTexture.update() to fix warns
+			this._getImageBitmapFromHTML( image, texture ).then( imageBitmap => {
 
-		return true;
+				this._copyExternalImageToTexture( imageBitmap, textureGPU, textureDescriptorGPU, needsMipmaps, originDepth );
 
-	}
+			} );
 
-	_uploadTexture( texture ) {
+		} else {
 
-		let needsUpdate = false;
+			// assume ImageBitmap
 
-		const device = this.device;
-		const image = texture.image;
+			this._copyExternalImageToTexture( image, textureGPU, textureDescriptorGPU, needsMipmaps, originDepth );
 
-		const textureProperties = this.properties.get( texture );
+		}
 
-		const { width, height, depth } = this._getSize( texture );
-		const needsMipmaps = this._needsMipmaps( texture );
-		const dimension = this._getDimension( texture );
-		const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
-		const format = texture.internalFormat || this._getFormat( texture );
+	}
 
-		let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+	_isHTMLImage( image ) {
 
-		if ( needsMipmaps ) {
+		return ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) || ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement );
 
-			// current mipmap generation requires RENDER_ATTACHMENT
+	}
 
-			usage |= GPUTextureUsage.RENDER_ATTACHMENT;
+	_copyCubeMapToTexture( images, texture, textureGPU, textureDescriptorGPU, needsMipmaps ) {
 
-		}
+		for ( let i = 0; i < 6; i ++ ) {
 
-		const textureGPUDescriptor = {
-			label: texture.name,
-			size: {
-				width: width,
-				height: height,
-				depthOrArrayLayers: depth,
-			},
-			mipLevelCount: mipLevelCount,
-			sampleCount: 1,
-			dimension: dimension,
-			format: format,
-			usage: usage
-		};
+			const image = images[ i ];
 
-		// texture creation
+			if ( image.isDataTexture ) {
 
-		let textureGPU = textureProperties.textureGPU;
+				this._copyBufferToTexture( image.image, textureGPU, textureDescriptorGPU, needsMipmaps, i );
 
-		if ( textureGPU === undefined ) {
+			} else {
 
-			textureGPU = device.createTexture( textureGPUDescriptor );
+				this._copyImageToTexture( image, texture, textureGPU, textureDescriptorGPU, needsMipmaps, i );
 
-			needsUpdate = true;
+			}
 
 		}
 
-		// transfer texture data
+	}
 
-		if ( texture.isDataTexture || texture.isDataArrayTexture || texture.isData3DTexture ) {
+	_copyExternalImageToTexture( image, textureGPU, textureDescriptorGPU, needsMipmaps, originDepth = 0 ) {
 
-			this._copyBufferToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps );
+		const device = this.backend.device;
 
-		} else if ( texture.isCompressedTexture ) {
+		device.queue.copyExternalImageToTexture(
+			{
+				source: image
+			}, {
+				texture: textureGPU,
+				mipLevel: 0,
+				origin: { x: 0, y: 0, z: originDepth }
+			}, {
+				width: image.width,
+				height: image.height,
+				depthOrArrayLayers: 1
+			}
+		);
 
-			this._copyCompressedBufferToTexture( texture.mipmaps, textureGPU, textureGPUDescriptor );
+		if ( needsMipmaps ) this._generateMipmaps( textureGPU, textureDescriptorGPU, originDepth );
 
-		} else if ( texture.isCubeTexture ) {
+	}
 
-			if ( image.length === 6 ) {
+	_generateMipmaps( textureGPU, textureDescriptorGPU, baseArrayLayer = 0 ) {
 
-				this._copyCubeMapToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps );
+		if ( this.mipmapUtils === null ) {
 
-			}
+			this.mipmapUtils = new WebGPUTextureMipmapUtils( this.backend.device );
 
-		} else if ( texture.isRenderTargetTexture ) {
+		}
 
-			if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor );
+		this.mipmapUtils.generateMipmaps( textureGPU, textureDescriptorGPU, baseArrayLayer );
 
-		} else if ( texture.isDepthTexture !== true && image !== null ) {
+	}
 
-			this._copyImageToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps );
+	_getImageBitmapFromHTML( image, texture ) {
 
-		}
+		const width = image.width;
+		const height = image.height;
 
-		//
+		const options = {};
 
-		textureProperties.textureGPU = textureGPU;
-		textureProperties.version = texture.version;
+		options.imageOrientation = ( texture.flipY === true ) ? 'flipY' : 'none';
+		options.premultiplyAlpha = ( texture.premultiplyAlpha === true ) ? 'premultiply' : 'default';
 
-		return needsUpdate;
+		return createImageBitmap( image, 0, 0, width, height, options );
 
 	}
 
-	_copyBufferToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth = 0 ) {
+	_copyBufferToTexture( image, textureGPU, textureDescriptorGPU, needsMipmaps, originDepth = 0 ) {
 
 		// @TODO: Consider to use GPUCommandEncoder.copyBufferToTexture()
 		// @TODO: Consider to support valid buffer layouts with other formats like RGB
 
+		const device = this.backend.device;
+
 		const data = image.data;
 
-		const bytesPerTexel = this._getBytesPerTexel( textureGPUDescriptor.format );
+		const bytesPerTexel = this._getBytesPerTexel( textureDescriptorGPU.format );
 		const bytesPerRow = image.width * bytesPerTexel;
 
-		this.device.queue.writeTexture(
+		device.queue.writeTexture(
 			{
 				texture: textureGPU,
 				mipLevel: 0,
@@ -487,55 +462,17 @@ class WebGPUTextures {
 				depthOrArrayLayers: ( image.depth !== undefined ) ? image.depth : 1
 			} );
 
-		if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor, originDepth );
-
-	}
-
-	_copyCubeMapToTexture( images, texture, textureGPU, textureGPUDescriptor, needsMipmaps ) {
-
-		for ( let i = 0; i < 6; i ++ ) {
-
-			const image = images[ i ];
-
-			if ( image.isDataTexture ) {
-
-				this._copyBufferToTexture( image.image, textureGPU, textureGPUDescriptor, needsMipmaps, i );
-
-			} else {
-
-				this._copyImageToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps, i );
-
-			}
-
-		}
-
-	}
-
-	_copyExternalImageToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth = 0 ) {
-
-		this.device.queue.copyExternalImageToTexture(
-			{
-				source: image
-			}, {
-				texture: textureGPU,
-				mipLevel: 0,
-				origin: { x: 0, y: 0, z: originDepth }
-			}, {
-				width: image.width,
-				height: image.height,
-				depthOrArrayLayers: 1
-			}
-		);
-
-		if ( needsMipmaps ) this._generateMipmaps( textureGPU, textureGPUDescriptor, originDepth );
+		if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureDescriptorGPU, originDepth );
 
 	}
 
-	_copyCompressedBufferToTexture( mipmaps, textureGPU, textureGPUDescriptor ) {
+	_copyCompressedBufferToTexture( mipmaps, textureGPU, textureDescriptorGPU ) {
 
 		// @TODO: Consider to use GPUCommandEncoder.copyBufferToTexture()
 
-		const blockData = this._getBlockData( textureGPUDescriptor.format );
+		const device = this.backend.device;
+
+		const blockData = this._getBlockData( textureDescriptorGPU.format );
 
 		for ( let i = 0; i < mipmaps.length; i ++ ) {
 
@@ -546,7 +483,7 @@ class WebGPUTextures {
 
 			const bytesPerRow = Math.ceil( width / blockData.width ) * blockData.byteLength;
 
-			this.device.queue.writeTexture(
+			device.queue.writeTexture(
 				{
 					texture: textureGPU,
 					mipLevel: i
@@ -567,18 +504,6 @@ class WebGPUTextures {
 
 	}
 
-	_generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer ) {
-
-		if ( this.utils === null ) {
-
-			this.utils = new WebGPUTextureUtils( this.device ); // only create this helper if necessary
-
-		}
-
-		this.utils.generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer );
-
-	}
-
 	_getBlockData( format ) {
 
 		// this method is only relevant for compressed texture formats
@@ -616,6 +541,76 @@ class WebGPUTextures {
 
 	}
 
+	_convertAddressMode( value ) {
+
+		let addressMode = GPUAddressMode.ClampToEdge;
+
+		if ( value === RepeatWrapping ) {
+
+			addressMode = GPUAddressMode.Repeat;
+
+		} else if ( value === MirroredRepeatWrapping ) {
+
+			addressMode = GPUAddressMode.MirrorRepeat;
+
+		}
+
+		return addressMode;
+
+	}
+
+	_convertFilterMode( value ) {
+
+		let filterMode = GPUFilterMode.Linear;
+
+		if ( value === NearestFilter || value === NearestMipmapNearestFilter || value === NearestMipmapLinearFilter ) {
+
+			filterMode = GPUFilterMode.Nearest;
+
+		}
+
+		return filterMode;
+
+	}
+
+	_getSize( texture ) {
+
+		const image = texture.image;
+
+		let width, height, depth;
+
+		if ( texture.isCubeTexture ) {
+
+			const faceImage = image.length > 0 ? image[ 0 ].image || image[ 0 ] : null;
+
+			width = faceImage ? faceImage.width : 1;
+			height = faceImage ? faceImage.height : 1;
+			depth = 6; // one image for each side of the cube map
+
+		} else if ( image !== null ) {
+
+			width = image.width;
+			height = image.height;
+			depth = ( image.depth !== undefined ) ? image.depth : 1;
+
+		} else {
+
+			width = height = depth = 1;
+
+		}
+
+		return { width, height, depth };
+
+	}
+
+	_needsMipmaps( texture ) {
+
+		if ( this._isEnvironmentTexture( texture ) ) return true;
+
+		return ( texture.isCompressedTexture !== true ) /*&& ( texture.generateMipmaps === true )*/ && ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter );
+
+	}
+
 	_getBytesPerTexel( format ) {
 
 		if ( format === GPUTextureFormat.R8Unorm ) return 1;
@@ -630,6 +625,42 @@ class WebGPUTextures {
 
 	}
 
+	_getTypedArrayType( format ) {
+
+		if ( format === GPUTextureFormat.R8Uint ) return Uint8Array;
+		if ( format === GPUTextureFormat.R8Sint ) return Int8Array;
+		if ( format === GPUTextureFormat.R8Unorm ) return Uint8Array;
+		if ( format === GPUTextureFormat.R8Snorm ) return Int8Array;
+		if ( format === GPUTextureFormat.RG8Uint ) return Uint8Array;
+		if ( format === GPUTextureFormat.RG8Sint ) return Int8Array;
+		if ( format === GPUTextureFormat.RG8Unorm ) return Uint8Array;
+		if ( format === GPUTextureFormat.RG8Snorm ) return Int8Array;
+		if ( format === GPUTextureFormat.RGBA8Uint ) return Uint8Array;
+		if ( format === GPUTextureFormat.RGBA8Sint ) return Int8Array;
+		if ( format === GPUTextureFormat.RGBA8Unorm ) return Uint8Array;
+		if ( format === GPUTextureFormat.RGBA8Snorm ) return Int8Array;
+
+
+		if ( format === GPUTextureFormat.R16Uint ) return Uint16Array;
+		if ( format === GPUTextureFormat.R16Sint ) return Int16Array;
+		if ( format === GPUTextureFormat.RG16Uint ) return Uint16Array;
+		if ( format === GPUTextureFormat.RG16Sint ) return Int16Array;
+		if ( format === GPUTextureFormat.RGBA16Uint ) return Uint16Array;
+		if ( format === GPUTextureFormat.RGBA16Sint ) return Int16Array;
+
+
+		if ( format === GPUTextureFormat.R32Uint ) return Uint32Array;
+		if ( format === GPUTextureFormat.R32Sint ) return Int32Array;
+		if ( format === GPUTextureFormat.R32Float ) return Float32Array;
+		if ( format === GPUTextureFormat.RG32Uint ) return Uint32Array;
+		if ( format === GPUTextureFormat.RG32Sint ) return Int32Array;
+		if ( format === GPUTextureFormat.RG32Float ) return Float32Array;
+		if ( format === GPUTextureFormat.RGBA32Uint ) return Uint32Array;
+		if ( format === GPUTextureFormat.RGBA32Sint ) return Int32Array;
+		if ( format === GPUTextureFormat.RGBA32Float ) return Float32Array;
+
+	}
+
 	_getDimension( texture ) {
 
 		let dimension;
@@ -648,6 +679,28 @@ class WebGPUTextures {
 
 	}
 
+	_getMipLevelCount( texture, width, height, needsMipmaps ) {
+
+		let mipLevelCount;
+
+		if ( texture.isCompressedTexture ) {
+
+			mipLevelCount = texture.mipmaps.length;
+
+		} else if ( needsMipmaps ) {
+
+			mipLevelCount = Math.floor( Math.log2( Math.max( width, height ) ) ) + 1;
+
+		} else {
+
+			mipLevelCount = 1; // a texture without mipmaps has a base mip (mipLevel 0)
+
+		}
+
+		return mipLevelCount;
+
+	}
+
 	_getFormat( texture ) {
 
 		const format = texture.format;
@@ -656,7 +709,11 @@ class WebGPUTextures {
 
 		let formatGPU;
 
-		if ( texture.isCompressedTexture === true ) {
+		if ( /*texture.isRenderTargetTexture === true ||*/ texture.isFramebufferTexture === true ) {
+
+			formatGPU = GPUTextureFormat.BGRA8Unorm;
+
+		} else if ( texture.isCompressedTexture === true ) {
 
 			switch ( format ) {
 
@@ -875,176 +932,6 @@ class WebGPUTextures {
 
 	}
 
-	_isHTMLImage( image ) {
-
-		return ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) || ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement );
-
-	}
-
-	_copyImageToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth ) {
-
-		if ( this._isHTMLImage( image ) ) {
-
-			this._getImageBitmapFromHTML( image, texture ).then( imageBitmap => {
-
-				this._copyExternalImageToTexture( imageBitmap, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth );
-
-			} );
-
-		} else {
-
-			// assume ImageBitmap
-
-			this._copyExternalImageToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth );
-
-		}
-
-	}
-
-	_getImageBitmapFromHTML( image, texture ) {
-
-		const width = image.width;
-		const height = image.height;
-
-		const options = {};
-
-		options.imageOrientation = ( texture.flipY === true ) ? 'flipY' : 'none';
-		options.premultiplyAlpha = ( texture.premultiplyAlpha === true ) ? 'premultiply' : 'default';
-
-		return createImageBitmap( image, 0, 0, width, height, options );
-
-	}
-
-	_getImageBitmap( image, texture ) {
-
-		const width = image.width;
-		const height = image.height;
-
-		if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
-			( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ) {
-
-			const options = {};
-
-			options.imageOrientation = ( texture.flipY === true ) ? 'flipY' : 'none';
-			options.premultiplyAlpha = ( texture.premultiplyAlpha === true ) ? 'premultiply' : 'default';
-
-			return createImageBitmap( image, 0, 0, width, height, options );
-
-		} else {
-
-			// assume ImageBitmap
-
-			return Promise.resolve( image );
-
-		}
-
-	}
-
-	_getMipLevelCount( texture, width, height, needsMipmaps ) {
-
-		let mipLevelCount;
-
-		if ( texture.isCompressedTexture ) {
-
-			mipLevelCount = texture.mipmaps.length;
-
-		} else if ( needsMipmaps ) {
-
-			mipLevelCount = Math.floor( Math.log2( Math.max( width, height ) ) ) + 1;
-
-		} else {
-
-			mipLevelCount = 1; // a texture without mipmaps has a base mip (mipLevel 0)
-
-		}
-
-		return mipLevelCount;
-
-	}
-
-	_getSize( texture ) {
-
-		const image = texture.image;
-
-		let width, height, depth;
-
-		if ( texture.isCubeTexture ) {
-
-			const faceImage = image.length > 0 ? image[ 0 ].image || image[ 0 ] : null;
-
-			width = faceImage ? faceImage.width : 1;
-			height = faceImage ? faceImage.height : 1;
-			depth = 6; // one image for each side of the cube map
-
-		} else if ( image !== null ) {
-
-			width = image.width;
-			height = image.height;
-			depth = ( image.depth !== undefined ) ? image.depth : 1;
-
-		} else {
-
-			width = height = depth = 1;
-
-		}
-
-		return { width, height, depth };
-
-	}
-
-	_needsMipmaps( texture ) {
-
-		return ( texture.isCompressedTexture !== true ) && ( texture.generateMipmaps === true ) && ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter );
-
-	}
-
-}
-
-function onRenderTargetDispose( event ) {
-
-	const renderTarget = event.target;
-	const properties = this.properties;
-
-	const renderTargetProperties = properties.get( renderTarget );
-
-	renderTarget.removeEventListener( 'dispose', renderTargetProperties.disposeCallback );
-
-	renderTargetProperties.colorTextureGPU.destroy();
-	properties.remove( renderTarget.texture );
-
-	this.info.memory.textures --;
-
-	if ( renderTarget.depthBuffer === true ) {
-
-		renderTargetProperties.depthTextureGPU.destroy();
-
-		this.info.memory.textures --;
-
-		if ( renderTarget.depthTexture !== null ) {
-
-			properties.remove( renderTarget.depthTexture );
-
-		}
-
-	}
-
-	properties.remove( renderTarget );
-
-}
-
-function onTextureDispose( event ) {
-
-	const texture = event.target;
-
-	const textureProperties = this.properties.get( texture );
-	textureProperties.textureGPU.destroy();
-
-	texture.removeEventListener( 'dispose', textureProperties.disposeCallback );
-
-	this.properties.remove( texture );
-
-	this.info.memory.textures --;
-
 }
 
-export default WebGPUTextures;
+export default WebGPUTextureUtils;