实现 OpenGL 的 glDrawBuffers 的 webGl 替代方法是什么？

Question

我正在通过 HDR 实现 Bloom 后期处理效果。我正在使用一个脚手架，它是一个在线教程来实现相同的效果，但基于（教程）最新版本的 OpenGL。我正在使用带有 OpenGL ES 2.0 的 WebGL 1.0 来编写着色器脚本。一个例子是这个 renderBuffer 生成脚本（注意第 4 行）：

rboDepth = gl.createRenderbuffer()
        gl.bindRenderbuffer(gl.RENDERBUFFER, rboDepth);
        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT, gl.viewportWidth, gl.viewportHeight);
        glFramebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rboDepth);
        // - Tell OpenGL which color attachments we'll use (of this framebuffer) for rendering 
        var attachments = [ gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1 ];
        glDrawBuffers(2, attachments);
        // - Finally check if framebuffer is complete
        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE)
            alert("Framebuffer not complete!" );

Answer 1

drawBuffers 可作为 WebGL 中的扩展，WEBGL_draw_buffers。要使用它，请检查扩展名

var ext = gl.getExtension("WEBGL_draw_buffers");
if (!ext) {
  alert("no WEBGL_draw_buffers: sucks to be you");
  ...
} 

如果您希望上面的代码按原样运行，您可以像这样将其复制到 WebGL 上下文中。

for (var key in ext) {
  var value = ext[key];
  if (typeof value === 'function') {
    value = value.bind(ext);
  }
  // remove WEBGL suffix
  var newKey = key.replace(/_?WEBGL/, '');
  gl[newKey] = value;
}

不幸的是，至少根据webglstats.com WEBGL_draw_buffers 仅支持大约 60% 的设备。我对这个数字如此之低感到有点震惊，但是我知道很多驱动程序都有/有与设置 drawBuffers 相关的严重错误。它们在以常用方式设置时工作，但在以不太常用的方式设置时会使驱动程序崩溃。由于这对于浏览器来说是不可接受的，因此该功能在任何存在已知错误的设备上都被列入黑名单。我知道这在带有 NVidia 芯片的 OSX 上确实存在一段时间，但我知道它已修复，因为我在带有 NVidia 的 OSX 设备上键入此内容，并且 WebGL 中提供了绘图缓冲区?

无论如何，这就是你获得drawBuffers的方式。如果扩展不可用，那么你有点不走运。 WEBGL_draw_buffers 不可用时的解决方案。

1. 多次渲染，每个drawbuffer一次

   是的，真的很慢

2. 回退到其他一些不需要绘图缓冲区的低质量渲染

3. 告诉用户他们运气不好。

4. ?