10749人阅读
Unity Shaders（55）
本系列主要参考一书（感谢原书作者），同时会加上一点个人理解或拓展。是本书所有的插图。是本书所需的代码和资源（当然你也可以从下载）。========================================== 分割线&==========================================写在前面通过我们建立了一个简化的屏幕特效系统，在这一篇，我们开始学习创建更复杂的像素操作来实现一些在当代游戏中常见的屏幕特效。使用屏幕特效来调整游戏的整体色彩是非常重要的，这给了设计师控制游戏最后全貌的能力。比如，通过颜色调整条来调整游戏最终画面的红蓝绿三色的密度，或者通过添加一定的色调使整个屏幕看起来像是老电影那样的效果。这篇文章里，我们将会更多地学习关于调整图像颜色方面的内容。也就是，亮度、饱和度和对比度。学习这些调整颜色的方法可以让我们对屏幕特效有一个很好的理解。实现这一篇很多代码是建立在上一篇的基础上，所以很多代码不用写啦~创建一个新的脚本，命名为BSC_ImageEffect；创建一个新的Shader，命名为BSC_Effect；把中的C#代码复制到第一步中创建的脚本中，我们只需要关注亮度、饱和度和对比度效果的运算；把中的Shader代码复制到第二步中创建的Shader中；把新的脚本添加到Camera上，并使用新的Shader给脚本中的Cur Shader赋值；创建一个新的场景，命名为BSC_Effect。添加一个平行光，三个球体，以及一个平面。创建4个新材质，使用自带的Specular Shader即可，任意选择四种颜色为它们赋值，这可以使我们更好地检验我们的画面特效。最后，把4个材质赋给球体和平面。最后，你会得到类似于下面的效果：实现由于我们之前的代码已经完成了建立一个基本的画面特效所需的核心操作，现在我们只要完成亮度、饱和度和对比度计算的代码即可。首先，我们来完成Shader代码。添加亮度、饱和度和对比度对应的新的Properties，我们要保留_MainTex属性，这是因为在创建画面特效时，该属性就是脚本传递给我们的render texture。 Properties {
_MainTex (&Base (RGB)&, 2D) = &white& {}
_BrightnessAmount (&Brightness Amount&, Range(0.0, 2.0)) = 1.0
_SaturationAmount (&Saturation Amount&, Range(0.0, 1.0)) = 1.0
_ContrastAmount (&Contrast Amount&, Range(0.0, 1.0)) = 1.0
}和以前一样，在CGPROGRAM中建立和上述Properties之间的联系，创建对应的变量： SubShader {
#pragma vertex vert_img
#pragma fragment frag
#include &UnityCG.cginc&
uniform sampler2D _MainT
fixed _BrightnessA
fixed _SaturationA
fixed _ContrastAmoun现在，我们需要创建操作来进行真正的亮度、饱和度和对比度的计算。在frag函数上面创建下面的函数：
float3 ContrastSaturationBrightness (float3 color, float brt, float sat, float con) {
// Increase or decrease these values to
// adjust r, g and b color channels separately
float avgLumR = 0.5;
float avgLumG = 0.5;
float avgLumB = 0.5;
// Luminance coefficients for getting luminance from the image
float3 LuminanceCoeff = float3 (0.4, 0.0721);
// Operation for brightmess
float3 avgLumin = float3 (avgLumR, avgLumG, avgLumB);
float3 brtColor = color *
float intensityf = dot (brtColor, LuminanceCoeff);
float3 intensity = float3 (intensityf, intensityf, intensityf);
// Operation for saturation
float3 satColor = lerp (intensity, brtColor, sat);
// Operation for contrast
float3 conColor = lerp (avgLumin, satColor, con);
return conC
}解释：这个函数的第一个参数是当前的render texture的某个像素；其他参数则是用于整体调整颜色，这些变量会通过后面的脚本传递给Shader。函数一开始，声明了一些常量，它们被用于定义一个最基本的颜色值，以便和修改后的进行比较。书上讲这个函数的实现的地方比较含糊不清，看不懂。我按自己的理解解释一下。这其实是一个叠加的过程：先计算当前亮度值下的像素，再在此基础上计算当前饱和度值下的像素，最后再在此基础上计算当前对比度下的像素，并输出：—— 当前亮度值下的像素是通过使用render texture上原始的像素乘以亮度值实现的，这很好理解，brt越大（可以大于1），图像越偏向白色，也就越亮。—— 计算当前饱和度值下的像素，需要使用lerp函数。其中，lerp的右边界值就是上一步得到的像素值，而左边界值是当前亮度下饱和度最低的像素值。计算方法是在当前亮度的基础上，点乘LuminanceCoeff常量系数。这些系数是基于CIE颜色匹配函数的，也是业界公认的标准。最后，sat参数在两者之间进行线性插值。sat越大（可以大于1），brtColor的份重越大。—— 计算当前对比度下的像素是类似的过程，同样使用lerp函数。其中，lerp的右边界是上一步得到的像素值，左边界值是对比度最低的像素值，这里使用了常量avgLumin。最后，con参数在两者之间进行线性插值。con越大（可以大于1），satColor的份重越大。最后，我们需要稍微修改下frag函数，使得它可以逐像素处理render texture中的每个像素，然后再重新输出，返回给脚本：
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);
//Apply the brightness, saturation, contrast operations
renderTex.rgb = ContrastSaturationBrightness (renderTex.rgb, _BrightnessAmount, _SaturationAmount, _ContrastAmount);
return renderT
}下面是编写脚本。我们需要在脚本中添加新的代码，以便可以向Shader发送合适的数据信息：首先添加合适的变量来控制亮度、饱和度和对比度： #region Variables
public Shader curS
public float brightnessAmount = 1.0f;
public float saturationAmount = 1.0f;
public float contrastAmount = 1.0f;
private Material curM
#endregion然后，在OnRenderImage函数中，将新的值传递给Shader： void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture){
if (curShader != null) {
material.SetFloat(&_BrightnessAmount&, brightnessAmount);
material.SetFloat(&_SaturationAmount&, saturationAmount);
material.SetFloat(&_ContrastAmount&, contrastAmount);
Graphics.Blit(sourceTexture, destTexture, material);
Graphics.Blit(sourceTexture, destTexture);
}最后，我们只需要在函数中，确保各变量的范围即可。这些范围可以根据需要任意设置： // Update is called once per frame
void Update () {
brightnessAmount = Mathf.Clamp(brightnessAmount, 0.0f, 2.0f);
saturationAmount = Mathf.Clamp(saturationAmount, 0.0f, 2.0f);
contrastAmount = Mathf.Clamp(contrastAmount, 0.0f, 3.0f);
}完成后，返回Unity。我们这时可以在面板中更改亮度、饱和度和对比度了。下面的图显示了它的结果：&&解释类似这样的屏幕特效对于得到高质量的游戏画面是非常重要的，它们允许你调整游戏的最终画面而不需要去编辑场景中所有的材质。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1769154次
积分：14200
积分：14200
排名：第720名
原创：110篇
转载：20篇
译文：21篇
评论：1973条
我叫乐乐，程序媛一枚，就读于上海交通大学软件学院，研究生，数字媒体方向。喜欢用计算机来绘制各种五彩缤纷的画面~欢迎访问我的和 :)
邮件：lelefeng1992 # gmail DOT com
PS：为防止垃圾邮件，请自行转换为正确格式哦~
---------------------
阅读：70321
阅读：40662
文章：44篇
阅读：644670
(2)(3)(1)(2)(2)(1)(1)(2)(2)(4)(2)(3)(6)(3)(8)(5)(5)(3)(6)(5)(7)(1)(2)(8)(1)(4)(5)(4)(3)(15)(2)(3)(27)(5)新人求问：unity5.1 为什么没有render setting...（唉，出师不利_unity3d吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：69,213贴子：
新人求问：unity5.1 为什么没有render setting...（唉，出师不利收藏
想要在场景里面添加一个天空盒子，但就是没有找到render setting。有没有好心的大触教一下呐，萌新拜谢了~~~
UI视觉，原画，插画，影视动画，VR/AR，影视后期，游戏特效，游戏设计
在摄像机上添加一个skybox组件即可
天空盒在window -& lighting 里面
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或coder（32）
本系列主要参考一书（感谢原书作者），同时会加上一点个人理解或拓展。
是本书所有的插图。是本书所需的代码和资源（当然你也可以从下载）。
========================================== 分割线&==========================================
通过我们建立了一个简化的屏幕特效系统，在这一篇，我们开始学习创建更复杂的像素操作来实现一些在当代游戏中常见的屏幕特效。
使用屏幕特效来调整游戏的整体色彩是非常重要的，这给了设计师控制游戏最后全貌的能力。比如，通过颜色调整条来调整游戏最终画面的红蓝绿三色的密度，或者通过添加一定的色调使整个屏幕看起来像是老电影那样的效果。
这篇文章里，我们将会更多地学习关于调整图像颜色方面的内容。也就是，亮度、饱和度和对比度。学习这些调整颜色的方法可以让我们对屏幕特效有一个很好的理解。
这一篇很多代码是建立在上一篇的基础上，所以很多代码不用写啦~
创建一个新的脚本，命名为BSC_ImageEffect；创建一个新的Shader，命名为BSC_Effect；把中的C#代码复制到第一步中创建的脚本中，我们只需要关注亮度、饱和度和对比度效果的运算；把中的Shader代码复制到第二步中创建的Shader中；把新的脚本添加到Camera上，并使用新的Shader给脚本中的Cur Shader赋值；创建一个新的场景，命名为BSC_Effect。添加一个平行光，三个球体，以及一个平面。创建4个新材质，使用自带的Specular Shader即可，任意选择四种颜色为它们赋值，这可以使我们更好地检验我们的画面特效。最后，把4个材质赋给球体和平面。
最后，你会得到类似于下面的效果：
由于我们之前的代码已经完成了建立一个基本的画面特效所需的核心操作，现在我们只要完成亮度、饱和度和对比度计算的代码即可。
首先，我们来完成Shader代码。
添加亮度、饱和度和对比度对应的新的Properties，我们要保留_MainTex属性，这是因为在创建画面特效时，该属性就是脚本传递给我们的render texture。
和以前一样，在CGPROGRAM中建立和上述Properties之间的联系，创建对应的变量：
现在，我们需要创建操作来进行真正的亮度、饱和度和对比度的计算。在frag函数上面创建下面的函数：
解释：这个函数的第一个参数是当前的render texture的某个像素；其他参数则是用于整体调整颜色，这些变量会通过后面的脚本传递给Shader。函数一开始，声明了一些常量，它们被用于定义一个最基本的颜色值，以便和修改后的进行比较。
书上讲这个函数的实现的地方比较含糊不清，看不懂。我按自己的理解解释一下。这其实是一个叠加的过程：先计算当前亮度值下的像素，再在此基础上计算当前饱和度值下的像素，最后再在此基础上计算当前对比度下的像素，并输出：
—— 当前亮度值下的像素是通过使用render texture上原始的像素乘以亮度值实现的，这很好理解，brt越大（可以大于1），图像越偏向白色，也就越亮。
—— 计算当前饱和度值下的像素，需要使用lerp函数。其中，lerp的右边界值就是上一步得到的像素值，而左边界值是当前亮度下饱和度最低的像素值。计算方法是在当前亮度的基础上，点乘LuminanceCoeff常量系数。这些系数是基于CIE颜色匹配函数的，也是业界公认的标准。最后，sat参数在两者之间进行线性插值。sat越大（可以大于1），brtColor的份重越大。
—— 计算当前对比度下的像素是类似的过程，同样使用lerp函数。其中，lerp的右边界是上一步得到的像素值，左边界值是对比度最低的像素值，这里使用了常量avgLumin。最后，con参数在两者之间进行线性插值。con越大（可以大于1），satColor的份重越大。
最后，我们需要稍微修改下frag函数，使得它可以逐像素处理render texture中的每个像素，然后再重新输出，返回给脚本：
下面是编写脚本。我们需要在脚本中添加新的代码，以便可以向Shader发送合适的数据信息：
首先添加合适的变量来控制亮度、饱和度和对比度：
然后，在OnRenderImage函数中，将新的值传递给Shader：
最后，我们只需要在函数中，确保各变量的范围即可。这些范围可以根据需要任意设置：
完成后，返回Unity。我们这时可以在面板中更改亮度、饱和度和对比度了。下面的图显示了它的结果：
类似这样的屏幕特效对于得到高质量的游戏画面是非常重要的，它们允许你调整游戏的最终画面而不需要去编辑场景中所有的材质。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：9738次
排名：千里之外
转载：40篇Unity3D游戏开发之使用UnityRende；写在前面；画面特效并不只限于调整游戏画面的颜色；这篇文章里，我们将要学习一些常见的混合模式，例如；知识补习；这里增加一个内容，就是对各种混合模式的理解；正片叠底（Multiply）和滤色（Screen；正片叠底（Multiply）和滤色（Screen；正片叠底――就是把两层图像的像素相乘，最后会得到；，其中a
Unity3D游戏开发之使用Unity Render Textures实现画面特效
画面特效并不只限于调整游戏画面的颜色。我们还可以使用它们来和其他的图片混合起来。这个技术和在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赋值。这篇里我们会需要一张纹理来演示混合效果。你可以从本书资源（见文章最上方）里找到这张难看的图片，作者说这是为了更容易看到效果~。。。
下面的图就是我们要使用的纹理啦！这张纹理除了丑以外，它的细节很丰富，灰度范围也很大，有利于我们检验混合效果。文章出处【狗刨学习网】
我们要实现的第一个混合模式就是正片叠底（Multiply），说白了就是把基色和混合色相乘。为了能够控制透明度（opacity），我们还需要一个属性：
Properties {
_MainTex (“Base (RGB)”, 2D) = “white” {}
_BlendTex (“Blend Texture”, 2D) = “white” {}
_Opacity (“Blend Opacity”, Range(0.0, 1.0)) = 1.0
同样，在我们在CGPROGRAM块中创建对应的变量：
#pragma vertex vert_img
#pragma fragment frag
#include “UnityCG.cginc”
uniform sampler2D _MainT
uniform sampler2D _BlendT
最后，我们修改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 * blendT
// Adjust amount of Blend Mode with a lerp
renderTex = lerp(renderTex, blendedMultiply,_Opacity);
return renderT
下面开始编辑C#脚本。首先，我们需要创建对应的变量。所以我们需要一张可以在面板中赋值的纹理，以及一个可变的透明度：
#region Variables
public Shader curS
public Texture2D blendT
public float blendOpacity = 1.0f;
private Material curM
#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);
Graphics.Blit(sourceTexture, destTexture);
最后，我们在函数中保证blendOpacity的值范围在0.0到1.0：
void Update () {
blendOpacity = Mathf.Clamp(blendOpacity, 0.0f, 1.0f);
完成后，你可以把任意图片作为混合图片传递给脚本。最后，你可以看到类似下面的结果：
Multiply混合模式 Opacity = 0.5 :
三亿文库包含各类专业文献、专业论文、各类资格考试、高等教育、中学教育、幼儿教育、小学教育、54Unity3D游戏开发之使用Unity Render Textures实现画面特效等内容。　
　Unity3D游戏开发之NGUI自作登陆界面_计算机软件及应用_IT/计算机_专业资料。一张背景图片和一个字体而已,导入资源后,记得把背景的纹理类型改为精灵,这样才能在图片控... 　unity3d游戏开发之拖尾效果_计算机软件及应用_IT/计算机_专业资料。unity3d游戏开发之拖尾效果大家有兴趣跟着我来学习怎么给剑制作挥舞的拖尾效果吗?有就继续往下看吧... 　unity3d游戏开发之史上最简单的鼠标点击控制人物走动实现_计算机软件及应用_IT/计算机...} 将脚本绑定到角色上以后,我们就能看到下面的效果啦,哈哈:) 这就是今天的... 　Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果强化版_计算机软件及应用_IT/计算机_专业资料。在上一篇文章中,我们通过自定义着色器实现了一个简单的在 3D ... 　Unity3D游戏开发作品大盘点_互联网_IT/计算机_专业资料。细数那些年我们一起玩...在 Unity 3D 引 擎所实现的质感光影效果下, 《将魂三国》 的场景画面, 在... 　Iphone 手机游戏使用 Unity3D 进行开发,比如著名的...(摄像机看到的就是屏幕看到的)的 Position 为(0,...点击如下图所示的播放按钮,即可进入模拟器看到效果。... 　系列教程培训 群号: 今天主题就是《Unity3D 游戏开发之跑酷游戏项目讲解...我们最终实现的界面效果如图所示,首先我们来讲一下游戏的原理,我们这里这里 采用... 　unity3d游戏开发之聊天窗口_计算机软件及应用_IT/计算机_专业资料。unity3d游戏开发之聊天窗口今天我们学习了关于聊天狂的设置: 效果图如下: 首先先弄一个滚动条 就... 　unity3d游戏开发之实现基于Socket通讯的公共聊天室_计算机软件及应用_IT/计算机_专业资料。unity3d游戏开发之实现基于Socket通讯的公共聊天室由于...程序写累了，就来玩玩酷跑小游戏吧，嘿嘿。
雨松MOMO送你一首歌曲，嘿嘿。
UGUI研究院之不添加摄像机解决UI与UI特效叠层问题（九）
UGUI研究院之不添加摄像机解决UI与UI特效叠层问题（九）
围观50636次
编辑日期： 字体：
找到一个不用添加多个Camera在两个UI中叠加UI特效的方法。如下图所示，两个Image之间放了个UI特效。
123456789101112131415161718192021222324252627
using UnityEngine;using System.Collections;using UnityEngine.UI;&public class UIDepth : MonoBehaviour { public int order; public bool isUI = true; void Start ()
Canvas canvas = GetComponent&Canvas&();
if( canvas == null){
canvas = gameObject.AddComponent&Canvas&();
canvas.overrideSorting = true;
canvas.sortingOrder = order;
Renderer []renders&&=&&GetComponentsInChildren&Renderer&();&
foreach(Renderer render in renders){
render.sortingOrder = order;
原理就是设置 sortingOrder ，给需要修改order的UI元素挂上UIDepth脚本 。如下图所示，在UI容器中设置order。
注意： UI0 我设置了order =0 （可以不设置，因为默认所有UI的Order都是0）
ParticleSystem 我设置了order =1
UI2 我设置了order =2
所以效果是，UI2 挡住 ParticleSystem 挡住 UI0
欢迎大家提意见。互相讨论互相学习UGUI～，嘿嘿。
这段代码必须运行了才能看到效果。
补充一下 Unity5.3的粒子特效里已经有sortingOrder属性了，也就是说以后就不需要加Canvas组件了。如下图所示
本文固定链接:
转载请注明:
雨松MOMO提醒您：亲，如果您觉得本文不错，快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展，谢谢！
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
如果您愿意花10块钱请我喝一杯咖啡的话，请用手机扫描二维码即可通过支付宝直接向我捐款哦。
您可能还会对这些文章感兴趣！}