WebGLRenderer: Allow for copying data between render targets using "copyTextureToTexture"

[gkjohnson]

Description

Currently when calling copyTextureToTexture with two render target textures you get the following warning. I'm not sure if this is a limitation of the underlying WebGL APIs or if this is possible to achieve if we change something about the function:

WebGL: INVALID_OPERATION: texSubImage2D: no bound PIXEL_UNPACK_BUFFER

Repro code:

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer( { antialias: true } );
const r1 = new THREE.WebGLRenderTarget( 100, 100 );
const r2 = new THREE.WebGLRenderTarget( 100, 100 );

renderer.initRenderTarget( r1 );
renderer.initRenderTarget( r2 );
renderer.copyTextureToTexture( r1.texture, r2.texture );

Solution

Adjust underlying function implementation to support copying data between render target textures for 2d and 3d textures.

Alternatives

Use a custom FullScreenPass method for copying data.

Additional context

No response

[Mugen87]

To clarify we need this feature for the WebGL backend in WebGPURenderer as well. TRAAPassNode produces the same warning as above when running with a WebGL backend.

WebGPURenderer handles the copy between render targets already correctly for the WebGPU backend though.

[gkjohnson]

Thanks for the addition @Mugen87 - and somewhat related but I would also like to to be able to copy data between layers of 3d textures and 2d textures. eg when populating a 3d array target you must upload the 2d texture, render it to the 3d array texture layer with a full screen pass, then dispose of the original 2d texture. It would be better to just be able to block copy the data into the 3d texture layer.

The API design for this isn't super clear, though. And again, I'm not sure which specific WebGL calls are needed for this. I can make a new issue once https://github.com/mrdoob/three.js/pull/29662 is merged, as well.