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

demo设计完整介绍预览开发以FC系列游戏为参考模板旨在使用UE5推进一款第三人称运动类游戏demo。整体采用风格化素描为画面基础设计待机、盘带、冲刺、转身、射门5种运动状态平滑切换与基于空间距离检测的平滑伴随与自动追随机制实现角色与物理球体的动态交互与协同运动机制。在本篇日志中我将会记录风格化素描的后期处理体积设计流程素描风画面的实现思路包括场景深度边界提取场景法线计算内部结构转折棱角三平面映射与光影阈值结合实现阴影排线。同时为我的个人学习留下笔记欢迎各位讨论如有出错烦请指正风格化素描画面成果预览图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 通道中包含完全相同的数据都是深度厘米数。因此采用MaskR只取一个通道的数值即可更高效直接。图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参数控制着线条的“粗细、锐利度与边缘过渡”图7Sensitivity和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. 材质实例化最后完成材质实例化可动态调整参数以供微调。图19:材质实例化