[WebGL入门]三十,混合系数

翻译 2017年08月23日 09:04:38

注:文章译自http://wgld.org/,原作者杉本雅広(doxas)


本次demo的运行结果

各种各样的混色

上次为了进行透明混色,介绍了一下混色和混合系数的基础。将混色设置成有效时,进行各种各样的设定,可以达到透明处理和其他处理效果。
这次我们再来继续探索一下这个深奥的世界。能够彻底理解这次的内容的话,就可以根据自己的创意来创造出各种各样的绚丽效果。和上次一样难免会有一些难理解的部分,加油学习吧。

混色是将颜色和颜色混合处理的总称,在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系列的混合系数被指定之后,就会使用这里所设置的颜色进行混色处理。


混合系数可以动态改变的demo

欢迎继续关注我的博客

转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend

webgl——混合与模板测试

今天研究了一个混合与模板测试相结合的案例,这里做以总结。         案例中一个篮球在地板上不断弹起并且落下,这里主要涉及到了两项技术:混合与模板测试。首先篮球在地板上反射出来的镜像篮球就是通过混...

cas 入门之三十:cas 集群tomcat session组播复制

cas 的运行环境是tomcat,cas的集群主要分为两部分,一是登录过程中session的集群,二是登录之后产生的ticket的集群。 对于登录之后产生的ticket的集群,则相对容易,根据我前几...

iOS入门(三十)UICOntrol 及其子类

UICOntrol 及其子类  UISegmentedControl initWithItems  独有初始化方法,用于创建多个分段 通常点击不同的segment来切换不同的view 颜色和图...

Android笔记三十.Service入门(四).跨进程调用Service(AIDL Service)

跨进程调用Service(AIDL Service)   转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空) 一、AIDL Service ...

VS2013/MFC编程入门之三十(常用控件:树形控件Tree Control 下)

前面一节讲了树形控件Tree Control的简介、通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建、CTreeCtrl类的主要成员函数和应用实例。        树形控件的创建 ...

C++编程入门系列之三十(数组、指针和字符串:指针用作函数参数、指针型函数和函数指针)

前一讲给大家讲了指向数组元素的指针和指针数组,这一讲给大家讲讲指针作函数参数的方法和作用,何为指针型的函数,以及指向函数的指针的概念和使用方法。编程入门时指针的内容是难点,望大家细心研究。   ...

VS2010/MFC编程入门之三十(常用控件:树形控件Tree Control 上)

前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control。        树形控件简介        树形控件在Windows系统中...

java 从零开始,学习笔记之基础入门<javascript>(三十)

Javascript 弹出对话框 Lesson2.html 无标题文档         function say(){       ...
  • lulu147
  • lulu147
  • 2013年12月05日 10:01
  • 1317

Python零基础入门之三十Text控件

这篇博客主要是简单的说一下Tkinter中的Text控件的相关知识。Text文本组件用于显示和处理多行文本。在Tkinter的所有组件中,Text组件显得异常强大和灵活,它适用于处理多任务,虽然该组件...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[WebGL入门]三十,混合系数
举报原因:
原因补充:

(最多只允许输入30个字)