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 批准的擴充套件規範 |
瀏覽器相容性
載入中…