【游戏开发实战】Unity ShaderGraph实现图片的高斯模糊效果

最新推荐文章于 2026-08-04 15:09:29 发布

原创最新推荐文章于 2026-08-04 15:09:29 发布 · 1.3w 阅读

103 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Unity3D

shader

本文详细介绍如何使用Unity ShaderGraph实现高斯模糊效果。通过对比简单模糊与高斯模糊的不同混合比例，逐步介绍ShaderGraph中实现高斯模糊的具体步骤与技巧。

文章目录

一、前言

之前我写了一篇文章：ShaderGraph使用教程与各种特效案例：Unity2020
有网友私信问我一个问题：
在这里插入图片描述
使用ShaderGraph如何实现高斯模糊的效果呢？今天我就来写下实现过程。

二、最终效果

在这里插入图片描述
Demo工程已上传到GitHub，地址：https://github.com/linxinfa/UnityShaderGraphGaussBlurDemo

三、高斯模糊的原理

对图片进行模糊处理，简单的思路为：把某一个像素的相邻像素和自身按照比例进行了混合，用新的值代替原像素。
在处理像素的过程中，中、上下左右的比例如图
在这里插入图片描述
对应的算法如下：

fixed4 color = tex2D (_MainTex, uv) * 0.5f;

color += tex2D(_MainTex,float2(uv.x - distance,uv.y)) * 0.125f;
color += tex2D(_MainTex,float2(uv.x + distance,uv.y)) * 0.125f;
color += tex2D(_MainTex,float2(uv.x,uv.y + distance)) * 0.125f;
color += tex2D(_MainTex,float2(uv.x,uv.y - distance)) * 0.125f;

高斯模糊是按以下的混合比例：
在这里插入图片描述
对应的算法如下：

float _Blur;

fixed4 SampleSpriteTexture (float2 uv)
{
    // 1 / 16
    float offset = _Blur * 0.0625f;
    // 中
	fixed4 color = tex2D(_MainTex,float2(uv.x, uv.y)) * 0.147761f;
	
    // 左上
    color += tex2D(_MainTex, float2(uv.x - offset, uv.y - offset)) * 0.0947416f;
    // 上
    color += tex2D(_MainTex,float2(uv.x,uv.y - offset)) * 0.118318f;
    // 右上
    color += tex2D(_MainTex,float2(uv.x + offset, uv.y + offset)) * 0.0947416f;
    // 左
    color += tex2D(_MainTex,float2(uv.x - offset, uv.y)) * 0.118318f;
    // 右
    color += tex2D(_MainTex,float2(uv.x + offset, uv.y)) * 0.118318f;
    // 左下
    color += tex2D (_MainTex, float2(uv.x - offset, uv.y + offset)) * 0.0947416f;
    // 下
    color += tex2D(_MainTex,float2(uv.x, uv.y + offset)) * 0.118318f;
    // 右下
    color += tex2D(_MainTex,float2(uv.x + offset, uv.y - offset)) * 0.0947416f;


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

四、ShaderGraph的高斯模糊实现

有了上面的原理，使用ShaderGraph就不难实现了。
我们先计算中心点的颜色，对应的shader代码如下：

// 中
fixed4 color = tex2D(_MainTex, float2(uv.x, uv.y)) * 0.147761f;

翻译成ShaderGraph节点就是这样：
在这里插入图片描述
接着，加上左上角的颜色，对应的shader代码如下：

// 左上
color += tex2D(_MainTex, float2(uv.x - offset, uv.y - offset)) * 0.0947416f;

要有一个offset变量，新建一个Vector1类型的变量，如下
在这里插入图片描述
要对uv的x、y做offset偏移，即：uv.x - offset, uv.y - offset，使用Split节点将uv的x、y分量分离，分别进行运行：

接着将两个分量合成一个float2，即：float2(uv.x - offset, uv.y - offset)，使用Combine节点将两个分量合在一起：
在这里插入图片描述
再接着是使用该uv对图片进行采样，即：tex2D(_MainTex, float2(uv.x - offset, uv.y - offset))，使用Sample Texture 2D节点：

再乘以系数0.0947416，即：tex2D(_MainTex, float2(uv.x - offset, uv.y - offset)) * 0.0947416f;，

最后与第一步得到的颜色进行+=操作
在这里插入图片描述
这样以此类推，实现上、右上、左、右、左下、下、右下逻辑。

效果测试：
offset为0的时候，

调整offset