UE4实现描边后处理材质方法------Sobel算子

参考了很多资料~摸清楚了不少坑之后更新了这篇文档。

 会写得比较细，有错漏的地方感谢指正，后续会继续更新一系列图形效果的实现。

最终效果，还有改良空间。

首先说下思路。

由于UE4延迟渲染的机制，我们可以从后处理中提溜出一大堆可以操作的图形来，这里将会用到的就是SceneDepth（场景深度，用来表现物体离相机远近的灰度图）贴图。于是，利用这张图，我们可以结合Sobel算子来实现边缘处理。

Sobel算子是相当经典的边缘检测算法，计算快，消耗低（只涉及+和*运算）。简单来说就是利用Sobel特定的卷积核对原始图形进行卷积计算，从而计算出像素的梯度矢量，根据值也就可以描述像素是否为边缘点。

PS：卷积计算，是指两个变量在某范围内相乘后求和的结果。比如有两个二维向量（8,9）；（12,5）他们做卷积就是（8*12）+（9*5）。

Sobel的卷积计算是根据矩形算子来的，横竖算子分别是

它们需要分别和每个像素以及像素周边的八个像素组成的3x3矩阵进行卷积计算。假设现在有个像素a，他周边的像素是

a1，a2，a3

a4， a ，a5

a6，a7，a8   这样的矩阵，

那么sobel的卷积计算就是这样  Sx*a{}² +Sy*a{} ²再开根，也可以直接写成简化版的丨Sx*a{}丨 +丨Sy*a{}丨 

展开其实就是

丨(-1*a1+0*a2+1*a3+-2*a4+0*a+2*a5+-1*a6+0*a7+1*a8)丨+丨(1*a1+2*a2+1*a3+0*a4+0*a+0*a5+-1*a6+-2*a7+-1*a8)丨

好了，现在我们到UE4中去实际操作下。

=============================分割线================================

第一步，我们需要获得屏幕上面任意 一个点的位置，以及这个点周边八个点的位置。

获得屏幕上的点的位置很简单，使用ScreenPosition即可，这个节点的ViewportUV会输出屏幕上像素点的UV位置，也就是左上角为（0，0）右下角为（1,1）这样的空间位置。是就这样的情况

那么在这坐标系的基础上 我们要算出某个点a的周围点位置，举例，我们要获得点a左上方一个距离b的点位，那么这个左上方的点就是a+（-b,-b）系数为（-1.-1）,正上方点为a+（0，-b）系数为（0，-1），同理可以类推出周边八个点位位置。

而在UE4里面，我们可以用场景素纹大小来确定这个需要移动的比例大小。这个值等于1/窗口分辨率。比如当前窗口分辨率是1920*1080，那么这个输出的值就是（1/1920，1/1080）。通过这个值，配合ScreenPosition节点，即可确定周边位置，并且在任何分辨率下都能获得正确的效果。

计算点位置的函数如下，写成函数是因为有八个点要计算，如果使用自定义节点的话当然不用这么麻烦，但是材质蓝图这里包装成函数还是能省不少事情。函数报错可以不用理会，用到透明或者后处理材质里面就不会报错了。

这样就获得了需要计算的点位

如下

第二步，我们获得了屏幕上点以及周围八个点的像素颜色值，接下来就是进行卷积运算，同样，由于卷积运算需要做两次（横纵坐标）。具体如下，很简单就是两两相乘然后求和。

第一行计算

输入一个三维向量，表示sobel卷积的第一行数值，然后下面三个输入3*3像素矩阵第一排颜色值。

第二第三行同理

最后只需要将第一步获得的颜色值和sobel的两个卷积核（X,Y轴）卷积运算即可。

最终结果

放到后处理框下面的材质栏里面即可。

这里是无差别的渲染，需要渲染特定对象，那么需要改下获得的图片，不能使SceneDepth，而是CustomDepth，只会获得开启了自定义深度的物体的图像。

END