UE5开发日志：个人足球游戏demo《SketchSoccer》——后期处理体积实现风格化素描

demo设计完整介绍预览：

风格化素描画面成果预览：

图1：风格化素描画面展示1

图2：风格化素描画面展示2

一．基本概念

·后期处理体积：

在 Unreal Engine 5 (UE5) 中，后期处理体积 (Post Process Volume)本质上是一个“空间区域”，当摄像机进入这个区域时，会自动改变画面的视觉效果，它是在场景渲染完成后，画面输出到屏幕之前，对图像进行的最后一层处理。可以把它想象成一个实时滤镜或者调色间。通过它，不需要修改模型或灯光，就能直接调整对比度、饱和度、模糊感，甚至添加发光（Bloom）或胶片颗粒等特效。

局部控制：可以设置多个体积。例如，当玩家走进森林时，画面变得暗绿、潮湿；当玩家跳入水中时，画面变得模糊并带有蓝色调。

全局控制：通过勾选属性中的 Infinite Extent (Unbound)，该效果会覆盖整个世界，无论摄像机在哪里都会生效。而本次项目开发中默认使用全局控制效果。

·UV：

指的是二维平面上定位点的坐标，U是水平方向坐标（从0到1，从左到右），V是垂直方向坐标（从0到1，通常从上到下），在我们后期处理的场景下，UV 坐标代表的电脑屏幕的像素位置。

二．逻辑细节

1. 基于场景深度的Laplacian拉普拉斯算子边缘检测（Depth Edge Detection）：

这里我们的核心目标任务就是在屏幕上找到物体边缘的位置。而我们所采取的方法思想是检测场景深度（像素距离摄像机的距离）是否发生突变，突变的像素就位于物体的轮廓线上。

图3：边缘检测整体蓝图逻辑预览

我们可以将工程分成三个逻辑模块：采样、测量、汇总。

采样：我们将获取以当前像素为中心的五个像素场景深度数值，其中值得注意的是，场景深度纹理在所有 RGB 通道中包含完全相同的数据（都是深度厘米数）。因此采用Mask（R）只取一个通道的数值即可更高效直接。

图4：中心像素获取

图5：邻接像素获取

图中黄色节点控制着像素的偏移量，原理是获取场景深度的单位像素大小InvSize，将其与四个方向向量(-1,0)，(1,0)，(0,-1)，(0,1)，相乘得到偏移量，然后与当前像素相加得到其UV坐标，最后将其数值进行输出。

测量：用四个Subtract减法节点把中心像素的深度值A与四个邻接像素的深度值B进行两两比较。在平台区域，中心像素和邻居像素非常接近，减法的结果会很小，而在物体边缘，深度会发生巨大的变化，这个时候减法结果会是一个非常大的数值。

汇总：这一模块把刚才测量到的四个方向的差异，加在一起。X方向偏移像素的Add节点把左、右两个水平方向的差异加在一起，捕捉垂直方向上的轮廓线；Y方向偏移像素的Add节点把上、下两个垂直方向的差异加在一起，捕捉了水平方向上的轮廓线；最终再把水平和垂直的总差异再加在一起。这一步遵循了拉普拉斯算子进行边缘检测的原理

图6：拉普拉斯算子

后续通过World Outline Sensitivity (世界轮廓灵敏度)和World Outline Thickness (世界轮廓厚度/对比度)来实时调节素描线条视觉效果。其原理是：先前汇总得到的数值是综合深度差，输出的结果在计算机当中会被认作是强度值，而UE5使用的是 HDR（高动态范围） 渲染管线。这意味着颜色的数值不存在上限。超越常规范围的数值不仅会改变颜色，还会触发后处理中的泛光（Bloom）效果。数值0-1是不会发光的普通颜色，数值大于1则触发高动态范围（HDR）与过曝。因此Sensitivity参数用于数值的整体调整，决定“多大的深度差”才配被画成一条线。而Power节点是一个指数/幂运算，Thickness参数控制着线条的“粗细、锐利度与边缘过渡”

图7：Sensitivity和Thickness控制边缘线条绘制

图8：边缘检测画线结果

2. 基于场景法线计算物体自身的结构转折，画出内部的细节棱角。

深度（Depth）只能找出物体与物体之间、物体与背景之间的外轮廓（遮挡关系）；而我们的核心目标则是利用法线（Normal）角度的差异找出物体内部的转折角和内轮廓（比如一个正方体表面的那几条棱，或者衣服上的深深的褶皱）。

图9：法线计算内部细节棱角整体蓝图逻辑预览

可以法线整体的蓝图逻辑和之前基于场景深度进行边缘检测的蓝图没有太多出入。这里的主要思想是：“场景法线”在引擎中的3D空间方向 (X, Y, Z)，强行转换成了屏幕上的颜色 (R, G, B)：X轴方向的变化对应红色(R)的深浅，Y轴方向的变化对应绿色(G)的深浅，Z轴方向的变化对应蓝色(B)的深浅。如图：

图10：场景法线颜色可视化

然后把法线X、Y、Z三个方向的差异值加在一起计算成一个标量，数值越大，说明表面越不平整，越应该画一条线。以下是一些关键节点的调整与添加

图11-12：使用场景法线，获取RGB三个通道数值（法线的XYZ）

图13：将一个多维向量的各个通道合并，计算出一个总和（标量）

图14：法线计算内部细节棱角画线结果

3. 阴影排线

之前我们做的“边缘检测”只是画出了物体的线稿，而接下来的任务是：找出场景中没有被光照到的地方（阴影区），并在这些阴影区里画上铅笔排线的纹理，最后把阴影和线稿合并起来。

图15：阴影排线整体蓝图逻辑预览

在虚幻引擎底层的渲染逻辑中，可以简单地把最终画面的生成理解为一个乘法公式：最终画面≈物体底色×光照强度。如果把公式做一个简单的移项（除法），就能得到：最终画面 ÷ 物体底色 = 光照强度。而SceneTexture:PostProcessInput0是摄像机拍到最终渲染画面，包含物理颜色、光照、阴影。而SceneTexture:DiffuseColor是物体的固有底色，没有任何光照和阴影。二者去色变黑白后进行相除就能得到纯粹的光影图，而我们将对光影强度数据进行阴影排线操作。

图16：提取纯粹的光照与阴影信息

图17：相除后纯粹的光影图

智能投影贴图排线的逻辑中，我们放弃屏幕UV贴图这种会随移动动态滑动的方式，使用“三平面映射（Triplanar Mapping）”方法。 引擎同时从 X（前）、Y（侧）、Z（上）三个绝对的世界坐标轴方向向物体投射我们准备好的贴图素材，然后根据物体表面当前的朝向（法线），智能地混合这三个方向的图案，确保无论什么形状，排线都紧紧贴附且比例完美。此处我们利用WorldAlignedTexture世界对齐纹理节点，综合Texture Object (纹理对象)、绝对世界位置 (Absolute World Position)、SceneTexture:场景法线+ Mask(RGB)数据然后输出三维的不会被拉伸、不会动态移动的排线图案。后续的CS_Contrast参数控制着对比度，CS_Muiltiply参数控制着排线图案的整体浓度与亮度。

图18:阴影排线

4. 材质实例化

最后完成材质实例化，可动态调整参数以供微调。