从 WebGL 画布读取像素 [英] ReadPixels from WebGL canvas

问题描述

我正在尝试在 此页面上保存使用 WebGL 创建的动画

I am trying to save an animation which is created with WebGL on this page. I'd like to store the RGBA values of the animation as an array on my hard drive. Therefore, I tried to use the readPixels method to access the data in javascript to save them. But there are always just zeros written into the array.

我尝试使用这段代码从画布中读取数据 c

I tried this code to read the data from the canvas 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 数据保存在我的硬盘上吗?

How can I solve the problem? Are there other ways to save the RGBA data of the canvas' animation on my hard drive?

推荐答案

渲染后直接阅读

render();
gl.readPixels()

或者你在其他活动中阅读?如果您正在阅读另一个事件，则正在按照规范清除drawingBuffer.

or are you reading in some other event? If you're reading in another event then the drawingBuffer is being cleared as per the spec.

参见:https://stackoverflow.com/a/44534528/128511

这篇关于从 WebGL 画布读取像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！