码迷，mamicode.com
首页 > 其他好文 > 详细

【OpenGL】Shader实例分析（九）- AngryBots中的主角受伤特效

时间：2017-07-02 10:20:20      阅读：135      评论：0      收藏：0      [点我收藏+]

标签：idt   str   down   ima   google   hidden   知识   高性能   函数   

转发请保持地址：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中的主角受伤特效

标签：idt   str   down   ima   google   hidden   知识   高性能   函数   

原文地址：http://www.cnblogs.com/lxjshuju/p/7105090.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！