UE4官网教程 风格化效果_ue官网教程

（本篇文章为官网视频风格化操作文字版简述，内容相对不完整且不具备解释性，建议一边看视频一边结合本文章进行操作）

1.利用基础颜色实现扁平化渲染

模式面板中点击视觉效果 点击后期处理体积（post process Volume）

拖入控制面板

细节面板

后期处理体积设置-无限范围打开

镜头-曝光 勾选最高亮度最低亮度 将二者值设为同一个值 发现明亮部位和阴影部分眼部适应被关闭

渲染-动态模糊关闭（传统动画无动态模糊）

渲染-后期处理体积设置-可混合物（1.光线传播体积可混合物2.资源引用：允许选择主材质或材质实例）

G-Buffer

理解动画化材质—缓冲器可视化—基础颜色（的基础上所做的视效改动）

在后期处理体积的文件夹中创建空材质球—进入材质球编辑面板—细节—材质—材质域——改为后期处理

（设置完毕之后发现除了自发光颜色之外所有引脚都与变成灰色，是因为后期处理材质仅允许在渲染画面上叠加RGB值，这是通过自发光来输入的）

创建sencetexture（场景纹理表达式）—细节面板—场景纹理—basecolor（as stored in Gbuffer）（基础颜色） 连线 应用 返回主页面发现场景的材质从3d变成了平面化

风格化基本颜色处理完毕

发现过场动画打开后动画有抖动效果，原因是UE自带的边缘锯齿处理。

抗锯齿抖动方法一：

编辑—项目设置—引擎—Rendering(渲染）—Default Settings（默认设置）—anti-aliasing Method（反走样方法）

TemporalAA（临时抗锯齿）简单理解为通过抖动抗锯齿

MSAA（只能在正向渲染模式使用）

FXAA（快速近似抗锯齿）查找锯齿采用像素混合算法

抗锯齿抖动方法二：

重新打开刚刚创建的材质球—材质结果节点—细节面板—后期处理材质—可混合位置—改为before Tonemapping（色调映射前）  抖动消失

2.创建多边形描边

在风格化的基础上描上黑边

用于描边效果的后期处理材质将部分借助场景深度GBuffer来绘制

场景深度的效果查看—光照—缓冲显示

创建新的材质球，命名和刚才场景基础颜色的分开。

点进去点材质结果点，细节栏材质—材质域改成后期处理，后期处理材质—可混合位置改为色调映射前（防锯齿抖动）

建立scenetexture材质表达式节点，场景纹理ID选择场景深度

正篇开启

在理解如何操作才能使材质边缘产生勾线时，我们首先要去理解表达式的含义是什么：

官方对材质表达式上节点的解释：UV 输入允许您指定要进行纹理查找的位置（仅用于颜色输出）。 颜色输出是4通道输出（实际的通道分配取决于场景纹理id）。大小（Size） 是一个包含纹理宽度和高度的 两分量矢量。该两分量矢量的倒数（1/宽度、1/高度）在 InvSize 输出中获得。在引用如下例所示的邻近样本时， 它非常方便：（官方解释截图定义）材质表达式计算当前像素与相邻像素的深度差（例如In = 0,1会将delta返回到下面的像素）

图示为我们采用的表达式，已知材质表达式“大小（Size） 是一个包含纹理宽度和高度的 两分量矢量。该两分量矢量的倒数（1/宽度、1/高度）在 InvSize 输出中获得。”与二维向量（0，1）相乘之后输出的值为1/高度矢量，又知TextureCoordinate（纹理坐标）表达式以双通道矢量值形式输出 UV 纹理坐标，从而允许材质使用不同的 UV 通道、指定平铺以及以其他方式对网格的 UV 执行操作。(官方定义），故二者相加后得出的值为高度值向上1/高度矢量的UV 纹理坐标，用其连接材质表达式的输入端得出向上偏移一单位的后期处理材质场景深度，再用其原总值减去偏移的总值得到的部分就是向上偏移部分的边缘值。

同理，通过改变二维向量的值，分别得出向下偏移部分的边缘值、向左偏移部分的边缘值、向右偏移部分的边缘值，将其相加得出场景内所有勾线，加clamp保证其值为区间在0到1之间的正数，创建lerp节点，A连接没有做后期处理的节点

B创建三维向量，其颜色为黑色，alpha通道连接clamp输出的值，得出勾线效果。

3.创建法线描边

在多边形描边示例的基础上，基于关卡世界法线的边缘计算线条，以便在几何体细节中创建线条。

世界空间法线表示，场景中给定像素在计算出在材质中应用的切线空间法线贴图后，所获得的朝向或方向向量，RGB对应XYZ

操作步骤与逻辑和在场景深度上创建多边形描边的逻辑一样，复制一份场景深度的操作，选中全部材质表达式，把其材质纹理ID改成场景法线，另因为场景法线的通道计算基于RGB三个通道，所以全部componentmask(分量模板）的模式改为RGB，又因改为rgb模式后线条色彩会为彩色，故添加去饱和度Desaturation

其值为1完全去饱和度，将场景法线的表达式与场景深度的表达式相加，通过clamp节点限制其有效值，再与上一步的lerp节点连接即可完成。

4.对描边效果进行最终改善

优化法线描边的后期处理材质，控制描边的颜色和粗细。还介绍了如何通过多边形描边解决表面的闪烁问题。

控制描边的粗细、对比度和总体质量。

首先解除表面的闪烁问题，具体操作流程为通过调节线条数量多少和其对比度来实现对表面细小线条的优化，使其不再闪烁

用场景深度的材质表达式乘/除常量用以改善多边形面数量

幂乘常量，大的越大小的越小，细线条减弱粗线条加深，用以改善多边形面对比度

同理，将其复制到下方，与世界法线材质表达式联合，用以改善法线的数量和对比度

描边的粗细控制

概念理解：描边的粗细与uv的偏移量有关系，改变描边粗细需要在前步骤uv偏移量上做改动，故：

新建乘法节点，将其与偏移量连接，新建总参数节点将其与各个乘法节点做链接

世界法线和场景深度都这样整，改变总参数的数值来调节勾线的粗细。

场景深度—多边形面数描线用来调节外部轮廓，世界法线描线用来调节内部轮廓。

5.利用遮罩实现风格化渲染和多边形描边

点开PPV,渲染功能后期处理材质，关掉前两组混合数组，场景变暗。

新建材质球，后缀加ch

表达式总览：

创建自定义深度节点，

回到场景模式中，选中需要遮罩的物体，在属性栏中搜索

用场景深度减去自定义深度Custom depth

勾选渲染自定义深度通道。

返回资产面板，用场景深度减去自定义深度，得到除自定义深度外的其他深度范围，由于不能确认自定义深度和场景深度取值的大小，所以设限clamp节点，min0max1，保证其范围在正常区间内，1-x节点是反向选择，现在选中的是遮罩好的物体。建立lerp节点，建好的表达式连alpha通道，已知A无B有，所以材质表达式底色节点连B，后期输入零连A。

返回场景发现环境曝光太弱了，原因是ppv-透镜-曝光里曝光补偿和原场景不一致，调大参数后发现人物又过曝了，这时候还原参数，进入材质球，把后期输入处理零乘六，环境变亮。

同理，勾线部分也是这么做，复制黏贴新的材质球加ch，将之前的表达式复制过来，考虑到之前输出都是单通道，新建mask(R)给自定义深度和场景深度连上，建立lerp节点，复制过来的表达式连alpha  A无B有勾线表达式连B 添加后期处理输入0加mask节点。完成。

6.利用光照关卡创建扁平化阴影

创建光照材质球，命名为PPMM-Graphic Lights

在进行操作之前，首先要理解为什么这样做。

希望创建风格化的卡通阴影，首先要明白的点是利用材质的法线和置换来到达到此效果。

列出和阴影相关的表达式

创建材质表达式节点，用后期处理输入0加mask(R)通道，除底色材质表达式节点加mask(R)通道，至于为什么用除法，有一点自己的理解：

乘法节点Multiply所产生的效果类似正片叠底，除法的含义就是一个数乘另一个数的倒数，产生的效果也就是正片叠底重叠部分的颜色减弱（线性衰减？），后期处理输入0除以底色得到的效果是法线和置换被突出，底色减弱。

加clamp做限制（可加可不加）试了肉眼看效果一样的，两个正数除出不出来负的。

因为我们希望阴影是可以通过赋予数值而被调节的，所以在此的节点用if而不是lerp。

刚刚创建的表达式连A 创建一个一维参数连B

剩下的三个节点管呈现的效果

材质表达式一个用底色（GBuffer）加mask（RGB)乘三维向量白色，一个用底色（GBuffer）加mask（RGB)乘三维向量黑色，为什么mask现在是三通道了是因为if后三个节点管呈现效果，画面总不能是黑白的吧啊啊啊，三维向量可以调整颜色和阴影深度。

调节B的大小，得到阴影的变幻，完成！

7.创建明暗区域控制功能

将点光源拉进场景中，将其调节成可移动模式，

打开摄像机，发现人物脸上的光浮动在轮廓附近，原因是后期处理材质的因素

点记材质球，里面的后期材质映射前改成半透明映射。

8.自定义色带

本期进行的学习是自定义色带

首先新建一个材质球，命名为PPMM_Light color bands,用来作有色彩的光照

材质球里面创建材质表达式，用后期处理0除以底色，两张图片重叠部分减弱，反正片叠底，未重叠部分颜色加深，限定区间范围在0到1之间，clamp节点（加不加的其实无所谓都是正的除不出来负的），mask(R)单通道限制,添加曲线节点，回到ue界面，在过滤器创建曲线，创建曲线图谱，在梯度曲线添加刚刚创建的曲线，保存，返回材质球，点击曲线节点，把刚刚创建的材质表达式的曲线和图谱拉到曲线集行参数中去，创建新的Mask节点，RGB三通道和材质表达式底色做链接，后和一开始创建的光照曲线表达式相乘，连接到自发光颜色上。

材质结果节点细节面板材质域调成后期处理，可混合位置调为半透明前。

实际出来效果

9.利用sobel实现模糊化渲染

Sobel操作是一种在多边形边缘上渲染描边的有效方法。

一．返回初始的PBR光照设置，新建后期处理体积，命名PPMM_PainterEffect，打开，将材质域设为后期处理，可混合位置，色调映射前，点击保存，转至描边后期处理材质。选中与多边形线条厚度有关的参数，选择与多边形描边所有的相关代码。复制代码，打开新建的材质球，粘贴，连接，保存，看到场景中的画面变成黑白发光勾线。因为想要的是场景的模糊效果，所以把所有的材质表达式场景纹理改为底色（与GBuffer中保存的相同），把最后的减法改为加法，把所有mask节点的RGB通道打开完成~场景模糊

调节最前面的参数变动模糊大小

• 二．后半部分不变，前半部分这样整。
• 

 10.实现分色渲染

在sobel模糊化渲染表达式的基础上，后面添加floor节点乘一个参数，往后连接ceil节点再乘一个参数

 

 

 通过节点的意义可以看出，floor和ceil的意义是将画面的颜色固定化单一化，同时以通过调整参数改变曝光的原理调正色彩饱和度和对比度。

11.对画面进行上色

Du上一节通过调整ceil下舍节点和floor上舍节点来调节画面的整体色彩效果，将模糊化的画面调节为单色强对比式的风格化画面，但是由于画面颜色过于单一，故在原表达式的基础上添加lerp节点来实现画面的亮暗部上色，添加desaturation，添加参数节点，用来控制饱和度参数，保存完成~

 12.混合颜色上色

创建刚刚几种材质球的材质实例，将其替换掉ppv里原来的后期处理材质，通过不同搭配营造不同效果，在材质实例中直接调节在创建材质球时添加的节点参数，ok