使用GL Transitions配合REGL做视频转场，不显示视频纹理？

Question

在创建视频的时候，如果调用视频的play方法，就能够看到视频：

const video = document.createElement('video');
......
video.oncanplaythrough = ()=>{
  video.play(); //如果不写这句，webGL就无法显示视频纹理
}

请教这是为什么呢？如果我要给很多个视频做转场，那么同时播放多个视频就会很卡……

Answer 1

原因是在regl.frame之外获取的纹理：

const texture = regl.texture(video);

regl.frame(...);

应该改为在每一帧中获取：

regl.frame(({time})=>{
  const texture = regl.texture(video);
  ...
});

Answer 2

在使用WebGL（或者其封装库如REGL）来显示视频纹理时，通常需要在WebGL的上下文中正确地设置和更新视频纹理。视频纹理是通过将HTML5 <video> 元素的当前帧作为纹理数据传递给WebGL纹理对象来实现的。

关于你的问题，当你说调用 video.play() 后视频纹理才在WebGL中显示，这通常是因为WebGL纹理更新是依赖于视频帧的。在视频没有开始播放（即没有调用 play() 方法）之前，WebGL无法从视频元素中获取到帧数据来更新纹理。

为了解决在多个视频同时播放时可能出现的性能问题，你可以考虑以下几种策略：

1. 视频预加载：确保在尝试将视频设置为纹理之前，视频已经加载完成。你可以监听 loadeddata 或 canplay 事件来确认视频已准备好。
2. 按需播放：不要同时播放所有视频。只播放当前需要显示的视频，并在需要切换时暂停当前视频并开始播放下一个视频。
3. 使用视频帧缓存：如果你知道视频转场的具体序列，你可以预先将视频的某些帧捕获为纹理并缓存起来，然后在需要时直接使用这些纹理，而不是实时从视频元素中读取。
4. 优化WebGL设置：确保你的WebGL上下文和纹理设置是优化的。例如，避免不必要的纹理重新绑定和更新，以及使用适当的纹理参数（如 gl.TEXTURE_MIN_FILTER 和 gl.TEXTURE_MAG_FILTER）。
5. 使用硬件加速：确保你的浏览器和GPU支持WebGL，并且WebGL已启用硬件加速。
6. 资源管理：如果你有很多视频需要处理，考虑使用资源池来管理视频元素和纹理对象，以便在不再需要时能够正确地释放它们。

以下是一个简化的例子，展示如何在REGL中设置和使用视频纹理（假设你已经有了一个REGL实例 regl）：

const video = document.createElement('video');
video.src = 'path/to/your/video.mp4';

video.onloadeddata = () => {
  // 视频加载完成后，创建WebGL纹理
  const texture = regl.texture(video);
  
  // 然后在你的REGL绘制命令中使用这个纹理
  // ...
};

// 当需要播放视频时
video.play();

注意，这个例子只是一个简化的示例，并没有处理所有可能的边界情况和性能优化。在实际应用中，你可能需要根据具体需求进行适当的调整和优化。