颜色混合BlendFunc用法实例总结

1、概念

“混合”是指两种颜色的叠加方式。在新图片将要渲染画到屏幕上的时候,将用在新图片中的红、绿、蓝和透明度信息,与屏幕上已经存在的图片颜色信息相融合。

说的具体一点,就是把某一像素位置上原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果。

新图片颜色被称作“源颜色”,而屏幕上已存在的图片颜色则被称作“目标颜色”。

OpenGL会把源颜色和目标颜色各自取出,并乘以一个系数(源颜色乘以的系数称为“源因子”,目标颜色乘以的系数称为“目标因子”),然后相加,这样就得到了新的颜色。


2、计算公式

假设:颜色信息的四个分量(红,绿,蓝,透明度)

(1)“源颜色”  :(Rs, Gs, Bs, As)

(2)“目标颜色”:(Rd, Gd, Bd, Ad)

(3)“源因子”  :(Sr, Sg, Sb, Sa)

(4)“目标因子”:(Dr, Dg, Db, Da)

那么混合产生的新颜色可以表示为:(Rs*Sr + Rd*Dr , Gs*Sg + Gd*Dg , Bs*Sb + Bd*Db , As*Sa + Ad*Da)

如果颜色的某一分量超过了1.0,则它会被自动截取为1.0,不需要考虑越界的问题。 


3、混合因子

1414135068693768.png

4、使用方法

Sprite精灵类中有一个设置混合方式的函数setBlendFunc(BlendFunc),另外混合方式的属性值是以BlendFunc结构体作为数据的,定义方式为:{ '源因子' , '目标因子' }。

混合方式可用于精灵纹理图片颜色信息的混合与叠加。


4.1、混合方式创建

1
2
3
4
//
     //{ '源因子' , '目标因子' }
     BlendFunc cbl = { GL_SRC_ALPHA , GL_ONE };
//

4.2、静态常量(常用混合方式)

1
2
3
4
5
6
//
     const  BlendFunc BlendFunc::DISABLE                 = {GL_ONE, GL_ZERO};
     const  BlendFunc BlendFunc::ALPHA_PREMULTIPLIED     = {GL_ONE, GL_ONE_MINUS_SRC_ALPHA};
     const  BlendFunc BlendFunc::ALPHA_NON_PREMULTIPLIED = {GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA};
     const  BlendFunc BlendFunc::ADDITIVE                = {GL_SRC_ALPHA, GL_ONE};
//

4.3、混合方式举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//
//目标图片,已存在于屏幕上
     Sprite* sp1 = Sprite::create( "red.jpg" );
     sp1->setPosition(mysize/3);
     this ->addChild(sp1);
  
//源图片,新图片
     Sprite* sp2 = Sprite::create( "green.jpg" );
     sp2->setPosition(mysize/3.0*2.0);
     this ->addChild(sp2);
  
//混合方式,新图片渲染时的混合方式
     //{ 源因子 , 混合因子 }
     BlendFunc cbl = { GL_SRC_ALPHA , GL_ONE };
     sp2->setBlendFunc(cbl);
//

4.4、如下图所示

1414135140156258.jpg


5、混合方式举例

(1){ GL_ONE , GL_ZERO }

wKioL1QEuTajzwqsAAAomR0Cwdc453.jpg


(2){ GL_ZERO, GL_ONE }

wKiom1QEuWngO6qrAAAYU-tyrVw791.jpg


(3){ GL_ONE, GL_ONE }

wKioL1QEufegzzOLAAAsUt4gCjU945.jpg


(4){ GL_SRC_ALPHA , GL_ONE } (比较常用)

和上图一样?是因为“源颜色”的透明度为:1。

wKiom1QEuk2Bi8jeAAAsXXQ5FXQ245.jpg

 

转载:http://cn.cocos2d-x.org/tutorial/show?id=1739

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值