用Unity实现Bloom

FeastSC

Bloom是一种常见的后处理效果，用来给发光的物体增加光晕。接下来让我们看看如何在Unity中实现它。
首先，需要在主相机上挂一个后处理C#脚本：
using UnityEngine;
using System;

[ExecuteInEditMode, ImageEffectAllowedInSceneView]
public class BloomEffect : MonoBehaviour {

    void OnRenderImage (RenderTexture source, RenderTexture destination) {
        Graphics.Blit(source, destination);
    }
}
接下来，我们可以认为Bloom其实就是将原始的画面进行模糊之后，再叠加到原始画面上。那么如何进行模糊呢？我们可以参考mipmap，对原始的render texture不断进行downsample，重复一定次数之后，再不断进行upsample，回到原始render texture的大小。此时得到的render texture必然是模糊的，模糊的程度可以通过重复的次数进行调节。
可以使用双线性插值来进行sample。所谓双线性插值，就是将目标texel周围4个texel两两插值得到最后结果。使用双线性插值的的downsample示意图如下：



再看一下使用双线性插值的upsample示意图：



不断downsample再upsample的代码如下：
        int width = source.width / 2;
        int height = source.height / 2;
        RenderTextureFormat format = source.format;

        RenderTexture currentDestination = textures[0] =
            RenderTexture.GetTemporary(width, height, 0, format);
        Graphics.Blit(source, currentDestination);
        RenderTexture currentSource = currentDestination;

        int i = 1;
        for (; i < iterations; i++) {
            width /= 2;
            height /= 2;
            if (height < 2) {
                break;
            }
            currentDestination = textures =
                RenderTexture.GetTemporary(width, height, 0, format);
            Graphics.Blit(currentSource, currentDestination);
            currentSource = currentDestination;
        }

        for (i -= 2; i >= 0; i--) {
            currentDestination = textures;
            textures = null;
            Graphics.Blit(currentSource, currentDestination);
            RenderTexture.ReleaseTemporary(currentSource);
            currentSource = currentDestination;
        }

        Graphics.Blit(currentSource, destination);
        RenderTexture.ReleaseTemporary(currentSource);
来看下不同迭代次数下的模糊效果。首先是原图：



接下来分别是1-4次的效果：









可以看到，样子有了，但是还不够好，锯齿感太浓厚了。那么我们就要为后处理编写自定义的shader了，自定义的shader拥有两个pass，一个pass是给downsample用的，还有一个是给upsample用的：
        int width = source.width / 2;
        int height = source.height / 2;
        RenderTextureFormat format = source.format;

        RenderTexture currentDestination = textures[0] =
            RenderTexture.GetTemporary(width, height, 0, format);
        Graphics.Blit(source, currentDestination, bloom, BoxDownPass);
        RenderTexture currentSource = currentDestination;

        int i = 1;
        for (; i < iterations; i++) {
            width /= 2;
            height /= 2;
            if (height < 2) {
                break;
            }
            currentDestination = textures =
                RenderTexture.GetTemporary(width, height, 0, format);
            Graphics.Blit(currentSource, currentDestination, bloom, BoxDownPass);
            currentSource = currentDestination;
        }

        for (i -= 2; i >= 0; i--) {
            currentDestination = textures;
            textures = null;
            Graphics.Blit(currentSource, currentDestination, bloom, BoxUpPass);
            RenderTexture.ReleaseTemporary(currentSource);
            currentSource = currentDestination;
        }

        Graphics.Blit(currentSource, destination, bloom, BoxUpPass);
        RenderTexture.ReleaseTemporary(currentSource);
为了消除锯齿，需要让画面更加模糊。我们可以增加一个box filter来融合像素。这里使用的是2*2的box kernel：



采样的4个点由于双线性插值的关系，实际上还会采样到周围4个点，这样总共真正采样到的点有4x2x2=16个。
        half3 Sample (float2 uv) {
            return tex2D(_MainTex, uv).rgb;
        }

        half3 SampleBox (float2 uv) {
            float4 o = _MainTex_TexelSize.xyxy * float2(-1, 1).xxyy;
            half3 s =
                Sample(uv + o.xy) + Sample(uv + o.zy) +
                Sample(uv + o.xw) + Sample(uv + o.zw);
            return s * 0.25f;
        }让我们来看看迭代4次的模糊效果：



可以发现这次锯齿是彻底没有了，但是画面模糊过头了。为什么会这样呢？原因出在upsample上。每次upsample，我们是其实希望原本对应像素的信息能最大程度的保留，但是使用box filter，再加上双线性插值，导致结果并非如此：



蓝色是当前采样点，理论上来说，upsample后的结果，蓝色所在的pixel的权重应该最高，但实际上它是最小的：



如图，对蓝色点进行采样时，会对2*2的box filter的4个顶点分别进行采样，也就是红色的点。然后根据双线性插值，距离红色点近的pixel权重更高，我们假设近的权重为2，远的权重为1，得到的最后结果即如图所示。蓝色点所在的pixel权重居然只有1，也就意味着在upsample的过程中还会不断被周围的像素模糊掉。
因此，在upsample的过程中，我们需要调整一下box kernel的大小，让它变成1*1：





        // downsample:delta = 1
        // upsample:delta = 0.5
        half3 SampleBox (float2 uv, float delta) {
            float4 o = _MainTex_TexelSize.xyxy * float2(-delta, delta).xxyy;
            half3 s =
                Sample(uv + o.xy) + Sample(uv + o.zy) +
                Sample(uv + o.xw) + Sample(uv + o.zw);
            return s * 0.25f;
        }来看看经过调整后迭代4次的模糊效果：



有了模糊效果之后，下一步要做的就是把这些效果叠加起来。我们可以把迭代的中间结果都进行叠加：



叠加本身很简单，就是在upsample的时候把blend mode设置为one one。然后在最后一次upsample时，还需要传入source render texture：
        int width = source.width / 2;
        int height = source.height / 2;
        RenderTextureFormat format = source.format;

        RenderTexture currentDestination = textures[0] =
            RenderTexture.GetTemporary(width, height, 0, format);
        Graphics.Blit(source, currentDestination, bloom, BoxDownPass);
        RenderTexture currentSource = currentDestination;

        int i = 1;
        for (; i < iterations; i++) {
            width /= 2;
            height /= 2;
            if (height < 2) {
                break;
            }
            currentDestination = textures =
                RenderTexture.GetTemporary(width, height, 0, format);
            Graphics.Blit(currentSource, currentDestination, bloom, BoxDownPass);
            currentSource = currentDestination;
        }

        for (i -= 2; i >= 0; i--) {
            currentDestination = textures;
            textures = null;
            Graphics.Blit(currentSource, currentDestination, bloom, BoxUpPass);
            RenderTexture.ReleaseTemporary(currentSource);
            currentSource = currentDestination;
        }

        bloom.SetTexture("_SourceTex", source);
        Graphics.Blit(currentSource, destination, bloom, ApplyBloomPass);
        RenderTexture.ReleaseTemporary(currentSource);
Pass { // BoxUpPass
            Blend One One
            CGPROGRAM
                #pragma vertex VertexProgram
                #pragma fragment FragmentProgram

                half4 FragmentProgram (Interpolators i) : SV_Target {
                    return half4(SampleBox(i.uv, 0.5), 1);
                }
            ENDCG
        }

        Pass { // ApplyBloomPass
            CGPROGRAM
                #pragma vertex VertexProgram
                #pragma fragment FragmentProgram

                half4 FragmentProgram (Interpolators i) : SV_Target {
                    half4 c = tex2D(_SourceTex, i.uv);
                    c.rgb += SampleBox(i.uv, 0.5);
                    return c;
                }
            ENDCG
        }
尝试不同迭代次数下的效果如下：



大体上已经OK了，剩下的就是一些细节补充。首先，我们希望bloom只对比较明亮的像素才生效。因此在第一次downsample时，可以做一次预处理，把不够亮的像素剔除掉：
        half3 Prefilter (half3 c) {
            half brightness = max(c.r, max(c.g, c.b));
            half contribution = max(0, brightness - _Threshold);
            contribution /= max(brightness, 0.00001);
            return c * contribution;
        }      

        Pass { // BoxDownPrefilterPass
            CGPROGRAM
                #pragma vertex VertexProgram
                #pragma fragment FragmentProgram

                half4 FragmentProgram (Interpolators i) : SV_Target {
                    return half4(Prefilter(SampleBox(i.uv, 1)), 1);
                }
            ENDCG
        }
RenderTexture currentDestination = textures[0] =
            RenderTexture.GetTemporary(width, height, 0, format);
        Graphics.Blit(source, currentDestination, bloom, BoxDownPrefilterPass);我们提供了参数_Threshold方便调节，来看下从0变化到1的效果：



最后，再增加一个参数来调节bloom的强度。我们将其应用于最后一次upsample的pass上：
        Pass { // ApplyBloomPass
            CGPROGRAM
                #pragma vertex VertexProgram
                #pragma fragment FragmentProgram

                half4 FragmentProgram (Interpolators i) : SV_Target {
                    half4 c = tex2D(_SourceTex, i.uv);
                    c.rgb += _Intensity * SampleBox(i.uv, 0.5);
                    return c;
                }
            ENDCG
        }最后我们看一下_Intensity不断增加的bloom效果：



如果你觉得我的文章有帮助，欢迎关注我的微信公众号：Game_Develop_Forever

Reference

[1] Bloom Blurring Light