其他分享
首页 > 其他分享> > Unity shader实现特定层级的高斯滤波UGUI

Unity shader实现特定层级的高斯滤波UGUI

作者:互联网

做UI时经常遇到背景模糊的效果,需要对下面盖住的东西进行模糊处理,这个时候就需要进行高斯滤波了。

常见的高斯滤波一般在后处理时使用,但是那样整个游戏都糊了。今天来写一个应用在UGUI上的高斯滤波shader。

一、原理

高斯滤波是数字图像处理的一种常见操作,就是一个像素点的值由周围一定范围的点决定。其中,每个点的权值呈正态分布。

常见的有3*3,5*5,7*7滤波矩阵,滤波矩阵中存储的是权值,用它乘周围一圈对应点的像素值,再加起来就得到了中心点的颜色。

本文采用5*5滤波矩阵。参考《Shader入门精要》的思路,二维的高斯滤波参数可以拆成两个一维的高斯滤波,乘起来就可以得到,所以只需要存储0.0545,0.2442,0.4026三个数值即可。

二、代码

 话不多说,先上代码。具体解析看后面

Shader "MyShader/GaussianBlurMask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Texture", 2D) = "white" {}
		_BlurSize ("Blur Size", Float) = 1.0
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True"}
        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha

        GrabPass { }                        //不带参数名,默认抓取到_GrabTexture,否则只会抓取一次

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct a2v
            {
                float4 vertex : POSITION;
                float4 color : COLOR;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float4 scrPos : TEXCOORD0;
                float2 uv : TEXCOORD1;
                fixed4 color : TEXCOORD2;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
		    float _BlurSize;

			sampler2D _GrabTexture;				//GrabPass抓取的纹理
			float4 _GrabTexture_TexelSize;		//纹理大小

            v2f vert (a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.scrPos = ComputeGrabScreenPos(o.pos);                     //抓取屏幕的坐标
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.color = v.color;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 diffuse = tex2D(_MainTex, i.uv);
                fixed4 col = diffuse * i.color;

                float weight[3] = {0.4026, 0.2442, 0.0545};                 //一维5*5高斯滤波参数,乘起来就是二维的正态分布
                fixed3 sum = fixed3(0, 0, 0);

                for(int x = -2; x <= 2; x++)
                {
                    for(int y = -2; y <= 2; y++)
                    {
                        fixed2 offset = fixed2(x ,y) * _GrabTexture_TexelSize.xy * _BlurSize;
                        fixed2 cur_UVxy = offset * i.scrPos.z + i.scrPos.xy;
                        sum += tex2D(_GrabTexture,cur_UVxy/i.scrPos.w).rgb * weight[abs(x)] * weight[abs(y)];
                    }
                }
                return col * fixed4(sum,1);
            }
            ENDCG
        }
    }
}

1,参数

[PerRendererData] _MainTex ("Texture", 2D)可以从Render中获取图片,在Canvas Render上获取的就是Image的图片。

_BlurSize表示滤波半径,代表周围采样点的距离。从严谨的角度上说,采样点的距离就是1像素,增大滤波半径需要扩大滤波矩阵。但是有些问题,一是片元函数拿不到周围的点,二是实时用高斯分布计算滤波矩阵,再对周围几百个点采样,性能上肯定不行。

2,标签和渲染状态配置

Tags透明,关闭阴影。关闭裁剪,关闭深度写入。ZTest [unity_GUIZTestMode],这些都是UI上Shader的标配

3,抓取

要对下方的图像进行处理,就必须抓取下方的渲染结果。

GrabPass { },不带名字,抓取到的屏幕图像存储在_GrabTexture中,图像的纹素大小存在_GrabTexture_TexelSize中。考虑到UI可能会叠加,所以必须每层渲染都抓取一次,因此不能带名字。

使用ComputeGrabScreenPos()函数进行抓取。

4,滤波矩阵

使用两层for循环,取5*5的点进行滤波。计算偏移量offset时,要乘上纹素大小_GrabTexture_TexelSize。

取到颜色值后,权值矩阵是横竖相乘计算得到,最终结果相加保存在sum中。

为了保留UGUI的图像和颜色功能,sum和UI图像颜色相乘得到最终结果。

三、滤波效果及栅格问题

我们随便找一个图看看。以下分别是原图,滤波半径2,滤波半径4,滤波半径10,滤波半径40的效果

 

 

 

 

 

 可以看到,随着滤波半径增大,图片逐渐模糊,但是形成了“栅格”。这是由于只增大了滤波半径,没有增大滤波矩阵。

计算机图形学有一句话,叫做“你看上去是对的,那它就是对的”。为了让图片看上去没有栅格,在使用大滤波半径时,建议使用多层滤波,逐级减小的方式。

 

先用大半径滤波,再逐渐减小到没有栅格的滤波半径。效果如下:

 

 

 

当然此shader也支持局部模糊,再随便找个图看看。

 

 

 

标签:GrabTexture,高斯,矩阵,滤波,shader,抓取,Unity,半径,UGUI
来源: https://www.cnblogs.com/strawberryPudding/p/15703362.html