首页 > 代码库 > 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的类似Photoshop的基本混合模式
【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的类似Photoshop的基本混合模式
本系列主要参考《Unity Shaders and Effects Cookbook》一书（感谢原书作者），同时会加上一点个人理解或拓展。
这里是本书所有的插图。这里是本书所需的代码和资源（当然你也可以从官网下载）。
========================================== 分割线 ==========================================
写在前面
画面特效并不只限于调整游戏画面的颜色。我们还可以使用它们来和其他的图片混合起来。这个技术和在Photoshop里新建一个layer很像，我们可以选择一个混合模式来混合两张图片，在我们的例子里，其中一张就是指render texture。这使得美术人员可以在游戏里面模拟各种混合效果，而不是仅仅在Photoshop里。
这篇文章里，我们将要学习一些常见的混合模式，例如，正片叠底（Multiply），Add，滤色（Screen，这竟然是滤色的意思。。。）。你将会发现这些都不难实现~
知识补习
这里增加一个内容，就是对各种混合模式的理解。
正片叠底（Multiply）和滤色（Screen）
正片叠底（Multiply）和滤色（Screen）是两种基本的混合模式，分别用于使图片变暗和变亮。它们之间的组合还可以形成更复杂的混合模式，如叠加（Overlay）和柔光（Soft Light）。
正片叠底 —— 就是把两层图像的像素相乘，最后会得到一个更暗的图像。这个模式是对称的，也就是说交换基色和混合色得到的结果是一样的。
滤色 —— 首先把两层图像的像素值取互补数，然后将它们相乘，最后再去互补数。这和正片叠底得到的结果是相反的。它会得到一个更亮的图像。
叠加 —— 结合了正片叠底和滤色两种混合模式。基色中亮色的部分会更加亮，而暗色的部分会更暗。
准备工作
这一篇同样很多代码是建立在上一篇的基础上，所以很多代码不用写啦~
- 创建一个新的脚本，命名为BlendMode_ImageEffect；
- 创建一个新的Shader，命名为BlendMode_Effect；
- 把本章第一篇中的C#代码复制到第一步中创建的脚本中；（我发现原作者貌似也因为复制粘贴忘了删掉亮度、饱和度、对比度那句话。。。）
- 把本章第一篇中的Shader代码复制到第二步中创建的Shader中；
- 把新的脚本添加到Camera上，并使用新的Shader给脚本中的Cur Shader赋值。这篇里我们会需要一张纹理来演示混合效果。你可以从本书资源（见文章最上方）里找到这张难看的图片，作者说这是为了更容易看到效果~。。。
下面的图就是我们要使用的纹理啦！这张纹理除了丑以外，它的细节很丰富，灰度范围也很大，有利于我们检验混合效果。
实现
- 我们要实现的第一个混合模式就是正片叠底（Multiply），说白了就是把基色和混合色相乘。为了能够控制透明度（opacity），我们还需要一个属性：
Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _BlendTex ("Blend Texture", 2D) = "white" {} _Opacity ("Blend Opacity", Range(0.0, 1.0)) = 1.0 } - 同样，在我们在CGPROGRAM块中创建对应的变量：
Pass { CGPROGRAM #pragma vertex vert_img #pragma fragment frag #include "UnityCG.cginc" uniform sampler2D _MainTex; uniform sampler2D _BlendTex; fixed _Opacity; - 最后，我们修改frag函数，让它来对两张纹理执行乘法操作：
fixed4 frag(v2f_img i) : COLOR { //Get the colors from the RenderTexture and the uv‘s //from the v2f_img struct fixed4 renderTex = tex2D(_MainTex, i.uv); fixed4 blendTex = tex2D(_BlendTex, i.uv); // Perform a multiply Blend mode fixed4 blendedMultiply = renderTex * blendTex; // Adjust amount of Blend Mode with a lerp renderTex = lerp(renderTex, blendedMultiply, _Opacity); return renderTex; } - 下面开始编辑C#脚本。首先，我们需要创建对应的变量。所以我们需要一张可以在面板中赋值的纹理，以及一个可变的透明度：
#region Variables public Shader curShader; public Texture2D blendTexture; public float blendOpacity = 1.0f; private Material curMaterial; #endregion
- 然后，我们需要在OnRenderImage函数中把变量数据传递给Shader：
void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture){ if (curShader != null) { material.SetTexture("_BlendTex", blendTexture); material.SetFloat("_Opacity", blendOpacity); Graphics.Blit(sourceTexture, destTexture, material); } else { Graphics.Blit(sourceTexture, destTexture); } } - 最后，我们在函数中保证blendOpacity的值范围在0.0到1.0：
void Update () { blendOpacity = Mathf.Clamp(blendOpacity, 0.0f, 1.0f); }
完成后，你可以把任意图片作为混合图片传递给脚本。最后，你可以看到类似下面的结果：
Multiply混合模式 Opacity = 0.5 :
Multiply混合模式 Opacity = 1.0 :
通过上面的实现，我们可以发现实现这样的混合效果实际并不难，下面我们继续添加一些简单的混合模式。
扩展
下面我们实现另外两种简单的混合模式：
- 在Shader中修改frag函数，即把乘法操作注释，再添加新的加法操作：
fixed4 frag(v2f_img i) : COLOR { //Get the colors from the RenderTexture and the uv‘s //from the v2f_img struct fixed4 renderTex = tex2D(_MainTex, i.uv); fixed4 blendTex = tex2D(_BlendTex, i.uv); // Perform a multiply Blend mode // fixed4 blendedMultiply = renderTex * blendTex; // Perform a add Blend mode fixed4 blendedAdd = renderTex + blendTex; // Adjust amount of Blend Mode with a lerp renderTex = lerp(renderTex, blendedAdd, _Opacity); return renderTex; }
保存后返回Unity查看。你可以看到类似下面的结果。你可以看到，它和Multiply是刚好相反的结果：
Add混合模式 Opacity = 1.0 ：
- 最后，我们实现一个名为Screen Blend（感觉好怪，中文名字？）的混合模式。这里面用到的运算比前两种更多，但也很简单。继续修改frag函数：
fixed4 frag(v2f_img i) : COLOR { //Get the colors from the RenderTexture and the uv‘s //from the v2f_img struct fixed4 renderTex = tex2D(_MainTex, i.uv); fixed4 blendTex = tex2D(_BlendTex, i.uv); // Perform a multiply Blend mode // fixed4 blendedMultiply = renderTex * blendTex; // Perform a add Blend mode // fixed4 blendedAdd = renderTex + blendTex; // Perform a screen render Blend mode fixed4 blendedScreen = 1.0 - ((1.0 - renderTex) * (1.0 - blendTex)); // Adjust amount of Blend Mode with a lerp renderTex = lerp(renderTex, blendedScreen, _Opacity); return renderTex; }
最后，你可以看到下面的效果：
Screen Blend混合模式 Opacity = 1.0：
【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的类似Photoshop的基本混合模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。