5

我使用 webgl_draw_buffers 扩展制作了一个帧缓冲区对象，以提供三个颜色缓冲区：

  colorBuffer0 = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer0);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE);

  colorBuffer1 = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer1);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE);

  colorBuffer2 = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer2);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE);

  var framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

  WEBGL_draw_buffers.drawBuffersWEBGL([WEBGL_draw_buffers.COLOR_ATTACHMENT0_WEBGL,
                                       WEBGL_draw_buffers.COLOR_ATTACHMENT1_WEBGL,
                                       WEBGL_draw_buffers.COLOR_ATTACHMENT2_WEBGL]);

  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT0_WEBGL, gl.RENDERBUFFER, colorBuffer0);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT1_WEBGL, gl.RENDERBUFFER, colorBuffer1);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT2_WEBGL, gl.RENDERBUFFER, colorBuffer2);

我将它们填充到片段着色器中：

  gl_FragData[0] = vec4(ch1.x, ch1.y, 0.0, 1.0);
  gl_FragData[1] = vec4(ch2.x, ch2.y, 0.0, 1.0);
  gl_FragData[2] = vec4(ch3.x, ch3.y, 0.0, 1.0);

现在，当我使用 readPixels 时，我总是得到colorBuffer0：

  pixels  = new Uint8Array(IMAGE_SOURCE_SIZE*IMAGE_SOURCE_SIZE*4);
  gl.readPixels(0,0, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

我无法使用 readPixels 检索其他两个颜色缓冲区。我可以在使用 readPixels 之前绑定每个缓冲区吗？我怎样才能读取其他两个颜色缓冲区？

4

2 回答 2

5

创建更多帧缓冲区。将每个渲染缓冲区分配给不同的帧缓冲区。当您想读取特定的渲染缓冲区时绑定这些帧缓冲区。

帧缓冲区只是一个附件数组。帧缓冲区很便宜。附件、渲染缓冲区和纹理是昂贵的部分。您可以将相同的渲染缓冲区和纹理放入任意数量的帧缓冲区中。例如，在多个帧缓冲区中共享一个深度渲染缓冲区是很常见的。

于 2015-12-08T16:26:02.940 回答
0

谢谢，它有效。我在上面的代码旁边添加了另外两个帧缓冲区：

framebuffer1 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer1);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT0_WEBGL, gl.RENDERBUFFER, colorBuffer1);

framebuffer2 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer2);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT0_WEBGL, gl.RENDERBUFFER, colorBuffer2);

现在，我可以使用 readPixels 读取这些缓冲区。

于 2015-12-09T10:08:39.293 回答