开发过程中需要制作一个边缘描边材质的效果,顺着这个脉络搜索到了很多的能看懂和不太能看懂的资料,在这里梳理一下。
以下是查到的相关资料链接:
1、这个是在UE4工程里的制作流程,但是对于原理理论并不是非常了解:
ue4 材质描边、外发光、轮廓线_哔哩哔哩_bilibili
2、这篇是辅助整理关于材质制作的底层逻辑的理论梳理:
Unreal Engine 4 卡通轮廓线(Toon Outlines)教程 之 后期处理法(Post Process Outlines)_unreal轮廓线-CSDN博客
3、这篇涉及到提到的边缘检测原理的内容
python+OpenCv笔记(十六):边缘检测原理(Sobel算子原理、Laplacian算子原理、Canny边缘检测原理)_python opencv sobel-CSDN博客
4、其中涉及到一些算法的内容
5、拓展补充的一些素材:
UE4后期处理材质的一些应用(上) - 哔哩哔哩 (bilibili.com)
以下内容为上面的部分内容复制粘贴过来的加上我理解和吸收的整理出来自己看的
一、边缘检测原理
边缘检测是图像处理和计算机视觉中的基本问题,边缘检测的目的是标识数字图像中亮度变化明显的点。
1、Sobel算子原理
Sobel算子是图像检测的重要算子之一,其本质是梯度运算。
例如,对于一张二维图像:
当我们将卷积核放在图像中时,有三种位置关系,如图:
卷积核和滤波器为类似的概念,关于卷积核 我的理解是相当于一个标准化的卡尺一样,去针对图像的颜色去处理,详细的可以参考链接
python+OpenCv笔记(十六):边缘检测原理(Sobel算子原理、Laplacian算子原理、Canny边缘检测原理)_python opencv sobel-CSDN博客
2、Laplacian算子原理
使用的卷积核如图:
等下制作的材质描边也是使用了laplacian算子原理 将会用到这个卷积核。
二、实现方式
1、叠加描边
在实现这个功能的算法之前,我使用的是一种简化的方案,即在蓝图里为原本的模型叠加一个mesh将新加的mesh比原来大一点、换个颜色,这样在视觉上就能呈现出描边的效果,以下是之前的操作方式:
增添mesh-设置为高光物体-附上高光材质
高光材质的制作很简单 开放出两个变量在蓝图里调用即可
问题在于:
我的需求需要在游戏开始时在蓝图里动态去获取当前这轮的模型,原本的高光材质的制作方式中模型的绑定写在了构造函数里面,如下图,构造函数的问题在于会在游戏开始前进行调用,但我每次游戏开始时调用的模型不同,因此不能用这种方式,但是如果将mymesh的模型绑定放到beginplay里的话,我需要在另一个蓝图去调用当前蓝图然后设置绑定mymesh,但是高亮材质的效果就会失效,怎么也无法显示,因此我在这里使用了另一种描边高亮材质的办法。
2、后期处理轮廓高亮材质
1)设置材质函数
这个材质函数我的理解就相当于laplacian中的卷积核
input代表移动的像素值,默认值从1开始,数值越大偏移的像素越大
使用sceneTexelSize的原因是这里如果当前的图像是放大两倍或者三倍,那么像素值可能不准确,参考的文章资料里有写,所以在这里要×SceneTexelSize
ScenePosition就是输出当前中心位置的像素点,根据卷积核后边数值要*-4
2)设置轮廓材质
刚才的input提出参数化,后面可以更改高光的宽度,然后将这个卷积核相加最后clamp一下保证在0-1里
!记得这里材质要改两个设置
此时已经可以看到轮廓了,拉一个postVolumn放到场景中,在后期处理材质添加刚才设置好的材质inst
3)问题是此时场景内全部的物体都是轮廓显示了,所以这里需要更改我们只要我们需要点击的物体进行轮廓高亮材质显示 ,继续修改材质
这里的设置是什么意思呢 参考UE4后期处理材质的一些应用(上) - 哔哩哔哩 (bilibili.com)这里的内容
我们需要设置一个蒙版 因为现在目前是全局都会轮廓显示,所以要根据场景的深度制作蒙版,这里的功能还可以用于制作遮挡物体的轮廓高亮显示:
SceneDepth(场景深度):当前画面上的像素点和摄像机之间的距离。
CustomDepth(自定义深度):开启物体上的自定义深度通道,获得被遮挡的物体离相机的距离。如果该位置没有物体开启自定义深度,那么得到的值则是无穷大。
所以我们就可以根据自定义深度(绿色虚线)和场景深度(黑色虚线)的差值来判断是否有东西被挡住(如果有两个开启了自定义深度通道的物体在一条线上的话,那么获取到的CustomDepth是离摄像机更近的那个)
CustomDepth自定义深度-SceneDepth场景深度
如果开启CustomDepth被挡住,那么CustomDepth>SceneDepth,CustomDepth-SceneDepth=有限值
如果开启CustomDepth没被挡住,那么CustomDepth=SceneDepth
如果没有开启CustomDepth,那么CustomDepth-SceneDepth=无穷大
还需要增加材质高亮的范围和颜色的调整
在这里设置SceneTexture代表场景内本身的压缩
好了,此时的材质已经完成了,如何开启对应模型的高亮呢
4)在蓝图里添加rendercustomdepth 也就是在材质里设置的渲染自定义深度
当鼠标点击到该物体的时候调用渲染自定义深度打开,显示高亮
5)获取当前的点击物体
功能实现,大功告成!