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

【问题标题】：Three.js - Can I render a sequence of frames, then play back at high framerate?Three.js - 我可以渲染一系列帧，然后以高帧率播放吗？
【发布时间】：2017-05-19 23:58:23
【问题描述】：

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

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您可以尝试以下方法之一：

选项a）捕获画布内容，以png-sequence播放（我没有测试过，但听起来它可以工作）：

像往常一样渲染到画布
使用canvas.toDataURL()将画布导出为数据URL
由于庞大的 dataURLs 通常是 devtools 的问题，您可能需要考虑将 data-urls 转换为 blob： Blob from DataURL?
重复所有帧
以 png 序列播放

选项 b) 使用 RenderTargets：

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

选项 c) 使用 Rendertarget-Textures（无需从 GPU 下载）：

渲染到渲染目标并为每一帧创建一个新目标（您可以保留的数量很可能存在限制，因此这可能不是最佳解决方案）
图像数据存储在 GPU 上并通过rendertarget.texture 引用
使用带有rendertarget.texture 纹理的全屏四边形进行播放。只需要为每个播放帧重新绑定纹理，这样效率最高。

【讨论】：

【解决方案2】：

您可以使用 canvas.captureStream() 和 mediaRecorder 记录场景然后保存。您可以稍后将其作为视频播放，而无需关心帧速率。您可能会错过一些帧，因为它有自己的性能开销，但这完全取决于您的用例。

【讨论】：