用Unity实现Bloom

FeastSC · 发表于 2022-9-2 21:10

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(&#34;_SourceTex&#34;, 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

		自动登录	找回密码
密码			立即注册

用Unity实现Bloom

本帖子中包含更多资源