引子
JavaScript WebGL 使用圖片疑惑點中提到兩張圖片疊加，默認情況下峡扩，即使有透明的區(qū)域也不會透過看到。現(xiàn)在就來看這個透明的處理庇绽。
關(guān)于透明
說到透明，在顏色編碼中由 Alpha 通道負責(zé)橙困，透明度存儲方式有：
- 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 紋理預(yù)處理使用 pixelStorei 方法指定顏色透明處理方式拓春，如果想要使用 Premultiplied Alpha 方式：
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
WebGL 透明處理方式之一是使用 α 混合。
α 混合
α 混合是使用 α 值(RGBA 中的 A)混合兩個以上物體顏色的過程亚隅。在這個場景下硼莽，繪制了多個紋理且有重疊的地方，假設(shè)先繪制紋理 C 煮纵，然后再繪制紋理 D 懂鸵，那么紋理 D 就是源顏色（source color）， 紋理 C 就是目標顏色（destination color）行疏。
想要使用該功能匆光，首先要開啟：
gl.enable(gl.BLEND);
然后指定混合的方式有：
blendEquation
void blendEquation(enum mode)
mode 取值有：
- FUNC_ADD : 源顏色分量與目標顏色分量相加。
- FUNC_SUBTRACT : 源顏色分量減去目標顏色分量酿联。
- FUNC_REVERSE_SUBTRACT : 目標顏色分量減去源顏色分量终息。
這個方法只指定了混合的方式，如果要看到最終的效果贞让，需要跟 blendFunc 或 blendFuncSeparate 方法配合一起使用周崭。看看這篇文章最下面的偽代碼邏輯會加深理解喳张。
這是示例续镇。
blendEquationSeparate
void blendEquationSeparate(enum modeRGB, enum modeAlpha)
這個方法的兩個參數(shù)取值與 blendEquation 方法參數(shù)取值一樣，區(qū)別是把顏色分成了 RGB 和 A 單獨的兩部分销部。
blendFunc
void blendFunc(enum sfactor, enum dfactor);
- sfactor : 常量磨取，源顏色在混合顏色中的權(quán)重因子人柿，比 dfactor 多一個值
SRC_ALPHA_SATURATE。 - dfactor : 常量忙厌，目標顏色在混合顏色中的權(quán)重因子凫岖。
混合顏色的計算方法是：
混合后顏色 = 源顏色 * sfactor + 目標顏色 * dfactor
這里計算針對的是每個顏色分量，下面設(shè)定 S 代碼源顏色逢净，D 代表目標顏色哥放，各個分量用小寫 rgba 表示，下面看看權(quán)重因子部分常量取值：
| 常量 | 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) // 默認對應(yīng)分量都是 0
關(guān)于第一個參數(shù)多的取值 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 |
下面這些是示例：
blendFuncSeparate
void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)
這個方法參數(shù)取值與 blendFunc 方法參數(shù)取值一樣社露，區(qū)別是把顏色分成了 RGB 和 A 單獨的兩部分。
