![0822503d65b190288f576a7a3aa2404e.png](https://i-blog.csdnimg.cn/blog_migrate/576793e9d95f0f3b15575069f7e0b564.jpeg)
0.前言
此效果并不是什么高级模糊效果,更不是高斯模糊,就是一个最基础的模糊效果,目的是为了让新手更容易理解模糊实现的原理。
![a60ceeb37c424a044117e79708d0dd90.png](https://i-blog.csdnimg.cn/blog_migrate/5c4c95f0748d8f7c14141406a63d286e.jpeg)
1.核心原理
模糊的核心原理其实非常简单
![0303631aa9b8746eb8b330e4b1353db5.png](https://i-blog.csdnimg.cn/blog_migrate/3f00ae0bcee074e6eee830674b6932e1.jpeg)
采样附近上下左右四个相邻像素的颜色,与当前像素颜色按比例混合
公式如下: 最终像素 = (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](https://i-blog.csdnimg.cn/blog_migrate/3aba0cb150b78c2f6353a9cf72ebe9f0.jpeg)
完整代码如下
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
}
}
}