【SHADER系列】（一）UGUI毛玻璃效果

旧版内建渲染管线下的毛玻璃模糊效果：

实现原理很简单，就是利用Unity的GrabPass来抓取当前屏幕渲染的图像，然后进行一个Blur高斯模糊算法。为了效果更好，可以分别进行横竖模糊，只不过会变成4个DC而已。

使用也很简单，新建一个材质，赋予这个着色器，并给UGUI的Image设置该材质即可。通过调节Color的黑白值来设置模糊的程度。

参考：c# - Unity3D : Blur the background of a UI canvas - Stack Overflow

GrabPass {}
Pass1 { 横向模糊 }
GrabPass {}
Pass2 { 纵向模糊 }

Shader "Custom/BackBlur"
{
    Properties
    {
        [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
        _Color("Main Color", Color) = (1,1,1,1)
        _Size("Size", Range(0, 20)) = 1
    }
    Category{

        // We must be transparent, so other objects are drawn before this one.  
        Tags {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }


        SubShader {

            ZWrite Off
            // Horizontal blur  
            GrabPass {
                Tags { "LightMode" = "Always" }
            }
            Pass {
                Tags { "LightMode" = "Always" }

                Name "BackBlurHor"
                CGPROGRAM
                #pragma vertex vert  
                #pragma fragment frag  
                #pragma fragmentoption ARB_precision_hint_fastest  
                #include "UnityCG.cginc"  

                struct appdata_t {
                    float4 vertex : POSITION;
                    float2 texcoord : TEXCOORD0;
                    float4 color    : COLOR;
                };

                struct v2f {
                    float4 vertex : POSITION;
                    float4 uvgrab : TEXCOORD0;
                    float4 color    : COLOR;
                };

                v2f vert(appdata_t v) {
                    v2f o;
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    #if UNITY_UV_STARTS_AT_TOP  
                    float scale = -1.0;
                    #else  
                    float scale = 1.0;
                    #endif  
                    o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y*scale) + o.vertex.w) * 0.5;
                    o.uvgrab.zw = o.vertex.zw;

                    o.color = v.color;
                    return o;
                }

                sampler2D _GrabTexture;
                float4 _GrabTexture_TexelSize;
                sampler2D _MainTex;
                float4 _MainTex_TexelSize;
                float _Size;
                uniform float4 _Color;

                half4 GrabPixel(v2f i, float weight, float kernelx) {
                    if (i.uvgrab.x == 0 && i.uvgrab.y == 0) {
                        kernelx = 0;
                    }
                    return tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x + _GrabTexture_TexelSize.x*kernelx*_Size, i.uvgrab.y, i.uvgrab.z, i.uvgrab.w))) * weight;
                }
                half4 frag(v2f i) : COLOR {
                    half4 sum = half4(0,0,0,0);
                    // #define GRABPIXEL(weight, kernelx) tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x + _GrabTexture_TexelSize.x * kernelx*_Size, i.uvgrab.y, i.uvgrab.z, i.uvgrab.w))) * weight

                    sum += GrabPixel(i, 0.05, -4.0);
                    sum += GrabPixel(i, 0.09, -3.0);
                    sum += GrabPixel(i, 0.12, -2.0);
                    sum += GrabPixel(i, 0.15, -1.0);
                    sum += GrabPixel(i, 0.18,  0.0);
                    sum += GrabPixel(i, 0.15, +1.0);
                    sum += GrabPixel(i, 0.12, +2.0);
                    sum += GrabPixel(i, 0.09, +3.0);
                    sum += GrabPixel(i, 0.05, +4.0);

                    float4 col5 = tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(i.uvgrab));
                    float decayFactor = 1.0f;
                    if (i.uvgrab.x == 0 && i.uvgrab.y == 0) {
                        decayFactor = 0;
                    }
                    sum = lerp(col5, sum, decayFactor) * i.color * _Color;

                    return sum;
                }
                ENDCG
            }
            // Vertical blur  
            GrabPass {
                Tags { "LightMode" = "Always" }
            }
            Pass {
                Tags { "LightMode" = "Always" }

                Name "BackBlurVer"
                CGPROGRAM
                #pragma vertex vert  
                #pragma fragment frag  
                #pragma fragmentoption ARB_precision_hint_fastest  
                #include "UnityCG.cginc"  

                struct appdata_t {
                    float4 vertex : POSITION;
                    float2 texcoord: TEXCOORD0;
                    float4 color    : COLOR;
                };

                struct v2f {
                    float4 vertex : POSITION;
                    float4 uvgrab : TEXCOORD0;
                    float4 color    : COLOR;
                };

                v2f vert(appdata_t v) {
                    v2f o;
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    #if UNITY_UV_STARTS_AT_TOP  
                    float scale = -1.0;
                    #else  
                    float scale = 1.0;
                    #endif  
                    o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y*scale) + o.vertex.w) * 0.5;
                    o.uvgrab.zw = o.vertex.zw;

                    o.color = v.color;
                    return o;
                }

                sampler2D _GrabTexture;
                float4 _GrabTexture_TexelSize;
                float _Size;
                uniform float4 _Color;

                half4 GrabPixel(v2f i, float weight, float kernely) {
                    if (i.uvgrab.x == 0 && i.uvgrab.y == 0) {
                        kernely = 0;
                    }
                    return tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x, i.uvgrab.y + _GrabTexture_TexelSize.y*kernely*_Size, i.uvgrab.z, i.uvgrab.w))) * weight;
                }

                half4 frag(v2f i) : COLOR {
                    half4 sum = half4(0,0,0,0);
                    // #define GRABPIXEL(weight,kernely) tex2Dproj( _GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x, i.uvgrab.y + _GrabTexture_TexelSize.y * kernely*_Size, i.uvgrab.z, i.uvgrab.w))) * weight  

                    sum += GrabPixel(i, 0.05, -4.0);
                    sum += GrabPixel(i, 0.09, -3.0);
                    sum += GrabPixel(i, 0.12, -2.0);
                    sum += GrabPixel(i, 0.15, -1.0);
                    sum += GrabPixel(i, 0.18,  0.0);
                    sum += GrabPixel(i, 0.15, +1.0);
                    sum += GrabPixel(i, 0.12, +2.0);
                    sum += GrabPixel(i, 0.09, +3.0);
                    sum += GrabPixel(i, 0.05, +4.0);

                    float4 col5 = tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(i.uvgrab));
                    float decayFactor = 1.0f;
                    if (i.uvgrab.x == 0 && i.uvgrab.y == 0) {
                        decayFactor = 0;
                    }
                    sum = lerp(col5, sum, decayFactor) * i.color * _Color;

                    return sum;
                }
                ENDCG
            }
        }
    }
}

 

 

URP渲染管线下的毛玻璃：

URP默认不支持多PASS渲染，也不支持GrabPass，所以以上方式失效。

至于怎么在URP下实现类似GrabPass的，可以参考：Unity urp环境下实现默认管线的GrabPass功能 - 知乎 (zhihu.com)， 【Unity3D】URP下的GrabPass方案 - 简书 (jianshu.com)

实现方案参考：Unity URP UI背景模糊效果 - 哔哩哔哩 (bilibili.com)

 一个老外的例子，挺详细的，但没去验证过：Unity UI Blur In HDRP — TuriyaWare