textures - 从 WebGL 纹理读取像素

Question

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

我的一个想法是使用preserveDrawingBuffer=true 创建一个 Canvas 和一个WebGL 上下文，然后在这个 Canvas 上渲染我的纹理，使其显示为2D 平面，然后使用readPixels。这种做法合理吗？有没有人有这方面的示例代码？

Answer 1

您可以尝试将纹理附加到帧缓冲区，然后在帧缓冲区上调用 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);
}

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