JavaScript WebGL 图片透明处理

引子

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);

然后指定混合的方式有：