WEBGL_draw_buffers 扩展

WEBGL_draw_buffers 扩展是 WebGL API 的一部分，它允许片段着色器写入多个纹理，这对于例如 延迟着色 很有用。

可以使用 WebGLRenderingContext.getExtension() 方法获取 WebGL 扩展。有关更多信息，请参阅 使用扩展，该内容位于 WebGL 教程 中。

注意：此扩展仅适用于 WebGL1 上下文。在 WebGL2 中，此扩展的功能默认在 WebGL2 上下文中可用。在 WebGL 2 中，常量在没有“WEBGL”后缀的情况下可用，新的 GLSL 内建函数需要 GLSL #version 300 es。

常量

此扩展公开了新的常量，这些常量可以在 gl.framebufferRenderbuffer()、gl.framebufferTexture2D()、gl.getFramebufferAttachmentParameter() ext.drawBuffersWEBGL() 和 gl.getParameter() 方法中使用。

ext.COLOR_ATTACHMENT0_WEBGL、ext.COLOR_ATTACHMENT1_WEBGL、ext.COLOR_ATTACHMENT2_WEBGL、ext.COLOR_ATTACHMENT3_WEBGL、ext.COLOR_ATTACHMENT4_WEBGL、ext.COLOR_ATTACHMENT5_WEBGL、ext.COLOR_ATTACHMENT6_WEBGL、ext.COLOR_ATTACHMENT7_WEBGL、ext.COLOR_ATTACHMENT8_WEBGL、ext.COLOR_ATTACHMENT9_WEBGL、ext.COLOR_ATTACHMENT10_WEBGL、ext.COLOR_ATTACHMENT11_WEBGL、ext.COLOR_ATTACHMENT12_WEBGL、ext.COLOR_ATTACHMENT13_WEBGL、ext.COLOR_ATTACHMENT14_WEBGL、ext.COLOR_ATTACHMENT15_WEBGL

指定颜色缓冲区的 GLenum。

ext.DRAW_BUFFER0_WEBGL、ext.DRAW_BUFFER1_WEBGL、ext.DRAW_BUFFER2_WEBGL、ext.DRAW_BUFFER3_WEBGL、ext.DRAW_BUFFER4_WEBGL、ext.DRAW_BUFFER5_WEBGL、ext.DRAW_BUFFER6_WEBGL、ext.DRAW_BUFFER7_WEBGL、ext.DRAW_BUFFER8_WEBGL ext.DRAW_BUFFER9_WEBGL、ext.DRAW_BUFFER10_WEBGL、ext.DRAW_BUFFER11_WEBGL、ext.DRAW_BUFFER12_WEBGL、ext.DRAW_BUFFER13_WEBGL、ext.DRAW_BUFFER14_WEBGL、ext.DRAW_BUFFER15_WEBGL

返回绘图缓冲区的 GLenum。

ext.MAX_COLOR_ATTACHMENTS_WEBGL

指示帧缓冲区颜色附件点的最大数量的 GLint。

ext.MAX_DRAW_BUFFERS_WEBGL

指示绘图缓冲区的最大数量的 GLint。

实例方法

此扩展公开了一种新方法。

ext.drawBuffersWEBGL()

定义所有片段颜色写入的绘图缓冲区。（当使用 WebGL2 时，此方法默认情况下作为 gl.drawBuffers() 可用）。

示例

启用扩展

js
const ext = gl.getExtension("WEBGL_draw_buffers");

将多个纹理（到 tx[] 数组）绑定到不同的帧缓冲区颜色附件

js
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT0_WEBGL,
  gl.TEXTURE_2D,
  tx[0],
  0,
);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT1_WEBGL,
  gl.TEXTURE_2D,
  tx[1],
  0,
);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT2_WEBGL,
  gl.TEXTURE_2D,
  tx[2],
  0,
);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT3_WEBGL,
  gl.TEXTURE_2D,
  tx[3],
  0,
);

将颜色附件映射到片段着色器将使用 gl_FragData 写入的绘图缓冲区槽

js
ext.drawBuffersWEBGL([
  ext.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0]
  ext.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1]
  ext.COLOR_ATTACHMENT2_WEBGL, // gl_FragData[2]
  ext.COLOR_ATTACHMENT3_WEBGL, // gl_FragData[3]
]);

写入多个纹理的着色器代码

html
<script type="x-shader/x-fragment">
  #extension GL_EXT_draw_buffers : require

  precision highp float;

  void main(void) {
    gl_FragData[0] = vec4(0.25);
    gl_FragData[1] = vec4(0.5);
    gl_FragData[2] = vec4(0.75);
    gl_FragData[3] = vec4(1.0);
  }
</script>

规范

规范
WebGL WEBGL_draw_buffers Khronos 批准扩展规范

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅