As I embark on loading a video onto an animated WebGL plane with a custom shader material, my approach involves using a pre-loaded video to draw an image onto a canvas and then passing it to my shader uniforms in the render loop:
// Render loop
useFrame(() => {
// Video = video HTML element
video.currentTime = currentTime;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
plane.material.uniforms[
"uTexture"
].value = new THREE.CanvasTexture(canvas);
currentTime += 1 / 30;
}
While this method works, it lacks optimal performance due to the need to:
- Draw an image in context every frame
- Create a new instance of THREE's Canvas every frame
My ideal scenario would involve having a buffer of frames or CanvasMaterial instances ready to iterate on in my render loop. However, I'm uncertain if this pre-rendering approach is feasible within a short timeframe or if there's a more efficient way to achieve performant video rendering on a custom shader material.