首页 > 计算机图形学 > Shader > UnityShader之Blend混合模式
2022
04-06

UnityShader之Blend混合模式

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

混合模式

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

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

Blend

  • 在编写shader时我们可以在SubShader或Pass中用Blend与BlendOp指明该对象与下一层色彩如何进行颜色混合
  • 常用的混合模式通过Blend实现 如下所示
UnityShader之Blend混合模式 - 第1张  | u3d8技术分享
混合模式Blend实现
  • 以下为测试图片
UnityShader之Blend混合模式 - 第2张  | u3d8技术分享
测试底图
UnityShader之Blend混合模式 - 第3张  | u3d8技术分享
测试混合图
  • 常用的滤色混合效果如下
UnityShader之Blend混合模式 - 第4张  | u3d8技术分享
滤色混合效果

代码实现混合模式

  • 可以看到Blend已经可以实现很多种混合效果 但这也只是混合模式的一部分
  • 而接下来才是重点 我们要在Shader中代码自己实现更多的混合模式
  • 以方便实现更多的Shader效果
  • 框架代码如下 还是前几篇文章一样 只更改frag中代码
UnityShader之Blend混合模式 - 第5张  | u3d8技术分享
混合模式shader框架代码
  • 其中MainTex为底图 BlendTex为要混合的图片
  • 颜色取值为(0-1) A为底图颜色 B为混合图颜色 C为输出图颜色
UnityShader之Blend混合模式 - 第6张  | u3d8技术分享
frag函数代码
  • 使用step()函数来代替if判断
  • 注意:非常多资料 点光效果 使用两个min函数  实际效果还原应该是一个min一个max函数
UnityShader之Blend混合模式 - 第7张  | u3d8技术分享
所有混合模式代码实现

Unity实现与Ps效果对比图

  • 创建材质球 给与材质球该shader 将材质球赋给 Image UI 或者 2D Sprite 
  • 添加对应贴图 如下
UnityShader之Blend混合模式 - 第8张  | u3d8技术分享
  • 查看实验效果(左 Unity实现 右 Ps对比)
UnityShader之Blend混合模式 - 第9张  | u3d8技术分享
正常模式
UnityShader之Blend混合模式 - 第10张  | u3d8技术分享
变暗
UnityShader之Blend混合模式 - 第11张  | u3d8技术分享
变量
UnityShader之Blend混合模式 - 第12张  | u3d8技术分享
正片叠底
UnityShader之Blend混合模式 - 第13张  | u3d8技术分享
滤色
UnityShader之Blend混合模式 - 第14张  | u3d8技术分享
线性加深
UnityShader之Blend混合模式 - 第15张  | u3d8技术分享
线性减淡
UnityShader之Blend混合模式 - 第16张  | u3d8技术分享
叠加
UnityShader之Blend混合模式 - 第17张  | u3d8技术分享
强光
UnityShader之Blend混合模式 - 第18张  | u3d8技术分享
柔光
UnityShader之Blend混合模式 - 第19张  | u3d8技术分享
亮光
UnityShader之Blend混合模式 - 第20张  | u3d8技术分享
点光
UnityShader之Blend混合模式 - 第21张  | u3d8技术分享
线性光
UnityShader之Blend混合模式 - 第22张  | u3d8技术分享
实色混合
UnityShader之Blend混合模式 - 第23张  | u3d8技术分享
排除
UnityShader之Blend混合模式 - 第24张  | u3d8技术分享
差值
UnityShader之Blend混合模式 - 第25张  | u3d8技术分享
深色
UnityShader之Blend混合模式 - 第26张  | u3d8技术分享
浅色
UnityShader之Blend混合模式 - 第27张  | u3d8技术分享
减去
UnityShader之Blend混合模式 - 第28张  | u3d8技术分享
划分

核心代码

最后编辑:
作者:网虫虫
网虫虫
分享是一种快乐; 分享是一种美德; 分享是一种幸福!

0 0 votes
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments