文章目录
一、前言二、最终效果三、高斯模糊的原理四、ShaderGraph的高斯模糊实现一、前言
之前我写了一篇文章:ShaderGraph使用教程与各种特效案例:Unity
有网友私信问我一个问题:
使用ShaderGraph
如何实现高斯模糊的效果呢?今天我就来写下实现过程。
二、最终效果
Demo
工程已上传到GitHub
,地址:/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 / 16float 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_ALLOWEDif (_AlphaSplitEnabled)color.a = tex2D (_AlphaTex, uv).r;#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWEDreturn 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