VideoTexture with ShaderMaterial is using wrong video

Questions
,
1

Hey all! I’m running into a bizarre issue with ShaderMaterial.
What you can see in the below video is one is, on the top row we’ve got HTML video elements that are created from the same source file but have different currentTime. The bottom row is geometries with VideoTexture as map. The first example where everything works correctly is using MeshBasicMaterial and the second round where textures are synced up is using ShaderMaterial which is essentially a clone of MeshBasicMaterial.

For some reason all ShaderMaterials end up using the same VideoTexture. I’ve confirmed this by removing all but the last video element from DOM. Also have tried with Chrome and Firefox so it’s not browser-related. Any advice on how I could get this setup working with ShaderMaterial?

2

Hi!
Would be better to provide also the code of how you create and assign textures for different types of materials.

3

I did actually solve this by adding clone() but still bit confused why it’s needed in the first place.

In the below code ShaderMaterial doesn’t work correctly, MeshBasicMaterial does.
If I clone ShaderMaterial when creating Mesh, it works correctly also. Why?

for (let i = 0; i < 10; i++) {
  let material = new THREE.ShaderMaterial({
    uniforms: Object.assign(THREE.ShaderLib["basic"].uniforms, {
      map: { value: videoArray[i % videoArray.length].texture }
    }),
    vertexShader,
    fragmentShader,
    side: THREE.DoubleSide
  })

  // material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: videoArray[i % videoArray.length].texture });
  let mesh = new THREE.Mesh(geometry.clone(), material);
}