共计 2311 个字符,预计需要花费 6 分钟才能阅读完成。
引子
JavaScript WebGL 应用图片纳闷点中提到两张图片叠加,默认状况下,即便有通明的区域也不会透过看到。当初就来看这个通明的解决。
- Origin
- My GitHub
对于通明
说到通明,在色彩编码中由 Alpha 通道负责,透明度存储形式有:
- Premultiplied Alpha:示意色彩信息在存储的时候会将通明信息与 RGB 相乘,比方 RGB 是 (1, 1, 1),透明度为 0.5,那么存储时为:(0.5, 0.5, 0.5, 0.5)。
- Non-premultiplied Alpha:示意 RGB 与通明信息别离独自存储,不会相乘,比方 RGB 是 (1, 1, 1),透明度为 0.5,那么存储时为:(1, 1, 1, 0.5)
WebGL 纹理预处理应用 pixelStorei 办法指定色彩通明解决形式,如果想要应用 Premultiplied Alpha 形式:
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
WebGL 通明解决形式之一是应用 α 混合。
α 混合
α 混合是应用 α 值 (RGBA 中的 A) 混合两个以上物体色彩的过程。在这个场景下,绘制了多个纹理且有重叠的中央,假如先绘制纹理 C,而后再绘制纹理 D,那么纹理 D 就是源色彩(source color),纹理 C 就是指标色彩(destination color)。
想要应用该性能,首先要开启:
gl.enable(gl.BLEND);
而后指定混合的形式有:
- blendEquation
- blendEquationSeparate
- blendFunc
- blendFuncSeparate
blendEquation
void blendEquation(enum mode)
mode
取值有:
- FUNC_ADD : 源色彩重量与指标色彩重量相加。
- FUNC_SUBTRACT : 源色彩重量减去指标色彩重量。
- FUNC_REVERSE_SUBTRACT : 指标色彩重量减去源色彩重量。
这个办法只指定了混合的形式,如果要看到最终的成果,须要跟 blendFunc
或 blendFuncSeparate
办法配合一起应用。看看这篇文章最上面的伪代码逻辑会加深了解。
这是示例。
blendEquationSeparate
void blendEquationSeparate(enum modeRGB, enum modeAlpha)
这个办法的两个参数取值与 blendEquation
办法参数取值一样,区别是把色彩分成了 RGB 和 A 独自的两局部。
blendFunc
void blendFunc(enum sfactor, enum dfactor);
- sfactor : 常量,源色彩在混合色彩中的权重因子,比 dfactor 多一个值
SRC_ALPHA_SATURATE
。 - dfactor : 常量,指标色彩在混合色彩中的权重因子。
混合色彩的计算方法是:
混合后色彩 = 源色彩 * sfactor + 指标色彩 * dfactor
这里计算针对的是每个色彩重量,上面设定 S 代码源色彩,D 代表指标色彩,各个重量用小写 rgba 示意,上面看看权重因子局部常量取值:
常量 | R 重量 | G 重量 | B 重量 | A 重量 |
---|---|---|---|---|
ZERO | 0 | 0 | 0 | 0 |
ONE | 1 | 1 | 1 | 1 |
SRC_COLOR | S.r | S.g | S.b | S.a |
ONE_MINUS_SRC_COLOR | (1-S.r) | (1-S.g) | (1-S.b) | (1-S.a) |
DST_COLOR | D.r | D.g | D.b | D.a |
ONE_MINUS_DST_COLOR | (1-D.r) | (1-D.g) | (1-D.b) | (1-D.a) |
SRC_ALPHA | S.a | S.a | S.a | S.a |
ONE_MINUS_SRC_ALPHA | (1-S.a) | (1-S.a) | (1-S.a) | (1-S.a) |
DST_ALPHA | D.a | D.a | D.a | D.a |
ONE_MINUS_DST_ALPHA | (1-D.a) | (1-D.a) | (1-D.a) | (1-D.a) |
还有能够配合办法 blendColor(red, green, blue, alpha) 的常量取值:
常量 | R 重量 | G 重量 | B 重量 | A 重量 |
---|---|---|---|---|
CONSTANT_COLOR | red | green | blue | alpha |
ONE_MINUS_CONSTANT_COLOR | (1-red) | (1-green) | (1-blue) | (1-alpha) |
CONSTANT_ALPHA | alpha | alpha | alpha | alpha |
ONE_MINUS_CONSTANT_ALPHA | (1-alpha) | (1-alpha) | (1-alpha) | (1-alpha) |
如果不应用 blendColor
指定重量,也是能够应用这些常量,因为有默认值:
gl.getParameter(gl.BLEND_COLOR) // 默认对应重量都是 0
对于第一个参数多的取值 SRC_ALPHA_SATURATE
:
常量 | R 重量 | G 重量 | B 重量 | A 重量 |
---|---|---|---|---|
SRC_ALPHA_SATURATE | min(S.a, 1-D.a) | min(S.a, 1-D.a) | min(S.a, 1-D.a) | 1 |
上面这些是示例:
- 没有应用
blendColor
办法的示例。 - 配合应用
blendColor
办法的示例。
blendFuncSeparate
void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)
这个办法参数取值与 blendFunc
办法参数取值一样,区别是把色彩分成了 RGB 和 A 独自的两局部。
参考资料
- WebGL 绘制详解之七:Blend
- Texture Maps
- Texture Mapping Using Images
- WebGL and Alpha
- Transparency (and Alpha Blending)
- WEBGL, BLENDING, AND WHY YOU’RE PROBABLY DOING IT WRONG