《闪耀暖暖》如何实现顶级美术表示?先看看叠纸怎么做3D建模吧

来自 葡萄谷游戏网>2019-05-17
深度

[ 葡萄谷游戏网原创专稿,未经允许请勿转载 ]

《闪耀暖暖》如何实现顶级美术表示?先看看叠纸怎么做3D建模吧

5月10日至5月12日,Unity全球开拓者大会Unite Shanghai 2019在上海召开,期间诸多技术专家离开现场为开拓者分享最新的技术和制作经验。

叠纸游戏技术中央技术总监张霁和美术总监柳丛,在大会期间停止了“闪耀暖暖技术分享:2D?到?3D?的进化与丛熘路”的主题演讲,初次对外分享了这款拳头产品在制作时碰到的难题与解决计划。

d1.jpg

如下为演讲内容整理:

大家好,很荣幸在Unite 2019大会中分享《闪耀暖暖》的思绪与劳绩。

这次分享将闪叫∥夜餐迪郑叫张霁,从事游戏行业8年了。2016岁首年月加入叠纸,介入《闪耀暖暖》的研发,本日我会给大家分享一些引擎自定义和工作流的内容。

另外一名演讲者是柳丛,他有十几年的开拓经验,之前介入过量款次世代游戏的美术研发,本日他将带来一些美术效果的研发心得。

对付《闪耀暖暖》,这是叠纸的第二款Unity项目,咱咱咱们用的引擎版本末了是Unity5,去年进级到了Unity2018。《闪耀暖暖》是暖暖系列的第四代产品,也是叠纸的首款3D手游。

项目开拓后期,咱咱咱们阅历了一些技术和作风上的迭代,起初它甚至并不是一款3D游戏。初期的尝试偏向是基于spine来做360度旋转,后面很快转向3D偏向。

这个时期咱咱咱们更多考虑的是如何用卡通渲染还原2D暖暖,如何还原2D暖暖的线条,让3D线条有色彩粗细虚实的变更,这是其时做到的效果。在2016年下半年的时候,对卡通渲染的研究进入了一个瓶颈期,因为想做到期望的品格,请求非常的高,对移动平台压力过大。

d2.jpg

同时3D线条的效果与2D暖暖仍然有较大差距。即使这个差距可以或许或许持续缩小,卡通渲染导致的画面过于相似也会让新作缺少独特的吸引力。

这迫使咱咱咱们回到原点思虑成就,换装游戏的基本究竟是什么?咱咱咱们的谜底是漂亮的衣服和多样的穿搭体验。咱咱咱们将其拆分成几个技术点:衣服的极致细节、穿搭的从容度,和艺术的传承和创新,这也是咱咱咱们这次分享的目录。

首先是细节,暖暖系列的基石。3D游戏要想到达足够高的精度,制定正当的美术规格是重要的基础。

咱咱咱们发现模用媸机能的影响并不是很大,影响较高的是贴图的分辨率。这是应用1024和2048贴图的表示效果,和相应的AB占用和渲染耗时。可以或许或许看到即使2048在镜头拉近的时候仍然无法到达咱咱咱们盼望的精度,而跟着分辨率的增长,包体内存压力敏捷增长,也不利于持续更新。

d3.jpg

为了解决这个成就,咱咱咱们应用多层UV和多层贴图拼合,这是到达的效果。精度有了显著的晋升,相当于4096的贴图。这个例子里应用了四层UV,四层贴图,总的占用比1024的单张贴图还要小。

《闪耀暖暖》的包体目在是2G多,有一半是3D的容量,此中一半是贴图。如果把这部分全按4K重置,包体会到达10多G。接近一款3A游戏了。同时加载多张4K贴图更会间接撑爆手机内存。应用多UV其实也有弘大的价值,渲染耗时从6.85毫秒到8.67毫秒,增长了26%。

咱咱咱们对UV的优缺点做了总结,除了精度和包体优势,另有一个好处,便是在制作实现后,有较大的后期调剂空间。缺点方面,除了pixel shader负荷增长较多,多UV会导致贴图数较高。Unity默认采样器的数目等于贴图的数目,如许就请求节制单个材质中贴图的应用,不能超过16张。

d4.jpg

除了硬件和机能上的成就,多UV对付制作也有较大影响。设计时必要考虑图案计划,而制作时必要根据环境对UV停止调剂和拆解。例如这个比较简略的裙子,它的UV是如许的。从另外一个方面,UV拆分过于机动,也会导致这个流程难以履行和流程化。

d5.jpg

针对这个成就,咱咱咱们制定了一套工作流来停止模范化,首先是色块填充构成底色,平铺布纹,接下来印花,末了是作风化处理。对付复杂的打扮,可以或许或许机动变通,实现精度的最大化。

d6.jpg

对付一些用贴图也达不到预期精度,咱咱咱们会颠末过程程序化办法停止细节弥补,比如珍珠和宝石等。

d7.jpg

作为例子,分享一下程序化闪点的实现办法。

首先,这个是咱咱咱们期望闪点可以或许或许做到的内容,其实便是一些随机散布的点,点与点之间有一些表示色彩和大小的随机性差异。美术盼望能无便利直观的节制办法,比如用密度贴图节制哪些地方必要有更多的点。同时,点的大小散布也能以类似的办法停止节制。其次盼望有稳固靠得住的闪烁,类似高光的表示。

d8.jpg

闪点算法的基础其实很简略,其实便是在UV空间上天生棋盘格,这其实是一个2D的成就,咱咱咱们可以或许转化成平面停止考虑。每格的索引便是随机数种子,应用这个随机数种子,可以或许天生偏移量、缩放和色彩和相位。

d9.jpg

接下来是填充格,可以或许或许间接填满便是方块。或许柔化处理成菱形或许圆。接下来是根据相位和预设的密度阈值停止剔除,到达密度节制。

d10.jpg

处理偏移的时候,会出现越界的成就,就会出现截断的环境,看起来比较奇怪。

d11.jpg

处理越界闪点的办法,便是跟着点随机缩小,把偏移量限制在格内。但是如许过于规律,几乎看不出什么变更。

d12.jpg

后来咱咱咱们发现只要限制点的中央在格里就可以或许或许了,如许一共是自己加周围8个邻居,共9次闪点相干的计算。可以或许或许利用一些环境来归并计算。

d13.jpg

因为点的中央不能出框,左邻居只会影响以后格左半边的像素,右邻居只会影响以后格右半边像素,阁下两半边可以或许或许归并计算。同理,高低两邻也可以或许或许合批计算,四个对角也可以或许或许归并计算。高低阁下加边角加自己,只必要计算4次闪点相干计算。

d14.jpg

别的,还可以或许利用GPU的向量计算能力进一步削减计算量。对付偏移等float2计算,可以或许两两归并为一个float4;对付缩放等矢量计算,可以或许四组归并,如许最终的开销略小于两次完备的闪点计算。

d15.jpg

末了是闪烁处理,咱咱咱们的处理办法是利用刚才随机天生的相位值调剂nh,停止高光计算。同时用一个同一的闪点光滑度节制闪烁程度。

d16.jpg

因为咱咱咱们应用了多UV,加上刚才各种材质特性,还必要实现分歧光照模子,如许就会导致咱咱咱们的shader变成一个庞大的uber shader家族,如何办理shader材质是一个重要的成就。

在工作流方面,一个自定义的材质面板是非常好用的对象,它可以或许在同一组shader中停止切换。同时可以或许开关feature,根据特性集来静态调剂面板,还可以或许结合自己的对象停止机能阐发、监控和预警。在发己蛂untime方面,海量变种对编译速率非常敏感,咱咱咱们去年把引擎版本从5.6进级到2018,因为2018修复了5.6的重复编译bug,同时大大晋升了shader的编译速率。

接下来介绍一下光照体系,由三部分构成,预烘焙的环境光、主灯和轮廓光。

咱咱咱们盼望有更丰富的光照变更,单LightProbe的效果太单调,没有场景,只能烘焙一个预设的Cubemap。咱咱咱们的解决办法是沿竖直偏向增长LightProbe采样点,让美术增长点光源和偏向光作为额外光源,将其间接关照和Cubemap一路归并到环境SH,运行时根据世界坐标的高度在vs中停止插值计算环境光。

d17.jpg

轮廓光方面,可以或许或许夸大角色轮廓,增强体积感。

在应用轮廓光的时候,发现很多衣服存在漏光的成就,这是因为轮廓光没有ShadowMap计算。注意到漏光地区重要是局部形体,咱咱咱们可以或许或许对Mesh静态布局停止估计算。在模子导入在T-pose下后计算网格每个顶点的遮挡信息。对付每个顶点,在其球面上发射若干条阴影光线,停止碰撞测试。

对付每条阴影光线,将其转化到对应顶点的切空间,并将阴影测试的结果累计入2阶SH中。最终结果是4个浮点数,可以或许或许把结果存到顶点色中。运行时把轮廓光转换到切空间采样SH停止遮挡判断。

d18.jpg

这个是做到的结果,左侧是有轮廓光的,中央是轮廓光+遮挡,可以或许看到漏光现象大为缓解。因为SH近似存储统统遮挡信息,静态环境下也可以或许工作,即使增长轮廓光,也可以或许用这个计划停止同一解决,机能开销不会显著增长。

d19.jpg

下面是阴影处理,因为Unity5的阴影不支撑半透明物件投影和受影的,咱咱咱们自定义了shadow pass。同时根据相机与人物的相干可以或许晋升ShadowMap的利用率。咱咱咱们把人物的包围体按竖直偏向细分,根据相机和每个小段的相交结果,调剂的投影矩阵。

此处下侧的图像是Shadow Map的环境,右侧是关闭自顺应阴影,左侧是开启,可以或许或许看到阴影品格取得了相应的晋升。

d20.jpg

角色的面部是一个重点存眷地区,头发分外是刘海处的投影如果用不透明办法处理会显得过于生硬。咱咱咱们的处理办法是应用Screendoor Depth,每4×4像素为一个tile,每像素根据透明度值来顺序丢弃写深度操纵。可以或许或许看到末了获得的ShadowMap,头发末端有一个点阵的状况。再用一个单独的四分之一大小RT,对皮肤做屏幕阴影蒙版,再停止模糊处理,以获得半透明的阴影效果。

d21.jpg

这是末了实现的效果,我专门挑了几个在刘海部分模子非常接近的头发,仅有贴图差异较大,可以或许看到左边一个,它的半透过渡比较柔和,所以它的阴影也就会淡一些。而右边的实体地区比较多,所以阴影比较锐利。

d22.jpg

对付正常投影难以表达的微小部件,或许程序化天生的模子,咱咱咱们会调剂bias,以到达强化阴影的效果。

d23.jpg

接下来一个重要的点是穿搭组合的从容度,也是换装游戏可玩性的支撑。

d24.jpg

因为暖暖系列中衣服版型设计多种多样。咱咱咱们的绑定设计分为基础骨架和扩大骨架两个部分。基础骨架确定以后,可以或许在其基础上编辑人物的碰撞体设置设备摆设,而扩大骨架则必要设置其物理参数。两部分数据合在一路,在运行时,由物理体系计算其静态效力。

d25.jpg

因为移动平台机能有限,暖暖系列衣服复杂度又比较高,即使是PC平台也无法完全应用布料体系来做到咱咱咱们想要的效果。咱咱咱们的物理体系是一个链式迭代的质点体系,粒子之间可以或许添加弹簧,用这种办法可以或许做到简略的布料模拟。

d26.jpg

对付碰撞处理,粒子和弹簧都可以或许或许作为碰撞处理对象。咱咱咱们的碰撞体有两类,第一类由跟随基础骨架,包含平面碰撞体和胶囊碰撞体。胶囊碰撞体可以或许或许调剂两端的大小,让它更贴合人的形体。

在处理腿与裙子的碰撞时,当腿的移动规模较小的时候,可以或许或许正确往外推裙子。而腿移动量较大时,确炊向内压裙子。咱咱咱们的解决办法是用弹簧偏向和粒子链偏向的叉乘向量,作为弹簧的碰撞主偏向,当弹簧与胶囊体发生碰撞时,优先朝主偏向那一侧推。如许效果加倍稳固。

d27.jpg

第二类碰撞体跟随扩大骨架。根据打扮的骨骼链和邻居布局可以或许构建出虚构的网格碰撞体。下图蓝色的点是以后的物理粒子,线是物理骨骼链和邻居布局。咱咱咱们可以或许将其转换成黄色所示的虚构网格。

在运行时,可以或许或许查找粒子所最接近的虚构网格中的三角形,用这个三角形作为平面碰撞。咱咱咱们应用八叉树办理网格碰撞体中的统统三角形,便利运行时疾速查找。网格碰撞体的三角形比较大,过渡比较剧烈,在某些环境下可能会抖动,咱咱咱们允许在运行时静态取最近的四个三角形,根据距离权重插值停止平滑处理。

d28.jpg

网格碰撞体的另外一个感化是可以或许处理部件间的碰撞,咱咱咱们为每类部件可以或许取一个别名,粒子设置它与哪个别名停止碰撞。如图咱咱咱们设置头发与“裙子”停止碰撞,接下来咱咱咱们切裙子的时候,只要颠末过程别名,就可以或许静态寻找到以后所穿的究竟是哪个裙子,这个裙子针对的网格碰撞体是怎样的,可以或许实时调剂头发与网格碰撞体的碰撞。

d29.jpg

这里我录了一个疾速播放的视频,可以或许或许看到美术如何用物理编辑器停止可视化编辑和最终的制品效果。

d30.gif

除了物理体系,《闪耀暖暖中另有美术修正的办法,如图中这个外套,形状复杂且不规矩,如果用物理和碰撞表示会非常差。咱咱咱们对骨骼用关键帧rbf驱动。下面是四个关键帧,手臂分歧朝向环境下,其余五个骨骼杂的地位与旋转的相干。在运行时,可以或许或许根据手臂的实际朝向,在这些关键帧中线性插值。

d31.jpg

另外一个例子是挂点体系,阅历多轮迭代以后,如今的办法是逐部件组合停止调剂,可以或许节制分歧组合的挂点对象、地位和旋转。

d32.jpg

接下来由柳丛给大家介绍一下美术上的传承与创新。

d33.jpg

很高兴本日能来这里为大家分享,本日我为大家介绍下开拓过程中的一些重点开拓内容,我的标题是“传承与创新”。本日会讲到《闪耀暖暖》比较重点的地方,便是布料的材质效果开拓,另有2D作风的表示。

颠末过程认知创新来打破高度,颠末过程流程创新来停止自我改革。这张纹理看上去非常简略,但其实并不简略,我给大家讲讲。

d34.jpg

首先,做一件工作的时候确定要进入一个比较好的状况,我其时的状况是几乎是走火入魔了。经常会蹦出一句:“这材质很PBR!”有时候陪我老婆逛街看到衣服就想摸一摸,搓一搓,拍一拍照。但这个相片很显著是摆拍。

d35.jpg

那段光阴,我手机里几乎都是如许的状况。因为我觉得很多东西必要基于真实去停止考量,基于真实对它停止美化和改良。艺术毕竟是源于生活而高于生活的存在。

d36.jpg

在网上咱咱咱们可以或许或许搜集很多自己必要的资料,但是网上什么资料都有,有好的有坏的。所以要做出高品德的东西就要控制高品德的信息来源,毕竟眼界决定地步。

d37.jpg

那么收集这么多资料干嘛呢?总不能是占内存的。所以要把资料变成有价值的信息。我会对以上我收集的资料停止一些提取,然做一些分类,然后做简化信息,然后做一些重点提取。

我把一些资料按照自己的阐发提取,最终把它汇集成为了一个二维编织图。我认为编织这块是构成纹理的非常重要的部分。大家可以或许或许看一下,根据分歧的体例办法,纹理效果差距是非常大的,咱咱咱们可以或许或许先不要看这个图片上的色彩的变更。

d38.jpg

其实如许编的办法有非常多种,可能我如今研究到的程度,也就不到百分之二三十。

d39.jpg

一些重要信息已经整理进去,拿就要先试试看,刚开端我抉择的是一个比较快捷的办法,因为用建模制作纹理,比较直观,获得的贴图精度也很好,但是也存在很显著的短板。

d40.jpg

这是一个法线贴图的效果,成就很显著。制作本钱非常大,后面的持续修改本钱也是非常大的。但是有成就是件好工作,证明另有很大的优化空间,所以要在如今的流程上做一些显著的改变。

d41.jpg

我有几个办法,一个是从繁到简,一个是从慢到快,一个是从难到易。可以或许或许看到旁边的瑞士军刀,看上去非常臃肿的感觉。

d42.jpg

毕竟工欲善其事,必先利其器,所以咱咱咱们要做对象上的优化,这时候有一个叫程序纹理的办法进入了我的视野中。

d43.jpg

其时尝试了下这个叫Substance Designer软件,来做程序纹理。这里举个比较简略的例子说明下,这个软件是颠末过程线性的办法对材质停止办理,我可以或许在这个线性的流程做删除和添加调剂来改变结果,但是如许就必要一个很好的尺度。所以在制作的时候必要分区,如许修改起来会更便利,在动一个地区的内容就不会影响到其余地区。

d44.jpg

游戏跟着游戏行业内各种主动化流程的到来,应用如许的流程,未来可以或许或许更快的融入主动化的工作流,加快项偏向开拓效力。

这里大致给大家做了一个简略的范例,我其时做这个纹理的时候分了三层,一个基础层,一个随机层,还做了一个细节层。这是实现效果的渲染图。

d45.jpg

这是我其时做的第一层,做了一个简略的编织效果。

d46.jpg

再颠末过程一张随机的机理,针对上面的纹理,做了一些随机性变更。可以或许懂得成,这个布在应用一段光阴以后会发生磨损,导致它有一些类似于如许,有些地方层次比较深,有些地方层次比较浅的随机感。

d47.jpg

最终我在这里,我加了一些线头的效果,加什么东西都不重要,重要是顺序相干。

d48.jpg

实现版便是刚才看到的渲染图的效果。这里还做了一些其余纹理的效果,做这些纹理的时候,我只针对第一层的纹理层,做了纹理图案的修改,后面两层我没有做任何的修改。

d49.jpg

试错在研发过程中是非常重要的一个关键,试错必要很多手腕去做,比如说测试环境,必要结果去论证。

d50.jpg

其时我应用了如许一块布料检查我的布纹效果。其实咱咱咱们只必要此中一部分,咱咱咱们必要几个特质,一个是近景,一个是中景,一个远景。在分歧空间下,分歧的纹理朝向,就会在这个载体上很清楚的显示进去,如许咱咱咱们就知道纹理效果的好坏了。同样对这中Ч咱咱咱们也必要用更多的可能性对它停止验证。

d51.jpg

比如这里,我弄了一个黑灰白的布料,另有粗糙的光滑的,来验证它的结果,是否相符咱咱咱们的请求。

d52.jpg

d53.jpg

如果必要更多的验证结果,可以或许或许尝试如许的色块变更,但是如许的结果会比较累。

d54.jpg

再介绍一下咱咱咱们材质编辑思绪,ABCD各代表每个材质模块。颠末过程分歧的组合,也就只要11种变更。但是咱咱咱们在每个材质功效下做做了很多的编辑情势,所以如果是如许的话,那咱咱咱们的变更就有600多种。咱咱咱们在Unity里开拓了一套从容度非常高的材质编辑对象,是如许的,相当从容。

这些体系开拓,咱咱咱们会编辑出非常多种类的材质。如今咱咱咱们里面的材质数目已经极其庞大了,而且咱咱咱们还在不停扩充材质的范例。

d55.jpg

这里再讲一下咱咱咱们的作风成就,作风的话必要一个最具有代表性的特征,咱咱咱们其时在选作风的时候抉择了笔触效果,这也是暖暖系列独有的作风。大屏幕可能有一点曝,可以或许或许看到3D的这个效果,胸口类似于笔触的变更。

d56.jpg

这里是一个制品的效果,咱咱咱们做了一层类似于AO的办法,在上面绘制了咱咱咱们的笔触效果,然后添加到其余的贴图在上面。

d57.jpg

打破的话,咱咱咱们做了很多分外的打破,比如说贴图精度,刚才张霁也介绍了贴图的精度办法。另有特别材质的表示,在开拓对象上咱咱咱们也停止了改革。

d58.jpg

这里可以或许看一下,这是咱咱咱们目前的京剧衣服的细节表示。如今咱咱咱们这个精度,几乎可以或许放在真人高度的显示器上面去,让玩家可以或许间接观看。这边咱咱咱们做了比较分外的材质,比如镭射的材质效果,为了研究分外材质,我也在搜集很多类似的资料。

d59.jpg

d60.jpg

咱咱咱们近期也加入了3D扫描如许的流程,可能3D扫描最先源于工业行业,会用它做逆向工程。在游戏行业,如今也开端被越来越多的人存眷,颠末过程扫描什物,获得一个模拟的3D模子。

扫描对咱咱咱们来说,意义便是两点,一个是还原真实,一个是高效产出。咱咱咱们操纵的时候,发现扫描模子几乎不行能间接应用,很多东西必要修改,但是扫描进去的东西有一个相符真实的外轮廓,这个东西,很多美术制作职员在制作的时候很难抓准。但是对咱咱咱们来说这个不是最重要的,产出对咱咱咱们来说才是非常重要的,我发现投入制作后效力晋升了700%,不只提高制作效力,也低落了反馈本钱。

这是咱咱咱们应用3D扫描仪的实录,非常快就可以或许或许获得所扫描物体的高模模子数据。

d61.jpg

本日要讲的内容就到这里了,谢谢大家!

附媒体采访:

葡萄谷游戏网:为什么叠纸会考虑尝试2D到3D的改变?

张霁:咱咱咱们发现,很多玩以诮触2D版暖暖的时候,会对里面的一些衣饰细节和图案非常感兴趣,会去观赏官方大图上的细节,针对这种诉求,咱咱咱们一开端就盼望可以或许在新作中把细节的表示做的更好,能让玩以谟蜗防锩就可以或许看到统统细节。

另外,在以往2D情势下,玩家看到的衣饰只是一个正面视角的形象,但大家也想知道侧面、背面的设计。因此咱咱咱们盼望颠末过程3D的表示情势,让玩家从容观赏到人物和衣饰的每一壁,呈现出加倍鲜活的视觉效果,给玩家带来更好的体验。

葡萄谷游戏网:在制作过程中碰到了哪些挑衅,实现为了哪些打破?

张霁:技术的挑衅有蛮多,比如咱咱咱们对付细节赓续打磨的过程;又如因为3D展现更全面导致制作时不只要考虑穿着成就,还要考虑发饰与头发的交互相干;延长进去另有裤形和靴子之间的相干。很多细节都必要做比较多的基数调剂。

打破便是实现为了大批的细节表示,比如让同一个发饰共同分歧的发型会有分歧的佩戴相干和办法,在同时穿喇叭裤和靴子时,裤腿会主动塞进靴子里等等。

葡萄谷游戏网:《闪耀暖暖》的开拓给叠纸游戏的制作团队带来了怎样的提高?

张霁:《闪耀暖暖》是叠纸的首款3D游戏,在这之前其实叠纸没有3D开拓的相干经验,也没有3D开拓相应的团队。在这款游戏的开拓过程中,咱咱咱们打造进去一支有履行力、可以或许到达咱咱咱们偏向和制作请求的团队,积攒经验以后,就可以或许挑衅更高的偏向。

文章评论
葡萄谷游戏网订阅号
友情链接:cad教程网  中国九年教育网  装修第一网  机械科技行业网  金华口腔医学网  大连乐活资讯网  金融时报网  智迪污水处理新闻网  塑料在线网  秋水山庄网