VideoTexture with MeshBasicMaterial decreases performance immediately

Questions
1

this is how i am trying to add video to the mesh :


<mesh rotation={[0, 89.53, 0]} position={[0.53, 4.86, -0.02]} onClick={(e) => myfun()}>
        <planeGeometry args={[0.6,0.3]} />
        <meshBasicMaterial  >
          <videoTexture attach="map"  args={[jethobby]} encoding={THREE.sRGBEncoding} />
        </meshBasicMaterial>
      </mesh>

this is how i create args for video :

const vid = document.createElement("video");
  const [jethobby] = useState(() => {
    
    vid.setAttribute('id', 'jethobby');
    vid.src = url;
    vid.crossOrigin = "Anonymous";
    vid.loop = true;
    vid.pause();
    return vid;
  });

once i run the code performance drops immediately, especially when i try to add 3 meshes with video texture. i compressed video to 5mb so i believe it shouldn’t be the problem, could anyone help me figure it out?

2

Do you mind reproducing the issue by modifying the following official demo and share it as a live example?

https://threejs.org/examples/webgl_video_panorama_equirectangular

It uses MeshBasicMaterial with a video texture but with proper performance.

3

i could actually try to upload on codesandbox and share the link to it would it be ok?

4

@Mugen87 here is link to sandbox . pay attention in hasaki.js from line 47 to 116 is video args i created. from line 141 to 162 mesh - videotextures i used,
removing those videotextures obviously improves performance (fps) quite a lot, so i cant really figure out whats wrong.

also apart from this at line 130 there is sparkles element i used from r3drei, but i couldnt find anything similar that creates snowfall, sparkles only have noise, and speed, not directions. if you could let me know if i can turn sparkles into snowfall, if not here is codepen of threejs snofwall . its pretty simple but i never got to learn how to properly move from threejs to react three, so if you know this, i would appreciate if you could explain it simply for me.

thanks

5

I was hoping you could reproduce the issue with plain three.js (without additional libraries).

Besides, it seems the video does not play in the codesandbox.

6

videos are paused on default, for example line 56 - 67, video is paused but once pressed on video it will play.