如何让一个2D图片实现一个模糊效果

谁践踏了优雅 2022-06-17 07:44 188阅读 0赞

这几天有个项目的界面要实现一个模糊效果~

效果图如下：![Center][]清晰状态

![Center 1][]模糊状态

其实只要给图片加一个模糊材质球就可以了~

1.创建材质球。

![Center 2][]

2.新建shader文件，然后用mono编辑器打开，把下面的代码复制进去。

Shader "UI/mohu"
    {
        Properties
        {
            [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
            _Color ("Tint", Color) = (1,1,1,1)
             
            _StencilComp ("Stencil Comparison", Float) = 8
            _Stencil ("Stencil ID", Float) = 0
            _StencilOp ("Stencil Operation", Float) = 0
            _StencilWriteMask ("Stencil Write Mask", Float) = 255
            _StencilReadMask ("Stencil Read Mask", Float) = 255
      
            _ColorMask ("Color Mask", Float) = 15
            //--------------add------------------
            _Distance ("Distance", Float) = 0.015
            //--------------add------------------
        }
      
        SubShader
        {
            Tags
            { 
                "Queue"="Transparent"
                "IgnoreProjector"="True"
                "RenderType"="Transparent"
                "PreviewType"="Plane"
                "CanUseSpriteAtlas"="True"
            }
             
            Stencil
            {
                Ref [_Stencil]
                Comp [_StencilComp]
                Pass [_StencilOp] 
                ReadMask [_StencilReadMask]
                WriteMask [_StencilWriteMask]
            }
      
            Cull Off
            Lighting Off
            ZWrite Off
            ZTest [unity_GUIZTestMode]
            Fog { Mode Off }
            Blend SrcAlpha OneMinusSrcAlpha
            ColorMask [_ColorMask]
      
            Pass
            {
            CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #include "UnityCG.cginc"
                 
                struct appdata_t
                {
                    float4 vertex   : POSITION;
                    float4 color    : COLOR;
                    float2 texcoord : TEXCOORD0;
                };
      
                struct v2f
                {
                    float4 vertex   : SV_POSITION;
                    fixed4 color    : COLOR;
                    half2 texcoord  : TEXCOORD0;
                };
                 
                fixed4 _Color;
      
                v2f vert(appdata_t IN)
                {
                    v2f OUT;
                    OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
                    OUT.texcoord = IN.texcoord;
    #ifdef UNITY_HALF_TEXEL_OFFSET
                    OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
    #endif
                    OUT.color = IN.color * _Color;
                    return OUT;
                }
      
                sampler2D _MainTex;
                //--------------add------------------
                float _Distance;
                //--------------add------------------
                fixed4 frag(v2f IN) : SV_Target
                {
    //              //half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
    //              //clip (color.a - 0.01);
    //              //return color;
      
                    //--------------add------------------
                    float distance = _Distance;
                    fixed4 computedColor = tex2D(_MainTex, IN.texcoord) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x + distance , IN.texcoord.y + distance )) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x + distance , IN.texcoord.y)) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x , IN.texcoord.y + distance )) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x - distance , IN.texcoord.y - distance )) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x + distance , IN.texcoord.y - distance )) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x - distance , IN.texcoord.y + distance )) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x - distance , IN.texcoord.y)) * IN.color;
                    computedColor += tex2D(_MainTex, half2(IN.texcoord.x , IN.texcoord.y - distance )) * IN.color;
                    computedColor = computedColor / 9;
                    return computedColor;
                    //--------------add------------------
                }
            ENDCG
            }
        }
    }

3.材质球选择刚刚写的shader。

![Center 3][]  
  
4.把材质球拖到image上。

![Center 4][]

ok~大功告成了~

清晰的图片就变成了模糊的效果

![Center 5][]

[Center]: /images/20220617/f8e50f550a7c4714a2c46b728301584b.png
[Center 1]: /images/20220617/a23c1271333b482e8906d3fdeee46d1b.png
[Center 2]: /images/20220617/070ee856627642b6a55c49e093d08872.png
[Center 3]: /images/20220617/ee2b043548034aeb8691cd2127fec6cc.png
[Center 4]: /images/20220617/a6b704c620084d15afe82929b033b408.png
[Center 5]: /images/20220617/9a48be9e581443e187893d7f5a5cb8ce.png