WebGPURenderer: Add copyTextureToTexture support

[RenaudRohlinger]

Related issue: #27859

Description

This PR add copyTextureToTexture support on both WebGPU and WebGL backend.

Live example:
https://raw.githack.com/renaudrohlinger/three.js/utsubo/feat/copytexturetotexture/examples/webgpu_materials_texture_partialupdate.html

This contribution is funded by Utsubo

/cc @Spiri0

[Spiri0]

This is impressive, thanks Renaud. The function was already available in WebGL. However, not in the backend but in three.js and three.module.js itself. But I'm particularly interested in the WebGPURenderer and I will study your extension carefully to get a better understanding.

[RenaudRohlinger]

@Spiri0 It was available in the WebGLRenderer but not in the WebGL Backend of the WebGPURenderer which is different. It is not possible to use a method of the WebGL Renderer from the WebGPU Renderer.

The WebGL Backend is a new backend fallback of the WebGPURenderer which allows you to seamlessly support your application even when WebGPU is not available (for example on Safari and Firefox).

[Spiri0]

For webgpu, only the two additions in

jsm/renderers/common/Renderer.js
jsm/renderers/webgpu/webGPUBackend.js

are necessary, right?
I use r162 and simply copied your extensions to the locations. Unfortunately when I try with renderer.copyTextureToTexture(new THREE.Vector2(0, 0), srcTexture, dstTexture); copying one texture into the other always gets this error message:

WebGPUBackend.js:1258  Uncaught (in promise) TypeError: Failed to execute 'copyTextureToTexture' on 'GPUCommandEncoder': Failed to read the 'texture' property from 'GPUImageCopyTexture': Required member is undefined.
at WebGPUBackend.copyTextureToTexture (WebGPUBackend.js:1258:11)
at WebGPURenderer.copyTextureToTexture (Renderer.js:986:16)

My test class init:

init() {

	const dstTextureInitArray = new Uint8Array(32 * 32 * 4).fill(0);
	this.dstTexture = new THREE.DataTexture(dstTextureInitArray, 32, 32);
	this.dstTexture.format = THREE.RGBAFormat,
	this.dstTexture.type = THREE.UnsignedByteType,
	this.dstTexture.wrapS = THREE.ClampToEdgeWrapping,
	this.dstTexture.wrapT = THREE.ClampToEdgeWrapping,
	this.dstTexture.minFilter = THREE.LinearFilter,
	this.dstTexture.magFilter = THREE.LinearFilter 
	this.dstTexture.generateMipmaps = false;
	this.dstTexture.needsUpdate = true;
	
	const srcTextureInitArray = new Uint8Array(2 * 2 * 4).fill(255);
	this.srcTexture = new THREE.DataTexture(srcTextureInitArray, 2, 2);
	this.srcTexture.format = THREE.RGBAFormat,
	this.srcTexture.type = THREE.UnsignedByteType,
	this.srcTexture.wrapS = THREE.ClampToEdgeWrapping,
	this.srcTexture.wrapT = THREE.ClampToEdgeWrapping,
	this.srcTexture.minFilter = THREE.LinearFilter,
	this.srcTexture.magFilter = THREE.LinearFilter  
	this.srcTexture.generateMipmaps = false;
	this.srcTexture.needsUpdate = true;		

	this.renderer.copyTextureToTexture(new THREE.Vector2(0, 0), this.srcTexture, this.dstTexture);
}

I have a timeout before I call it to be sure that everything is initialized. I'm probably missing something there 🤔

[RenaudRohlinger]

Since you are using 2 textures which are both never initialized in the texture management you probably need to also init the dstTexture on the GPU too via this._textures.updateTexture(dstTexture) in the Renderer @Spiri0.

Edit:
Yup that was the issue, just tested and it should be fixed with: 7012bb5

[Spiri0]

Ah, that's exactly it. I understand. Since I created both textures as data textures, the dstTexture was not yet in the GPU due to the missing update. Now it's working