WebGLRenderTarget: clone texture image data when cloning render target

[gkjohnson]

Related issue: #20328

Description

Clone the WebGLRenderTarget.texture image data object when cloning the render target. If it's not cloned then modifying the cloned render target will modify the original render targets image object causing it to be out of sync. See this case:

const x = new THREE.WebGLRenderTarget( 10, 10 );
const y = new THREE.WebGLRenderTarget( 20, 20 );
console.log( x.texture.image.width, x.texture.image.height, x.width, x.height ); // 10, 10, 10, 10

y.copy( x );
y.setSize( 100, 100 );

console.log( x.texture.image.width, x.texture.image.height, x.width, x.height ); // 100, 100, 10, 10

This shouldn't be a breaking change because I can't see how you'd be relying on this behavior.

[Mugen87]

What about #20328 (comment)?

Well, cloning data textures and changing the size is probably no common operation (compared to render targets where the resize can happen in context of post-processing).

[gkjohnson]

What about #20328 (comment)?

While that case can be confusing right now the biggest issue is that when the image data is updated the cloned texture isn't automatically updated. I've thought about how to solve it but given that TextureLoader (and therefore Manager.getHandler) affords the pattern of returning a not-yet-fully-loaded texture object it's important that .clone retain the image data reference. I think think #17766 would be a better solution to that problem.

In the case of WebGLRenderTarget, though, not only do object variables become out of sync but the contents and GPU data size do to. Perhaps #17766 would be a fix for that, as well? Then you could have two render targets pointing to the same GPU data but I don't want to over complicate things. I'm hoping that PR is still on the table for getting merged.

[mrdoob]

Thanks!

[Mugen87]

Shouldn't it be:

this.texture.image = { ...source.texture.image }; // See #20328.

[Mugen87]

Or better like so to avoid #22618:

this.texture.image = { 
    width: source.texture.image.width,
    height: source.texture.image.height,
    depth: source.texture.image.depth
};

[mrdoob]

👍

[gkjohnson]

this.texture.image = { ...source.texture.image }; // See #20328.

This is the same as { ...this.texture.image } since after source.texture.clone() the source values are the same object between the two instances.

I don't have an issue with changing it since it's the only location in core that's using spread. Though there are quite a few others it looks like in the examples files.

@Mugen87 suggestion looks good but Object.assign( {}, this.texture.image ) would work, as well