请选择 进入手机版 | 继续访问电脑版
开启辅助访问

QQ登录

注册 找回密码
返回列表 发新帖 标签:
图文
教程
技术
文章
技术文库
CG
Graph
渲染
显示全部 10
查看: 830
回复: 0

图形图像 无畏契约的着色器与游戏体验

16万

元素币

2530

活跃度

386

贡献值

星元神

关注不迷路!了解新动态!原画插画区!

Rank: 6Rank: 6Rank: 6Rank: 6Rank: 6Rank: 6

积分
217642

铁剑元素铜币元素银币元素金币元素秘币珍珠戒指黄金项链幸运吊坠学徒法袍征战护手格林机关炮魔镜裁决火元素满天星钢铁矿镐水晶矿【真爱之花】生命之缘自然之怒原初葫芦始凤神弓传奇碎片-绿传奇碎片-紫传奇碎片-蓝冰晶剑高尚之戒繁星晶石守望者【EX】守望者【天使】希望人没事守望者【猎空】神秘药水D

主题
359
精华
39
扩散
332
首发
0
土豪金
1803
神石
60
在线时间
1040 小时

TA的画板

发消息

 楼主| 发表于 2020-10-16 11:08:37

马上注册成为元素者,获取海量元素资源,结识各路大神级人物

您需要 登录 才可以下载或查看,没有帐号?注册

x
本帖最后由 依旧心 于 2020-10-20 01:10 编辑

转自:魔型志
今天给大家带来一篇图形开发的文章,希望对研发同学有一些帮助,美术同学也能看看增加点见识,可能以后在和程序shader大哥刚的时候我们不是那么的无知。

感谢山鸡的翻译!技术贴太难翻译了!

640


大家好我是Brandon “mochi”Wang,无畏契约内容组的软件工程师。我们的职责是接受并解决游戏设计师以及艺术家发来的关于游戏引擎改动上的需求。我会介绍关于无畏契约的游戏体验,以及我们如何平衡游戏画面风格,运行流畅程度以及游戏完整性。画面风格与一些游戏设计的东西有关——有时是影响光暗环境效果的着色器,又是可能是对于游戏内UI的考量。

我会专门讲解着色器这方面,这是电脑图形里很重要的一环,也是我的专业。着色器是通常人们最关心的画质背后的功臣——这个程序告诉GPU如何把游戏内容渲染成像素点呈现给玩家。我对于即将讲到的内容非常激动,因为这不只是工程,艺术,以及设计的完美融合,也是我个人的热情所在。

平衡

电子游戏的画面只有个简单的目标——用图像来表达提问的过程。举个例子,市面上有很多图形模拟物理运算的研究。对于着色器来说,我们就是在模拟光线的物理。

因为游戏有着非常严格的性能需求,每一帧必须在6.9毫秒内渲染好才能达到144帧的质量要求。着色器就得到处偷工减料以及制造伪装的效果,所以我们经常就得在真实度与运行性能之间取舍。同时注意,无畏契约是款竞技游戏,所以我们必须得把真实性与运行性能考虑到游戏的完整性里面。

三方制衡

我们的着色器照顾到了无畏契约里面的方方面面。三个重要的指标是之前提到过的,性能,竞技游戏完整性,以及美术。我们的目标是在这款赏心悦目的竞技游戏里同时照顾到这三方面,既好看,有竞技性,还优化的非常好。

640
不同的开发团队会对不同游戏有不同的开发重心。对于无畏契约来说,以上三点是我们最关心的(而不是真实性,沉浸感或者电影级别的cg)所以我们希望最终游戏是这三点都能均衡的照顾到。

确保竞技游戏的竞技性

无畏契约的目标最低GPU配置挺有野心——2012年的CPU集成GPU应该都带的动。所以基本上来说那个时代来的超薄本都应该带的动。着色器既需要照顾到这种老旧设备能运行,又要确保在高端设备上不会因为设备优异而得到竞技游戏上的优势。这就表明我们需要保证在低中高画质下都不会对游戏的竞技性产生影响。举个例子,游戏里可游玩空间内没有动态阴影,这样在低画质下(通常低画质会去掉阴影)的玩家也不会丢失一些重要画面信息,这样我们的重心就可以放在辨识度上了。

在老旧的机器上,通常是CPU得等GPU运算完再进行下一帧的工作,所以我们是受GPU限制的。在现在的新机器上,GPU有着比CPU更快的性能,我们就只受到CPU的限制。这就是为啥你在老旧机器上会想着把画质调低,而在新型号的机器上调高画质也不一定会注意到FPS的变化。

当我们讲到辨识度,有几个重要的考虑指标——材质反馈,特定领域的着色器,降低画质时需要去除的东西。我们这些会挨个提到。

材质反馈

首先,我们来讲一下材质反馈,以及我们如何在游戏世界的限制下模拟模拟真实世界的物理光。

真实世界中,各种光源发出的光线会在不同的表面反射,每次反射都会改变其特性,所以当光线最后到达你的眼睛时你会看到一种特定的颜色以及特定的方向。在游戏里这种物理效果我们就得捏造一下,这里我们通过三种主要元素来呈现:DIffuse漫反射,Specular镜面,Ambient环境。

漫反射 给人的感觉是哑光的质感
镜面 给人干就就是亮晶晶,像塑料一样的感觉
环境 是间接光,即使没有阳光直射也能照亮一切

我们在无畏契约里有独特的制造环境光的方式——之后细谈。先看看漫反射何镜面光,他们为啥重要以及我们如何模拟。


640

漫反射 Diffuse

一个材质的“漫反射”相应基本上会产生亚光的外观。
现实世界的例子:粉笔,白纸

朗伯反射 Lambertian Reflectance

这个物理术语我们借用一下“朗伯反射 Lambertian Reflectance”——宽广的照明不是基于你的观看角度。用代码来表示就是,这里light是朝向光源的方向,normal是法线的方向。这是个数量积,意味着面朝光源的方向总是会亮一些。

下图中我们只用在模型上,这是最基础的亚光物件的可视化表现。

物体表面的哑光部分,最最最基础以及常见的漫反射灯光。

半Lambert

无畏契约是基于一个“半Lambert”的理念来是光线更柔和的。这个做法的祖宗是V社的军团要塞2,现在多用于高度风格化的游戏里,能使暗部不那么暗。
半Lamber打光下的样子

渐变Lambert

无畏契约在半Lambert的基础上,尽量避免做现实光线的物理效果,而更加偏好于从艺术方面的打光效果。

比起传统的半Lambert给物件的暗部提高一个固定量的做法,无畏契约里我们会有个给高光,灰部,暗部的亮度调整。这样艺术家们就可以按照需求调亮或者调暗每个部分了。在此之上我们加入个功能,这样艺术家们甚至可以调整这些调之间的交集位置,大小这些参数了。

为了达到这个目的,我们把重新映射到【0,1】区间,并且用这个来采样给一个渐变贴图。这个渐变贴图是UE4生成的,目的是为了能实时的作出修改。下面这个视频就能看到艺术家用UE4里的控制来调整打光效果了。(注:这个渐变条就跟maya里的渐变ramp差不多)。

视频:

有了这项技术我们就可以避免多项动态光源带来的性能消耗了。无畏契约里只用一个光源,以及成吨的艺术来让所有东西看起来超棒。

高光 Specular

一个材质的高光,字面意思,有多闪亮。
举个例子:镜子,金属

想象一下你在移动的时候看到镜子或者金属表面的样子,我们通过改变表面的金属性和粗糙程度来控制光线反射的效果——这会改变反射的颜色和高光的形状。

常用方式

老游戏用Phong着色法,他们用的是这个等式,这里“reflected light”是指的在法线表面上反射的矢量光线。高光会随着视角的变化而锐化和移动。
这里的亮点就是反射阳光时产生的高光点
现代的游戏通常会选择更复杂的镜面反射膜性,其中包裹Blinn-Phong和Beckman。


这些都是通过虚拟点光源计算高光的模型。无畏契约的方法更多的来自使用全景HDR图像技术。者能够是我们在场景中使用更复杂的高光打光,同时无需添加更多的着色器指令去计算每个光源的效果。

粗糙度 Roughness

上面提到的高光方式之间的主要区别在于他们如何处理粗糙度。粗糙度大致就是物品表面上的刮擦程度,但是是微观层面上。这意味着有光泽的金属表面没有做过消光处理的金属表面粗糙。每种解析修动态光照的办法(Phong,Blinn-Phong,Beckman)都用指数函数来驱动该函数,较低的指数就是更为粗糙的表面。

如果我们用上了全景图,我们做的就要相反的事情。我们需要模糊HDR图,这样表面粗糙的时候照明就不是那么清晰。我们必须小心的处理图片的模糊,做到与高光的表现一致。如果我们使用普通的模糊,比如高斯模糊,这样看起来就只是模糊的反射,而不是粗糙的表面。我们用Beckmann模糊的内核让高光看起来像高光。

这些全景图的不同的模糊将以较低的分辨率存成Mipmap,之后我们针对表面的粗糙程度选择最合适的Mipmap。

无畏契约的高光图

无畏契约用现实生活中的HDR照片或者用游戏中的建模预渲染的图来做高光反射。我们只有在材质非常接近镜子(比如瞄具上的镜片)的时候才用渲染场景的反射。

无畏契约的特殊之处在于,大多数情况下仅将这些全景反射用于镜面反射高光,而没有添加任何泽佳GPU运算的虚拟光线。我们的艺术家在静态HDR上绘制热点以使HDR以他们想要的方式呈现。由于我们的漫反射大部分是由单一方向的光源驱动,因此我们在该方向上绘制的高光将使镜面反射和漫反射之间保持连贯性。

这是一张HDR立方体贴图,通常用于添加逼真的反射效果。这里的数值以浮点表示,所以白色区域实际上比图像其余部分的亮度高数百倍。
这个模型有所有的无畏契约的高光效果设置

环境光贴图 Ambient

“环境光”使整个对象上的恒定光,以模拟间接照明。
举个例子:阴影并不完全是黑暗的,因为光辉从其他表面反射过来,从而给阴影区域带去一点光。

无畏契约并没有以传统方式来使用环境光贴图,我们的漫反射贴图已经是不会有完全黑的部分,为了使间接照明与环境保持一致,我们用了虚幻引擎的间接照明缓存(Indirect Lighting Cache),该缓存会在整个场景中对传入的静态光进行采样。我们用这些采样来测量地图上任何给定位置的环境光。

每个动态对象都会找到最近的照明样本,并使用它分别使对象的漫反射和镜面反射变量或者变暗。将它们分开计算,我们可以用镜面反射在较暗的区域中使他们更暗,以模拟没有阳光的直射。我们还调整了地图上每个区域的最大“暗度”或者“亮度”。这样,同一张地图里的物体,就不会变的太亮或者太暗。

无畏契约里着色器的分类

无畏契约使用的是正向渲染,这样做可以进行一些专门的优化,不过比起延迟渲染来说就丢失了一些更好的光效。不过我们还获得了一些其他好处,比如减少了对VRAM的影响,以较低填充率为老旧GPU型号提升了性能,并且我们能够拥有不同种类的着色器,对相同的输入有不同的响应。

我们有四种主要的着色器输入:
角色(第一人称,第三人称,还有角色选择页面)
武器(第一人称,第三人称)
环境(由主要的材质决定)
特效VFX(几乎都是一次性的)

下面我们来挨个讲一下,然后举些具体的例子来深入讲讲。

角色

除了漫反射,高光镜面反射和环境光以外,无畏契约的角色还有些其他的特性,以提高清晰度和风格。我们将讨论敌友识别的Fresnel照明,蒙皮阴影,纹理和深度调整。

敌友识别的Fresnel照明

为了使无畏契约里的角色更加清晰,我们在角色的掠射角度(背对你的角度)上增加了额外的照明,使轮廓更加清晰。为了敌友识别,我们加入蓝色和红色作为识别。
我们的目标是模仿光束直接对准角色时得样子,同时调整Fresnel的效果以防止其太亮分散主力已。我们通过优先考虑朝上的掠射角度而不是朝下的来达到此目的,而且我们尽量让这个效果出现在角色的上半部分。

皮肤

皮肤通常看起来有肉感是因为光线穿过皮肤而不是从皮肤反射出来。这种被称为次表面散射(SSS),而模拟这种效果的技术通常会非常消耗算力,从而带来巨大的性能成本。在无畏契约中,我们使用了更多风格化的着色功能来伪造这个效果。

首先,我们把扩散衰减渐变的颜色暗部改成偏红的颜色。

现在有点接近了,但是还缺少一些模糊/半透明的感觉。我们的艺术家参考了zBrush里的拉直预览材料来解决这个问题。

通过将其结构为具有镜面反射相应的下发光,我们可以调制出在暗部区域增强的效果。

角色使用顶点颜色的通道来启用或禁用此效果。使用顶点颜色可以为我们省下一张贴图,因为这个改动非常微妙。

没有了皮肤着色器,这角色就少了些生气。

贴图

基本来说一个角色用四种贴图:
Albedo/基础色:表面的一般颜色,可以不增加几何复杂性的情况下增加表面的变化。
MAER(金属/环境光/发光贴图/粗糙度贴图):Metallic(高光和漫反射),AO,emissive,roughness
法线贴图
渐变贴图:
漫反射照明衰减
皮肤扩散照明衰减
皮肤下发光衰减
敌人Fresnel角度
友军Fresnel角度
这里我们没有添加高光图作为控制,因为我们发现倒置的粗糙度贴图作为高光反射图效果很好。而且我们把AO和emissive贴图压缩到一块因为我们很少同时用到他们。低于0.5的值视为AO,反之视为emissive。

深度调整

距离对局角色的是被来说非常重要,尤其是对于无畏契约来说。角色永远需要从周遭环境里凸显出来。艺术层面让近距离地角色更好认出,不过随着距离增大,细节就开始逐渐丢失。

为了弥补这个空隙,我们的大多数效果都是以深度来调制的,着色器用于增加远处角色的可见性。举个例子,远处的角色加亮了,敌军识别色范围更大,颜色更亮。我们对这些调整就如同调整环境光于暗部一样。

来看看同一场景里不同距离的样子。


你可以看到远处的角色更亮,敌军识别颜色范围更大。我们把这两并排比较对比更明显。


阴影

我们只在第一人称视角下有阴影效果,比如你的手和武器。这是为了避免阴影成为效果(从阴影判断你的位置)和性能(低配机器在很多阴影下运行有困难)方面的竞争因素。

武器

武器我们用了一种较旧版本的漫反射,我们用smoothstep函数来调制
(注:这个smoothstep中文找到的一个稍微好接受一点的讲解在这里,维基这类百科网站实在找不到中文的了)
上:漫反射贴图。中:高光贴图。下:最终游戏内效果。

环境


游戏的环境占据了玩家的大部分屏幕,因此自然而然地选择是使其尽可能的详细。但是,它占据了大部分的屏幕,也已位置我们需要考虑性能的影响,环境应该尽可能的节省算力。一个小的昂贵调整可能会影响到整个帧率。无论如何,玩家通常会在心理上屏蔽周围的环境,以便他们专注于角色和技能。

换句话说,我们的环境着色器需要进行极端优化,以便在战斗中保持较高帧率的同时为其他效果留出空间。

光照贴图

照明是在离线环境中完成的,使用虚幻引擎的Lightmass把入射光和方向存到贴图里。我们将其用于漫反射,并且不会影响到我们对动态物品的处理方式。

通过这个离线操作,我们可以使用比用于对象的单个衰减光更多的光,这一位置换环境设计师可以以更传统的方式来控制地图外观。光照贴图能让我们做更高级的照明效果(比如阴影),因为使用光照贴图照明的物体是游戏里不会动的对象。

这里是我们光照贴图中由Lightmass计算的射入光,没有材质以及材质贴图。注意这比角色武器上的照明要复杂的多。

VFX特效

视觉效果一般是特效师来控制的,他们通常很少受我们的照明和材质影响。在这个着色器上工程师们会专攻系统渲染问题,比如烟雾的透明度。

透明度排序

透明度排序是一个非常难的问题,因为需要考虑到我们的最低配置要求这些因素。举个例子,CSGO的烟雾用到了透明度,但是其他的工具(如莫洛托夫燃烧弹)会意外的把本不该在烟里显示的角色暴露出来。

通常烟雾效果是通过面向摄像机的卡片创建的,这就是说这个效果因每个玩家的位置而异,同时设计师们可以用烟雾纹理并将其作为3d对象在里面。这样就可以使敌人在可能你看不到对方的情况下看到你。

为了解决这个问题,无畏契约的视觉障碍元素(比如烟雾)具有粗糙的游戏几何边缘,无论是叫如何都可以看到。这确实是我们的厌恶看起来很几何体,不过我们也避免了更严重的透明度排序的问题。

比例

我们以不同方式缩放环境,角色,武器,这样我们可以在低画质下的视觉效果和性能之间取得一个平衡。

综上所述,我们狠狠的删减环境特性,因为他们最占屏幕空间。对于低画质下的每个对象。我们既可以保留其漫反射响应,也可以保留其高光响应,但是不能全都要。我们测量了着色器需要执行的指令,或者基本操作如加发乘法的计算程度。从高质量到底质量我们将指令数量从100降到41.

角色需要保留所有影响玩法的功能,因此我们降低镜面反射率,因为角色不需要太亮就能很好的识别。这里我们从128条指令降到84条指令。

武器基本都是亮晶晶的金属表面,所以我们通常调整漫反射相应。我们在基础武器上把指令从103调到73.

高画质
中等画质
低画质

VFX

特效于游戏中兑现镀铬处理方式不同,因为技能特效因角色而异。以至于无法统一的精简所有内容。所以我们尊重游戏指标当中的完整性,所有特效都必须在最低画质上达标。不同画面设置之间的技能特效区别只在一点美容效果上。

举个例子,Omen的烟雾效果是一个阻挡视线的球体,在高画质下,我们添加了更细腻的效果,然而这不会影响到玩家与烟雾的交互方式。

测试

既然我们非常关注性能问题,那么我们就在不同规格的不同机器之间进行了兼容性测试。既有稳定的建模预算和纹理使用情况,我们也要确保游戏有我们要求的那么出色。

技能

角色技能的测试非常重要,因为每种能力都是独一无二的。我们一第三方开发伙伴一起在中低配置的计算机上测试了每种技能,并记录了他们的帧率。任何问题都有团队中大哥工程师或者美工解决,如果没法解决,我们就和设计师一起寻找替代方案。

Sova和Viper的大招就是为了更好的运行效率而做出的妥协。

Sova的大招曾经会招出巨大的透明圆柱,在不透明的光线遮盖之前会显示瞄准的目标。这大招会在低配机器上疯狂掉帧。所以我们替换为了一个线框形状的不透明轮廓。

Viper的大招会是全屏效果,影响对手的视野。这原本是一种非常柔和的近视效果,但是最终我们切换到一个确定的范围,确定了视力障碍有多远。

结语

感谢阅读!在我看来,图像是竞技游戏中非常有趣的一方面。因为图像并不是重点,我们的目标是在不妨碍游戏玩法的情况下使所有东西看起来更好看。着色器确实是艺术与工程学的交融。有着工程学背景的我也爱深入探讨艺术方面。

我希望本文的内容能让你的下一把无畏契约玩的更加精彩。并希望你能够注意到我们保持游戏竞技性和性能的一些方式。我不是唯一从事图形工作的人,也不是唯一的工程师,我特别想提到美术团队的Chris Gillet和Sean Marino,没有他俩上文所有的内容我无法独自完成。

有些需要科学上网:

目标最低GPU配置
https://playvalorant.com/en-us/specs/

朗伯反射 Lambertian Reflectance
https://en.wikipedia.org/wiki/Lambertian_reflectance

数量积
https://zh.wikipedia.org/wiki/%E7%82%B9%E7%A7%AF

V社的军团要塞2
https://steamcdn-a.akamaihd.net/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf

Phong着色法
https://zh.wikipedia.org/wiki/Phong%E8%91%97%E8%89%B2%E6%B3%95

Mipmap
https://zh.wikipedia.org/wiki/Mipmap

正向渲染
http://imgtec.eetrend.com/d6-imgtec/blog/2018-03/11348.html

掠射角度
https://baike.baidu.com/item/%E6%8E%A0%E5%B0%84%E8%A7%92

smoothstep函数
https://en.wikipedia.org/wiki/Smoothstep

这里
https://www.jianshu.com/p/66035ae91bfd

Lightmass
https://docs.unrealengine.com/en-US/Engine/Rendering/LightingAndShadows/Lightmass/Basics/index.html

注:若有侵权立即删除!


评分

参与人数 2活跃度 +25 收起 理由
睡懒觉不打呼噜 + 16 【感谢】楼主分享的内容!很棒!
一笑一尘埃 + 9 【感谢】楼主分享的内容!很棒!

查看全部评分

本帖被以下画板推荐:

喜欢的点点关注啦!谢谢!

回复 使用道具 举报 登录

论坛版权
您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

元素大事件!上一条 /1 下一条

快速回复 返回顶部 返回列表