Blend混合模式 与 20余种颜色混合模式代码实现

https://www.bilibili.com/read/cv1874791

【UnityShader】Blend混合模式 与 20余种颜色混合模式代码实现(多图预警)

混合模式

  • 可简单理解为 指上下层图片相互有重叠时如何取色的一种称呼
  • 以下是百科给的解释 但我们今天要说的是Unity中的颜色混合

混合模式是图像处理技术中的一个技术名词,不仅用于广泛使用的Photoshop中,也应用于AfterEffect、llustrator 、 Dreamweaver、 Fireworks等软件。主要功效是可以用不同的方法将对象颜色与底层对象的颜色混合。当您将一种混合模式应用于某一对象时,在此对象的图层或组下方的任何对象上都可看到混合模式的效果。

Blend

  • 在编写shader时我们可以在SubShader或Pass中用Blend与BlendOp指明该对象与下一层色彩如何进行颜色混合
  • 常用的混合模式通过Blend实现 如下所示

混合模式Blend实现

  • 以下为测试图片

测试底图

测试混合图

  • 常用的滤色混合效果如下

滤色混合效果

代码实现混合模式

  • 可以看到Blend已经可以实现很多种混合效果 但这也只是混合模式的一部分
  • 而接下来才是重点 我们要在Shader中代码自己实现更多的混合模式
  • 以方便实现更多的Shader效果
  • 框架代码如下 还是前几篇文章一样 只更改frag中代码

混合模式shader框架代码

  • 其中MainTex为底图 BlendTex为要混合的图片
  • 颜色取值为(0-1) A为底图颜色 B为混合图颜色 C为输出图颜色

frag函数代码

  • 使用step()函数来代替if判断

注意:非常多资料 点光效果 使用两个min函数  实际效果还原应该是一个min一个max函数

所有混合模式代码实现

Unity实现与Ps效果对比图

  • 创建材质球 给与材质球该shader 将材质球赋给 Image UI 或者 2D Sprite
  • 添加对应贴图 如下

材质球设置

  • 查看实验效果(左 Unity实现 右 Ps对比)

正常模式

变暗

变亮

正片叠底

滤色

线性加深

线性减淡

叠加

强光

柔光

亮光

点光

线性光

实色混合

排除

差值

深色

浅色

减去

划分

核心代码

fixed4 C =A*(1-B.a)+B*(B.a);  //正常透明度混合

fixed4 C =min(A,B); //变暗

fixed4 C =max(A,B); //变亮

fixed4 C =A*B ; //正片叠底

fixed4 C=1-((1-A)*(1-B));//滤色 A+B-A*B

fixed4 C =A-((1-A)*(1-B))/B; //颜色加深

fixed4 C= A+(A*B)/(1-B); //颜色减淡

fixed4 C=A+B-1;//线性加深

fixed4 C=A+B; //线性减淡

fixed4 ifFlag= step(A,fixed4(0.5,0.5,0.5,0.5));

fixed4 C=ifFlag*A*B*2+(1-ifFlag)*(1-(1-A)*(1-B)*2);//叠加

fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

fixed4 C=ifFlag*A*B*2+(1-ifFlag)*(1-(1-A)*(1-B)*2); //强光

fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

fixed4 C=ifFlag*(A*B*2+A*A*(1-B*2))+(1-ifFlag)*(A*(1-B)*2+sqrt(A)*(2*B-1)); //柔光

fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

fixed4 C=ifFlag*(A-(1-A)*(1-2*B)/(2*B))+(1-ifFlag)*(A+A*(2*B-1)/(2*(1-B))); //亮光

fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

fixed4 C=ifFlag*(min(A,2*B))+(1-ifFlag)*(max(A,( B*2-1))); //点光

fixed4 C=A+2*B-1; //线性光

fixed4 ifFlag= step(A+B,fixed4(1,1,1,1));

fixed4 C=ifFlag*(fixed4(0,0,0,0))+(1-ifFlag)*(fixed4(1,1,1,1)); //实色混合

fixed4 C=A+B-A*B*2; //排除

fixed4 C=abs(A-B); //差值

fixed4 ifFlag= step(B.r+B.g+B.b,A.r+A.g+A.b);

fixed4 C=ifFlag*(B)+(1-ifFlag)*(A); //深色

fixed4 ifFlag= step(B.r+B.g+B.b,A.r+A.g+A.b);

fixed4 C=ifFlag*(A)+(1-ifFlag)*(B); //浅色

fixed4 C=A-B; //减去

fixed4 C=A/B; //划分

结语

  • 这些公式不用记住 再用到的时候查找挑选合适的方法就好
  • 项目源代码:https://github.com/QinZhuo/ShaderLab

原文地址:https://www.cnblogs.com/nafio/p/12184391.html

时间: 2024-10-14 09:57:10

Blend混合模式 与 20余种颜色混合模式代码实现的相关文章

清凉寺汝窑博物馆开馆 20余种汝瓷器型首次露面a3

股市结构分化严重的今年,阳光私募信托的日子也是步履维艰.对于什么水果适合热着吃,热着吃有什么方式,营养会不会流失,记者咨询了相关人士."肖红安透露,上赛季CBA联赛分红的资金已在新赛季CBA开赛前到位,每支球队平均分红万元,17个队总共亿元.主力合约连续3日升水昨日沪深300指数下跌点,跌幅%,收出三连阴,股指期货四合约同样收阴.如何重构城市发展格局,让城市形象"立"起来,是近年来衡阳市决策者们孜孜以求的课题.在兰州火车站广场,一些准备购票的旅客纷纷打伞避雪.由于待客热情,加

Html+Css+Js_之table每隔3行显示不同的两种颜色

1 <html> 2 <head> 3 <script type="text/javascript"> 4 /** 5 最近因项目的需求,有这样的一个问题: 6 一个table显示n条记录,每3行换一次颜色,例如:1,2,3行红色背景,4,5,6行绿色背景,7,8,9行红色背景...以此类推! 7 */ 8 window.onload=function() { 9 var tbl = document.getElementById("tab

N个扇形M种颜色

题: 将一个圆形等分成N个小扇形,将这些扇形标记为1,2,3,...,N,现在使用M种颜色对其涂色,要求相邻两个扇形颜色不相同.求:有多少种涂色方法? 备注: 1. 不考虑数值越界情况: 2. N >= 1, M >= 3: 3. 一个例子: 如果N=3, M=3时,一共有6种涂法 两种方法: ①数学公式法 我所搜到的基本都是这种方法 ②递归 自己写的 分为三步: 1. 明确边界 n个扇形,即长度为n的数组,当为第一个时,任意涂色,当为第n个时,停下,判断 2. 判断条件 当为第一个时,不需要

iOS两种颜色的线性渐变--DDGBannerScrollView

两种颜色的线性渐变 ! 我们都知道,一个像素点有三原色加上透明度组成,也就是所说的RGBA(红,绿,蓝,透明度),改变其中的任意一个值,给我们呈现的颜色就不一样. 比如,一个点的R1为10,另一个颜色的R2为30,那么R1->R2的线性变化的差值就是20 ,如果滑块的偏移量为100,那么渐变系数为0.2,那么R2 = 10 + 100 * 0.2, 当我们在拉滑块的过程中,R在颜色变化中就是线性的,同理剩余颜色也是渐变的.如上图中的中间View,就是在两个颜色之间过度. 这个关于颜色的扩展,我已

css如何实现一个文字两种颜色代码实例

css如何实现一个文字两种颜色代码实例:在实际应用中可能需要设置文本效果比较炫酷.有一种效果就是将一个文字设置为两种颜色,使用普通的方法肯定是无法实现.下面就分享一下实现此功能的代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

一种颜色怎么搭配

一种颜色尽可能的避免,一种色单调,刻板,如果一定使用一种颜色有以下几种方法使看起比较丰富: 1.加图案: 把其中的一个换成有关颜色的并且带图案的 比如,红色的上班群套装,配上红白花的衬衫 2.调深浅 上衣深灰色,中灰的腰带,浅灰的群,更深灰的鞋 3.换面料 婚纱(新娘装),面料变了,折光度变了,颜色也就丰富了 4.加配饰 小西装,加丝巾,丝巾上有图案,面积小也不影响主色调

NtQuerySystemInformation的使用(提供50余种信息)

今天,我们主要讨论的是一个函数NtQuerySystemInformation(ZwQuerySystemInformation).当然,你不要小看这么一个函数,它却为我们提供了丰富的系统信息,同时还包括对某些信息的控制和设置.以下是这个函数的原型: typedef NTSTATUS (__stdcall *NTQUERYSYSTEMINFORMATION)    (IN      SYSTEM_INFORMATION_CLASS SystemInformationClass,     IN O

封闭填充实体另一种颜色渲染边框

绘制封闭图形时,采用一种颜色填充,然后采用另一个颜色描绘边框 操作步骤: 1 直接渲染顶点源 2 通过agg::conv_stroke提取顶点源的轮廓线 3 采用另一种颜色描绘轮廓线 实例代码: agg::ellipse ell(200,200,50,100); ras.add_path(ell); agg::render_scanlines_aa_solid(ras,sl,renb,agg::rgba8(255,0,0)); ras.reset(); agg::conv_stroke<agg:

20余名台湾青年将首次组团公祭黄帝

华商报讯(记者孙洪伟)乙未年清明公祭轩辕黄帝典礼将于4月5日举行.华商报记者从省祭陵办获悉,今年将有20余名台湾原住民青年,首次组团参加公祭典礼. 这些台湾原住民青年,将跟随台湾地区新党主席郁慕明一同前来,这也是郁慕明连续第四年参加公祭黄帝典礼.2012年郁慕明在公祭轩辕黄帝典礼上敬献了花篮:2013年带领普通台湾青年来陕:2014年携台湾新党新一届全委会委员来陕参加公祭典礼后,表示还会带团再来.郁慕明说,希望以这种方式,让更多台湾人有机会亲身感受祭祀人文初祖的荣光,增加两岸青年文化认同感.据悉