注：文章译自http://wgld.org/，原作者杉本雅広(doxas)
各种各样的混色
上次为了进行透明混色，介绍了一下混色和混合系数的基础。将混色设置成有效时，进行各种各样的设定，可以达到透明处理和其他处理效果。这次我们再来继续探索一下这个深奥的世界。能够彻底理解这次的内容的话，就可以根据自己的创意来创造出各种各样的绚丽效果。和上次一样难免会有一些难理解的部分，加油学习吧。
混色是将颜色和颜色混合处理的总称，在WebGL中主要是指源颜色和目标颜色这两种颜色的混合。源颜色是即将要绘制的颜色，目标颜色是已经绘制的颜色，源颜色如何处理，目标颜色如何处理，这些都可以单独进行设置。颜色如何处理是由混合系数决定的，混合系数有很多种，不同的组合绘制的结果也会有很大不同。根据自己的创意，可以实现透明处理，加算合成，反转合成等各种各样的合成处理。
这次，来更进一步详细说说混合系数。而这回的demo，也会将这些混合系数做成可调整的形式，大家可以试一下各种混合系数的组合。
blendFuncSeparate函数
上一篇文章介绍了设定混合系数的函数blendFunc，使用这个函数可以给源颜色和目标颜色分别设置不同的混合系数。实际上，在WebGL中除了blendFunc，还有其他函数可以设置更详细的混合系数，那就是blendFuncSeparate函数，这个函数的名字里多了个单词[ Separate ]，设置混合系数的时候肯定是有什么不一样的地方了，那具体区别是什么呢。
上次的demo中，透明混色的透明度设置成半透明的时候，混色的结果本来应该是下图中的右侧的效果，但是实际上结果是下图中的左侧的效果。
上次的demo中的结果，渲染的半透明的模型的颜色会稍微有些发亮，到底是发生了什么呢。
实际上，使用blendFunc函数设定混合系数的时候，设置RGB颜色的同时，透明度也被同时设置了，也就是说，RGBA的所有要素都会根据blendFunc函数设定的混合系数进行计算，所以渲染的模型的透明度也收到了影响，就导致了上面的稍微有些奇怪的结果。
为了回避这个，RGBA中的RGB和A分别进行设置是有必要的。这个设置就需要用到刚才提到的blendFuncSeparate函数。
这个函数接收四个参数。第一、第二个参数，指定RGB颜色的混合系数。第三、第四个参数，指定透明度的混合系数。
blendFuncSeparate 函数
第一个参数：源颜色(SRC)的混合系数
第二个参数：目标颜色(DST)的混合系数
第三个参数：源颜色(SRC)的透明度的混合系数
第四个参数：目标颜色(DST)的透明度的混合系数
>设置透明度混色的例子：
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);像这样对RGB的颜色值和透明度分别进行混合系数的设置，会比目前所使用的blendFunc函数生成更多的效果，当然有时候只用blendFunc函数就足够了，但是blendFuncSeparate函数的使用范围更广一些。
颜色的合成计算方法
话分两头，关于颜色合成是如何计算的之前也稍微说了一点，应该还有印象吧，计算公式如下。
最终输出颜色 = 源颜色 * sfactor + 目标颜色 * dfactor
源颜色和目标颜色都是在混合系数作用之后再进行加算得出最终输出的颜色。但是，这个加算，如果想使用减法的话该怎么做呢。
在3D渲染的世界里，光的表现等经常会使用加算合成。与之相对应的就是减算合成，让源颜色减去目标颜色。
混色的时候的最终输出颜色就如刚才的计算公式记载的那样通过加算来计算的，所以减算合成就有点难办了。※当然也不是不可能……
如果能把颜色的运算法则由加算变为减算的话，那减算合成就变得非常简单了。而且，WebGL中也专门准备了这样一个函数，那就是blendEquation。
这个函数接收一个参数，是一个表示如何进行颜色计算的常量。常量由下面三种。
blendEquation函数中指定的内置常量
gl.FUNC_ADD：源颜色 + 目标颜色
gl.FUNC_SUBTRACT：源颜色 - 目标颜色
gl.FUNC_REVERSE_SUBTRACT：目标颜色 - 源颜色
进行减算合成的时候，就是在已经绘制的颜色上减去将要绘制的颜色，所以正确的方法就是gl.FUNC_REVERSE_SUBTRACT了。
如果这个颜色的计算方法，像blendFunc函数那样，如果不能对RGB和透明度分别进行设置的话，那就有些麻烦了。这次的demo中使用的减算处理，透明度也跟着做减算处理的话，渲染的结果也会变得有些奇怪了。
针对blendEquation函数，相对应的就是blendEquationSeparate函数了。使用这个函数，就能对RGB颜色和透明度分别进行设置了。可以接收的参数有两个，第一个参数是RGB的处理方法，第二个参数是透明度的处理方法。这个函数可以使用的常量跟blendEquation函数是完全一样的。
上次的demo如果换成blendEquationSeparate函数进行减算合成的话，就会得到下面的渲染效果。因为进行减算的缘故颜色变暗了。
总结
内容可能有些复杂，大家消化的如何呢。
这次出现的函数，可以分为[设定混合系数的函数 ]和[指定颜色计算方法的函数]两大类。而且，都分别存在一个扩展函数可以分别设定RGB（颜色）和A（透明度）的处理。
一般的混色可能是不需要对RBG的值和透明度分别进行处理的，但是单从透明混色来看，对颜色和透明度进行分别处理还是必须的。
这些设定看似非常复杂，当然也可能是我个人觉得很难理解吧。不过反过来想一下，这对程序员来说自由度也更大一些。大家可以多多尝试一下，慢慢都会理解的。
这次准备的demo，利用了HTML的DOM，模型的透明度等值都是可以自由设置的。文章最后会给出链接，一定要自己尝试一下。
demo的代码就不多说了，有心的人可以自己查看一下网页的代码。
下次，会讲解一下四元数，这在3D编程中是比较常用的一个概念，稍微涉及到一些数学知识，会尽量详细解说的。
混色中使用的常量
多少有些难理解的部分，再补充说明一下。
这次的demo中，混合系数的一览中有gl.CONSTANT_COLOR等CONSTANT常量，都是可以在混色是使用的。
而之前所说的gl.SRC_COLOR和gl.DST_COLOR等所有与源颜色和目标颜色有关的混合系数也都是可以使用的。CONSTANT系列的混合系数本身跟源颜色及目标颜色的颜色是无关的，但是在进行混色时却是必要的。
混色时设定颜色的常量的时候所用的函数是blendColor，这个函数会影响RGBA中的全部四个要素。WebGL中默认的颜色值是(0.0, 0.0, 0.0, 0.0)，全部都是0。改变颜色常量时使用下面的代码。
gl.blendColor(1.0, 1.0, 1.0, 1.0);
执行上面的代码，会设定混色的颜色为不透明的白色。CONSTANT系列的混合系数被指定之后，就会使用这里所设置的颜色进行混色处理。
欢迎继续关注我的博客
转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend