ProjectorLight : VideoTexture projected on multiple meshes fails with multiple "Destroyed texture" warnings

[pmhn]

Description

Modify webgpu_lights_projector.html to include multiple copies of the Lucy100k mesh.
Procedural and Texture projections work fine.
VideoTexture fails after a second or two.

Warning:

Destroyed texture [Texture "D3DImageBacking_D3DSharedImage_CanvasResourceRaster_Pid:75204"] used in a submit.
 - While calling [Queue].Submit([[CommandBuffer from CommandEncoder "renderContext_0"]])

Thanks for the work on the ProjectorLight, it's exactly what I need for a project I'm working on :)

Reproduction steps

1.Modify webgpu_lights_projector.html to include multiple copies of the Lucy100k mesh.
2. Run the example

Code

// Models

				new PLYLoader().load( 'models/ply/binary/Lucy100k.ply', function ( geometry ) {

					geometry.scale( 0.0024, 0.0024, 0.0024 );
					geometry.computeVertexNormals();

					const material = new THREE.MeshLambertMaterial();

					const mesh = new THREE.Mesh( geometry, material );
					mesh.rotation.y = - Math.PI / 2;
					mesh.castShadow = true;
					mesh.receiveShadow = true;
					
					for (let i = 0; i < 5; i++) {
						const copyOfMesh = mesh.clone();
						copyOfMesh.position.y=0.8;
						copyOfMesh.position.x=-i*1;
						scene.add( copyOfMesh);
                	}				

				} );

https://github.com/pmhn/three.js/tree/issue-31330-projector-light-live-example

Live example

N/A

Screenshots

No response

Version

r177

Device

Desktop

Browser

Edge

OS

Windows

[Mugen87]

Live example for reproduction: https://jsfiddle.net/7xj6k3hn/

I can reproduce the issue with the video texture. However, even the normal texture is not projected correctly on all meshes:

Maybe solving this issue will also fix the video texture bug.

[Mugen87]

Okay, the color texture issue has something to do with loading. When I load it via mapTexture = await loader.loadAsync( 'colors.png' );, it is always displayed correctly.

ProjectorLightNode has issues when the color texture is incomplete (still loading) and then texture.needsUpdate is set to true at a later point. So maybe the issue is related to a caching mechanism.

[Mugen87]

The WebGPU warnings are unrelated to the projector light. If you apply the same video texture on two or more meshes that share a node builder state (and thus bindings), the warnings start to appear. At least in Chrome the video flickers when rendering directly to screen:

https://jsfiddle.net/86t42dwk/

The issues is hidden in webgpu_materials_video because of the color updates per frame for each material. They trigger a refresh of the bindings which is missing in the fiddle though.