Unite 2017 Shanghai

尊敬的先生女士们,大家好。

我是来自网易盘古游戏部的技术美术总监李正彪。

本次是我作为主讲嘉宾,第二次参加Ulite。

2012年第一次参加Ulite大会,我演讲主题是次世代手游画面的实现。

再次诚挚地感谢Ulite中国组委会对我的邀请。

今天下午我们已经听了很多非常棒的技术讲座,所以,也希望各位能以一种轻松的心态来听我的讲座。�

今天演讲的主题主要可以分为三部分。

因为演讲时间有限,所以我把这三点也做了浓缩。

其实,我们平时接触的大多数图形学技术,都可以通过谷歌社区、GDC、SIGGRAPH等,检索到相关发表过的论文,很多都是我们已经知道的内容。

如果,在位的哪位对图形学有兴趣的话,那么,当你读完GPU PRO 7为止的话,就会觉得,大部分现阶段流行的Shader技法,其实也没有那么难。

更何况,Shader技术以PBR为基点,逐渐在此范围之内得到广泛的应用,2018年,程序式处理技法应该会成为流行趋势。

接下里,我们再以回顾的心态,来着重谈谈Shader和美术表现。

对于手游美术这块,想为艺术家们讲下过去、现在、将来,当然主要集中于美术表现。

作为专家,必须要知道的Shader优化方法主要包含了以下内容,确认代码反汇编,优化使用最少的指令。

最后一部分的话,我们主要一起来看下Unity5.6中新增的Look-Dev,HDR标准信息的White point balance和其有关的几个PBR相关的内容。�”��_�n

对于观众的定义。

本人衷心的希望,此次讲座能成为我和在手游开发行业从事的各位艺术家和负责Shader设计工作的工程师之间沟通的桥梁。

手游美术

听众:

手游美术艺术家t=507&action=edit

第一部分的内容主要包括了对游戏画面发展历程的回顾,手机设备环境下,美术层面的构想和实现。

硬件的通性,或者由Shader版本的不同所带来的不同的画面实现方式,并且都跟过去做了比较。

同时,会介绍几种值得推荐的美术表现,传递一些更加符合手机设备环境的信息。

适用于手游美术的Shader是怎样的Shader呢?

G-Force FX 5.xxx -2003年1月发售的第五代G-Force产品。

简单的说就是支持DirectX 9.0 和 Opengl 2.0 。/

2003年,NCsoft的天堂2上线。

以此为出发点,韩国开始逐渐引入贴图和灯光的概念。

同年,技术美术这个岗位开始在游戏公司形成。

随着支持DXT9.0和OpenGL2.0的硬件在市场上占据的份额越来越大,游戏画面的品质也从过去依靠手绘,过渡到依靠使用灯光和凹凸贴图来表现效果的高品质画面。

本人也是在这个时候,开始接触使用Shader的光照模型编程。

天堂2上线五年之后,当时开发天堂2的虚幻引擎从2.0升级到了2.5,新种族翼人使用的是当时的新技术。

2007年,虚幻3.0已经上线,有很多游戏都已经使用了虚幻3.0的高级技术。��

回顾手游开发的过去10年,今天的手游画面变得愈发精致。

甚至,通过近似算法,在手机硬件上也能进行基于物理的渲染和线性空间渲染。

龙之谷仅使用了简单的的动态灯光处理,Shader本身也没做特别的处理,整体的设计跟一贯的美术表现方式做了完美的衔接,甚至,对于今天的手游开发者来说,也是一个很好的案例。

如果还依旧坚持传统的Artwork的话,那么对此可能会没有兴趣。

其实,审美的感觉对于Shader开发也是很重要的一部分。

以上两家公司的作品就极具代表性的。

开发Shader,先要考虑美术表现方法。对于表现方法的思考本身和技术实现之间有密切的联系,所以资料调查很重要,或者需要花很长的时间去思考。

利用百度或者谷歌,我们可以找到从20年前到至今为止发表的所有Shader技术相关的论文。

所以,在今天,要全新开发一样东西,是非常难的。

Dota2是一个很好的参考资料,从配色表到Shader应用文档为止,都有提供。

从Dota2材质球编辑器可以看出,为了表现出金属质感,使用了cubemap。

我们根据游戏镜头角度可以使用Cubemap,也可以使用抛物面贴图。对于表现质感来说,环境贴图,即Cubemap,是很好的表现手段

视觉上的独创性,可以通过各种尝试来实现。

如上所示的平面Shading和几何形态,可以通过设计来完成更加优秀的美术表现。

最终品质主要取决于怎样配色,怎样用灯光和Shader来表现出整体氛围。

被微软收购的我的世界,是一个以传统2D游戏中常见的Metro(메트로)设计移植为三维的一个很好的案例。

美术的造型和达到最终表现的方法跟对技术的理解是分不开的。

参考图是艺术家为了表现出水墨卡通渲染而在ZBrush中制作的例子,在这个例子中,艺术家很清楚,怎样的技术最终能实现怎样的表现。

这种参考充分能应用于实时渲染中,所以是很好的参考资料。

以上是2011年,仅由包括我在内的两名开发者开发的原型。

基于TEGRA 4系列硬件开发,引擎选用了Unity3.0。

2011年的当时,这种程度的画面也被称之为次世代手游,甚至荣获在GDC2012参展的殊荣。

还记得在当时的手机上,Unity还没有处理深度贴图阴影的功能,阴影部分都是单独实现的,跟Unity5.6相比,开发环境还是很恶劣的。

Unity5.6更新之后,相对有了一个更加友好的手游开发环境。但是,对最近才接触使用Unity的开发者来说,使用起来可能还能感受到诸多的不便。

2011年,关于质感表现也做了诸多的测试,仅用Unity基本Shader来实现表现,还是会受到许多的限制。

在当时,硬件性能刚好处于从iphone 3GS过渡到iphone4的时期,金属质感表现使用了简化版的Cook-Torrance(托伦斯)光照模型和半球面反射mapping,仅此而已。

再加上,当时的大部分开发者对强化Shader方面也不够重视,所以只能通过查阅2001至2006年的SIGGRAPH论文资料来获取信息。

最后,想跟在座的各位说的是,我们能从过去的硬件平台中获取到很多的提示。

2006年所提出的双抛物面映射,在2016年又重新受到了重视。

2016年,在GDC上介绍了双抛物面技术来对VR性能做优化。#�zO�U

2012年,大多数的智能手机仅支持opengl-es 2.0。

2014年,随着opengl-es 2.0 extention版本的登场,部分旗舰机型开始支持opengl-es 3.0。

2016年之后,支持opengl-es 3.0以上的机型比重急剧上涨。

未来,支持opengl-es 3.1以上的智能手机会成为主流登场。

手游美术中常用的Matcap shader.(Paraboloid view dependency shader)

性能层面的好处:尽管指令不少,实际从性能层面考虑,性价比还是挺高的。

也因2005年Pixologic Zbrush中应用的材质球系统而出名。

上图就是大家所熟知的Shading效果。

性能层面的好处:尽管指令不少,实际从性能层面考虑,性价比还是挺高的。

它主要始于2004年发表的抛物面反射。

优点:运算快(完全代替灯光)

缺点:灯光效果从属于视角方向。

以上是2012年在其它公司游戏中应用的案例。

重要的是制作怎样的Matcap lit-sphere信息来使用。

这里存在多种制作方法,可以用Photoshop直接制作,或者也可以用Matcap creation tool 来制作。

或者,在Zbrush中,用Grab【græb】来制作,本人的话,irradiance【ɪˈreɪdiəns】信息是用Octane【ˈɒkteɪn】渲染器来制作的。

下一页我会简单讲下使用LYS的案例。

不使用PBR Shader,应用反射模型的方法有很多种。

学习Irradiance【ɪˈreɪdiəns】和Radiance【ˈreɪdiəns】的各种运算模型的话,Knald날드的LYS是一款很好的软件。

可以确认坐标系。

在Unity中使用matcap shader并确认。

应用Matcap和反射探针的Shader间的比较。

色相空间虽然略微存在点差异,但通过Photoshop是能够校正的。

不使用Unity的PBR标准shader,使用Unity反射探针函数来实现反射的时候,请给粗糙度贴图乘以一个2.2到2.5左右的常数值。

以上是弥补了Matcap shader缺点的双抛物面映射。

现在,虽然还处于试验阶段,简单来给大家介绍一下。

相比于Cubemap,手机设备性能层面是有优势的。

2015年,Eurographics会议上,Gratin【ˈgrætæn】开发者们发表过实际应用案例。

本人在2015年进行类似的实现预研的时候,看到了这篇论文,看来大家的想法都比较类似啊。

不管怎么说。。

简单的说就是把抛物面镜子放置在正面和背面,来导出反射信息。

跟Cube mapping相比,可能会略有扭曲现象发生,但是看起来并不碍眼。

上图是在Unity中进行坐标系调试的场景。

接下来,使用DOTA workshop形态为参考,构成了Shader Prototype。

以DOTA为例,为MOD用户整理了Artwork document和Shader Document。

设定新的游戏体裁或者美术方向的时候,使用参考游戏的网格和质感信息,以MOD方式为切入点来做试验也是一种很好的方式。

我大致罗列了一下我能获取并且使用的信息。

有几个信息虽然受Opengl es版本的限制,但充分有其使用的价值。

因为中国手机硬件版本更新换代的速度远比我们想象中的要快。:

接下来看下Matcap自定义灯光简略的节点图表。

我们要基于此,寻求思路,校正游戏中被表现的物件的特性,并且要看它在美术上发挥的作用。or enter to open this sec

反正在手机屏幕上看起来并不那么显眼,用阴影的块感来表现立体感也是非常好的方法。

正在试验尝试信息变形的过程。

顶点的法线方向是从其它网格的法线方向中捕捉而来。

它会反应到dot(NL)上面,并且能够生成人为的暗部效果。

但是,要注意的是

用在没有使用法线贴图的游戏数据的时候,是有效果的,如果使用了法线贴图,那么信息就有可能会出错。

其实,本次讲座的重点还是在通过对我们能够使用的信息的变形,来了解我们能做哪些事情。

为简单的Lambert光照模型、matcap irradiance [ɪˈreɪdiəns]和Ambient cube map添加了反射探针和光照探针。

该部分为美术视觉化提供了试验。

在开发试验阶段,一般要先从性能以外层面入手,然后再删除或者隐藏在探索阶段觉得不需要的信息。

在最终定版中,要保证代码的整洁和优化。

从试验阶段开始,到着手面向对象的代码处理,直观性是比较低的。

顶点色可以用多种方法来表现手游的效果。

把一些光照信息用顶点色保存于网格中,来开发Shader。

把Radiosity渲染的信息转换为顶点色信息,可以连接到Shader上。

在手游开发环境中,无法使用多个灯光效果,所以,我们有必要努力使用多个信息来表现出最佳的效果。

它在手游场景中,生成和使用光照贴图是有帮助的。

根据小画面中看到的物体的大小的不同,有些物件把Radiocity light bake的信息是记录在顶点色上,然后在Shader中合成。

在烘培光照贴图的时候排除这一步骤的话,光照贴图区域分配的时候,可以把这部分区域分配给更加重要的物件。

以上是由简单的计算式来构成的Vertical gradient 【ˈvɜ:tɪkl,ˈgreɪdiənt】信息。

其实,使用预生成的信息要比使用Dot product, 对法线向量进行计算要来的好。

也推荐生成使用Vertex position map。

SH信息是由27个信息构成的。对于RGB,记录了9个方向的采样信息,全部保存在了LIghtingData里面。

我们可以使用SH2来获取或者记录它。

编写自定义Shader的时候,ShadeSH9函数是非常有用的,应用权重可以使用SetGlobalFloat来控制。st=507&action=edit

手游开发者在PC显示器环境中进行开发。

有时候关于色感或者光的表现,跟在PC上面看的时候相比,会表现的比较模糊。对于这种现象,我们的美术组通过使用烘培灯光过滤来校正。

从原理上来看,在PBR的Albedo上绝对不能有除了Colour之外的信息,美术层面,有时候也需要脱离原理。

以上是Substance painter 中提供的烘培灯光滤镜。

不久的将来,PBR将会在手游开发中广泛使用。

我们该怎样定义次世代手游画面呢?

其实,并不止意味着PBR的使用,更确切的说,指的是硬件范式更新换代的时期。

随着硬件范式从PlayStation 2升级到PlayStation 4,渲染本身发生了很大的变化。

手机设备也是同样,像Metal 或者 Vulkan等低阶API(Low level)的登场和硬件的发展。以上,我们可以把它定义为次世代。

现在,很多的中国游戏公司也开始使用Substance Painter了。

PBR texturing唯独受环境反射贴图的影响是比较大的,所以工作环境对于结果要做适当的校正。

使用IBL的White Balance和Unity5.6的Look-Dev是很好的方法。

看Unity5.6的Look-Dev或者Substance Painter之前,首先得要知道White balance 。

这一点非常重要。

手游中实现时间变化系统的游戏不是很多,基本使用的环境效果都是中午12点到下午2点,所以,我们需要正确表现出这个时间段的质感颜色。

一般,如果已经对准了中午12点到下午两点,一个晴朗的天气环境中环境光的白平衡的话,在室内,或者夜晚时间的色温,也能正确地表现出事物的色相。

根据环境贴图时间带的不同,白色不一定会展现为白色。

一般TC是5500的话,为了达到材质球标准场景设定,White Balance是一个不错的选择。

确认材质球颜色最常用的方法就是使用Studio Lighting。

但是,类似于Studio Lighting这样的人为灯光环境,在初期研究与开发阶段,工程师开发PBR的时候要更符合Shader调试环境,艺术家应该以游戏中给玩家展现的最多的环境为基准来制作。

希望检查一下Overcast daylight 和 Clear blue-sky sunlight IBL素材的色温度。

天空光比较强烈,White Balance不正确的时候,即使是大白天,也有可能给物体裹上一层强烈的青色感。

可以在Asset store中下载Unity technology提供的IBL素材。

直接使用HDR全景图拍摄图片的时候,用LightRoom和Photomatrix等来尽可能校正White balance 。

请设定色温和色相,即对于Colour的标准渲染场景。

最好的标准场景模板是使用White balance正确的IBL素材和Color checker。

从Unity5.6开始,新增了可以比较由环境光带来变化的Look-Dev界面。

 有必要确认一下IBL环境光的色调,即Colour是否有变更。

LookDev中提供的Tone Mapping最好不要勾选。

手游也可以不使用Tone Mapping,首先,Tone Mapping的算法跟我们打算要使用的Tone Mapping算法要一致,所以,执行基本Colour check的时候,请把它关掉。

一般艺术家如果充分认为灰色调是没有被污染的话,其它颜色是没有问题的,但是根据曝光值的不同,受环境光影响的程度也会有所差别,所以,一定要用正确的曝光值做测试。

除非是特殊情况,否则不要对曝光值做过分的修改。

大家用的最多的,可能就是Substance Painter里面提供的全景图照片。

这些IBL素材有何时的天空光,少量的云,也有太阳光信息和黄土色地表。

这些图已经大致进行了White Balance校正。值大概是5500到6000之间。

基本上Substance painter和Unity3D的不同点就是关于主光的方向性部分。

还有对AO信息和高光反射处理部分的Shader也有所不同。

如果,能接受这部分的话,在理解相互不同点的基础上,是可以还原出类似环境的。

使用Unity5.6的Look-Dev功能,我们要在互不相同的环境以及时间带中,确认我们开发的服装的材质球颜色到底能展现出怎样的效果。

并且,为了某些特殊的场景,我们需要抠掉IBL材料内部的太阳光。

如果,我们要使用白色标准场景的话,Substance Painter制作场景设置也要按照Unity设置的标准场景信息来修改。

由于不同的画面角度和IBL素材的曝光度带来的变化我们也要注意观察。

2015年以后发售的大部分手机硬件都支持PBR。

支持Iphone 5s以上和安卓SDK4.3以上。

Opengl es 2.0 extension中部分机型支持PBR,Tex cube lod( ) , Tex cube bias( ) 这两个在大多数的opengl es 扩展版中都支持。

ddxx , ddyy 大部分是不支持的。

PBR渲染和线性空间渲染、Tone mapping、HDR等都有密切的关系。

结论就是要确保PBR渲染的稳定性的话,推荐使用Opengl es 3.X以上。

接下来这一部分主要讲优化方案的必要战略和要领。

特别对手游图形学,想设计Shader的工程师和艺术家都是很有帮助的。

对于IPC这个专业用语,对艺术家们可能会觉得多少有点生疏。

对我们来说,得稍微了解下IPC和ALU等。

希望大家通过百度和谷歌等搜索引擎了解更多的知识。

XT属于中高档,这次出来的XE属于普及型产品。

减小了核心的大小,TDP属于优化好的产品,支持VR、Vulcan、OpenGL等的最新规格。

未来的智能手机渲染还是很值得期待的。

Full HD渲染对HDR部分做了很大的改善,性能相比于6XT,也做了很大的改善。XE作为普及型产品,相信XT的性能也会十分优秀的。

不管怎样,随着ALU改善和编译器改善带来的命令组的快速执行,也是备受瞩目的。

接下来,来讲讲怎样使用近似值技法,来降低Shader代码的开销。

IPC这个专业术语本身可能对于艺术家来说是比较生疏的。

它作为每一时钟周期指令的执行次数,意思就是每个分支所能执行的指令数。

平常,我们一般会问,有几个Instructor[ɪnˈstrʌktə(r)]

还需要确认使用的指令是在像素Shader中处理的,还是在顶点Shader中处理的。

而且,比起最终用了几个指令来说,我们要关注的是怎样能减少指令,以怎样的方式来减少指令。

还有,根据coding方式的不同,我们要确认汇编代码都否有做好分类。

想象技术公司提供的汇编运作参考论文中也有提到,分好类的汇编代码的运作速度,性能要提高30%以上。

最好要理解计算是怎样转换为汇编来处理的。

以上是经过近似值处理和优化的结果。

我们可以确认,Per-Line Cycle Estimate【ˈestɪmət】 Total是减少了的。

关于指令优化部分,也希望能从其它部分,以其它不同的方法再去了解一下。

但是,因为考虑到PowerVR编译器的特性,除法不要把实数除法换成整数除法来执行。

因为编译器内部指令已经做了数学公式上的优化,所以可能会产生意料之外的结果。

接下来,我们来看下关于顶点缓存对象,美术能做什么优化。

简单点理解就是,为了能快速渲染顶点所拥有的信息集合,我们可以把它看成是从客户端的内存,传送以及保存到服务端即GPU内存的对象。

因此,GPU需要快速的从自身的内存获取信息,并且在硬件渲染管线中完成绘制。

我们需要知道顶点缓存的属性信息为什么能最小化的话,要做到最小化呢。

最新的GPU相比于2000年的GPU来说,绘制的速度有了质的飞跃。

不管怎么样,在艺术家层面的话,顶点缓存对象的尺寸还是能减尽量减。

我们试着罗列了顶点缓存属性信息所拥有的信息。

所有的这些信息作为基本的结构体,从网格开始,构成了整个游戏数据。

我们需要给艺术家提供对这些信息进行压缩的方法。

大部分的艺术家仅仅对三角形的个数有兴趣,如果能理解这一点,对于优化是很有帮助的。

有十年以上工作经验的3D模型师的话,对这方面应该是要了解的,但是知道的人却很少,对于我们亚洲的开发者来说,这一点确实值得引起注意。

尽可能还是要节省顶点缓存。

接下来我们来看下网格的顶点数量最终会给VBO尺寸带来怎样的变化。

上图的UV Shell是处于分开的状态,我们可以确认在Unity游戏引擎中计算的顶点数量是增加了的。

在Unity游戏引擎中进行了确认。

左侧是UV Shell是一个的时候,右侧是UV Shell为两个的时候。

各自分别标记出了顶点数量为114个和120个。

在最近的引擎中,决定是否能够合理地进行三角形绘制的indices[ˈɪndɪsi:z]处理已经毫无压力。

接下来对手机上发生的法线贴图的Artifact[‘ɑ:təˌfækt]来做下分析。

打包到手机上的时候,法线贴图的高光部分会产生问题。

首先,如果先确认Shader代码的话,PC上使用的是DXT5nm。但是,在其它平台,对于packednormal.xyz,只做了remap【ri:ˈmæp】 -1 to 1的处理。

实际,我们确认光照模型会发现,Standard shader最终是会进行归一化处理的,但是其它如blinnphong等,是不进行归一化处理的。

发生如上图所示情况的时候,要先确认几个根本信息。

顶点法线和切线空间法线信息因为进行了线性插值,初期制作的信息中的部分即网格进行了修改,要确认顶点法线的向量是否有发生变更。

这部分如果在Shader里面进行归一化处理的话,大部分能解决。

但是,我们的宗旨还是希望在像素Shader中,能控制因像素法线归一化而产生的开销。 

以IOS为基准,对几种情况做了视觉评价。

有问题的法线贴图,我们已经可以确认,艺术家在Photoshop中,对切线空间信息进行了调整。

然而,在贴图上不管对法线贴图进行怎样的归一化处理,关于PVRTC压缩问题还是无法解决。

虽然,在Shader上进行简单的归一化就能够解决,但是,增加了一个命令语,每次对像素的法线进行归一化的本身是需要很大的运算量的,负担比较大。

最终,把美术加工的贴图以原来的值进行归一化,贴图尺寸变更为原来的一半之后,使用24位真彩色。

因为进行了降阶采样,所以小的细节会有所丢失,但是,实际在4.5英尺,5.5英尺的画面中,那些小的细节,原来就是没有意义的。

以IOS为基准,对三大具有代表性的格式进行了测试比较。

RGB PVRTC 4位,尺寸1024,进行了归一化,容量为0.7兆。RGB ASTC 4*4 block压缩,尺寸1024,进行了归一化,容量为1.3兆。

最后,真彩色24位,尺寸512,不增加命令,容量为0.98兆。

即使增加归一化命令,如果对游戏表现效果没有影响,那就没有问题,但是,如果游戏本身要处理大量的像素Shader运算的话,24位真彩色也是值得考虑一下的。

Categories: speech

Tagged as:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s