从WebGL画布中读取像素

Question

我正在尝试保存一个使用WebGL创建的动画，它在这个页面上。我想将动画的RGBA值作为数组存储到我的硬盘上。因此，我尝试使用readPixels方法在javascript中访问数据以保存它们。但是，数组中总是只写入零。

我尝试了以下代码来从画布c中读取数据。

var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

我该如何解决问题？有没有其他方法来保存画布动画的RGBA数据到我的硬盘上？

- zimmerrol

Answer 1

你是在渲染后直接阅读吗？

render();
gl.readPixels()

或者你是在其他事件中读取吗？如果你是在另一个事件中读取，那么根据规范，绘图缓冲区将被清除。

参见：https://dev59.com/aGw05IYBdhLWcg3wkivX#44534528

- gman

---

我尝试通过在Chrome的Web开发者控制台中执行它来使用我的代码。你能告诉我收集动画的每20帧的最佳方法吗？ - zimmerrol

计算动画循环中的帧数 framecount++;if (!(framecount % 20)) gl.readPixels([..])。 - LJᛃ

在开发控制台中读取是“在某些其他事件中”，因此它将被清除。请参见答案中的链接。 - gman