unity屏幕特效综述2 bloom

bloom效果就是把图片的亮的部分往外面扩散,下图就分别是原图和使用了bloom效果的图片。

其实现原理其实也就分成了两个部分,第一个部分是如何找到亮的部分,第二个是如何扩散。

首先是如何提取练了高度部分,对于颜色的亮度我们有一个公式

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;
}

clamp函数的作用是把最后的结果截取到0~1内。

那么现在我们考虑第二个问题,如何把亮的区域往外扩散,在第一部分,我们学习了高斯模糊,仔细想一想,这个高斯模糊的特性就是把颜色值往外面扩散,因此,我们只需要对提取出来的亮度部分进行一次高斯模糊处理就可以了。

然后就是最后一个步骤,我们只需要把扩散后的亮的部分和原图进行混合,就能得到我们的bloom效果的最终结果了。

原理理解之后,接下里就要看一看具体的实现部分,这里有用到4个pass,第一个pass是提取亮部的pass,第二个和第三个pass是垂直和水平方向高斯模糊的pass,最后一个pass是进行混合的pass。

扫描二维码关注公众号,回复: 10593402 查看本文章
       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);//提取亮部到buffer0
                     
                     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;//对buffer0进行高斯模糊
                     }
                     material.SetTexture ("_Bloom", buffer0);  //使用最后一个pass将亮的部分和原图像进行融合
                     Graphics.Blit (src, dest, material, 3);  
                     RenderTexture.ReleaseTemporary(buffer0);
              } else {
                     Graphics.Blit(src, dest);
              }
       }

首先我们把提取亮部的结果通过第一个pass存储到buffer0里面,我们稍微修改一下代码就能看到第一个pass处理之后的结果,效果如下:

这张图的LuminanceThreshold值为0.35,因此,亮度值小于0.35的部分全都变黑了,而大于0.35的部分的颜色也进行了一定的缩放。之后就是高斯模糊的处理部分,和前面部分代码的差别不大,不再做进一步讨论,可以参考一下下面经过高斯模糊处理后的上图。

最后一步进行混合,就能得到一开始的bloom效果图了。

接下来就是shader部分的理解了。

首先是第一个pass,提取亮部,

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;
}

之前已经提到过了,还是很容易理解的。

第2和第3个pass就是之前提到的高斯模糊,不再赘述,最后一个pass的混合比我们想象的还要简单,就是直接加一下。

fixed4 fragBloom(v2fBloom i) : SV_Target {
       return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);
}

值得注意的是,源码中有下面那几行代码:

#if UNITY_UV_STARTS_AT_TOP               
if (_MainTex_TexelSize.y < 0.0)
       o.uv.w = 1.0 - o.uv.w;
#endif

当我们把图像渲染到渲染纹理的时候,会出现图像翻转的现象,但是unity在背后已经为我们翻转过了这个图像,但是当我们开启了抗锯齿而且存在多张渲染图像的时候,后面的图像的朝向就有可能会出现问题,因此,我们需要对后面的图像手动调整一下朝向,如果纹素的y是负值,说明我们的图像已经反了。

到此为止,bloom效果的实现就已经完成了。

完整shader代码如下所示:

Shader "Unity Shaders Book/Chapter 12/Bloom" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_Bloom ("Bloom (RGB)", 2D) = "black" {}
		_LuminanceThreshold ("Luminance Threshold", Float) = 0.5
		_BlurSize ("Blur Size", Float) = 1.0
	}
	SubShader {
		CGINCLUDE
		
		#include "UnityCG.cginc"
		
		sampler2D _MainTex;
		half4 _MainTex_TexelSize;
		sampler2D _Bloom;
		float _LuminanceThreshold;
		float _BlurSize;
		
		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;
		}
		
		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);
		} 
		
		ENDCG
		
		ZTest Always Cull Off ZWrite Off
		
		Pass {  
			CGPROGRAM  
			#pragma vertex vertExtractBright  
			#pragma fragment fragExtractBright  
			
			ENDCG  
		}
			
		UsePass "Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_VERTICAL"
		
		UsePass "Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_HORIZONTAL"
		
		Pass {  
			CGPROGRAM  
			#pragma vertex vertBloom  
			#pragma fragment fragBloom  
			
			ENDCG  
		}
	}
	FallBack Off
}
发布了31 篇原创文章 · 获赞 4 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43813453/article/details/100879581