WEBGL_draw_buffers 扩展
WEBGL_draw_buffers 扩展是 WebGL API 的一部分，它允许片段着色器写入多个纹理，这对于 延迟着色 等非常有用。
可以使用 WebGLRenderingContext.getExtension() 方法来访问 WebGL 扩展。有关更多信息，请参阅 WebGL 教程中的 使用扩展。
常量
此扩展公开了新的常量，这些常量可用于 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 批准的扩展规范 |
浏览器兼容性
加载中…