ReadPixels from WebGL canvas

问题

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.

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);

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

回答1:

are you reading directly after rendering as in

render();
gl.readPixels()

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.

see: https://stackoverflow.com/a/44534528/128511

来源：https://stackoverflow.com/questions/44869599/readpixels-from-webgl-canvas