文章內使用Unity 2019 LTS
以下這張圖片也是一個常見的螢幕後製特效,Bloom,中文翻作高光。
from wiki
仔細觀察這張圖,可以在這其中看到一個先前介紹過的效果,那就是模糊(Blur),也就是說,我們可以結合之前的模糊效果,再加上一些「處理」就可以完成這項功能了。
那這些處理是甚麼呢?事實上Bloom的實作原理很簡單,先給出一個值標示出影像中,屬於高亮度的部分,隨後將這些高亮度的部分儲存在Render Texture中並進行模糊操作,最後再與原圖進行混和。
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
}
}
}
[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);
}
}
}