Blend混合效果

简介: Blend混合效果

所谓源颜色和目标颜色,是跟绘制的顺序有关的。假如先绘制了一个红色的物体,再在其上绘制绿色的物体。则绿色是源颜色,红色是目标颜色。如果顺序反过来,则 红色就是源颜色,绿色才是目标颜色。在绘制时,应该注意顺序,使得绘制的源颜色与设置的源因子对应,目标颜色与设置的目标因子对应。

以sprite作为src,sprite所在位置的其他像素作为dest,进行混合运算

参数\颜色 R G B A
Rs Gs Bs As
源的运算因子 N_Rs N_Gs N_Bs N_As
目标 Rd Gd Bd Ad
目标的运算因子 N_Rd N_Gd N_Bd N_Ad
混合后的值 Rs * N_Rs + Rd * N_Rd Gs * N_Gs + Gd * N_Gd Bs * N_Bs + Bd * N_Bd As * N_As + Ad * N_Ad

运算因子:

变量
GL_ONE 1.0
GL_ZERO 0.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值作为因子
  • creator默认的是:
GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA
复制代码

举例:

原图如下:

网络异常,图片无法展示
|

blend(GL_ONE, GL_ZERO)的效果:

Source(rgba)*1+Dest(rgba)*0

如果Sprite本身有透明的地方,则透明的地方会变成黑色。因为此时不显示目标的颜色。即使透明度为0也没有意义。

网络异常,图片无法展示
|

blend(GL_ZERO, GL_ONE)的效果:

Source(rgba)*0+Dest(rgba)*1

表示不使用源颜色,那么该Sprite便不被画出来。

网络异常,图片无法展示
|

blend(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

  • 表示源颜色乘以自身的alpha值,目标颜色乘以1.0减去源颜色的alpha值
  • 这样一来,源颜色的alpha值越大,则产生的新颜色中源颜色所占比例就越大,而目标颜色所占比例则减小。
  • 这种情况下,我们可以简单的将源颜色的alpha值理解为“不透明度”,这也是混合时最常用的方式。

blend(GL_ONE, GL_ONE)

  • 最终的颜色实际上就是两种颜色的简单相加。
  • 例如红色(1, 0, 0)和绿色(0, 1, 0)相加得到(1, 1, 0),结果为黄色。

blend(GL_SRC_ALPHA, GL_ONE)

  • 表示把渲染的图像叠加到目标区域,也就是说源的每一个像素的alpha都等于自己的alpha,目标的每一个像素的alpha等于1。
  • 这样叠加次数越多,叠加的图元的alpha越高,得到的结果就越亮。
  • 因此这种融合用于表达光亮效果。

blend(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

  • 表示把渲染的图像融合到目标区域。也就是说源的每一个像素的alpha都等于自己的alpha,目标的每一个像素的alpha等于1减去该位置源像素的alpha。
  • 因此不论叠加多少次,亮度是不变的。

使用ALPHA相关的因子,会根据透明度来计算。

blend(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)

targetAlpha = SourceAlpha*1  + DestAlpha*(1-SourceAlpha)

SourceAlpha=0.1
DestAlpha=1
targetAlpha = 0.1*1 + 1*0.9=1
复制代码
SourceAlpha=0.9
DestAlpha=0.1
targetAlpha = 0.9*1 + 0.1*0.1 =0.91
复制代码
SourceAlpha=0
DestAlpha=1
targetAlpha = 0*1 + 1*1 = 1
复制代码
常数 相关因子 融合因子结果
GL_ZERO 源因子或目的因子 (0,0,0,0)
GL_ONE 源因子或目的因子 (1,1,1,1)
GL_DST_COLOR 源因子 (Rd,Gd,Bd,Ad)
GL_SRC_COLOR 目的因子 (Rs,Gs,Bs,As)
GL_ONE_MINUS_DST_COLOR 源因子 (1,1,1,1)-(Rd,Gd,Bd,Ad)
GL_ONE_MINUS_SRC_COLOR 目的因子 (1,1,1,1)-(Rs,Gs,Bs,As)
GL_SRC_ALPHA 源因子或目的因子 (As,As,As,As)
GL_ONE_MINUS_SRC_ALPHA 源因子或目的因子 (1,1,1,1)-(As,As,As,As)
GL_DST_ALPHA 源因子或目的因子 (Ad,Ad,Ad,Ad)
GL_ONE_MINUS_DST_ALPHA 源因子或目的因子 (1,1,1,1)-(Ad,Ad,Ad,Ad)
GL_SRC_ALPHA_SATURATE 源因子 (f,f,f,1); f=min(As,1-Ad)



目录
相关文章
|
6天前
mix-blend-mode 利用混合模式让文字智能适配背景颜色
这篇文章介绍了一种CSS3属性:mix-blend-mode,它可以实现文字智能适配背景颜色和文字镂空效果。通过设置mix-blend-mode为difference,可以在黑色背景中显示白色文字,在白色背景中显示黑色文字。同时,文章还提到了mix-blend-mode的其他属性,如multiply、screen等等,感兴趣的读者可以进一步研究。
mix-blend-mode 利用混合模式让文字智能适配背景颜色
|
13天前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
|
13天前
|
人工智能 前端开发 计算机视觉
CSS mix-blend-mode 父子元素色彩叠加混合会碰撞出什么样的火花
CSS mix-blend-mode 父子元素色彩叠加混合会碰撞出什么样的火花
110 0
|
8月前
|
算法 搜索推荐 vr&ar
什么是模型混合模式?
GLTF编辑器,一款在线模型换肤软件
89 0
|
并行计算 iOS开发 MacOS
Metal每日分享,颜色转换滤镜效果
Metal每日分享,颜色转换滤镜效果
Metal每日分享,颜色转换滤镜效果
|
缓存 编解码 算法
U4 4.0 混合光栅化
我在蚂蚁 [Codeday#4 广州站的演讲][1]上介绍了为 U4 4.0 新设计的渲染流水线, 我们称为直接合成(Direct Compositing),区别于原生 WebView 同步合成(Synchronous Compositing)的渲染流水线。 新渲染流水线除了更好的系统兼容性和支持独立 GPU 进程外,也希望通过简化合成器架构和支持直接光栅化来提升渲染性能,减少 GPU 内存
601 0
|
C#
WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果
原文:WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果 本篇文章阅读的基础是在读者对于WPF有一定的了解并且有WPF相关的编码经验,对于Blend的界面布局有基础的知识.
1107 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
672 0

热门文章

最新文章