"copyTextureToTexture" for webGPU

[Spiri0]

Description

In webGL I can insert a texture into another texture. This can be done in webGL with texSubImage2D. Three.js has a wrapper function for this called copyTextureToTexture().

In webGL:
renderer.copyTextureToTexture(new THREE.Vector2(x, y), srcTexture, targetTexture);

Interestingly, in webGPU the analogous function is called exactly the same as the three.js wrapper for the webGL variant.

In three.js WebGPUBackend.js the webGPU function is already used, but only within the wrapper copyFramebufferToTexture(). Or am I missing something?

Solution

In itself a simple point, please just make the webGPU function copyTextureToTexture available as such in an analog wrapper like in webGL.

In webGL available:
renderer.copyTextureToTexture(new THREE.Vector2(x, y), srcTexture, targetTexture);

My wish for webGPU:
renderer.copyTextureToTexture(new THREE.Vector2(x, y), srcTexture, targetTexture);

Alternatives

There is probably no alternative to this because it is a very specific functionality. But fortunately it is a simple topic

Additional context

I developed a virtual texture system in three.js. However, only for webGL and I would like to have that in webGPU too. Together with my CDLOD system, I could use it to create huge landscapes in a very resource-efficient way. Three.js rocks 🤩

[Spiri0]

I'm trying to better understand three.js at its core. Over time, there will be some WebGPU functions in three.js that will need to be implemented. And if I learn how three.js works, I can also actively support the project.
These are my thoughts so far. I don't yet understand how the renderContext works, but maybe this will help you developers a little with the implementation.

//In usercode

renderer.copyTextureToTexture(new THREE.Vector2(x, y), srcTexture, dstTexture);




//In jsm/renderers/common/Renderer.js

copyTextureToTexture( position, level = 0, srcTexture, dstTexture ) {

	const renderContext = this._currentRenderContext;

	this.backend.copyTextureToTexture( position, level, srcTexture, dstTexture, renderContext );
}




//In jsm/renderers/common/webgpu/WebGPUBackend.js

copyTextureToTexture( position, level, srcTexture, dstTexture, renderContext ) {

	const renderContextData = this.get( renderContext );

	const { encoder, descriptor } = renderContextData;


	encoder.copyTextureToTexture(
		{
			texture: ...
			origin: { x: , y: , z:  }
		},
		{
			texture: ...
		},
		[
			texture.image.width,
			texture.image.height
		]
	);
}

[RenaudRohlinger]

Thanks for the exploration. I will give it a try today 👍