会员登陆
已有账号?登陆账号 还未注册?注册

快捷登陆

[Unreal Engine 4] Ni No Kuni 2:帧分析

2
回复
4509
查看
[复制链接]

38

主题

81

帖子

2712

积分

超级版主

Rank: 8Rank: 8

积分
2712
发表于 6 天前 | 显示全部楼层 |阅读模式
本帖最后由 芒果Uki 于 2020-1-13 11:13 编辑

Ni No Kuni 2于今年年初,2018年3月发布,是Level-5开发的一系列日本角色扮演游戏的第二部分。
在日本发行第一款游戏七年后,玩家再次掉入了一个生活在人类中的拟人化生物所居住的神奇世界中。

-01.jpg
第一个作品《 Ni No Kuni:白色女巫的愤怒》是与Ghiblli工作室的联合合作,但事实并非如此。但是大多数团队仍然参与其中,结果是一款与第一款游戏具有相同氛围,感觉和艺术风格的游戏。
这是我写的第二篇文章,详细介绍了游戏引擎渲染框架所采取的步骤,上一篇《见证人》可以在此处找到。就像在《见证人》中一样,Ni No Kuni 2(NnK2)使用自定义引擎,而不是像Epic的Unreal Engine 4或Unity那样使用现成的引擎。但是与见证人不同,这次没有保存任何技术博客(据我所知)。
该游戏已针对PC和PS4发行。此处分析的版本将是运行DirectX 11的PC。该分析并不假装涵盖所有复杂性,而是我发现最有趣的部分。
剧透警报:尽管我试图将剧透的水平保持在绝对最低水平,但我可能仍会不由自主地提供一些有关故事或游戏玩法的线索,因为框架是从游戏中相对先进的角度出发的。
最后,如果您还没有演奏过,我鼓励您这样做。该游戏可在带有Steam DRM和SteamHumble Bundle商店中购买。 因此,现在不用多说,让我们直接进入。

帧时间轴分析将集中在内部环境中的一帧上,我认为引擎是最亮的。我们可以找到NnK系列的所有元素特征,带有艺术线条的平面着色和半真实的渲染。下面是我们将主要关注的框架。
feature.jpg
阴影
第一步是阴影的渲染。Ni no Kuni 2使用两个不同的阴影贴图,它们与玩家的距离不同。它们都被渲染到4k 32位深度纹理上。
shadow.jpg
这种处理阴影的方法属于级联阴影贴图(CSM)的类别。目标是在保持较低内存占用的同时提高阴影质量。阴影贴图中的最高分辨率集中在播放器周围,从而减少了可见的伪像,并且距播放器的距离越远,则一个纹理覆盖的区域越大。
请注意,对于室内场景,三个渲染通道专用于渲染阴影。首先在没有玩家的情况下渲染最接近的阴影贴图,然后在另一个渲染过程中添加角色。
深度预通过
Ni No Kuni 2不使用延迟渲染管线。我还排除了严格的前向管道或它的Forward +变体,因为我可以找到任何灯列表计算。最接近发生的事情似乎是沃尔夫冈·恩格尔(Wolfgang Engel)在2009年详细介绍的Light Pre-Pass技术,安德里安·库里格斯(AndrianCourèges)在其Deus Ex分析中也观察到了该技术。
按照论文中有关“光通过”算法的详细说明,渲染器将沿着场景的法线贴图开始在深度图上工作。所有透明对象均不包括在内。
depth.jpg
使用的深度图是屏幕大小的D24S8帧缓冲区,但据我所知,模板部分从未使用过。与选择使用对数反转深度的其他大型开放世界游戏相比,NnK2使用了正常深度图,该图的大多数信息都封装在0-1范围的最后25%,因为近平面为0.1还有一架远航机在1000
老实说,这似乎不是问题,因为我从未在玩游戏时在远端飞机附近进行过Z战。对于快速的可视化,为什么浮点数精度从0到得到的精度会迅速降低,您可以参考下面的可视化。
Dn0PrqxXUAIYcii.jpg 《可视化浮点精度损失,或者“为什么#gamedev的东西在远离原点的地方表现糟糕”
蓝点是想要的向量的末端。黑点与最接近的可表示点断开(在简化的浮点网格中,只有4个尾数位)https://twitter.com/D_M_Gregory/status/1044008750162604032?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1044008750162604032&ref_url=https%3A%2F%2Fblog.thomaspoulet.fr%2Fninokuni2-frame%2F  动图链接》
如前所述,法线贴图与深度图同时渲染。法线贴图用于增强某些对象的细节水平,例如背景中的挂毯,但是大多数细节仍然可以通过几何形状(支柱中的波浪)获得。
normal.jpg
光照贴图
一旦有了深度图和法线图,下一步就是计算光照图。对于场景中的每个光源,计算像素处的辐照度。
此操作的输入是之前计算的两个贴图,深度和法线以及所有灯光信息的列表。该数据结构包含在环境中处理光所需的信息,其位置,衰减系数,颜色和alpha值。从着色器的结果可以看出,这里没有任何幻想,没有全局照明,没有阴影,只是一个简单的光照方程式。在最终图像中可以感觉到这一点,因为大多数光线来自周围环境,并且阴影是由窗户生成的,很少有非动态光源。
light.jpg
有趣的是,此操作是在计算管道中完成的,输出数据存储在屏幕大小的缓冲区中。对于为什么要执行计算操作而不是正常的完整图形传递,我的猜测是,他们有机会在此处进行并行处理。夹在预深度通道和彩色通道之间,此通道与光散射通道同时进行,这是一种强度较低的操作。这只是猜测,因为我无法从游戏中获得可靠的性能指标。
光散射
在将颜色添加到深度之前,我要看的最后一步。仅在室内环境中发生,此过程会产生光散射效果,也称为“光线”或“上帝射线”。
FZ3L40OWYRN3XVX1I]BBGKL.png W3}RN66408TF2T`WM4LBMAY.png
在将用于该效果的现有纹理缩小几步之后,渲染器开始处理。处理完成的纹理比屏幕分辨率小八倍,为240x135。
生成的纹理的红色通道是光散射计算的输出,绿色通道是深度的副本。注意较低的量化,该纹理是R11G11B10,而原始深度以32位精度存储。
在以非常低的分辨率渲染之后,光散射图将使用完整分辨率的深度图作为进行方式的指示,进行上采样步骤。
scattering.jpg
色通
是时候为场景添加一些颜色了。渲染阴影,深度,法线,光照贴图以及所需的所有其他位点之后,渲染器开始为场景添加颜色。
预先渲染深度意味着可以在整个渲染过程中确保不存在透支策略。这样做的好处是不必担心CPU端的深度排序,并且无需使用繁重的着色器即可。深度比较标志现在小于等于,无法从深度图正确读取。深度写仍处于活动状态,但不需要。
彩色通道以屏幕分辨率渲染,并渲染到4个不同的渲染目标。让我们一一分解它们。
feature.jpg
第一个渲染目标是主彩色图像,它为每个通道使用16位深度。多重采样抗锯齿未激活,正如我们稍后将在文章中看到的那样,抗锯齿将留在后期处理阶段。
对于该纹理,没有什么特别的事情发生,对作为模型输入的颜色纹理进行了采样,对离线反射的反射贴图也进行了采样。首先使用相同的着色器渲染背景和所有静态对象,然后添加字符。至此,仅完成了角色的基本阴影处理,尚无任何线条艺术。
color-1.jpg
第二个渲染目标是速度图,即当前帧与前一帧之间的相对运动的表达式。现在,我们将略过那一个,因为稍后渲染器将使用它时,我们将回到它。
color-2.jpg
第三个渲染目标包含各种信息的混合和匹配,就像第四个渲染目标一样,它仅由角色的着色器写入。红色通道包含看起来像物质信息的通道,它是顶点数据的直接传递。注意膝盖图案下方的模型,也可以在上面的屏幕截图中看到。蓝色通道也是一些顶点数据的传递,它提供了有关其他阴影的信息,例如折叠在一块布上。
pants-model.jpg
Alpha通道还用于将顶点的点积存储到相机。
color-3.jpg
第四个也是最后一个渲染目标再次是各种信息的混合和匹配,这些信息将在以后使用,让我们一一分解。
线条艺术期间将使用绿色通道来艺术地控制轮廓的颜色和重量。
蓝色通道用作标识符,字符的值为0.27451。该标识符将在环境光遮挡阶段使用,以丢弃属于字符的所有像素。
最后,alpha通道是字符相对深度的度量。轮廓渲染期间将使用它来柔化线条,使其远离相机。
线条艺术效果
在主要颜色渲染通道之后,将在三个绘制调用中渲染线条效果。第一遍使用之前定义的多个渲染目标的结果生成纹理。红色通道是第三个渲染目标Alpha通道的副本,顶点是相机的点积。绿色是第四个渲染目标绿色或线条艺术的混合因子的副本。Alpha通道是第四个渲染目标的Alpha通道(角色到摄像机的距离)的副本。进行此打包是为了减少渲染期间要访问的纹理数量。
`U_Z_J)D)X9`H30V{PC`PLC.png V52N9OQBPOUZTAW8]E[I7OQ.png
蓝色通道是唯一要添加到此纹理的信息。在此计算轮廓的第一个版本。它是从材质贴图(第三渲染目标,红色通道)进行边缘检测,以及在第三渲染目标蓝色通道(这两个通道均来自顶点输入)中找到的阴影信息的组合。
在下一遍中,对线条艺术进行了8次多采样以获得一条平滑的线条。采样后,将使用作为纹理传递的查找表获得最终颜色。我没有在快照中看到这种纹理变化,但是可以想象它可以在运行时更改以改变线条效果。为了减弱某些区域(例如头发分裂的地方)中非常粗糙的轮廓,将第四个渲染目标的绿色通道用作混合因子。
line-2.jpg
最后,将线图层添加到主色,同时,还将其添加到深度图。但是,上一步中的线条图仍然很粗糙,需要进行过滤以避免混叠。此处选择的算法是FXAA。我不会在细节上过多介绍,您可以在这里找到原始论文。这里使用的设置实际上是标准的,几乎与那里描述的一样。它使用相同的1/128 FXAA_REDUCE_MIN和1/8作为参数FXAA_REDUCE_MUM,这个作为变量传递,我们可以想象他们试图根据性能要求对其进行微调。
UDNQ2QOR4QE@N_A0@IOE5(I.png
我仍然不确定为什么他们决定在这里使用FXAA,因为之前已经对线条艺术纹理进行了多采样,并且正如我们将看到的,稍后将应用另一个全屏抗锯齿通道。
H0)N3%VX0AF]CHSJUUU6}PK.png
{_{3O[}3BING64}EZND{AHX.png
查看用于生成艺术线条的过程,有趣的是,其中大部分是由艺术家驱动的。用于生成轮廓,混合,管线每一步的信息由编码在网格顶点信息或纹理中的信息定义,从而可以对其各个方面进行完全控制。角色的阴影是游戏的特色之一,这很可能解释了这一选择。
环境光遮蔽
进行颜色渲染后,渲染器将开始计算环境光遮挡。所使用的技术是在屏幕上隔开的,并且正在使用颜色传递期间较早生成的蒙版纹理,以消除考虑中的字符像素。
ssao.jpg
然后,将字符底部的简单阴影添加到顶部,并且将输出模糊化以进行混合。
ssao-blur.jpg

抗锯齿
Ni no Kuni 2没有使用任何内置的多重采样抗锯齿功能,而是使用SMAA在事后完成所有操作。SMAA是已经流行的MLAA的直接改进。我不会深入介绍这种方法,您可以在以下地址在线找到这两种方法:SMAAMLAA
简而言之,原理是检测图像中的水平边缘和垂直边缘。在我们的案例中,这是使用简单的Prewitt内核完成的。红色通道对水平边缘进行编码,绿色通道对垂直边缘进行编码。
smaa-1.jpg
接下来是使用提供的图案图计算混合权重。最初的MLAA论文建议使用16模式来涵盖所有情况,我们可以在左侧看到其中的112种情况。但是,它们似乎都是原始16的权重的变化。右侧是SMAA算法引入的对角线样式,再次推荐16个,此处定义80个。
pattern.jpg
smaa-2.jpg
权重图准备就绪后,SMAA算法的最后一步已完成,过滤后的图像也已准备就绪。
smaa-final.jpg
最终过滤还会接收前一帧和运动图作为输入,因此他们很可能在开发过程中选择了与SMAA演示文稿结尾处所述的扩展版本一起使用。方程的一部分显示在那里也可以在过滤着色器中找到。
运动模糊
我们将考虑的下一步是运动模糊效果。我们将使用宝座室的一个版本,在该版本中我从左向右摇动相机,请注意,这种效果不仅适用于角色的移动,也适用于角色的移动。
在我们的主要颜色传递期间,将渲染运动图。我仍然不清楚该图是如何生成的,但是据我所见,并且由于缺少前一帧的输入,因此通过组合深度信息,相机运动,骨骼运动来生成运动图。结果似乎确实是静态的,并非基于任何时间分析。
color1-2.jpg
红色通道包含横向运动信息,绿色通道包含垂直运动信息,稍后在仅对这两个采样进行采样以找到模糊方向时,着色器将确认此信息。
在模糊我们的主图像之前,将运动贴图缩小几次以获取两个通道的120x68版本。然后,在渲染期间使用此贴图首先丢弃由于运动静止(或低于阈值)而不应应用运动模糊的任何像素,主角色将接受该处理。然后,它将使用更高分辨率的地图引导从中采样模糊像素的地方。在这种情况下,每个最终像素的采样像素数由设置为15的常量缓冲区定义。
最终结果如下。请注意,由于采样率较低,某些边缘(左下方的列)会产生斑驳的影响,而较高的采样率可能会解决该问题。
motion-patch.jpg
自由度
流水线的下一步是景深效果。我们将在此处重点介绍实现,有关此效果来自何处以及来自何处的更多详细信息,请参阅本文。简而言之,被摄对象离焦平面越远,模糊的程度就越大。这是游戏中常用的一种技术,可以使环境更具电影/真实感。
我们正在查看的场景太小,无法让这种效果引人注目,因此,我们将看到一个室外场景,下面是应用该效果之前的场景。
dof-final.jpg
首先,将双向高斯模糊以一半的分辨率分两遍应用到整个图像。然后,使用深度信息将图像的此模糊版本混合到主渲染中。
pre-dof.jpg
然而,这种效果并不完美,在某些情况下,在附近两个相邻像素之间存在高度差异的情况下,可以看到伪影。下图显示了塔金顶附近的此类问题。塔的尖锐边缘被背景中非常模糊的阴影所遮蔽。
dof-arti.png
盛开
游戏视觉形象的重要部分来自大量使用Bloom效果,它与前面显示的散射效果相结合,给场景带来了真正的威严感。
为了获得期望的结果,Ni no Kuni 2使用了主渲染彩色图像的三个不同的缩小比例的模糊版本。
首先,从彩色图像中提取较亮的区域。
QJ~I%R5665YUF9D}W{V52@X.png
这是通过使主彩色图像及其半分辨率版本变暗来完成的。为了避免缩小版本的高对比度区域出现伪影,需要进行粗边检测并降低区域对比度。
T]NL19UP7YE8@Q$I]O)E2)1.png
IR)`9%]~B1)98)G2O8JO_XL.png
但是,从我看到的情况来看,在此场景中,仅使用原始的变暗图像,很少有半分辨率的变暗版本。
接下来,在两次通过中应用双向高斯模糊。
bloom-full-blur.jpg
与其他游戏相比,NnK2中的光晕效果非常广泛,因此我猜测参与此效果开发的艺术家和工程师认为,一张模糊的地图是不够的,此图像的其他两个缩小版本每次完成缩放后,还会应用双向Guassian模糊。
请注意,不会降低帧缓冲区的分辨率,并且仅通过在角落缩小图像即可在顶点着色器中进行缩小。
bloom2.jpg
最后,将光晕应用于原始彩色图像。
用户界面
渲染用户界面需要四个不同的步骤。UI的第一部分是任务标记和其他幕后元素,例如敌人的名字。特别提及用于渲染文本的多字母纹理,完全使用4个通道。我可以识别希腊字母,西里尔字母,拉丁字母,日语,中文字母和其他一些随机的ascii符号。
下一步是呈现屏幕上的静态UI元素,例如右侧的任务信息以及小地图的背景。
接下来,将小地图的动态元素,角色位置,任务标记渲染到屏幕外。
UI2.jpg
对于最后一步,将小地图的动态图层和战斗UI(在城市中期望)添加到主彩色图像中。
P37E9C])N[U~T32PHQZ2P9T.png
结论
最终完成UI后,我们的框架已完全呈现,本文的结尾在这里。
坦白说,关于此游戏的渲染还有很多话要说,我在本文中并未涉及室外场景和城市的渲染。到处都有很多小技巧,但是我对这一分析的主要兴趣是如何实现这种非常独特的风格。

本文转载翻译  原作者:托马斯·普莱特


本文为转载内容,希望对大家有所帮助!

biubiu技术美术交流官方群:854499595,学习交流讨论




UDNQ2QOR4QE@N_A0@IOE5(I.png
UDNQ2QOR4QE@N_A0@IOE5(I.png
U(2TEFXZJ8T$S6{A4K(J)KS.png
1111.png
ssao.jpg
回复

使用道具 举报

0

主题

139

帖子

26

积分

英勇黄铜

Rank: 1

积分
26
发表于 6 天前 | 显示全部楼层
牛逼!!一位不愿露面的美术前来捧场
回复

使用道具 举报

6

主题

235

帖子

1007

积分

华贵铂金

Rank: 4

积分
1007
发表于 6 天前 | 显示全部楼层

感谢楼主分享!
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新信息

更多+
关闭

站长推荐上一条 /1 下一条

客服QQ:3360799237

服务时间:周一至周五9:00-20:00

邮箱:biubiuiu@sina.cn

  • 动效1群

  • 动效2群

  • 公众号

本站帖子资源均转载自互联网分享,如若不慎侵犯您的权益请联系客服我们将及时删除。

Powered by Discuz! X3.4   © 2001-2013 Comsenz Inc.biubiu游戏美术网站   

viewthread