共计 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