关于javascript:JavaScript-WebGL-图片透明处理

引子

JavaScript WebGL 应用图片纳闷点中提到两张图片叠加，默认状况下，即便有通明的区域也不会透过看到。当初就来看这个通明的解决。

说到通明，在色彩编码中由 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);

而后指定混合的形式有：

void blendEquation(enum mode)

mode 取值有：

这个办法只指定了混合的形式，如果要看到最终的成果，须要跟 blendFunc 或 blendFuncSeparate 办法配合一起应用。看看这篇文章最上面的伪代码逻辑会加深了解。

这是示例。

void blendEquationSeparate(enum modeRGB, enum modeAlpha)

这个办法的两个参数取值与 blendEquation 办法参数取值一样，区别是把色彩分成了 RGB 和 A 独自的两局部。

void blendFunc(enum sfactor, enum dfactor);

混合色彩的计算方法是：

混合后色彩 = 源色彩 * sfactor + 指标色彩 * dfactor

这里计算针对的是每个色彩重量，上面设定 S 代码源色彩，D 代表指标色彩，各个重量用小写 rgba 示意，上面看看权重因子局部常量取值：

还有能够配合办法 blendColor(red, green, blue, 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

上面这些是示例：

void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)

这个办法参数取值与 blendFunc 办法参数取值一样，区别是把色彩分成了 RGB 和 A 独自的两局部。