【Unity Shader入门精要第12章】屏幕后处理效果（二）

1. 卷积

在图像处理中，卷积操作就是使用一个卷积核对一张图像中的每个像素做一系列的操作。

卷积核通常是一个四方形网格结构，如2x2、3x3的方形区域，该区域内每个方格都有一个权重值。

当对图像中的某个像素进行卷积操作时，将卷积核的中心放置于要处理的像素上，按照卷积核每个格子中的权重值，将卷积核覆盖到的像素的进行加权计算，得到最终结果。

下图为用一个3x3的卷积核对原始图像中A像素进行卷积操作时的示意：

在这里插入图片描述

2. 边缘检测

在这个例子中，我们实现一个简单边缘检测效果。使用的方法是，通过边缘检测算子直接对屏幕图像进行卷积操作，基于卷积结果判断某像素是否位于边缘上。

边缘检测算子就是一个预先定义好的卷积核，本次使用的为Sobel算子，如下：

在这里插入图片描述
原理为对于每个像素，按照算子的范围，计算该像素左右和上下一定范围内的相邻像素的灰度值差异大小——也就是卷积的结果，我们称之为梯度。梯度越大，代表像素两侧的灰度值差异越大，当前像素就越可能是某个边缘上的像素。

因此，在片元着色器中，对于每个处理中的片元，需要采样该片元相邻的9个像素，并按照算子中的权重值计算最终梯度。为了减少在片元着色器中逐像素计算uv偏移的消耗，我们把这个计算uv偏移的过程移到了顶点着色器中，在 v2f 结构中通过一个长度为9的uv数组传递给片元着色器。

在计算得到梯度值之后，按照梯度值在原始采样颜色和边缘颜色之间进行插值，完成描边效果。

另外，也提供了一个只显示描边的展示效果，通过 _OnlyEdge 变量控制是否只显示描边，通过 _BackgroundColor 变量控制当只显示描边时非边缘区域的颜色。

最后，实现新增一个 PostEffect_EdgeDetection 脚本用于调用描边处理效果，继承自前文的后处理父类 PostEffectBase，并在 OnRenderImage 方法中为Shader中的变量赋值及调用Blit方法。

测试脚本如下：

using UnityEngine;[ExecuteInEditMode]
[RequireComponent(typeof(Camera))]
public class PostEffect_EdgeDetection : PostEffectBase
{public Shader EdShader;public Material EdMat;public Color EdgeColor = Color.black;public Color BackgroundColor = Color.white;[Range(0.0f, 1.0f)]public float OnlyEdge = 0f;private void OnRenderImage(RenderTexture src, RenderTexture dest){Material _mat = CheckShaderAndMaterial(EdShader, EdMat);if (null == _mat) Graphics.Blit(src, dest);else{_mat.SetColor("_EdgeColor", EdgeColor);_mat.SetColor("_BackgroundColor", BackgroundColor);_mat.SetFloat("_OnlyEdge", OnlyEdge);Graphics.Blit(src, dest, _mat);}}
}

测试Shader如下：

Shader "MyShader/Chapter_12/Chapter_12_EdgeDetection_Shader"
{Properties{_MainTex("MainTex", 2D) = "white"{}}SubShader{Pass{Tags{"LightMode" = "ForwardBase"}ZTest AlwaysZWrite OffCull OffCGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdbase#include "UnityCG.cginc"struct v2f{float4 pos : SV_POSITION;float2 uv[9] : TEXCOORD0;};sampler2D _MainTex;float4 _MainTex_TexelSize;fixed4 _EdgeColor;fixed _OnlyEdge;fixed4 _BackgroundColor;v2f vert(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);half2 _uv = v.texcoord;//计算sobel算子覆盖范围的uv偏移o.uv[0] = _uv + _MainTex_TexelSize.xy * half2(-1, -1);o.uv[1] = _uv + _MainTex_TexelSize.xy * half2(0, -1);o.uv[2] = _uv + _MainTex_TexelSize.xy * half2(1, -1);o.uv[3] = _uv + _MainTex_TexelSize.xy * half2(-1, 0);o.uv[4] = _uv + _MainTex_TexelSize.xy * half2(0, 0);o.uv[5] = _uv + _MainTex_TexelSize.xy * half2(1, 0);o.uv[6] = _uv + _MainTex_TexelSize.xy * half2(-1, 1);o.uv[7] = _uv + _MainTex_TexelSize.xy * half2(0, 1);o.uv[8] = _uv + _MainTex_TexelSize.xy * half2(1, 1);return o;}fixed Luminance(fixed4 _color){return 0.2125 * _color.r + 0.7154 * _color.g + 0.0721 * _color.b;}half Sobel(v2f i){//Sobel算子const half Gx[9] = {-1, -2, -1,0,  0,  0,1,  2,  1};const half Gy[9] = {-1,  0,  1,-2,  0,  2,-1,  0,  1};fixed _luminance;half _edgeX = 0;half _edgeY = 0;for(int it = 0; it < 9; it++){_luminance = Luminance(tex2D(_MainTex, i.uv[it]));_edgeX += _luminance * Gx[it];_edgeY += _luminance * Gy[it];}//差异越大，值越小，越可能是边界return 1 - abs(_edgeX) - abs(_edgeY);}fixed4 frag(v2f i) : SV_Target{half _edge = Sobel(i);fixed4 _samplerColor = tex2D(_MainTex, i.uv[4]);fixed4 _withEdgeColor = lerp(_EdgeColor, _samplerColor, _edge);fixed4 _onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, _edge);return lerp(_withEdgeColor, _onlyEdgeColor, _OnlyEdge);}ENDCG}}
}

效果如下：
在这里插入图片描述

3. 高斯模糊

3.1 高斯核

常见的几种通过卷积操作实现模糊效果的方式：

均值模糊：通过一个各项权值相等且经过归一化处理的卷积核对图像进行卷积，也就是用像素周围一定范围相邻像素的均值作为颜色
中值模糊：将相邻像素进行排序，用中值作为颜色
高斯模糊：通过高斯核对图像进行卷积操作，高斯核中每项的权值通过高斯方程获得（归一化处理）

使用的高斯方程：
在这里插入图片描述
其中：

σ是标准方差，通常取1
xy分别代表横纵坐标到当前像素的整数距离

从上述公式可以看出，当σ为1时，只有xy会影响最终的模糊效果：距离越大影响越大、维度越高模糊程度越高。

由于高斯核中的权重都是由该公式求出的，因此只要确定了高斯核的维度，则其中的每一项就已经固定了，比如下面的例子中使用的5x5高斯核为：
在这里插入图片描述

3.2 优化手段

拆分高斯核

对于一个 WxH 的纹理，如果用 NxN 的高斯核直接进行滤波，则采样次数为：NxNxWxH

可以将高斯核拆分成一横一纵两个一维的高斯核，用拆分后的高斯核分别进行滤波，则采样次数就可以降低为：2xNxWxH

注意，是经过两个PASS分别滤波，也就是先用横向的高斯核对原始纹理进行滤波得到中间纹理，再用纵向的高斯核对中间纹理进行滤波得到最终的效果。并不是在一个PASS中同时用横纵高斯核进行处理，因为这样横纵高斯核采样的都是原始纹理的颜色。

降采样

由于卷积操作是在片元着色器中对纹理中的每个像素进行处理，因此，纹理的像素数量（或者说纹理的尺寸）就直接影响到计算的次数

我们可以先按照一定的比例对原始的纹理进行降采样处理，生成一个尺寸较小的临时纹理，然后对临时纹理进行高斯滤波，这样可以大大降低计算的数量。

扩大步长

要达到更好的模糊效果，最只管的方式是提高高斯核的维度，但是提高维度也意味着增加计算量。基于上文对高斯方程的分析，XY的范围越大影响越大，因此，在不提高维度的情况下，要获得更好的模糊效果，我们还可以增加XY的采样步长，也就是扩大XY的范围。

增加迭代次数

另外，还可以设置进行滤波的迭代次数，这样可以动态修改迭代次数，在满足性能要求的前提下，获得更好的模糊效果。

3.3 示例

下面的例子中，我们将5X5的高斯核拆分成如下两个一维的高斯核：
在这里插入图片描述
观察拆分后的高斯核，可以发现无论横纵，高斯权值都是对称的，且横纵高斯核中相同距离的权值相等，因此在Shader中只需要用一个长度为3的数组就可以表达拆分后的高斯核。

测试脚本

using UnityEngine;public class PostEffect_GaussianBlur : PostEffectBase
{public Shader GaussianBlurShader;public Material GaussianBlurMat;[Range(1, 8)]public float DownSampler = 1;[Range(0.2f, 3f)]public float SmaplerStep = 1;[Range(1, 4)]public float BlurRound = 1;private void OnRenderImage(RenderTexture src, RenderTexture dest){Material _mat = CheckShaderAndMaterial(GaussianBlurShader, GaussianBlurMat);if(null == _mat) Graphics.Blit(src, dest);else{int _width = (int)(src.width / DownSampler);int _height = (int)(src.height / DownSampler);RenderTexture _buffer_0 = RenderTexture.GetTemporary(_width, _height, 0);_buffer_0.filterMode = FilterMode.Bilinear;//原始图像降采样至 _buffer_0，并保持后续每次操作中 _buffer_0 都是待处理的图像Graphics.Blit(src, _buffer_0);for (int i = 0; i < BlurRound; i++){_mat.SetFloat("_SmaplerStep", SmaplerStep * i);//横向滤波RenderTexture _buffer_1 = RenderTexture.GetTemporary(_width, _height, 0);Graphics.Blit(_buffer_0, _buffer_1, _mat, 0);RenderTexture.ReleaseTemporary(_buffer_0);_buffer_0 = _buffer_1;//纵向滤波_buffer_1 = RenderTexture.GetTemporary(_width, _height, 0);Graphics.Blit(_buffer_0, _buffer_1, _mat, 1);RenderTexture.ReleaseTemporary(_buffer_0);_buffer_0 = _buffer_1;}//将最终结果输出Graphics.Blit(_buffer_0, dest);RenderTexture.ReleaseTemporary(_buffer_0);}}
}

测试Shader

Shader "MyShader/Chapter_12/Chapter_12_GaussianBlur_Shader"
{Properties{_MainTex("MainTex", 2D) = "white"{}}SubShader{ZTest Always ZWrite Off Cull Off//预定义着色器函数，可以在后续的Pass中直接调用//避免在多个Pass中重复实现同样的代码CGINCLUDE#include "UnityCG.cginc"sampler2D _MainTex;float4 _MainTex_TexelSize;half _SmaplerStep;struct v2f{float4 pos : SV_POSITION;float2 uv[5] : TEXCOORD0;};//横向滤波顶点着色函数v2f vertHorizental(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv[0] = v.texcoord;o.uv[1] = v.texcoord + _MainTex_TexelSize.xy * float2(-1, 0) * _SmaplerStep;o.uv[2] = v.texcoord + _MainTex_TexelSize.xy * float2(1, 0) * _SmaplerStep;o.uv[3] = v.texcoord + _MainTex_TexelSize.xy * float2(-2, 0) * _SmaplerStep;o.uv[4] = v.texcoord + _MainTex_TexelSize.xy * float2(2, 0) * _SmaplerStep;return o;}//纵向滤波顶点着色函数v2f vertVertical(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv[0] = v.texcoord;o.uv[1] = v.texcoord + _MainTex_TexelSize.xy * float2(0, -1) * _SmaplerStep;o.uv[2] = v.texcoord + _MainTex_TexelSize.xy * float2(0, 1) * _SmaplerStep;o.uv[3] = v.texcoord + _MainTex_TexelSize.xy * float2(0, -2) * _SmaplerStep;o.uv[4] = v.texcoord + _MainTex_TexelSize.xy * float2(0, 2) * _SmaplerStep;return o;}//通用滤波片元着色函数fixed4 frag(v2f i) : SV_Target{const half G[3] = {0.4026, 0.2442, 0.0545};fixed3 _color = tex2D(_MainTex, i.uv[0]) * G[0];for(int it = 1; it < 3; it++){_color += tex2D(_MainTex, i.uv[it * 2]) * G[it];_color += tex2D(_MainTex, i.uv[it * 2 - 1]) * G[it];}return fixed4(_color, 1);}ENDCG//横向滤波PassPass{//将Pass命名，方便后续其他效果使用Name "GAUSSIAN_BLUR_HORIZENTAL"CGPROGRAM#pragma vertex vertHorizental#pragma fragment fragENDCG}//纵向滤波PassPass{Name "GAUSSIAN_BLUR_VERTICAL"CGPROGRAM#pragma vertex vertVertical#pragma fragment fragENDCG}}
}