WEBGL_draw_buffers

在此页

常量
方法
范例
规范
浏览器兼容性
另请参阅
相关话题

WEBGL_draw_buffers 扩展属于 WebGL API and enables a fragment shader to write to several textures, which is useful for deferred shading ，例如。

WebGL extensions are available using the WebGLRenderingContext.getExtension() method. For more information, see also 使用扩展在 WebGL 教程 .

可用性： This extension is only available to WebGL1 contexts. In WebGL2 , the functionality of this extension is available on the WebGL2 context by default. In WebGL 2, the constant s are available without the "WEBGL" suffix and the new GLSL built-ins require GLSL #version 300 es .

常量

This extension exposes new constants, which can be used in the 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: A GLenum specifying a color buffer.
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: A GLenum returning a draw buffer.
ext.MAX_COLOR_ATTACHMENTS_WEBGL: GLint indicating the maximum number of framebuffer color attachment points.
ext.MAX_DRAW_BUFFERS_WEBGL: GLint indicating the maximum number of draw buffers.

方法

This extension exposes one new method.

ext.drawBuffersWEBGL()

范例

Enabling the extension:

var ext = gl.getExtension('WEBGL_draw_buffers');

Binding multiple textures (to a tx[] array) to different framebuffer color attachments:

var 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);

Mapping the color attachments to draw buffer slots that the fragment shader will write to using gl_FragData :

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]
]);

Shader code that writes to multiple textures:

<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_draw_buffers The definition of 'WEBGL_draw_buffers' in that specification.	推荐	初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`drawBuffersWEBGL`	Chrome Yes	Edge 17	Firefox ? — 28 Prefixed Disabled 不支持 ? — 28 Prefixed Disabled Prefixed Implemented with the vendor prefix: MOZ_ Disabled Until version 28 (exclusive): this feature is behind the `webgl.enable-draft-extensions` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 28	IE ?	Opera Yes	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持
不支持
兼容性未知 ?
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

另请参阅

元数据

最后修改： 2019 年 3 月 23 日

在此页

常量

方法

范例

规范

浏览器兼容性

图例

另请参阅

相关话题