[Unity/shader]高斯模糊

前言

      很久没有学习新知识了，前端时间偶然翻了一下《shader入门精要》看了一下bloom效果，然后发现自己对卷积，高斯模糊的概念一直也很模糊。正好借这个机会复习一下。

高斯模糊

      高斯模糊其实重要的就是卷积的过程，这里真的非常推荐大家买一本入门精要，里面讲的很详细。感兴趣的同学也可以去搜一下PDF看一下里面卷积的讲解，这里就不赘述了。总之就是根据一个卷积核对图片一个像素的四周进行采样，然后在根据卷积核中四周各个位置的权重进行颜色的叠加。
      不过我看到书中讲到的模糊是分为两次进行的，一次是横向的模糊，一次是纵向的模糊，不过使用的都是相同的卷积核。在后处理渲染的时候因为要处理两次，当迭代次数增加的时候，产生的DC也会每次都增加2。虽然增加的不多，不过我还是想一次同时模糊两个方向。我这里使用的是暴力手段强行同时模糊两个方向，应该还会有更好的办法，如果后面找到了会加进来。
      shader代码：

Shader "My Shader/ My Gaussian Blur" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _BlurSize ("Blur Size", Float) = 1.0
    }
    SubShader {
        CGINCLUDE
        
        #include "UnityCG.cginc"
        
        sampler2D _MainTex;  
        half4 _MainTex_TexelSize;
        float _BlurSize;
          
        struct v2f {
            float4 pos : SV_POSITION;
            half2 uvHorizontal[5]: TEXCOORD0;
            half2 uvVertical[5]: TEXCOORD5;
        };
          
        v2f vertBlur(appdata_img v) {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex);
            
            half2 uv = v.texcoord;
            
            o.uvVertical[0] = uv;
            o.uvVertical[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
            o.uvVertical[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
            o.uvVertical[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
            o.uvVertical[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;

            o.uvHorizontal[0] = uv;
            o.uvHorizontal[1] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
            o.uvHorizontal[2] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
            o.uvHorizontal[3] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
            o.uvHorizontal[4] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
                     
            return o;
        }
        
        fixed4 fragBlur(v2f i) : SV_Target {
            //正常使用的是横竖两次采样，所以颜色要计算两次，这里放在一起计算，所以权重值都*0.5最后颜色才不会爆掉
            float weight[3] = {0.4026*0.5, 0.2442*0.5, 0.0545*0.5};
            
            fixed3 sumVertical = tex2D(_MainTex, i.uvVertical[0]).rgb * weight[0];
            fixed3 sumHorizontal = tex2D(_MainTex, i.uvHorizontal[0]).rgb * weight[0];

            for (int it = 1; it < 3; it++) {
                sumVertical += tex2D(_MainTex, i.uvVertical[it*2-1]).rgb * weight[it];
                sumVertical += tex2D(_MainTex, i.uvVertical[it*2]).rgb * weight[it];

                sumHorizontal += tex2D(_MainTex, i.uvHorizontal[it*2-1]).rgb * weight[it];
                sumHorizontal += tex2D(_MainTex, i.uvHorizontal[it*2]).rgb * weight[it];
            }
            
            return fixed4(sumVertical + sumHorizontal, 1.0);
        }
            
        ENDCG
        
        ZTest Always Cull Off ZWrite Off
        
        Pass {
            NAME "GAUSSIAN_BLUR"
            
            CGPROGRAM
              
            #pragma vertex vertBlur  
            #pragma fragment fragBlur
              
            ENDCG  
        }
    } 
    FallBack "Diffuse"
}

      c#代码：

void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (material != null)
        {
            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);

            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, 0);

                RenderTexture.ReleaseTemporary(buffer0);
                buffer0 = buffer1;
            }

            Graphics.Blit(buffer0, dest);
            RenderTexture.ReleaseTemporary(buffer0);
        }
        else
        {
            Graphics.Blit(src, dest);
        }
    }

      这里c#代码中对屏幕图片进行了降采样处理，downSample就是对应的降采样比例，因为做的是模糊效果，所以降采样一定程度上可以提高模糊效果（如果降得太多会导致像素化）。其他基本没有什么额外的操作了，_BlurSize作为模糊范围传入shader参与卷积计算。

高斯模糊的一些效果

      在网上看其他高斯模糊代码的时候看到了一个很有意思的效果，就是可以在模糊之后再渲染一些UI元素，就像这样：

背景模糊
      我们知道，屏幕后处理是所有东西都渲染之后才进行的操作，那么他是怎么实现这种先进行后处理，然后进行UI的渲染的呢？
原文地址
      在实现这个效果的时候还被UI绕蒙了，因为文中使用了另外一个相机进行模糊处理，把模糊结果存到一张RT上然后当做UI进行渲染。
      当UI使用overlay（覆盖）模式的时候，UI会在场景中所有其他物体渲染后进行渲染。（我开始以为和camera模式类似，canvas会主动找主相机进行渲染，其实不是的，canvas会等相机都渲染完之后再进行覆盖渲染）
      实现起来也很简单，和之前的代码相差不大，只不过脚本中多持有了一个rawImage和camera的引用：

    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (material != null)
        {
            if (!gameObject.activeInHierarchy && enabled) return;

            int rtW = src.width / downSample;
            int rtH = src.height / downSample;
            buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);
            buffer0.filterMode = FilterMode.Bilinear;

            Graphics.Blit(src, 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, 0);

                RenderTexture.ReleaseTemporary(buffer0);
                buffer0 = buffer1;
            }

            Graphics.Blit(buffer0, dest);
            //RenderTexture.ReleaseTemporary(buffer0);
            //赋值RT
            rImg.texture = buffer0;
            rImg.color = m_color;
            //渲染后关闭相机与本脚本，停止重复渲染，只保留RawImage作为UI元素
            m_camera.enabled = false;
            enabled = false;
        }
        else
        {
            Graphics.Blit(src, dest);
        }
    }

      这里我们不能在渲染之后直接销毁RT，因为这张RT我们还要作为图片交给rawImage进行渲染，不过可以另外添加函数在不需要模糊效果的时候回收RT。
      这个效果目前只能在渲染世界的时候给世界添加一层模糊效果，那么我们责编呢在UI上也实现类似效果呢。这里就要用到canvas的camera渲染模式，使用不同的canvas对UI进行分层，然后把想要模糊的UI进行处理后渲染到RT上，理论上就可以实现UI的模糊效果了，因为我们使用的是rawImage重新渲染，所以还可以自定义裁剪形状等功能。这里就不一一实现了_{如果后面有用到再来补充把}