您需要 登录 才可以下载或查看，没有账号？注册
x
“CG小苏 ”再点右上角“ ...”最后设为星标 ★
-------------------------------------- | CG小苏 | 分享最前沿的CG技术-游戏开发-CG自媒体平台 |
你好。我叫森田，是 Spark Creative Co., Ltd. 开发部门的客户工程师负责人。在第 3 部分中，我们将进行一些更改，并致力于使用后处理效果实现类似卡通着色的表达，而不是像以前那样使用 Unlit 材质。
文章目录
什么是后处理？关于后处理材料步骤01：让它看起来像一个细胞步骤02：为前景和背景添加雾气STEP 03：使整个屏幕看起来像纸一样步骤04：画出轮廓4-1：准备专用演员材料4-2：用单独的后处理材料准备轮廓4-3：用后期处理材料给轮廓着色最后什么是后处理？简而言之，后处理就像在最终渲染之前在屏幕顶部放置一个图层。要在 UE 中表达后期处理效果，您需要在相机中定义它们或使用“PostProcessVolume” 。详情请查看官方网站。UE的后处理效果标配DOF和Bloom等功能。
这次，我想用“后期处理材料”来创造出水彩般的表现力。关于后处理材料对于后处理材质，通过使用“SceneTexture：○○”等与其他材质不同的节点，可以获得渲染前计算出的各层的屏幕颜色信息。更多详情请查看官方网站。请按照以下步骤实现纤维素外观。
1：使外观像细胞一样
2：为前景和背景添加雾气3：使整个屏幕看起来像纸一样4：绘制轮廓 4-1：专用演员材质 4-2：使用单独的后处理材质 轮廓准备 4-3：用后处理材料着色步骤01：让它看起来像一个细胞首先，让我们让它看起来像一个细胞。我们将使用自定义节点来执行各种计算。为 Input准备BaseColor、LightValue、AmbientOcclusion和ShadowColor 。此计算模拟在 Unlit 中完成的光照和法线的内积。/* Light */float LightPower = min(LightValue, AmbientOcclusion);BaseColor.rgb = lerp(ShadowColor.rgb, BaseColor.rgb, LightPower);/* AO */BaseColor.rgb = lerp(BaseColor.rgb, BaseColor.rgb * AmbientOcclusion, AmbientOcclusionDarkness);/* Final */return BaseColor;
这是应用后处理材质之前和之后的样子：
▲材料应用前的后处理
▲应用材料后的后处理这样，阴影就被清晰地表达出来，类似于用 Unlit 表达的单元格色调。步骤02：为前景和背景添加雾气将雾表达式处理添加到之前的自定义节点。将新的FogColor和DepthRate添加到输入。/* Light */float LightPower = min(LightValue, AmbientOcclusion);BaseColor.rgb = lerp(ShadowColor.rgb, BaseColor.rgb, LightPower);/* AO */BaseColor.rgb = lerp(BaseColor.rgb, BaseColor.rgb * AmbientOcclusion, AmbientOcclusionDarkness);/* Fog */BaseColor.rgb = lerp(BaseColor.rgb, FogColor, DepthRate);/* Final */return BaseColor;DepthRate使用“SceneTexture：场景深度” 。但由于场景深度只获取深度值，所以并不清楚前景和远景对应什么值。因此，决定从哪里开始前景和从哪里开始远景，如果在这些值范围内，则使用 BaseColor，如果在该范围之外，则使用 FogColor。
由于很难看到前景和与角色的距离，所以我准备了一个单独的背景。
▲应用场景深度之前
▲应用场景深度后。被确定为远景的背景被雾覆盖。STEP 03：使整个屏幕看起来像纸一样这次，我们将使用影响屏幕的纸张纹理和决定影响程度的框架纹理。通过对到目前为止计算出的颜色值和纸张纹理进行线性插值，我们可以将纸张纹理粘贴到屏幕边缘。
▲申请前
▲申请后步骤04：画出轮廓在 Unlit 中，我们之前解释了如何通过复制网格
、绘制网格的背面以及使用法线更改世界位置偏移来绘制轮廓。但是，对于这种后处理材质，网格绘制过程已经完成，因此无法使用 Unlit 中使用的方法。因此，使用不同的方法来绘制轮廓。4-1：准备专用演员材料4-2：用单独的后处理材料准备轮廓4-3：用后处理材料为轮廓着色.虚幻引擎5！制作卡通角色材质渲染2 部分流程分享！-丨CG小苏4-1：准备专用演员材料为了使用可以通过后处理材质获得的SceneTexture来绘制轮廓，需要使用专用的演员材质来准备它。这次会用到以下四种SceneTexture。・Normal、 Depth、 Specular、 Metallic其中，Actor Material传递了normal、Specular和Metallic的值。
法线传递法线贴图。传递Specular和Unlit中做的光源向量和法线的内积（这部分我们这次省略，如果想了解更多细节请看系列第一部分）。虚幻引擎5！制作卡通角色材质渲染1 部分流程分享！-丨CG小苏Metallic原本是用来表达金属的，但是这个后处理材质并没有使用SceneTexture来表达金属。因此，这次我们将传递材质 ID的值。通过使用此材质 ID，您可以避免绘制不同材质重叠时绘制的轮廓。
4-2：用单独的后处理材料准备轮廓为了计算屏幕上的哪些位置应被视为轮廓，请在顶部、底部、左侧和右侧准备相邻的样本。
准备使用下面的场景纹理的顶部、底部、左侧和右侧的中心和相邻样本绘制轮廓，该场景可以通过后处理材质获得。当法线
中心与上、下、左、右相邻样本的内积大于一定值时，就进行轮廓定位。float edgeL = dot(NormalL, NormalC);float edgeR = dot(NormalR, NormalC);float edgeT = dot(NormalT, NormalC);float edgeB = dot(NormalB, NormalC);float edge = min(min(edgeL, edgeR), min(edgeT, edgeB));return step(edge, NormalThreshold) * NormalEdgePower;当深度中心与上下左右相邻样本的差值大于一定值时，就进行轮廓定位。float edgeL = DepthL.r - DepthC.r;float edgeR = DepthC.r - DepthR.r;float edgeB = DepthB.r - DepthC.r;float edgeT = DepthC.r - DepthT.r;float Limit = step(Depth, DepthLimit);return step(DepthThreshold, max(abs(edgeL - edgeR), abs(edgeT - edgeB))) * Limit * DepthEdgePower;勾勒出与镜面中心相邻以及顶部、底部、左侧和右侧的样本值不相同的区域。float edgeL = SpecL != SpecC;float edgeR = SpecR != SpecC;float edgeT = SpecT != SpecC;float edgeB = SpecB != SpecC;float edge = max(min(edgeL, edgeR), max(edgeT, edgeB));return edge * SpecEdgePower;与IDSpecular类似，与中心、顶部、底部、左侧和右侧相邻的样本的值不相同的点是轮廓的目标。float edgeL = IdL != IdC;float edgeR = IdR != IdC;float edgeT = IdT != IdC;float edgeB = IdB != IdC;float edge = max(min(edgeL, edgeR), max(edgeT, edgeB));return edge * IdEdgePower;使用Max表达式，输出每个计算结果的最高值。通过写入不透明度值，信息可以传递到另一种材质，而不会影响外观。
目前前期准备工作已经完成。如果输出为自发光颜色而不是不透明度值，它将如下所示。
4-3：用后期处理材料给轮廓着色一旦准备好单独的后处理材料，就可以改进用于细胞着色的后处理材料。首先，我们将能够检索另一种后处理材料的值。
将单独的后处理材质的BlendablePriority设置为0，并将用于卡通着色的后处理材质的 BlendablePriority 设置为1 。
通过进行此设置，您可以先绘制另一个后处理材质，然后在单元格着色的后处理材质中，可以获得您已经写入的其他后处理材质的值。
为后处理材质的自定义节点添加轮廓计算。/* Light */float LightPower = min(LightValue, AmbientOcclusion);BaseColor.rgb = lerp(ShadowColor.rgb, BaseColor.rgb, LightPower);/* AO */BaseColor.rgb = lerp(BaseColor.rgb, BaseColor.rgb * AmbientOcclusion, AmbientOcclusionDarkness);/* Fog */BaseColor.rgb = lerp(BaseColor.rgb, FogColor, DepthRate);/* Final */return BaseColor;变更前/* Light */float LightPower = min(LightValue, AmbientOcclusion);BaseColor.rgb = lerp(ShadowColor.rgb, BaseColor.rgb, LightPower);/* AO */BaseColor.rgb = lerp(BaseColor.rgb, BaseColor.rgb * AmbientOcclusion, AmbientOcclusionDarkness);/* Fog */BaseColor.rgb = lerp(BaseColor.rgb, FogColor, DepthRate);/* Edge */float Brightness = Luminance(BaseColor.rgb);float EdgePower = lerp(0.1, 0.5, Brightness);float3 FinalEdgeColor = max(BaseColor.rgb * 0.5, saturate(BaseColor.rgb - EdgePower)) * EdgeColor.rgb;BaseColor.rgb = lerp(BaseColor.rgb, FinalEdgeColor, Edge);/* Final */return BaseColor;▲添加轮廓这次，我计算出轮廓的颜色是比基本颜色稍深的颜色。EdgeColor.rgb 可使其整体变暗。float Brightness = Luminance(BaseColor.rgb);float EdgePower = lerp(0.1, 0.5, Brightness);float3 FinalEdgeColor = max(BaseColor.rgb * 0.5, saturate(BaseColor.rgb - EdgePower))* EdgeColor.rgb;然后，您可以通过使用在单独的后处理材质中准备的不透明度值对轮廓颜色和到目前为止准备的颜色进行线性插值来显示轮廓。结果，它看起来像这样：
最后这次，我的目标是使用后处理材料进行细胞着色。后期处理材质会影响整个屏幕，因此您需要在使用它们的方式上发挥创意，但如果您能掌握它们，您就可以创建各种表达方式。
下次我们最后会介绍一下使用引擎修改的单元格着色的表达。期待
1 END
声明：本文章中所有的图片和视频都归原作者所有，仅供大家参考学习和交流，不作商业用途，侵删。如果你喜欢这篇文章,欢迎转发！谢谢!更多学习和交流可扫描下方二维码哦！
|
