Tiện ích mở rộng WEBGL_draw_buffers
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Tiện ích mở rộng WEBGL_draw_buffers là một phần của WebGL API và cho phép fragment shader ghi vào nhiều texture, điều này rất hữu ích cho deferred shading chẳng hạn.
Các tiện ích mở rộng WebGL có thể dùng qua phương thức WebGLRenderingContext.getExtension(). Để biết thêm thông tin, xem Using Extensions trong WebGL tutorial.
Hằng số
Tiện ích mở rộng này cung cấp các hằng số mới, có thể dùng trong các phương thức gl.framebufferRenderbuffer(), gl.framebufferTexture2D(), gl.getFramebufferAttachmentParameter() ext.drawBuffersWEBGL(), và 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-
Một
GLenumchỉ định bộ đệm màu. 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-
Một
GLenumtrả về draw buffer. ext.MAX_COLOR_ATTACHMENTS_WEBGL-
Một
GLintcho biết số điểm gắn màu tối đa của framebuffer. ext.MAX_DRAW_BUFFERS_WEBGL-
Một
GLintcho biết số draw buffer tối đa.
Phương thức phiên bản
Tiện ích mở rộng này cung cấp một phương thức mới.
ext.drawBuffersWEBGL()-
Định nghĩa các draw buffer mà tất cả màu fragment được ghi vào. (Khi dùng
WebGL2, phương thức này có sẵn dưới dạnggl.drawBuffers()theo mặc định).
Ví dụ
Kích hoạt tiện ích mở rộng:
const ext = gl.getExtension("WEBGL_draw_buffers");
Gắn nhiều texture (vào mảng tx[]) vào các điểm gắn màu framebuffer khác nhau:
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,
);
Ánh xạ các điểm gắn màu sang các slot draw buffer mà fragment shader sẽ ghi vào bằng 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]
]);
Mã shader ghi vào nhiều texture:
<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>
Thông số kỹ thuật
| Specification |
|---|
| WebGL WEBGL_draw_buffers Khronos Ratified Extension Specification |