Reading pixels from WebGL texture

Question

I have a WebGLTexture object. How to get pixels of this texture (similar to WebGL readPixels, but for texture)?

One of my ideas is to create a canvas and a WebGL context with preserveDrawingBuffer = true and render my texture on this canvas so that it displays a 2D plane and then uses readPixels. Is this approach reasonable? Does anyone have some sample code for this?

Answer 1

You can try adding texture to the framebuffer and then calling readPixels in the framebuffer.

during init

// make a framebuffer fb = gl.createFramebuffer(); // make this the current frame buffer gl.bindFramebuffer(gl.FRAMEBUFFER, fb); // attach the texture to the framebuffer. gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); // check if you can read from this type of texture. bool canRead = (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE); // Unbind the framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

while reading

 if (canRead) { // bind the framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, fb); // read the pixels gl.readPixels(......); // Unbind the framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, null); } 

For format textures = gl.RGBA, type = gl.UNSIGNED_BYTE canRead should always be true. For other formats and types, canRead may be false.