作为一款现象级的黑马游戏 

(资料图片)

《原神》在2020年9月刚一上线

就登顶了多国游戏的榜单第一

并持续作为中国游戏文化输出大势

活跃在吸金项目第一批队中

除了大型开放世界+自由式探索

点满玩家的兴趣探索值外

很多人也被它出众的二次元美术风格所吸引

那作为同样对ACG建模感兴趣的同学们

你知道它属于哪种渲染风格吗

一般来说，计算机图形渲染风格主要分为两种（写实渲染和非写实渲染。）：

基于物理的渲染PBR（Physically Based Rendering）

非真实渲染NPR（Non-Photorealistic Rendering）

其中NPR也称为风格化渲染，其下又分为很多子类风格。由于手游市场二次元风格的盛行，所以近年来日式卡通风格较为常见。

《原神》实机游戏画面就是属于卡通渲染（注释：原神实机游戏画面非三渲二，其制作公司米哈游做的CG动画短片是三渲二，三渲二包含在卡通渲染里，此处不对三渲二技术做详细解释）。近年来流行的《守望先锋》，《英雄联盟》，《DOTA2》，《崩坏3》等游戏中都或多或少地出现过卡通渲染的身影。

那么卡通渲染这项技术为什么这么广泛的运用呢？有两个原因：

是游戏玩家们对卡通渲染画面风格的喜好。

（McCloud写到“amplification through simplification”，对卡通角色来说，简单的风格能增加观众辨识度，所以非常流行）

是卡通渲染对程序员的技术要求和机器硬件要求相比于写实画面渲染要求低很多。

（写实渲染需要考虑更多光影渲染如光线的折射、反射、漫反射、丁达尔效应等）

这么一看非写实卡通渲染风格的确具有别样的魅力大家是不是也对这种风格跃跃欲试呢？由于篇幅有限本次先以大佬 @HyeungKun Park 关于用UE5创建《原神》风格化着色器的教程为例带大家一探NPR非写实渲染技术！

● UE5风格化着色器的设置+各种流程图

● 《原神》3D模型的下载地址

● NPR《原神》着色器的详细教程地址

▲着色器基于Unlit着色器启动，并通过执行NdotL（顶点法线点积光向量）创建Lambert着色。

▲NdotL的结果与漫反射纹理融合。

▲Half Lambert着色是通过将NdotL乘以0.5再加上0.5来实现的。

▲LUT曲线被添加到Half Lambert的结果中。当你创建Half Lambert时，亮度谱会变得更宽，因此可以很好地使用所有LUT颜色。

▲自发光通过单独的遮罩通道输出。

▲因为Unlit shader不接收Normal输入，所以metallic expression使用了置换UV的方法。

以下是我使用Substance Designer制作的金属遮罩示例，尽管它与现实有很大的不同，但我能够以类似的方式实现金属表现。

各向效果是使用菲涅耳效果的单独遮罩通道实现的。

▲自定义法线基于纹理执行，无需使用VertexNormal。渐变纹理根据LightVector的角度翻转和应用。

▲对于某些角色，外部和内部的纹理可能不同。你可以使用两个UV通道和 TwoSidedSign节点来表示两侧。

▲检查UV0和UV1的位置差异。

▲还可以指定单独的颜色曲线。

▲检查UV坐标是否设置为1。

▲我命名为“银河”效果的偏移效果广泛用于游戏的各个部分（域入口、Tartaglia、Skaramoosh 等），它是作为单独的材质创建的。

▲包括基于时差的深度效果和闪闪发光的效果。虽然它稍微专用于派蒙的斗篷，但它在任何地方都适用。

▲MF_SinedTwinkle

▲纹理是在Substance Designer中创建的，R和G通道代表闪烁效果，B通道使用 HueShift功能表示云。

▲轮廓是使用称为Inverted Hull的传统方法创建的，这涉及复制网格、翻转面并稍微缩放它们。

如果有一个高多边形模型，我们可以使用更多的烘焙技术（曲率、厚度等）来添加更多有趣的功能，但我们没有，所以我使用UE5的建模模式执行了一个简单的 VertexColor烘焙。

▲然后我们在VertexNormal的方向上应用WPO（世界位置偏移）。此外，我们根据光线方向使用VertexColor和阴影调整尖锐部分线条的粗细。

▲Rim Light（边缘光）在后期处理中使用Custom Depth和Stencil Pass执行，使其仅出现在轮廓内。

▲仅通过查看节点，3x3的矩阵可能显得有些复杂，但是按照每8个方向的X、Y值连接Append做起来是非常直观的，如图所示。

▲亮度根据光线的方向进行调整，从而在背光情况下产生更明亮的边缘光。

▲使用后期处理颜色分级进行色调调整。

▲在很多动画作品中，眉毛往往出现在前面，而《原神》却不是这样。我使用World Position Offset来确保它们从任何角度都始终可见。

▲未使用PDO的原因是由于为Conservative Depth Output（保守深度输出）的优化问题不支持负值。

这里你可以查看UE5官方的教程解释：

https://docs.unrealengine.com/5.0/en-US/depth-material-expressions-in-unreal-engine/

▲相反，将 Camera Position 和 World Position 之间的差异连接到 World Position Offset 可以使眉毛看起来好像总是以任何角度突出。

▲在原神中，当你从下面看角色时，你剋看到角色会半透明淡化。这可不是真正的透明度，而是使用抖动的遮罩不透明度。

有关抖动的更多信息，请参阅以下链接

http://momentsingraphics.de/BlueNoise.htm

▲我使用了用拜耳过滤器矩阵算法制作的纹理。

▲最后，我添加了动画和效果来完成项目。

大家可以去以下地址下载3D模型

https://sketchfab.com/3d-models/paimon-idle-animation-990c9d459212467288b64e9b19c9c9b5

如果同学们还想寻找原神系列的更多模型进行学习参考，也可以关注这个宝藏收藏夹：（很多可以进行免费下载哦）

https://sketchfab.com/Shein.Shein/collections/genshin-impact-4ff58a599f4b4dbab6e00c3b44dc9370

或者官方地址：

https://genshin.hoyoverse.com/ja/news/detail/5885

本文还借鉴参考了大佬Adrian Mendez和Ben Ayers的的内容：

https://www.artstation.com/artwork/wJZ4Gg

https://www.artstation.com/blogs/bjayers/9oOD/blender-npr-recreating-the-genshin-impact-shader

想要看大佬进一步教程的同学

请多多点赞转发哦

给予我们更多动力~

⭐ 次世代建模课程早鸟优惠 ⭐