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錄製場景，然後保存它。稍後您可以將其作爲視頻播放，而不必關心幀速率。你可能會錯過一些幀，因爲它有自己的性能開銷，但這一切都取決於你的用例。