THREEJS中材质的混合模式属性Blending的理解_threejs blending

threejs中材质Material的混合模式blenging有6种：NoBlending、NormalBlending、AdditiveBlending、SubtracitivBlending、MultiplyBlending和CustomBlending。

在之前的threejs学习中，为了赶学习进度，囫囵吞枣式的只记了个大概，今天重新回顾并记录一下。好了，废话止与此，开始介绍。

一、预前说明和材料：
1、准备的说明性图片：

以下图为例，左图为原图，右图为解释图（可以分为三个区域：
1、中心区域是不透明度为1，颜色为红色的圆形；
2、中心区域的边缘处是不透明度接近0.8，颜色为黑色的圆环区域；
3、剩下的区域，范围是正方形区域 - 中心区域 - 圆环区域，不透明度为0，颜色为白色。
因为透明度为0，所以避免读者误以为我上传的仅仅是中心区域的圆形，我补充了右边的解释图）

2、在THREEJS中，乃至WebGL中，颜色的混合公式大致可以理解为
混合颜色 = 源颜色 * 源因子 + 目标颜色 * 目标因子

源颜色：可以理解成在深度缓冲区中z值较小的区域，也就是靠近屏幕的区域

目标颜色：可以理解成在深度缓冲区中z值较大的区域，也就是远离屏幕的区域

源因子： 源颜色的不透明度

目标因子：1 - 目标颜色的不透明度
二、正式介绍：

1、NoBlending:

见词知意，NoBlending模式就是不混合模式，源颜色（原图）是什么颜色就展示什么颜色，不与其他目标颜色进行任何混合渲染。
细心的同学可能会有一个疑问：既然是展示原生态颜色，如果源颜色的某个区域的不透明度为0（完全透明），比如上图中的剩下区域的不透明度为0，那么这时候根据混合颜色公式，剩下区域展示出来的颜色，是场景中该张图片远处背景的颜色。如果是这样的话，是背离NoBlending模式的，这相当于就是一个官方BUG的存在？
实际上，官方的解决办法很暴力且巧妙的规避了这个bug:
在NoBlending模式下，如果源颜色中存在不透明度为0的区域，直接用白色填充该区域，不会采用混合公式。
如下图所示：在NoBlending模式下，剩下区域由于不透明度为0，直接被填充为白色，并不会显示任何目标颜色

2、NormalBlending:

中文释义为正常混合，是Material的blending属性的默认值，采用混合公式，符合真实物理世界的渲染规则。可以看出，与NoBlending模式相比，不透明度为0的剩余区域，已经完全被目标颜色所渲染。

3、AdditiveBlending:

中文释义为叠加混合，即混合颜色 = 源颜色 + 目标颜色。不采用混合公式，不会区分重叠区域，如下图所示：中心区域的颜色为rgb(1,0,0),目标颜色大致为rgb(0.7,0.7,0),在AdditiveBlending模式下，直接对每一个片元进行颜色相加：rgb(1,0,0) + rgb（0.7,0.7,0） => rgb(1,0.7,0)

4、SubtractiveBlending:

中文释意为相减混合，要注意的是，这里的相减指的是目标颜色 - 源颜色，rgb(0.7,0.7,0) - rgb(1.0,0,0) => rgb(0,0.7,0),看图知意，不做过多介绍。

5、MultiplyBlending:

中文释义为乘积混合，不做过多介绍，读者可以自行阐释

6、CustomBlending:

中文释义为自定义混合，关于CustomBlending的介绍，篇幅较长，有时间再整理