iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

初見Unity Shader系列 第 29

Bloom效果,又或是高光效果

文章內使用Unity 2019 LTS

目標

  • Bloom效果

Bloom

以下這張圖片也是一個常見的螢幕後製特效,Bloom,中文翻作高光。

from wiki

仔細觀察這張圖,可以在這其中看到一個先前介紹過的效果,那就是模糊(Blur),也就是說,我們可以結合之前的模糊效果,再加上一些「處理」就可以完成這項功能了。

那這些處理是甚麼呢?事實上Bloom的實作原理很簡單,先給出一個值標示出影像中,屬於高亮度的部分,隨後將這些高亮度的部分儲存在Render Texture中並進行模糊操作,最後再與原圖進行混和。

開始撰寫吧!

  1. Bloom Shader
Shader "Learning/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;
		};	
		
		// vertex shader 用於獲取高亮處
		v2f vertExtractBright(appdata_img v) {
			v2f o;
			
			o.pos = UnityObjectToClipPos(v.vertex);
			
			o.uv = v.texcoord;
					 
			return o;
		}
		
		// 降至灰階,分析明亮度
		// wiki: https://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
		fixed luminance(fixed4 color) {
			return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
		}
		
		// fragment shader 用於獲取高亮處
		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 = UnityObjectToClipPos (v.vertex);
			// 第一組紋理座標為原圖,第二組為Bloom
			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
		// 各4個Pass處理這個效果
		Pass {  
			CGPROGRAM  
			#pragma vertex vertExtractBright  
			#pragma fragment fragExtractBright  
			
			ENDCG  
		}
		
        // 這兩個Shader來自Day26的畫面模糊效果
		UsePass "Learning/Blur/GAUSSIAN_BLUR_VERTICAL"
		
		UsePass "Learning/Blur/GAUSSIAN_BLUR_HORIZONTAL"
		
		Pass {  
			CGPROGRAM  
			#pragma vertex vertBloom  
			#pragma fragment fragBloom  
			
			ENDCG  
		}
	}
}

畫面模糊效果

  1. Script
[RequireComponent(typeof(Camera))]
public class BloomCopy : MonoBehaviour
{
    public Shader BloomShader;

    private Material material;

	[Range(0, 4)]
	public int iterations = 3;
	
	[Range(0.2f, 3.0f)]
	public float blurSpread = 0.6f;

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

    void Start()
    {
        if (!BloomShader.isSupported)
        {
            return;
        }
        else{
            material = new Material(BloomShader);
            material.hideFlags = HideFlags.DontSave;
        }
    }

    private void OnRenderImage(RenderTexture src, RenderTexture dest) {
        if (material != null) {
			material.SetFloat("_LuminanceThreshold", luminanceThreshold);
			
			RenderTexture buffer0 = RenderTexture.GetTemporary(src.width, src.height, 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(src.width, src.height, 0);
				
				// Render the vertical pass
				Graphics.Blit(buffer0, buffer1, material, 1);
				
				RenderTexture.ReleaseTemporary(buffer0);
				buffer0 = buffer1;
				buffer1 = RenderTexture.GetTemporary(src.width, src.height, 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);
		}
    }
}

Reference


上一篇
粗略的HDR理解
下一篇
心得,完結灑花
系列文
初見Unity Shader30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言