ТРИ загрузки видео в пользовательский шейдерный материал

Question

Я загружаю видео на анимированную плоскость WebGL (с пользовательским материалом шейдера). Используя предварительно загруженное видео, я использую canvas для рисования изображения видео, а затем передаю его на мою форму шейдера в моем рендере l oop:

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

Это работает, но это не так действительно производительный, как я должен:

• Рисование изображения в контексте каждого кадра
• Создание нового экземпляра ТРИ Холста в каждом кадре

Что я на самом деле нужно заранее иметь буфер с фреймами (или экземплярами CanvasMaterial), который я могу перебрать в моем рендере l oop. Хотя у меня есть код, я предполагаю, что это плохая идея, так как мое 1-минутное видео должно проигрываться первым?

Мне было интересно, возможно ли мое решение для предварительного рендеринга через несколько секунд, или есть ли другой лучший способ качественного рендеринга видео на материал пользовательского шейдера?

Answer 1

Как прокомментировал @ тюрьма849, я могу просто передать предварительно загруженное видео в качестве текстуры в мой шейдер, используя THREE.VideoTexture, без необходимости делать что-либо в моем рендере l oop, как показано в этом примере:

три js .org / examples /? Q = video # webgl_materials_video