从WebGL纹理中读取像素

时间:2012-11-29 13:11:45

标签: textures webgl

我有一个WebGLTexture对象。如何获得该纹理的像素(类似于WebGL的readPixels,但是纹理)?

我的一个想法是使用preserveDrawingBuffer = true创建画布和WebGL上下文,并在此画布上渲染我的纹理,使其显示2D平面,然后使用readPixels。这种方法合理吗?有没有人有这样的示例代码?

1 个答案:

答案 0 :(得分:9)

您可以尝试将纹理附加到帧缓冲区,然后在帧缓冲区上调用readPixels。

初始时

// 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);
在阅读时

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

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

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

对于format = gl.RGBA的纹理,键入= gl.UNSIGNED_BYTE canRead应始终为true。对于其他格式和类型,canRead可能为false。