三将视频加载到自定义着色器材质

Question

我正在将视频加载到动画的WebGL平面上（带有自定义着色器材质）。使用预加载的视频，我使用画布绘制视频图像，然后将其传递到渲染循环中的着色器制服：

// 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;
}

这有效，但并不是真正有效，因为我必须这样做：

• 每帧在上下文中绘制图像
• 每帧创建一个三个Canvas的新实例

我真正想要的是事先有一个带有帧（或CanvasMaterial实例）的缓冲区，我可以在渲染循环中对其进行迭代。尽管我有代码，但我认为这是个坏主意，因为我必须先播放1分钟的视频？

我想知道我的预渲染解决方案是否可以在几秒钟内完成，或者是否还有另一种更好的方法可以对自定义着色器材质进行高性能视频渲染？

Answer 1

正如@ prisoner849所评论的那样，我可以使用THREE.VideoTexture将预加载的视频作为纹理传递给着色器，而无需在渲染循环中进行任何操作，如以下示例所示：

threejs.org/examples/?q=video#webgl_materials_video