Three.js - 我可以渲染一系列帧，然后以高帧率播放？

Question

我正在使用Three.js作为3D库的非线性编辑动画系统。我想渲染一系列帧到内存，然后以任意帧率回放帧。这个想法是，场景可能太复杂，无法实时渲染，所以我想预先渲染帧，然后在目标fps处回放。我不一定需要动画播放时的交互性，但重要的是我全速观看。

从这些链接（How to Render to a Texture in Three.js,Rendering a scene as a texture），我了解了如何呈现到帧缓冲区而不是画布。我可以存储多个帧缓冲区，然后以平滑的帧速率将其中的每个帧渲染到画布上？

Answer 1

你可以尝试以下操作之一：

选项A）捕获的画布的内容，播放以PNG序列（我没有测试，但它听起来像它可以工作）：

• 渲染到画布上，就像你总是这样
• 使用canvas.toDataURL()
• 的巨大dataURLs往往与devtools问题导出画布数据URL，你可能要考虑转换数据的URL到一个blob： Blob from DataURL?
• 重复对所有帧
• 回放作为PNG-序列

选项b）使用RenderTargets：

• 渲染场景到渲染目标/帧缓冲
• 使用renderer.readRenderTargetPixels()读取渲染的结果存入内存（这基本上返回一个位图）
• 数据可以复制到2d画布ImageD ATA实例

选项C）使用渲染目标纹理（从GPU没有下载）：

• 渲染成渲染目标，并创建一个新的每一帧（那里很可能有多少限制他们可以保持周围，所以这可能不是最好的解决方案）
• 图像数据存储在GPU和引用通过rendertarget.texture
• 使用全屏，四与rendertarget.texture回放质感。只需要重新绑定每个回放帧的纹理，所以这将是最有效的。

Answer 2

您可以使用canvas.captureStream（）和mediaRecorder录制场景，然后保存它。稍后您可以将其作为视频播放，而不必关心帧速率。你可能会错过一些帧，因为它有自己的性能开销，但这一切都取决于你的用例。