首页 > 代码库 > 【OpenGL】Shader实例分析(九)- AngryBots中的主角受伤特效
【OpenGL】Shader实例分析(九)- AngryBots中的主角受伤特效
转发请保持地址:http://blog.csdn.net/stalendp/article/details/40859441
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
【OpenGL】Shader实例分析(九)- AngryBots中的主角受伤特效