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

2019-09-06 12:09 阿诚de窝阅读(2692) 评论(0) 编辑收藏举报

到目前为止我们绘制了不少模型，用到了不少颜色，颜色中有四个分量（RGBA），其中的A分量表示透明度，这个分量目前为止我们还没有真正的用到；

A分量，表示的是当前的透明度，如果设定为 0.5 就会半透明，可以看到半透明的模型，也可以看见模型后面的东西；

开启混合

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

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

源因子和目标因子是可以通过gl.blendFunc函数来进行设置的

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

如果设置了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);

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

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

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

刷新页面返回顶部