WebGLRenderingContext: blendFuncSeparate() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
Phương thức WebGLRenderingContext.blendFuncSeparate() của WebGL API xác định hàm nào được sử dụng để trộn số học pixel cho các thành phần RGB và alpha một cách riêng biệt.
Cú pháp
blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)
Thông số
srcRGB-
Một
GLenumchỉ định hệ số nhân cho màu đỏ, lục và lam (RGB) yếu tố pha trộn nguồn. Giá trị mặc định làgl.ONE. Để biết các giá trị có thể, hãy xem bên dưới. dstRGB-
Một
GLenumchỉ định hệ số nhân cho màu đỏ, lục và lam (RGB) các yếu tố kết hợp điểm đến Giá trị mặc định làgl.ZERO. Để biết các giá trị có thể, hãy xem bên dưới. srcAlpha-
Một
GLenumchỉ định một hệ số nhân cho việc trộn nguồn alpha nhân tố. Giá trị mặc định làgl.ONE. Để biết các giá trị có thể, hãy xem bên dưới. dstAlpha-
Một
GLenumchỉ định một hệ số nhân cho việc trộn đích alpha nhân tố. Giá trị mặc định làgl.ZERO. Để biết các giá trị có thể, hãy xem bên dưới.
Giá trị trả về
Không có (undefined).
Ngoại lệ
- Nếu srcRGB, dstRGB, srcAlpha hoặc dstAlpha không
một trong các giá trị có thể được liệt kê, lỗi
gl.INVALID_ENUMsẽ được đưa ra. - Nếu một màu không đổi và một giá trị alpha không đổi được sử dụng cùng nhau làm nguồn
(
srcRGB) và đích (dstRGB), lỗigl.INVALID_ENUMsẽ được đưa ra.
Hằng số
Các hằng số sau có thể được sử dụng cho srcRGB, dstRGB, srcAlpha và dstAlpha
Công thức cho các hệ số hòa trộn có thể được mô tả như thế này (tất cả các giá trị RGBA nằm trong khoảng từ 0 đến 1):
- màu(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)
- color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)
Trong bảng sau, RS, GS, BS, AS đại diện tương ứng cho thành phần red, green, blue và alpha của nguồn, trong khi RD, GD, BD, AD đại diện tương ứng cho thành phần red, green, blue và alpha của đích đến. Tương tự, RC, GC, BC, AC đại diện tương ứng cho thành phần red, green, blue và alpha của một hằng số màu sắc. Chúng bao gồm tất cả các giá trị từ 0 đến 1.
gl.SRC_COLOR| Không đổi | Hệ số RGB | Hệ số Alpha | Mô tả |
|---|---|---|---|
gl.ZERO | 0,0,0 | 0 | Nhân tất cả các màu với 0. |
gl.ONE | 1,1,1,1 | 1 | Nhân tất cả các màu với 1. |
| RS, GS, BS | AS | Nhân tất cả các màu theo nguồn màu sắc. | |
gl.ONE_MINUS_SRC_COLOR | 1-RS, 1-GS, 1-BS | 1-AS | Nhân tất cả các màu với 1 trừ mỗi màu nguồn. |
gl.DST_COLOR | RD, GD, BD | AD | Nhân tất cả các màu với màu đích. |
gl.ONE_MINUS_DST_COLOR | 1-RD, 1-GD, 1-BD | 1-AD | Nhân tất cả các màu với 1 trừ mỗi màu đích. |
gl.SRC_ALPHA | AS, AS, AS | AS | Nhân tất cả các màu với màu alpha nguồn. |
gl.ONE_MINUS_SRC_ALPHA | 1-AS, 1-AS, 1-AS | 1-AS | Nhân tất cả các màu với 1 trừ đi màu alpha nguồn. |
gl.DST_ALPHA | AD, AD, AD | AD | Nhân tất cả các màu với màu alpha đích. |
gl.ONE_MINUS_DST_ALPHA | 1-AD, 1-AD, 1-AD | 1-AD | Nhân tất cả các màu với 1 trừ đi màu alpha đích. |
gl.CONSTANT_COLOR | RC, GC, BC | AC | Nhân tất cả các màu với một màu không đổi. |
gl.ONE_MINUS_CONSTANT_COLOR | 1-RC, 1-GC, 1-BC | 1-AC | Nhân tất cả các màu với 1 trừ một màu không đổi. |
gl.CONSTANT_ALPHA | AC, AC, AC | AC | Nhân tất cả các màu với một giá trị alpha không đổi. |
gl.ONE_MINUS_CONSTANT_ALPHA | 1-AC, 1-AC, 1-AC | 1-AC | Nhân tất cả các màu với 1 trừ đi một giá trị alpha không đổi.���TOK276 |
gl.SRC_ALPHA_SATURATE | phút(AS, 1 - AD), phút(AS, 1 - AD), phút(AS, 1 - AD) | 1 | Nhân các màu RGB với giá trị nhỏ hơn của màu alpha nguồn hoặc giá trị 1 trừ đi màu alpha đích. Giá trị alpha được nhân với 1. |
Ví dụ
Để sử dụng chức năng hoà trộn, trước tiên bạn phải kích hoạt hoà trộn bằng WebGLRenderingContext.enable() với đối số gl.BLEND.
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
Để có được hàm hòa trộn hiện tại, hãy truy vấn các hằng số BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB, và BLEND_DST_ALPHA để trả về một trong các hằng số của hàm hòa trộn.
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_COLOR;
// true
Thông số kỹ thuật
| Specification |
|---|
| WebGL Specification # 5.14.3 |