（十二）unity Shader之——————屏幕后处理效果（Bloom效果）

小橙子0

2405人浏览 · 2019-09-20 13:04:56

小橙子0 · 2019-09-20 13:04:56 发布

Bloom特效是游戏中很常见的效果，这种特效可以模拟真实摄像机的一种图像效果，它会让画面中较亮的区域扩散到周围的区域中，造成一种朦胧的效果。

下图是原图：

下图是bloom的效果图：

Bloom的实现原理：

首先根据一个阈值提取出图像中的较亮区域，把他们存储在一张渲染纹理中，再利用高斯模糊对这张渲染纹理进行模糊处理，模拟光线扩散的效果，最后再将其和原图像进行混合，得到最终的效果。

首先编写脚本：

1.继承前面写好的后处理框架基类：

public class Bloom : PostEffectsBase {

2.声明该效果需要的shader并创建相应材质：

public Shader bloomShader;
	private Material bloomMaterial = null;
	public Material material {  
		get {
			bloomMaterial = CheckShaderAndCreateMaterial(bloomShader, bloomMaterial);
			return bloomMaterial;
		}  
	}

3.由于bloom效果是建立在高斯模糊的基础上，因此这个脚本跟上一篇文章中提供的参数几乎完全一样，增加了一个新的参数luminanceThreshold来控制提取较亮区域时使用的阈值：

// Blur iterations - larger number means more blur.
	[Range(0, 4)]
	public int iterations = 3;
	
	// Blur spread for each iteration - larger value means more blur
	[Range(0.2f, 3.0f)]
	public float blurSpread = 0.6f;

	[Range(1, 8)]
	public int downSample = 2;

	[Range(0.0f, 4.0f)]
	public float luminanceThreshold = 0.6f;

大多数情况下图像的亮度值不会超过1，但如果开启了HDR，硬件会允许我们把颜色值存储在一个更高精度范围的缓冲中，此时像素亮度值可能会超过1.因此在这里把luminanceThreshold值规定在[0,4]范围内。

4.定义OnRenderImage函数：

void OnRenderImage (RenderTexture src, RenderTexture dest) {
		if (material != null) {
			material.SetFloat("_LuminanceThreshold", luminanceThreshold);

			int rtW = src.width/downSample;
			int rtH = src.height/downSample;
			
			RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);
			buffer0.filterMode = FilterMode.Bilinear;
			
			Graphics.Blit(src, buffer0, material, 0);
			
			for (int i = 0; i < iterations; i++) {
				material.SetFloat("_BlurSize", 1.0f + i * blurSpread);
				
				RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
				
				// Render the vertical pass
				Graphics.Blit(buffer0, buffer1, material, 1);
				
				RenderTexture.ReleaseTemporary(buffer0);
				buffer0 = buffer1;
				buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
				
				// Render the horizontal pass
				Graphics.Blit(buffer0, buffer1, material, 2);
				
				RenderTexture.ReleaseTemporary(buffer0);
				buffer0 = buffer1;
			}

			material.SetTexture ("_Bloom", buffer0);  
			Graphics.Blit (src, dest, material, 3);  

			RenderTexture.ReleaseTemporary(buffer0);
		} else {
			Graphics.Blit(src, dest);
		}
	}

上面代码和上篇文章高斯模糊使用的代码基本相同，但进行了一些修改。bloom效果需要3个步骤：首先提取图像中较亮的区域，因此我们没有像之前那样直接对src进行降采样，而是通过调用Graphics.Blit(src,buffer0,material,0)来使用shader中的第一个pass提取图像中较亮的区域，提取得到的较亮的区域存储在buffer0中，然后和上篇文章中一样，用高斯模糊迭代处理，这些Pass对应了shader的第二个和第三个pass，模糊后的较亮区域会存储在buffer0中，此时再把buffer0传递给材质中的_Bloom纹理属性，并调用Graphics.Blit(src,dest,material,3)使用shader中第四个pass来进行最后的混合，将结果存储在目标渲染纹理dest中，最后释放临时缓存。

下面实现shader的部分：

1.首先声明属性：

Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_Bloom ("Bloom (RGB)", 2D) = "black" {}
		_LuminanceThreshold ("Luminance Threshold", Float) = 0.5
		_BlurSize ("Blur Size", Float) = 1.0
	}

_MainTex对应了输入的渲染纹理。_Bloom是高斯模糊后的较亮区域，_LuminanceThreshold是用于提取较亮区域使用的阈值，而_BlurSize用于控制不同迭代之间高斯模糊模糊区域范围。

2.声明代码中需要使用的各个变量：

sampler2D _MainTex;
		half4 _MainTex_TexelSize;
		sampler2D _Bloom;
		float _LuminanceThreshold;
		float _BlurSize;

3.首先定义提取较亮区域需要使用的顶点着色器和片元着色器：

struct v2f {
			float4 pos : SV_POSITION; 
			half2 uv : TEXCOORD0;
		};	
		
		v2f vertExtractBright(appdata_img v) {
			v2f o;
			
			o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
			
			o.uv = v.texcoord;
					 
			return o;
		}
		
		fixed luminance(fixed4 color) {
			return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
		}
		
		fixed4 fragExtractBright(v2f i) : SV_Target {
			fixed4 c = tex2D(_MainTex, i.uv);
			fixed val = clamp(luminance(c) - _LuminanceThreshold, 0.0, 1.0);
			
			return c * val;
		}

顶点着色器和之前的实现完全一样，在片元着色器中，将采样得到的亮度值减去阈值_LuminanceThreshold,并把结果截取到0-1范围内，然后把该值和原像素值相乘，得到提取后的亮部区域。

4.然后定义了混合亮部图像和原图像时使用的顶点着色器和片元着色器：

struct v2fBloom {
			float4 pos : SV_POSITION; 
			half4 uv : TEXCOORD0;
		};
		
		v2fBloom vertBloom(appdata_img v) {
			v2fBloom o;
			
			o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
			o.uv.xy = v.texcoord;		
			o.uv.zw = v.texcoord;
			
			#if UNITY_UV_STARTS_AT_TOP			
			if (_MainTex_TexelSize.y < 0.0)
				o.uv.w = 1.0 - o.uv.w;
			#endif
				        	
			return o; 
		}
		
		fixed4 fragBloom(v2fBloom i) : SV_Target {
			return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);
		}

这里使用的顶点着色器和之前的有所不同，定义了两个纹理坐标，并存储在同一类型的half4的变量uv中，xy分量对应的是_MainTex，即原图像的纹理坐标，而它的zw分量是_Bloom,即模糊后的较亮区域纹理坐标，需要对这个纹理坐标进行平台差异化处理。

片元着色器只需把两张纹理的采样结果相加混合即可。

5.接着定义bloom效果需要的4个Pass：

ZTest Always Cull Off ZWrite Off
		
		Pass {  
			CGPROGRAM  
			#pragma vertex vertExtractBright  
			#pragma fragment fragExtractBright  
			
			ENDCG  
		}
		
		UsePass "上一章的pass1"
		
		UsePass "上一章的pass2"
		
		Pass {  
			CGPROGRAM  
			#pragma vertex vertBloom  
			#pragma fragment fragBloom  
			
			ENDCG  
		}

第二和第三个pass直接使用上一篇文章高斯模糊定义的两个pass，这是通过usePass语义指明它们的Pass名来实现的，unity内部会把所有Pass的Name转换成大写字母表示，因此在使用UsePass命令时必须使用大写形式的名字。