【01】开篇：重力眩晕2中的渲染效果概览
- 前言
- 1. 轮廓线效果
- 2. 皮肤的光照效果
- 3. 布料的表现
- 4. 金属材质的表现
- 5. 眼睛材质
- 6. 一些特殊的效果
- 总结
本文首发于知乎专栏，转载请注明出处 。
前言
本系列的目的是探索游戏中NPR渲染技术的细节处理。因为《重力眩晕2》这款游戏中的卡通渲染效果很具有代表性且技术上有一定的深度，也很好地还原了二次元的美术风格，于是我以此为线索，在逐步复现其中的渲染效果的同时，对卡通渲染的技术细节进行一定的探索和总结。
本文是对《重力眩晕2》中的卡通渲染效果的一些预览。在接下来的文章中，我会逐一去思考和实现。本文没有技术实现的内容，主要是对后续的文章做一个规划。
1. 轮廓线效果
图 1
图 2
这里特意截了物体到屏幕距离不同的图片。这里可看出几个细节：
（1）轮廓线的粗细度并没有因物体到屏幕的距离发生明显的改变。如果我们简单用正面剔除的方法进行描边（即在第二遍绘制的时候，在顶点着色器中让顶点坐标沿法线方向延伸一小段距离，然后进行正面剔除以实现描边的效果），由于顶点向外延伸的距离是相对物体坐标系的一个系数，这个距离一样会参与投影变换的计算，结果是到屏幕的距离近的物体的轮廓线会很粗。（图3为一个简单的正面剔除outline的实现效果，轮廓线的粗细度会受到物体距屏幕距离的影响，图3是我下载的High_Noon大神在GitHub上的demo）
图 3
（2）《重力眩晕2》中轮廓线的粗细度不是固定的，加粗了需要遮蔽的部分；其次，轮廓线不是完全连续的。轮廓线的渲染效果非常符合手绘的线条效果。
此外脸部的轮廓线可以观察到其他特殊的细节处理：
图 4
图 5
图 6
（3）嘴角的轮廓线是有加重的。
（4）鼻子部分，嘴唇部分的轮廓线是有特殊的处理的，在一些特定的角度下会出现，效果非常符合美术的要求。
关于描边的抗锯齿：
（5）《重力眩晕2》中轮廓线的抗锯齿处理得非常好，一般利用正面剔除实现outline，或利用屏幕空间的边缘检查实现轮廓线的话，轮廓线会因为欠采样产生非常明显的锯齿效应（例如下图，图7为KurtzPel的截图，可能是使用了MLAA的抗锯齿处理，轮廓线会有明显的模糊）。
图 7
总结一下轮廓线的部分，可以看出《重力眩晕2》在轮廓线的渲染上是做了大量的细节处理，很好地还原了二次的美术风格，技术实现的深度是非常值得探究的。
2. 皮肤的光照效果
图 8
（1）与简单的明暗分层不同的是，《重力眩晕2》中的明暗交界有非常平滑的过渡（对比图7），这种过渡也不同于美漫风格的渲染（美漫风格的渲染以Lambert模型为主）。且明暗交界线部分的亮度是比暗面更暗的，以这种方式来强调明暗交界线。另外明暗过渡带的范围大小不是固定的，在过渡平滑的网格位置明暗过渡带较宽，此外，过渡带的范围大小在同一区域甚至存在各向异性。
图 9
图 10
（2）逆光下的皮肤光照效果，利用了侧光面的镜面反射来强调轮廓（类似于菲涅尔的效果）；当视角发生改变（图10与图9相机仰角不同），侧光位置的镜面反射的范围随之改变，且过渡区平滑。
（3）逆光下物体边缘使用了环境色的泛光。
3. 布料的表现
图 11
图 12
（1）图9，图11可以看出，暗面对布料褶皱的表现是非常精细的。
（2）图11，图12可以看到对布料上由菲涅尔效应产生的高光的表现。
4. 金属材质的表现
图 13
图 14
（1）凯特的服装上有大量金属部分，图13,14为其金属的各向异性效果的表现。
（2）图13中金属附加了泛光效果。
5. 眼睛材质
图 15
图 16
（1）非常符合二次美术风格的眼睛效果，虹膜上计算了两个高光点。
（2）眼球表面使用了CubeMap的采样来表现眼球表面光滑的效果。
6. 一些特殊的效果
达斯缇（猫）的渲染效果
图 17
图 18
（1）达斯缇的轮廓线可以看出是用法线和视线的夹角做边缘检测来实现的，但是仔细观察其夹角和轮廓线亮度的映射关系，更像是一个翻转的GGX法线分布函数的形状的一个函数。
（2）达斯缇表面的着色是利用CubeMap采样实现的（PS4截动图不是很方便，达斯缇表面的纹理会随观察方向发生平移）。
凯特重力模式下的渲染效果：
图 19
图 20
（1）轮廓线自发光，同达斯缇效果的第一点。
（2）凯特体内能量回路的效果
（3）头发有类似次表面散射的发光效果
（4）泛光效果
总结
本文为本系列的开篇，对重力眩晕2中的渲染效果做了一个概览，无法面面俱到，为之后的文章做了一个初步的规划。更加系统的技术实现细节的探索会在接下来的文章逐步展开。