unity 高斯模糊_2D Shader学习——模糊效果(二)

0822503d65b190288f576a7a3aa2404e.png

0.前言

此效果并不是什么高级模糊效果,更不是高斯模糊,就是一个最基础的模糊效果,目的是为了让新手更容易理解模糊实现的原理。

a60ceeb37c424a044117e79708d0dd90.png
原图

1.核心原理

模糊的核心原理其实非常简单

0303631aa9b8746eb8b330e4b1353db5.png

采样附近上下左右四个相邻像素的颜色,与当前像素颜色按比例混合

公式如下: 最终像素 = (n * 某像素 + m *左 + m * 右 + m * 上 + m * 下) / (n + m)

再说的通俗一点,就是一定比例的某像素本身加上一定比例的周围像素,前者和后者的比例值相加为1,就可以实现模糊的效果了

2.代码实现

代码同样是在UI上默认的DefaultShader上修改了SampleSpriteTexture的代码实现

float _Blur;

fixed4 SampleSpriteTexture (float2 uv)
{
    // 像素距离的控制,为了控制模糊程度
    // 但是又不想让模糊度调整的区间过大
    // 所以把值变成原来的 1 / 16
    float distance = _Blur * 0.0625f;

    // 计算当前像素和相邻四个像素
    fixed4 color = tex2D (_MainTex, uv);
    fixed4 leftColor = tex2D(_MainTex,float2(uv.x - distance,uv.y));
    fixed4 rightColor = tex2D(_MainTex,float2(uv.x + distance,uv.y));
    fixed4 topColor = tex2D(_MainTex,float2(uv.x,uv.y + distance));
    fixed4 bottomColor = tex2D(_MainTex,float2(uv.x,uv.y - distance));

    // 按照比例求和
    color = color * 4 + leftColor + rightColor + topColor + bottomColor;

    // 除以比例和 除以4 (2 + 1 + 1)
    color = color * 0.125;


#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
    if (_AlphaSplitEnabled)
        color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED

    return color;
}

最后讲_Blur调整到一个比较好的程度,效果如下

29cd085392ea44177c6087623d4e9b99.png
模糊效果图

完整代码如下

Shader "Starry/Sprite/Blur"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

         // 模糊程度
         _Blur("Blur",Range(0,1)) = 0.01;

        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
    }

    SubShader
    {
        Tags
        { 
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent" 
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _ PIXELSNAP_ON
            #include "UnityCG.cginc"

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

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
            };

            fixed4 _Color;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color * _Color;
                #ifdef PIXELSNAP_ON
                OUT.vertex = UnityPixelSnap (OUT.vertex);
                #endif

                return OUT;
            }

            sampler2D _MainTex;
            sampler2D _AlphaTex;
            float _AlphaSplitEnabled;
            float _Blur;

            fixed4 SampleSpriteTexture (float2 uv)
            {
                // 1 / 16
                float distance = _Blur * 0.0625f;

                fixed4 color = tex2D (_MainTex, uv);
                fixed4 leftColor = tex2D(_MainTex,float2(uv.x - distance,uv.y));
                fixed4 rightColor = tex2D(_MainTex,float2(uv.x + distance,uv.y));
                fixed4 topColor = tex2D(_MainTex,float2(uv.x,uv.y + distance));
                fixed4 bottomColor = tex2D(_MainTex,float2(uv.x,uv.y - distance));

                color = color * 4 + leftColor + rightColor + topColor + bottomColor;
                color = color * 0.125;


#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
                if (_AlphaSplitEnabled)
                    color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED

                return color;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
                c.rgb *= c.a;
                return c;
            }
        ENDCG
        }
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值