【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的相似Photoshop的基本混合模式
2017-06-20 17:02
2739 查看
本系列主要參考《Unity Shaders and Effects Cookbook》一书(感谢原书作者),同一时候会加上一点个人理解或拓展。
这里是本书全部的插图。这里是本书所需的代码和资源(当然你也能够从官网下载)。
========================================== 切割线 ==========================================
这篇文章里,我们将要学习一些常见的混合模式,比如。正片叠底(Multiply),Add。滤色(Screen,这居然是滤色的意思。。
。)。
你将会发现这些都不难实现~
正片叠底 —— 就是把两层图像的像素相乘,最后会得到一个更暗的图像。这个模式是对称的。也就是说交换基色和混合色得到的结果是一样的。
,当中a是基色。b是混合色。
滤色 —— 首先把两层图像的像素值取互补数,然后将它们相乘,最后再去互补数。这和正片叠底得到的结果是相反的。它会得到一个更亮的图像。
,当中a是基色,b是混合色。
叠加 —— 结合了正片叠底和滤色两种混合模式。
基色中亮色的部分会更加亮。而暗色的部分会更暗。
,当中a是基色,b是混合色。
创建一个新的脚本。命名为BlendMode_ImageEffect;
创建一个新的Shader,命名为BlendMode_Effect;
把本章第一篇中的C#代码拷贝到第一步中创建的脚本中。(我发现原作者貌似也由于复制粘贴忘了删掉亮度、饱和度、对照度那句话。。。
)
把本章第一篇中的Shader代码拷贝到第二步中创建的Shader中;
把新的脚本加入到Camera上,并使用新的Shader给脚本中的Cur Shader赋值。这篇里我们会须要一张纹理来演示混合效果。
你能够从本书资源(见文章最上方)里找到这张难看的图片。作者说这是为了更easy看到效果~。
。
。
以下的图就是我们要使用的纹理啦!这张纹理除了丑以外,它的细节非常丰富,灰度范围也非常大,有利于我们检验混合效果。
相同,在我们在CGPROGRAM块中创建相应的变量:
最后,我们改动frag函数。让它来对两张纹理运行乘法操作:
以下開始编辑C#脚本。首先,我们须要创建相应的变量。所以我们须要一张能够在面板中赋值的纹理,以及一个可变的透明度:
然后,我们须要在OnRenderImage函数中把变量数据传递给Shader:
最后。我们在函数中保证blendOpacity的值范围在0.0到1.0:
完毕后,你能够把随意图片作为混合图片传递给脚本。最后,你能够看到相似以下的结果:
Multiply混合模式 Opacity = 0.5 :
Multiply混合模式 Opacity = 1.0 :
通过上面的实现。我们能够发现实现这种混合效果实际并不难。以下我们继续加入一些简单的混合模式。
保存后返回Unity查看。你能够看到相似以下的结果。你能够看到,它和Multiply是刚好相反的结果:Add混合模式 Opacity = 1.0 :
最后,我们实现一个名为Screen Blend(感觉好怪,中文名字?)的混合模式。这里面用到的运算比前两种很多其它。但也非常easy。
继续改动frag函数:
最后。你能够看到以下的效果:Screen Blend混合模式 Opacity = 1.0:
这里是本书全部的插图。这里是本书所需的代码和资源(当然你也能够从官网下载)。
========================================== 切割线 ==========================================
写在前面
画面特效并不只限于调整游戏画面的颜色。我们还能够使用它们来和其它的图片混合起来。这个技术和在Photoshop里新建一个layer非常像,我们能够选择一个混合模式来混合两张图片,在我们的样例里。当中一张就是指render texture。这使得美术人员能够在游戏里面模拟各种混合效果。而不是只在Photoshop里。这篇文章里,我们将要学习一些常见的混合模式,比如。正片叠底(Multiply),Add。滤色(Screen,这居然是滤色的意思。。
。)。
你将会发现这些都不难实现~
知识补习
这里添加一个内容。就是对各种混合模式的理解。正片叠底(Multiply)和滤色(Screen)
正片叠底(Multiply)和滤色(Screen)是两种主要的混合模式。分别用于使图片变暗和变亮。它们之间的组合还能够形成更复杂的混合模式。如叠加(Overlay)和柔光(Soft Light)。正片叠底 —— 就是把两层图像的像素相乘,最后会得到一个更暗的图像。这个模式是对称的。也就是说交换基色和混合色得到的结果是一样的。
,当中a是基色。b是混合色。
滤色 —— 首先把两层图像的像素值取互补数,然后将它们相乘,最后再去互补数。这和正片叠底得到的结果是相反的。它会得到一个更亮的图像。
,当中a是基色,b是混合色。
叠加 —— 结合了正片叠底和滤色两种混合模式。
基色中亮色的部分会更加亮。而暗色的部分会更暗。
,当中a是基色,b是混合色。
准备工作
这一篇相同非常多代码是建立在上一篇的基础上。所以非常多代码不用写啦~创建一个新的脚本。命名为BlendMode_ImageEffect;
创建一个新的Shader,命名为BlendMode_Effect;
把本章第一篇中的C#代码拷贝到第一步中创建的脚本中。(我发现原作者貌似也由于复制粘贴忘了删掉亮度、饱和度、对照度那句话。。。
)
把本章第一篇中的Shader代码拷贝到第二步中创建的Shader中;
把新的脚本加入到Camera上,并使用新的Shader给脚本中的Cur Shader赋值。这篇里我们会须要一张纹理来演示混合效果。
你能够从本书资源(见文章最上方)里找到这张难看的图片。作者说这是为了更easy看到效果~。
。
。
以下的图就是我们要使用的纹理啦!这张纹理除了丑以外,它的细节非常丰富,灰度范围也非常大,有利于我们检验混合效果。
实现
我们要实现的第一个混合模式就是正片叠底(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(感觉好怪,中文名字?)的混合模式。这里面用到的运算比前两种很多其它。但也非常easy。
继续改动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的基本混合模式
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的类似Photoshop的基本混合模式
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的叠加(Overlay)混合模式
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的叠加(Overlay)混合模式
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对比度
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对比度
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对照度
- 【Unity Shaders】使用Unity Render Textures实现画面特效——建立画面特效脚本系统
- 【Unity Shaders】使用Unity Render Textures实现画面特效——建立画面特效脚本系统
- 【Unity Shaders】使用Unity Render Textures实现画面特效——建立画面特效脚本系统
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对比度
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面.
- [UnityShader]使用Unity Render Textures实现画面特效——建立画面特效脚本系统
- unity后期特效shader之photoshop混合模式公式的应用
- 总结Unity IOC容器通过配置实现类型映射的几种基本使用方法
- Photoshop图层混合(Layer Blending)模式的算法实现
- PhotoShop图层混合模式的Canvas实现
- Shader自学笔记 3.4.1 shader实现photoshop 中颜色混合模式
- 使用 Apache Solr 实现更加灵巧的搜索,第 1 部分: 基本特性和 Solr 模式
- 【Unity Shaders】Using Textures for Effects —— 实现Photoshop的色阶效果