0

我可以在页面上加载 HTML 5 视频元素，将它们映射到 THREE.Texture，并在 3d 中使用 MeshBasicMaterial 在立方体上显示视频纹理。（所有视频都设置为自动播放和循环播放。）每个动画/渲染周期，对于我检查的每个纹理：

if (video.HAVE_ENOUGH_DATA)
   texture.needsUpdate = true

随着我加载越来越多的视频以这种方式播放，帧率继续下降。如果我能做些什么来提高性能怎么办？我需要将视频作为 DOM 元素加载吗？无论如何我可以利用片段着色器/GPU进行并行化吗？

4

1 回答 1

4

这里有几件事我会尝试......

  1. 以 Javascript 加载视频元素，不附加到 DOM。如果视频是 ，它可能不会有太大的不同display: none，但它不会受到伤害。

  2. 使视频更小。在这种情况下，只有良好的压缩是不够的，因为瓶颈很可能是将未压缩的视频帧复制到 GPU 内存。

  3. 在每一帧上，检查.currentTime每个视频是否发生了变化。如果您在帧之间，则可能不需要更新纹理。您最终可能会偏离一帧，因为即使在更新后有时也需要几毫秒来更新视频帧currentTime。但这通常只有在视频暂停时才会注意到。通常，我有一个特殊情况，如果视频暂停，我会在每一帧再更新半秒左右。

  4. 您可以尝试将视频尺寸设置为 2 的幂。这可能取决于 GPU 硬件，但测试它并没有什么坏处。

  5. 如果视频长度相同并在同一时间轴上播放，则将它们合并为一个，将它们全部加载到单个纹理中并相应地设置 UV 坐标可能会有所帮助。

更一般地说，您可能应该关注：

  • 将视频帧复制到 GPU 内存中。不经常，也不比必要的大。
  • 减少浏览器管理视频文件的开销
于 2013-04-24T17:17:28.400 回答