Read pixels from a WebGL texture

textures webgl
Andy picture Andy · Nov 29, 2012 · Viewed 8.8k times · Source

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

gman picture gman · Nov 30, 2012

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.
bool 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.

Related questions

dart:web_gl: RENDER WARNING: texture bound to texture unit 0 is not renderable

I'm getting the error [.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' when I run my web app in dartium. I've been trying to …

Read More
Multiple transparent textures on the same mesh face in Three.js

Is it possible to lay multiple textures on top of each other on the same face in Three.js so that the alpha blending is done GPU accelerated in webGL? The textures are (or should be) applied to the same …

Read More
WebGL - wait for texture to load

How do I test if the WebGLTexture object is 'complete' ? Currently I get this message: [WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' I …

Read More