AngryBots是Unity官方的一个非常棒的例子，很有研究价值。以前研究的时候，由于其内容丰富，一时间不知道从哪入手写文章分析。这一段时间研究shader技术比较多一些，就从shader的这一方面开始吧。首先分析其中的一个屏幕特效：当主角受到攻击时会出现的全屏效果（postScreenEffect），效果如下：
其实这是一种的Bloom效果，相关文件有：MobileBloom.js 和 MobileBloom.shader；关于如何查看这两个文件，请参考下图：
JS代码分析
MobileBloom.js部分代码如下：
function OnRenderImage (source : RenderTexture, destination : RenderTexture) {
#if UNITY_EDITOR
FindShaders ();
CheckSupport ();
CreateMaterials ();
#endif
agonyTint = Mathf.Clamp01 (agonyTint - Time.deltaTime * 2.75f);
var tempRtLowA : RenderTexture = RenderTexture.GetTemporary (source.width / 4, source.height / 4, rtFormat);
var tempRtLowB : RenderTexture = RenderTexture.GetTemporary (source.width / 4, source.height / 4, rtFormat);
// prepare data
apply.SetColor ("_ColorMix", colorMix);
apply.SetVector ("_Parameter", Vector4 (colorMixBlend * 0.25f, 0.0f, 0.0f, 1.0f - intensity - agonyTint));
// downsample & blur
Graphics.Blit (source, tempRtLowA, apply, agonyTint < 0.5f ? 1 : 5);
Graphics.Blit (tempRtLowA, tempRtLowB, apply, 2);
Graphics.Blit (tempRtLowB, tempRtLowA, apply, 3);
// apply
apply.SetTexture ("_Bloom", tempRtLowA);
Graphics.Blit (source, destination, apply, QualityManager.quality > Quality.Medium ? 4 : 0);
RenderTexture.ReleaseTemporary (tempRtLowA);
RenderTexture.ReleaseTemporary (tempRtLowB);
}
知识点准备
1）OnRenderImage函数
这是一个回调函数，是MonoBehaviour的生命周期的一部分，每一帧都会被调用；当这个函数被调用时，所有的3d渲染已经完成，渲染结果以参数source传入到函数中，后期效果的实现就是对source的处理，并把结果整合到destination中。这个函数所在的脚本一般绑定在Camera上。此函数只有在Unity Pro版本中才能够使用。
2）Graphics.Blit函数
static void Blit(Texture source, RenderTexture dest);
static void Blit(Texture source, RenderTexture dest, Material mat, int pass = -1);
static void Blit(Texture source, Material mat, int pass = -1);
这个函数就像过转化器一样，source图片经过它的处理变成了dest图片，其中材质对象mat负责算法实施（更准确的说法：算法是绑定到该mat上的shader来实现的。shader可以有多个pass，可以通过pass参数指定特定的shader，-1表示执行这个shader上所有的pass）。
3）RenderTexture.GetTemporary函数 和RenderTexture.ReleaseTemporary函数
GetTemporary获取临时的RenderTexture。ReleaseTemporary用来释放指定的RenderTexture；
RenderTexture一般在GPU中实现，速度快但资源稀缺。unity内部对RenderTexture做了池化操作，以便复用之。对GetTemporary函数的调用其实就是获取unity中RenderTexture的引用；当处理完之后，使用ReleaseTemporary来释放对此RenderTexture的引用，达到复用的目的，提高性能。
JS代码分析
了解了三个知识点，上面代码的功能就非常清晰了，分析如下：
a）获取两个渲染贴图tempRtLowA和tempRtLowB（长宽都是原图的1/4，用以加快渲染速度）
b）设置Mat中Shader的参数
c）通过Mat来处理贴图，最终渲染到destination贴图中，用来显示
d）释放临时的贴图。
这里先解释a和c；
【步骤a】，获取两个贴图，并缩小到原来的1/16（长宽都缩小为原来的1/4，面积为原来的1/16)，节约了GPU内存，同时提高渲染速度；由于接下来的步骤是对图片进行模糊处理（对质量要求不高），这样做是可行的。
【步骤c】（注：调用Blit函数来过滤贴图，其中最后一个数字参数是用来指代shader的pass的）
pass1 或者 pass5， 提取颜色中最亮的部分；pass2 对高亮图片进行纵向模糊；pass3 对高亮图片进行横向模糊；pass0或pass4；把模糊的图片叠加到原图片上。
一个亮点，先经过横向模糊，再经过纵向模糊的过程，如下图所示（可以把这理解为“使一个点向周围扩散的算法”）：
图解算法
现在的重点是【步骤c】中的shader算法是怎么实现的了，先图解一下算法：
图1 原图
图2【初始化】原图缩放成原来的1/16
图3【步骤1】扩大高亮区域
图4 【步骤2】纵向模糊
图5 【步骤3】横向模糊
图6 【步骤4a】（原图 + 步骤3的效果）最终叠加的效果，这个效果称之为glow或者bloom。
图7 【步骤4b】（原图 + 步骤3的效果）最终叠加的效果 《===（注意：这个效果需要在步骤1中添加红色成份）
调节步骤1中的图片颜色强度，可以形成相应的动画，如下图所示：
Shader分析
接下来，我将按照上图的序列来分析shader开始。
图3【步骤1】扩大高亮区域
js代码：
Graphics.Blit (source, tempRtLowA, apply, 1);
shader代码：
struct v2f_withMaxCoords {
half4 pos : SV_POSITION;
half2 uv : TEXCOORD0;
half2 uv2[4] : TEXCOORD1;
};
v2f_withMaxCoords vertMax (appdata_img v)
{
v2f_withMaxCoords o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord;
o.uv2[0] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5,1.5);
o.uv2[1] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5,1.5);
o.uv2[2] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5,-1.5);
o.uv2[3] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5,-1.5);
return o;
}
fixed4 fragMax ( v2f_withMaxCoords i ) : COLOR
{
fixed4 color = tex2D(_MainTex, i.uv.xy);
color = max(color, tex2D (_MainTex, i.uv2[0]));
color = max(color, tex2D (_MainTex, i.uv2[1]));
color = max(color, tex2D (_MainTex, i.uv2[2]));
color = max(color, tex2D (_MainTex, i.uv2[3]));
return saturate(color - ONE_MINUS_INTENSITY);
}
// 1
Pass {
CGPROGRAM
#pragma vertex vertMax
#pragma fragment fragMax
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
这段代码的作用可以描述为：当渲染某一点时，在这一点及其周围四点（左上、右上、左下、右下）中，选取最亮的一点作为该点的颜色。具体解释为：在vertMax的代码中，构造了向四个方向偏移的uv坐标，结合本身uv，共5个uv，一起提交给openGL，光栅化后传给fragmentShader使用。在fragMax中从5个uv所对应的像素中，选取其中最大的作为颜色输出。结果如图3所示。
图4 【步骤2】纵向模糊
js端
Graphics.Blit (tempRtLowA, tempRtLowB, apply, 2);
Shader端代码：
struct v2f_withBlurCoords {
half4 pos : SV_POSITION;
half2 uv2[4] : TEXCOORD0;
};
v2f_withBlurCoords vertBlurVertical (appdata_img v)
{
v2f_withBlurCoords o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv2[0] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, -1.5);
o.uv2[1] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, -0.5);
o.uv2[2] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, 0.5);
o.uv2[3] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, 1.5);
return o;
}
fixed4 fragBlurForFlares ( v2f_withBlurCoords i ) : COLOR
{
fixed4 color = tex2D (_MainTex, i.uv2[0]);
color += tex2D (_MainTex, i.uv2[1]);
color += tex2D (_MainTex, i.uv2[2]);
color += tex2D (_MainTex, i.uv2[3]);
return color * 0.25;
}
// 2
Pass {
CGPROGRAM
#pragma vertex vertBlurVertical
#pragma fragment fragBlurForFlares
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
这段代码的作用可以描述为：当渲染某一点时，在竖直方向上距其0.5和1.5个单位的四个点（上下各两个）的颜色叠加起来，作为该点的颜色。结果如图4所示。
图5 【步骤3】横向模糊 （同图四的描述）
图6 【步骤4a】最终叠加的效果
（原图 + 步骤3的效果）最终叠加的效果，这个效果称之为glow或者bloom。
js段代码：
apply.SetTexture ("_Bloom", tempRtLowA);
Graphics.Blit (source, destination, apply, 0);
Shader端代码：
struct v2f_simple {
half4 pos : SV_POSITION;
half4 uv : TEXCOORD0;
};
v2f_simple vertBloom (appdata_img v)
{
v2f_simple o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord.xyxy;
#if SHADER_API_D3D9
if (_MainTex_TexelSize.y < 0.0)
o.uv.w = 1.0 - o.uv.w;
#endif
return o;
}
fixed4 fragBloom ( v2f_simple i ) : COLOR
{
fixed4 color = tex2D(_MainTex, i.uv.xy);
return color + tex2D(_Bloom, i.uv.zw);
}
// 0
Pass {
CGPROGRAM
#pragma vertex vertBloom
#pragma fragment fragBloom
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
这段代码的作用可以描述为：把图5的结果叠加到原图上。结果如图6所示。
Shader的完整代码
MobileBloom.shader：
Shader "Hidden/MobileBloom" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_Bloom ("Bloom (RGB)", 2D) = "black" {}
}
CGINCLUDE
#include "UnityCG.cginc"
sampler2D _MainTex;
sampler2D _Bloom;
uniform fixed4 _ColorMix;
uniform half4 _MainTex_TexelSize;
uniform fixed4 _Parameter;
#define ONE_MINUS_INTENSITY _Parameter.w
struct v2f_simple {
half4 pos : SV_POSITION;
half4 uv : TEXCOORD0;
};
struct v2f_withMaxCoords {
half4 pos : SV_POSITION;
half2 uv : TEXCOORD0;
half2 uv2[4] : TEXCOORD1;
};
struct v2f_withBlurCoords {
half4 pos : SV_POSITION;
half2 uv2[4] : TEXCOORD0;
};
v2f_simple vertBloom (appdata_img v)
{
v2f_simple o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord.xyxy;
#if SHADER_API_D3D9
if (_MainTex_TexelSize.y < 0.0)
o.uv.w = 1.0 - o.uv.w;
#endif
return o;
}
v2f_withMaxCoords vertMax (appdata_img v)
{
v2f_withMaxCoords o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord;
o.uv2[0] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5,1.5);
o.uv2[1] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5,1.5);
o.uv2[2] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5,-1.5);
o.uv2[3] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5,-1.5);
return o;
}
v2f_withBlurCoords vertBlurVertical (appdata_img v)
{
v2f_withBlurCoords o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv2[0] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, -1.5);
o.uv2[1] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, -0.5);
o.uv2[2] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, 0.5);
o.uv2[3] = v.texcoord + _MainTex_TexelSize.xy * half2(0.0, 1.5);
return o;
}
v2f_withBlurCoords vertBlurHorizontal (appdata_img v)
{
v2f_withBlurCoords o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.uv2[0] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5, 0.0);
o.uv2[1] = v.texcoord + _MainTex_TexelSize.xy * half2(-0.5, 0.0);
o.uv2[2] = v.texcoord + _MainTex_TexelSize.xy * half2(0.5, 0.0);
o.uv2[3] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5, 0.0);
return o;
}
fixed4 fragBloom ( v2f_simple i ) : COLOR
{
fixed4 color = tex2D(_MainTex, i.uv.xy);
return color + tex2D(_Bloom, i.uv.zw);
}
fixed4 fragBloomWithColorMix ( v2f_simple i ) : COLOR
{
fixed4 color = tex2D(_MainTex, i.uv.xy);
half colorDistance = Luminance(abs(color.rgb-_ColorMix.rgb));
color = lerp(color, _ColorMix, (_Parameter.x*colorDistance));
color += tex2D(_Bloom, i.uv.zw);
return color;
}
fixed4 fragMaxWithPain ( v2f_withMaxCoords i ) : COLOR
{
fixed4 color = tex2D(_MainTex, i.uv.xy);
color = max(color, tex2D (_MainTex, i.uv2[0]));
color = max(color, tex2D (_MainTex, i.uv2[1]));
color = max(color, tex2D (_MainTex, i.uv2[2]));
color = max(color, tex2D (_MainTex, i.uv2[3]));
return saturate(color + half4(0.25,0,0,0) - ONE_MINUS_INTENSITY);
}
fixed4 fragMax ( v2f_withMaxCoords i ) : COLOR
{
fixed4 color = tex2D(_MainTex, i.uv.xy);
color = max(color, tex2D (_MainTex, i.uv2[0]));
color = max(color, tex2D (_MainTex, i.uv2[1]));
color = max(color, tex2D (_MainTex, i.uv2[2]));
color = max(color, tex2D (_MainTex, i.uv2[3]));
return saturate(color - ONE_MINUS_INTENSITY);
}
fixed4 fragBlurForFlares ( v2f_withBlurCoords i ) : COLOR
{
fixed4 color = tex2D (_MainTex, i.uv2[0]);
color += tex2D (_MainTex, i.uv2[1]);
color += tex2D (_MainTex, i.uv2[2]);
color += tex2D (_MainTex, i.uv2[3]);
return color * 0.25;
}
ENDCG
SubShader {
ZTest Always Cull Off ZWrite Off Blend Off
Fog { Mode off }
// 0
Pass {
CGPROGRAM
#pragma vertex vertBloom
#pragma fragment fragBloom
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
// 1
Pass {
CGPROGRAM
#pragma vertex vertMax
#pragma fragment fragMax
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
// 2
Pass {
CGPROGRAM
#pragma vertex vertBlurVertical
#pragma fragment fragBlurForFlares
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
// 3
Pass {
CGPROGRAM
#pragma vertex vertBlurHorizontal
#pragma fragment fragBlurForFlares
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
// 4
Pass {
CGPROGRAM
#pragma vertex vertBloom
#pragma fragment fragBloomWithColorMix
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
// 5
Pass {
CGPROGRAM
#pragma vertex vertMax
#pragma fragment fragMaxWithPain
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
}
FallBack Off
}
参考文献
官方例子AngryBots的链接地址：http://u3d.as/content/unity-technologies/angry-bots/5CF
《Unity Shaders and Effects Cookbook》的章节：
Chapter 10 Screen Effects with Unity Render Textures
Chapter 11 Gameplay and Screen Effects
[GPU Gems] Real-Time Glow：http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html
Unity Shader-Command Buffer的使用（景深与描边效果重置版）
1.6万
CommandBuffer是Unity5新增的一个灰常灰常强大的功能。先祭出官方介绍和文档。我们在渲染的时候，给OpenGL或者DX的就是一系列的指令，比如glDrawElement，glClear等...
---------------------
作者：stalendp
来源：CSDN
原文：https://blog.csdn.net/stalendp/article/details/40859441
版权声明：本文为博主原创文章，转载请附上博文链接！
扫一扫
2207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
