WebGL学习笔记（十一）：混合和透明

到目前为止咱们绘制了很多模型，用到了很多颜色，颜色中有四个份量（RGBA），其中的A份量表示透明度，这个份量目前为止咱们尚未真正的用到；

A份量，表示的是当前的透明度，若是设定为 0.5 就会半透明，能够看到半透明的模型，也能够看见模型后面的东西；

开启混合

要实现透明，须要开启混合，会使用到下面的两个方法：

// 开启混合
gl.enable(gl.BLEND);
// 设定混合效果
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

源因子和目标因子是能够经过gl.blendFunc函数来进行设置的

gl.blendFunc有两个参数，前者表示源因子，后者表示目标因子。这两个参数能够是多种值，下面介绍比较经常使用的几种。

• gl.ZERO：表示使用0.0做为因子，实际上至关于不使用这种颜色参与混合运算。
• gl.ONE：表示使用1.0做为因子，实际上至关于彻底的使用了这种颜色参与混合运算。
• gl.SRC_ALPHA：表示使用源颜色的alpha值来做为因子。
• gl.DST_ALPHA：表示使用目标颜色的alpha值来做为因子。
• gl.ONE_MINUS_SRC_ALPHA：表示用1.0减去源颜色的alpha值来做为因子。
• gl.ONE_MINUS_DST_ALPHA：表示用1.0减去目标颜色的alpha值来做为因子。

举例来讲

• 若是设置了gl.blendFunc(gl.ONE, gl.ZERO);，则表示彻底使用源颜色，彻底不使用目标颜色，所以画面效果和不使用混合的时候一致（固然效率可能会低一点点）。若是没有设置源因子和目标因子，则默认状况就是这样的设置。
• 若是设置了gl.blendFunc(gl.ZERO, gl.ONE);，则表示彻底不使用源颜色，所以不管你想画什么，最后都不会被画上去了。（但这并非说这样设置就没有用，有些时候可能有特殊用途）
• 如 果设置了gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);，则表示源颜色乘以自身的alpha 值，目标颜色乘以1.0减去源颜色的alpha值，这样一来，源颜色的alpha值越大，则产生的新颜色中源颜色所占比例就越大，而目标颜色所占比例则减 小。这种状况下，咱们能够简单的将源颜色的alpha值理解为“不透明度”。这也是混合时最经常使用的方式。
• 若是设置了gl.blendFunc(gl.ONE, gl.ONE);，则表示彻底使用源颜色和目标颜色，最终的颜色实际上就是两种颜色的简单相加。例如红色(1, 0, 0)和绿色(0, 1, 0)相加获得(1, 1, 0)，结果为黄色。

注意：所谓源颜色和目标颜色，是跟绘制的顺序有关的。假如先绘制了一个红色的物体，再在其上绘制绿色的物体。则绿色是源颜色，红色是目标颜色。若是顺序反过来，则红色就是源颜色，绿色才是目标颜色。在绘制时，应该注意顺序，使得绘制的源颜色与设置的源因子对应，目标颜色与设置的目标因子对应。

绘制半透明三角形

核心代码以下：

// 开启混合
gl.enable(gl.BLEND);
// 设定混合模式为透明模式
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

示例请点击：https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_12/LookAtBlendedTriangles.html

绘制透明立方体

须要注意的是，透明的图像绘制时，不能开启深度测试，开启深度测试，不管是否透明，靠后的颜色都会丢失；

若是已经开启了深度测试（用于绘制不透明的图像），还能够调用depthMask来临时开启和关闭深度测试，调用 gl.depthMask(false); 能够关闭深度测试；

另外，绘制透明立方体时，若是须要显示背面，就关闭剔除模式，须要不要显示背面就开启剔除模式并设定为剔除背面；

示例请点击：https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_12/BlendedCube.html