【UE4_001】后期处理轮廓描边效果

简介

【UE4_001】后期处理轮廓描边效果_第1张图片

 

通过材质计算得到物体边缘,通过后期处理的方式对物体边缘进行描边显示

ue4 材质描边、外发光、轮廓线_哔哩哔哩_bilibili

Unreal Engine 4 卡通轮廓线(Toon Outlines)教程 之 后期处理法(Post Process Outlines)_开发游戏的老王的博客-CSDN博客

实现思路

首先创建一个材质,使用边缘检测的方法,利用场景中物体深度不连续性,得到场中物体边缘。

通过后期处理盒子来渲染轮廓线的效果。

通过控制物体的CustomDepth的开启与关闭动态的开启或关闭物体的轮廓线的显示。

后期处理材质

材质函数 MF_Kernal

边缘检测需要通过卷积计算实现,需要对视口逐像素进行卷积计算,将卷积核封装材质函数,通过材质函数获取中心像素以及上下左右的四个像素,作为卷积核进行运算。

材质函数命名为MF_Kernal,为函数添加五个output,分别对应中心像素,偏上像素,偏下像素,偏左像素,偏右像素。

【UE4_001】后期处理轮廓描边效果_第2张图片 

添加FunctionInput节点,用于控制轮廓线的宽度,将输入值设置为Scalar,并设置一个浮点数作为默认输入值作为偏移量。

 

添加SceneTexelSize节点,获取屏幕的像素尺寸,例如1920*1080的屏幕,那么U方向上每个像素就占1/1920≈0.000521,V方向上每个像素占1/1080≈0.000926,那么SceneTexelSize的值就为(0.000521,0.000926)。

【UE4_001】后期处理轮廓描边效果_第3张图片

 

添加ScreenPosition获取ViewportUV,此处获取了Viewport内所有像素点的UV值,默认视口左上角为(0,0)右下角为(1,1),因此在U方向上加(+1)是向右移动,U方向上(-1)是向左移动,V方向上(+1)是向下移动,V方向上(-1)是向上移动。

【UE4_001】后期处理轮廓描边效果_第4张图片

 

创建两个float2,作为偏移的方向,(1,0)在U方向上偏移,(0,1)在V方向上偏移。

【UE4_001】后期处理轮廓描边效果_第5张图片【UE4_001】后期处理轮廓描边效果_第6张图片

 

MF_Kernel总体蓝图

  • Float2(方向) * Input Width(偏移量) * SceneTexelSize(屏幕像素大小) = 像素向某个方向偏移的距离。
  • 像素向某个方向偏移的距离 + ViewportUV(视口UV) = 偏移后的视口UV值
  • 最终的五个输出项
    • Center = 视口UV值
    • Right   = 视口向偏移一定宽度的UV值
    • Left     = 视口向偏移一定宽度的UV值
    • Up       = 视口向偏移一定宽度的UV值
    • Down  = 视口向偏移一定宽度的UV值

【UE4_001】后期处理轮廓描边效果_第7张图片

 

M_Outline

创建材质,在details面板将材质作用域设置为PostProcess,材质的Blendable Location 设置为 Before Tonemapping

【UE4_001】后期处理轮廓描边效果_第8张图片 【UE4_001】后期处理轮廓描边效果_第9张图片

添加SceneTexture节点设置为Depth,选择SceneDepth对全部场景物件进行计算,选择CustomDepth仅计算开启CustomDepth的物件。将MF_Kernel中的得到五个veiwportUV分别输入到SceneTexture中获得每个像素点对应的深度值。

【UE4_001】后期处理轮廓描边效果_第10张图片

SceneDepth:获取场景中所有物件的深度值

CustomDepth:获取打开CustomDepth通道的物件的深度值

添加SceneTexture节点设置为PostProcessInput0,获取场景中物件的在场景照明中的颜色。

【UE4_001】后期处理轮廓描边效果_第11张图片

PostProcessInput0:提供HDR的场景颜色

PostProcessInput1:提供分离透明度(Alpha通道是Mask)

PostProcessInput2 :低分辨分辨(Low Resolution)泛光输入

M_Outline总体蓝图

  • 添加一个标量(width),提升为参数,作为MF_Kernel的输入参数,用于控制轮廓线的偏移宽度。
  • 将MF_Kernel所得到的值,作为SceneTexture: CustomDepth的输入值,得到视口每一个像素的深度值。
  • 拉普拉斯边缘检测计算,中心值*4 减去上下左右四个像素的和,得到物体深度变化的而产生的边缘。使用clamp将值限制在0-1的范围内。
  • 将得到边缘值作为了Lerp的Alpha参数输入,在边缘的地方显示用户定义的颜色,在非边缘的地方显示场景本身颜色
  • 给颜色的输入值乘一个标量(Power)用来控制颜色的发光强度。

【UE4_001】后期处理轮廓描边效果_第12张图片

蓝图控制轮廓线

添加后期处理盒子

将刚刚创建的主材值,创建一个材质实例M_Outline_Inst,方便对于材质效果参数的调节。

在场景中添加一个后期处理盒子,在后期处理盒子Rendering Features -> Post Process Material新建一个材质插槽,将刚刚创建的材质实例添加到插槽中。

【UE4_001】后期处理轮廓描边效果_第13张图片

将后期处理盒子的应用范围设置为 Infinite Extent

【UE4_001】后期处理轮廓描边效果_第14张图片

 创建Actor蓝图

  • 控制蓝图逻辑

当按下X键时,开启全部物件轮廓线,当松开X键时,关闭全部物件轮廓线

【UE4_001】后期处理轮廓描边效果_第15张图片

  •  轮廓线开启效果【UE4_001】后期处理轮廓描边效果_第16张图片
  •  轮廓线关闭效果【UE4_001】后期处理轮廓描边效果_第17张图片

 

你可能感兴趣的:(ue4)