UnityShader : 高斯模糊 Gaussian Blur

通常我们会比较在意图片的清晰度，想要图片越精细，那自然会想到像素要高了，像素的意义就是保存更多的颜色信息，这样图片就能表现更多的细节。相反，要达到模糊效果，自然就是将颜色信息舍弃掉，通过不同的算法，得到的模糊效果也会不一样。

普通的模糊算法

比较普通的一种，就是将每个像素的颜色，都与周边的颜色靠拢，丢失自己独特的颜色，也就是取自己与周围颜色的平均值，从而达到模糊的效果。

开始写Shader， 先定义可调节的参数

//因为shader取值都是百分比，所以我们要定出贴图的尺寸来进行计算
_TextureSize ("_TextureSize",Float) = 256
//取值半径
_BlurRadius ("_BlurRadius",Range(1,15) ) = 1

然后编写出取平均颜色的函数

float4 GetBlurColor( float2 uv )
{

float space = 1.0/_TextureSize; //算出一个像素的空间
int count = _BlurRadius * 2 +1; //取值范围
count *= count;

//将以自己为中心，周围半径的所有颜色相加，然后除以总数，求得平均值
float4 colorTmp = float4(0,0,0,0);
for( int x = -_BlurRadius ; x <= _BlurRadius ; x++ )
{
for( int y = -_BlurRadius ; y <= _BlurRadius ; y++ )
{
float4 color = tex2D(_MainTex,uv + float2(x * space,y * space));
colorTmp += color;
}
}
return colorTmp/count;
}

其他代码我就不贴了，后面介绍高斯模糊的时候贴出完整shader，有兴趣的话可以将这个函数修改进去。

看到没，右边就是模糊后的效果图，我这里设置的取值半径为5



这就是普通的模糊效果，我一开始也分不清高斯模糊有什么特殊的，直到我做了对比之后。。。

我们先来看看高斯模糊的算法

高斯模糊

如上所说，模糊的手段，就是让像素与周围的像素颜色平滑起来。上面使用简单平均，这样其实不是很合理，因为图像都是连续的，越靠近的点关系越密切，越远离的点关系越疏远。因此，加权平均更合理，距离越近的点权重越大，距离越远的点权重越小。这个时候我们就需要用到高斯曲线了。

高斯分布，即正态分布曲线，形状大概如下图：



它就是一个可以计算出符合上面要求的权重分布的函数，对应的二维形式如下：



使用高斯分布曲线作为滤镜算法的模糊算法，称之为高斯模糊。

高斯模糊算法实现

流程跟上面的一样，只不过这里我们需要用到高斯模糊的曲线函数来计算权重，来替代之前简单的平均取值。

首先我们需要一个求权重的函数

//计算权重
float GetGaussianDistribution( float x, float y, float rho ) {
float g = 1.0f / sqrt( 2.0f * 3.141592654f * rho * rho );
return g * exp( -(x * x + y * y) / (2 * rho * rho) );
}

接下来我们就要开始写具体的模糊函数了。大致思路就是根据位置获取相应的颜色乘以算出来的权重，得出来的颜色信息总和就是最终的颜色。

float4 GetGaussBlurColor( float2 uv )
{
//算出一个像素的空间
float space = 1.0/_TextureSize;
//参考正态分布曲线图，可以知道 3σ 距离以外的点，权重已经微不足道了。
//反推即可知道当模糊半径为r时，取σ为 r/3 是一个比较合适的取值。
float rho = (float)_BlurRadius * space / 3.0;

//---权重总和
float weightTotal = 0;
for( int x = -_BlurRadius ; x <= _BlurRadius ; x++ )
{
for( int y = -_BlurRadius ; y <= _BlurRadius ; y++ )
{
weightTotal += GetGaussianDistribution(x * space, y * space, rho );
}
}
//--------
float4 colorTmp = float4(0,0,0,0);
for( int x = -_BlurRadius ; x <= _BlurRadius ; x++ )
{
for( int y = -_BlurRadius ; y <= _BlurRadius ; y++ )
{
float weight = GetGaussianDistribution( x * space, y * space, rho )/weightTotal;

float4 color = tex2D(_MainTex,uv + float2(x * space,y * space));
color = color * weight;
colorTmp += color;
}
}
return colorTmp;
}

这其中权重我算了两边，因为我们只取了1/3的半径，所以我们需要归一，就是记录总和，然后让每个权重除以这个总和。这样才能保证所有的权重加起来为1，要不然会出现颜色丢失现象，会导致整体颜色变暗。

（这里没有做优化处理，只是为了方便理解。 实际使用中完全可以将权重设定为常量而不需要每次计算。）

效果图对比

下面是取值半径为5的效果对比图。应该能明显看出区别了。

中间的为普通的模糊，好像近视眼一样，有重影

右边高斯模糊就比较平缓



取值半径为10的模糊效果



当然实际使用中不建议取值半径算这么大。可以进行多次模糊迭代计算，效果更佳。我这里介绍的是二维高斯运算，可以尝试使用一维运算，然后X,Y各模糊一次。

具体可以参考U3D Image effect 包里面的Blur实现方式，

Shader

剩下的代码贴出，把上面的函数拷贝进去就好了，我就不重复贴了。

Shader "Custom/GaussBlur" {
Properties {
_MainTex ("Albedo (RGB)", 2D) = "white" {}
_TextureSize ("_TextureSize",Float) = 256
_BlurRadius ("_BlurRadius",Range(1,15) ) = 5
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200

Pass {
CGPROGRAM

#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

sampler2D _MainTex;
int _BlurRadius;
float _TextureSize;

struct v2f {
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
};

v2f vert( appdata_img v )
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord.xy;
return o;
}
/*
将上面的函数拷贝进来
*/

half4 frag(v2f i) : SV_Target
{
//调用普通模糊
//return GetBlurColor(i.uv);
//调用高斯模糊
//return GetGaussBlurColor(i.uv);
return tex2D(_MainTex,i.uv);
}
ENDCG
}
}
FallBack "Diffuse"
}