OES_draw_buffers_indexed
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2022.
Phần mở rộng OES_draw_buffers_indexed là một phần của WebGL API và cho phép sử dụng các tùy chọn pha trộn khác nhau khi ghi vào nhiều bộ đệm màu cùng lúc.
Các phần mở rộng WebGL khả dụng bằng cách dùng phương thức WebGLRenderingContext.getExtension(). Để biết thêm thông tin, xem Sử dụng phần mở rộng trong hướng dẫn WebGL.
Note: Phần mở rộng này chỉ khả dụng cho các ngữ cảnh WebGL2.
Phương thức phiên bản
OES_draw_buffers_indexed.blendEquationiOES()-
Đặt cả phương trình pha trộn RGB và alpha cho một bộ đệm vẽ cụ thể.
OES_draw_buffers_indexed.blendEquationSeparateiOES()-
Đặt riêng các phương trình pha trộn RGB và alpha cho một bộ đệm vẽ cụ thể.
OES_draw_buffers_indexed.blendFunciOES()-
Định nghĩa hàm nào được dùng khi pha trộn pixel cho một bộ đệm vẽ cụ thể.
OES_draw_buffers_indexed.blendFuncSeparateiOES()-
Định nghĩa hàm nào được dùng khi pha trộn pixel cho các thành phần RGB và alpha riêng lẻ cho một bộ đệm vẽ cụ thể.
OES_draw_buffers_indexed.colorMaskiOES()-
Đặt các thành phần màu nào được bật hoặc tắt khi vẽ hoặc kết xuất cho một bộ đệm vẽ cụ thể.
OES_draw_buffers_indexed.disableiOES()-
Vô hiệu hóa pha trộn cho một bộ đệm vẽ cụ thể.
OES_draw_buffers_indexed.enableiOES()-
Bật pha trộn cho một bộ đệm vẽ cụ thể.
Ví dụ
Sử dụng phần mở rộng OES_draw_buffers_indexed
Bật phần mở rộng bằng cách gọi WebGLRenderingContext.getExtension().
const ext = gl.getExtension("OES_draw_buffers_indexed");
Bây giờ bạn có thể bật pha trộn, đặt phương trình pha trộn, hàm pha trộn, và mặt nạ màu cho một bộ đệm vẽ cụ thể.
// For gl.DRAW_BUFFER0
ext.enableiOES(gl.BLEND, 0);
ext.blendEquationiOES(0, gl.FUNC_ADD);
ext.blendFunciOES(0, gl.ONE, gl.ONE);
ext.colorMaskiOES(0, 1, 0, 0, 0);
// For gl.DRAW_BUFFER1
ext.enableiOES(gl.BLEND, 1);
ext.blendEquationSeparateiOES(1, gl.FUNC_ADD, gl.FUNC_SUBTRACT);
ext.blendFuncSeparateiOES(
1,
gl.SRC_ALPHA,
gl.ONE_MINUS_SRC_ALPHA,
gl.ZERO,
gl.ZERO,
);
ext.colorMaskiOES(1, 0, 1, 0, 0);
Để truy xuất cài đặt cho một bộ đệm vẽ cụ thể, dùng WebGL2RenderingContext.getIndexedParameter().
// For gl.DRAW_BUFFER0
gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 0);
gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 0);
gl.getIndexedParameter(gl.BLEND_SRC_RGB, 0);
gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 0);
gl.getIndexedParameter(gl.BLEND_DST_RGB, 0);
gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 0);
gl.getIndexedParameter(gl.COLOR_WRITEMASK, 0);
// For gl.DRAW_BUFFER1
gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 1);
gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 1);
gl.getIndexedParameter(gl.BLEND_SRC_RGB, 1);
gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 1);
gl.getIndexedParameter(gl.BLEND_DST_RGB, 1);
gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 1);
gl.getIndexedParameter(gl.COLOR_WRITEMASK, 1);
Bạn có thể dùng WebGLRenderingContext.getParameter() để xem có bao nhiêu bộ đệm vẽ khả dụng.
const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS);
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| WebGL OES_draw_buffers_indexed Extension Specification |