代码改变世界

WebGL学习笔记(十一):混合和透明

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

到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(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