Read pixels from a WebGL texture

Question

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

One idea I have is to create a canvas and a WebGL context with preserveDrawingBuffer=true, and render my texture on this canvas so that it shows 2D flat, and then use readPixels. Is this approach reasonable? Does anyone have a sample code for this?

Answer 1

You can try attaching the texture to a framebuffer and then calling readPixels on the frame buffer.

at init time

// 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.
let canRead = (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE);

// Unbind the framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

at read time

if (canRead) {
   // bind the framebuffer
   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

   // read the pixels
   gl.readPixels(......);

   // Unbind the framebuffer
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

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