鹰角网络黄一峰、海猫:《ob电竞》如何实现3D和2D结合?
ashkeling报道/2020 年 11 月 16 – 20 日,中国 Unity 线上技术大会以直播形式召开,为广大开发者带来了一场前沿技术和优秀案例分享的线上盛会。在19日的游戏专场中,鹰角网络的首席执行官黄一峰以及副总裁海猫现身其中,为同行们分享了鹰角网络明星产品《ob电竞》的开发历程,以及在产品开发过程中3D与2D的结合方案。
以下是演讲实录:
海猫:大家好!我是《ob电竞》制作人海猫络合物。这次的分享还会请黄一峰和我一起来讲。
今天我们要讲的主题是初创团队的曲折开发之路,主要会结合《ob电竞》的3D和2D的结合方案来进行一些分享。由我做前面的一些关于最早概念的介绍,由黄一峰介绍一下具体我们3D和2D结合方案中遇到的问题和具体的解决方案。
首先自我介绍一下,我是海猫络合物,我是《ob电竞》的制作人,也是上海鹰角网络的联合创始人。我主要会负责游戏的UI和一些部分。
简单介绍一下《ob电竞》。《ob电竞》是2017年鹰角网络创立之初,立项的第一款游戏,我们也是在那个时候进入了正式开发,在2017年的12月到2019年的3月一共进行了3次测试,在2019年的5月1日终于迎来了全平台的公测。目前《ob电竞》是鹰角网络唯一一款作品,也是我们创业的第一款作品。
这款作品相对来说我们注重的是独特的风格和视觉的表达。由于我们的游戏玩法和视觉表达都有较强的自我风格以及较高的质量,也在上线的时候获得了AppStore的特别推荐。
这款游戏具体的玩法可以从图中看到,它是一个由策略、塔防、RPG相结合的玩法,是采用Unity开发的,同时也是考虑到技术的实现,我们采用了一个2D和3D相结合的表现形式。在角色上我们是采用了日式的一个二次元的表达手法,但是不同于大部分的二次元游戏,我们的角色的一部分元素表达和故事世界观以及场景概念设计上的风格都是偏向于写实的。
可以看一下我们最早原先设置的时候是左边一张图,这张图是我们当时用Unity开发的原型,可以看到与右边目前我们游戏的实际画面是有较大差距的。也是借助与Unity相对的便利性,我们能够在早期进行一个原型的实现,我们采用了一些临时的素材将我们的很多想法付诸现实。
考虑到了一个问题,为什么我们当初最早开发的时候会使用Unity?除了我们自身的经验之外,我们当时也会有一些现实的原因和一些设想,让我们选择了Unity这款引擎。
2016年的时候我和我们的主创黄一峰在家里构思作品,当时我们需要尽快一个大致的共识,为了《ob电竞》的具体风格而定下早期基调。我当时发给了他一张图,就是我们最早奠定世界观的一张图,在这张图之后,我就说我已经准备好开始了,黄一峰当时也回答我说好,那么立刻开始把我们的作品进行具体的实现。
当时刚开始肯定会遇到很多的困境,对于我们来说,当时我们的困境非常之多,尤其是我们很多是大学刚毕业,有些是从业只进行了一个项目,所以人数非常少。面对我们一些具体的情况,我们也做了一些具体的分析。对当时的我们来说有一些点是非常明显的,比如我们团队较小,因为我们的状态是一个应届毕业和从业时间不长的状态,我们当时创业团队人数也非常少,只有4到6人,至今的情况也不多,并没有像一些创业团队那样可能带了大量的资金或者是大量的团队来,同时,我们自己也是平时接触的作品非常之多,所以对于第一款创业的作品也是提出了很高的质量的要求。
但是很明显面对高要求,我们又没有较好的技术积累去实现心目中非常理想的游戏作品,缺少一些开发经验,所以,我们当时还需要面对的是缺少经验,又对自己的要求高,那么应该怎么实现?还有一个隐性的条件就是当时的游戏市场变幻莫测,即使是现在也是变幻莫测,但是当时对我们来说没有更多的技术积累,所以会更加不清楚自己应该往哪个方向发展。
我们对这方面也是进行了一些思考,具体看一下当时的情况。我们当时也是非常拮据的,在一个小的公寓内进行开发,大家有种田园牧歌的状态。人员比较少的时候我们也发现团队中没有相对来说成功3D项目经验队,我们在这个基础条件下最初不会考虑3D开发的部分,但是很明显我们又想去做那方面,所以我们当时做了一些妥协。比如我们将我们的地图分成了3D。
第二个是我们对质量要求比较高。从现在来看《ob电竞》整个作品的调性中包含了许多我们想要追求的点。
比如从这张图上可以看到根据这个圈的大小涵盖范围也可以知道我们许多点是相辅相成的,可能缺一不可,尤其是以日系角色美术为核心,写实风格设计辅助的一个基本美术框架,之外还有一个世界观故事的设置。
我们自己追求另外一个重要的点是有乐趣和深度的game play的部分。除此之外还有我们的品牌形象、游戏运营和自媒体的风格,我们非常想在作品中实现这些点。
从现在来看,《ob电竞》的整体项目有比较多的点上是往写实方向走。我们当时是采用了自己能够实现的方式去完成我们的作品。比如刚刚提到了一点,我们通过相对偏日系一些的二次元的风格实现我们角色的表现,但是我们想更多地追求一些写实风格的东西,我们在整个故事的框架设计之外向外推导往写实的方向走。
所以我们那些活动有一些设计,让它显得更加自恰,能够符合世界观,也能更加符合现代设计。从角色到故事,再从故事到世界观,有一个风格的推演,越来越写实,越来越偏向我们想要追逐美术的写实性表达。
因为我们过去活跃在同人圈,一些创作圈中也尝试去创作过一些同人游戏,所以对自己,不是说简单做一个作品就结束了,我们还是希望能够实现一些对自己的超越。很明显的在这些方面都对自己有了比较高的要求。但是,过去因为同人游戏或同人本的载体相对来说还没有面向那么多的用户,没有影响多那么多的读者或OB欧宝体育电竞官网,自然要求会变低。但是,我们现在接触的领域更大,所以我们对自己的要求也会变高。
在种种情况之下,我们自己心中想做的作品确实如图上所说的一些,就像《ob电竞》,我们未来是想尝试往3A做,但很明显的自己知道当时的能力水平是没有到这个程度的,是做不到这种程度的,我们现在需要找到更加现实的方法完成这一系列。
后来通过我们的创作对这个项目进行了一些早期的规划,包括在图中能够看到,就以及我们最早对概念的构想,也得益于我们当时的概念构想形成得比较快,后面就对自己的风格把握得比较牢固。
在此基础上,另外一条线也能顺利地铺开,对玩法进行探究。其实可以看到当时的情况,我们几位成员,还有其他的核心成员这边没有列出来。我们列举了一些在公共场合露过面以及大家可能比较熟悉的成员。
我们每个人都会发现对自己熟悉的领域都有较高的要求。比如我自己需要追求一个比较优秀的视觉设计风格,而黄一峰会要求需要技术选型、品质稳定、可扩展,他对于程序方面有较高的要求,而RUA负责我们的玩法策划,关卡策划,他对自己的玩法深度要求也会非常高,而负责美术总监的唯老师对美术品质自然是有非常高的要求。还有其他的成员也有其他的要求。在这些要求的结合之下,对于当时的团队情况来说其实是非常艰巨的,如何在一个我们自己都不太清楚的该是怎么样的项目中实现这些要求,就会遇到很多的问题。
总结下来,我们当时面临的一些困难具体的情况,小团队只有4到6人,资金也比较少,没有足够的资金去招人或铺开外包,或者是招募更多人加入设计,对质量尤其是对美术有着较高的要求,这样我们在3D、2D方面也会产生一些冲突。更关键的是,虽然我们有过成功的项目经验,但是大家都很年轻,尤其是3D开发相关的一些经验非常不足。
当时对于3D和2D来说有明确冲突,那我们究竟该怎么做呢?作为一个日式画风,以角色为主具有高美术要求的作品来说,3D项目的方向可能对我们来说非常不现实。因为3D项目通常需要更多的美术资源、人手和资金,而通常也需要大量的时间,还需要大量的投入。我们在没有这些技术的情况下很明显是没有办法实现这些。但是,未来也希望向3D做一些铺垫,所以当时没有完全放弃3D方面的探索,大家在图中能看到,我们在关卡方面是采用了一些3D,想做一些技术积累,让我们未来能够更好地接触3D方面的开发。
我们也会看一下早期的图,我们当时在自己的案板上对游戏最早的风格、玩法进行了很多的探索。左边是一张非常不太清楚的图,从图上能看到网格化这个设计最早就提出了,大家可以看到中间有一块菱形的场地,这是我们最早关于网格和地图的设置,我们也遇到了一个问题就是45度角和90度角该如何排布的问题。后面我们尝试做了概念设计,通过一些快速的素材堆积和简单的探索把我们想要的游戏的感觉尝试做了出来,而这图中有些临时素材与最后的成品是有差距,可以不用管它。从这张图中可以看到我们最早想要实现的感觉,在这张图中得到了探索,并且一定程度上影响了我们后续游戏的制作风格。
当时在这个情况下,90度角的网格化的设计已经有雏形。当时也想通过这个更好地探索我们的游戏,在这种情况下Unity的优势就会发挥出来。我们当时确定了游戏以什么形式发布,我们当时瞄准的是手游这块,很明显跨平台让开发的可能性变得更加多样,这是Unity的一大亮点。
当时的情况是Unity的社区相对完善,它能够让我们在一个非常初创的缺乏经验的团队里找到比较好的解决方案,让很多的开发困难迎刃而解。同时,以Unity,3D开发的游戏项目,哪怕是软件方面成功案例是相当之多,能让我们找到一些技术参照,我们该采用什么样的方式开发我们的作品,或者说我们未来能够做到什么样的程度。同时,优秀技术支持也让我们想实现的新的东西有更多的可能性。还有一个最关键的就是有很多的小型项目在Unity的帮助下能较好地完成。U3D对于小项目的开发友好性我们认为非常强,这也是让我们选择Unity的一个大原因。它作为一款成熟的跨平台商业引擎对我们来说是当时最好的选择。
在选择完采用的方式进行开发后,整个过程仍然有许多困难,可以用曲折前行这个词来形容。我们当时用Unity进行了一些快速的原型开发,除了刚才说的版本以外,还有一些别的版本。
我们最早出现了两种原型,一种是我们目前采用的,左边这种,和现在《ob电竞》游戏玩法较为接近,我们叫做5×5的模型,它和传统塔防不太一样的是场地非常之小,采用的角色数量可能较少,并且对于方向和网格的差异性设置要求相对之高。
右边我们也采取了一个模型,有点类似目前常见的传统塔防,地图相对之大,它的角色目前我们是没有放上去的,但是我们这个模型中角色的攻击范围没有像现在的《ob电竞》网格化差异是如此大。它也有一些特点,比如恢复cost是通过地图上的一些机关来完成,但是它总体来说有两个问题是造成我们最终没有选择它的原因。一个是它的范围设计不符合我们自己想要做的创新,就是对于网格的差异性让我们每个角色有不同的使用感受。这点是我们选择它的原因之一。
还有一点是在手机上进行实现的时候,这个地图相对来说较大,体验起来不但角色的表现性相对较弱,对我们美术的表达也造成了困难。所以,我们基于一些体验和感受后决定采用了最早的5×5的方案,不过这个地图不是5×5的,但是这是我们的统称。
所以,我们决定原型之后也能借由U3D的特质,使用我们过去的资产和新做的素材快速地迭代。
这是我们最早地图的原型,能够看到基本和我们现在游戏方式是比较接近的,包括角色的方向、数值、性能,还有一些地图的基本方式,相对来说和现在非常接近。
我们在最后2年的跨度之中,将最早的原型,基于Unity转化成了现实,是个很漫长的过程,但是利用Unity的很多便利性,能够将我们的想法付诸现实。所以,最终我们认为采用Unity是我们对内容追求的一个最好的方式。
我们通过Unity解决了很多方面的进化,让问题得到快速解决,也让我们有更多的时间实现我们最早对于质量方面的要求,我们能够把精力放到内容的制作中,最终完成《ob电竞》这样的作品。
最终我们上线的时候人数规模差不多达到了30到40人的团队,得益于Unity的U3D开发经验较为丰富的社区,我们也能快速地补充人力完成我们对游戏的开发。
我大致分享的部分就是这样,之后会让黄一峰介绍一下《ob电竞》具体在2D和3D开发案例中遇到的一些问题。
黄一峰:大家好!我是黄一峰,是《ob电竞》前期开发当中的技术负责人,也是上海鹰角网络的联合创始人之一。刚刚我的同事海猫从他的视角讲述了《ob电竞》从0到1的故事,接下来我将从我的视角,从更偏技术的角度来讲述为什么我们会选择3D和2D结合的这样一个画面表现方案,我们做出了哪些工程和技术上的取舍,我会尽量以合适的力度讲解,希望能给类似选型的项目一些提示,避免重复踩坑。
接下来是一个大致的大纲。首先我会介绍我们为什么会选择3D和2D结合的方案?而这个角度可能和刚刚海猫讲的不太一样。第二,我会说一下我们方案的具体内容,包括场景和单位两个维度。第三,我会详细地说明我们在开发过程中遇到的三个我们认为比较有典型意义的问题,希望能够给大家带来一些提示。
首先,相信不是所有在座的同学都了解或玩过《ob电竞》,我会首先播放一段15秒钟的战斗视频,这段视频是来自我们今年夏季的活动“密林悍将归来”。
大家可以看到整个画面的风格与感觉是偏于2D画面为主,无论是角色,角色的特效、弹道以及敌人包括视角是固定的,是一个2D为主的游戏。但比较特别的是我们在场景的方案上选用了3D的一个模型和偏写实的渲染。整个场景的建模、打光、渲染都是用偏写实化的方式实现,制作和渲染都是用标准的PBR工作流。
这个结合是相对比较罕见的,也是今天我们描述的一个重点。整个战斗画面的摄像机是非正交的,就是我们传统所说的透视相机,单位和场景的空间关系实际上是比较特别的,接下来我也会在遇到问题的环节详细地进行描述,大家可以再看看这个战斗画面。
为什么我们会使用3D和2D结合这样一个方案?刚才海猫做了一些讲解。我认为比较简单,3D写实风格可以较好地匹配《ob电竞》相对严肃的世界观和我们比较特别的美术风格。而2D的Q版小人可以较好地展现角色的魅力,避免top-down视角的局限性。
大家可以回忆top-down的游戏,尤其是像我们这种基本是从俯视角看战斗场景的游戏,角色的绝大部分都被它的头顶给遮住,所以看到角色实际上不太能够看到它的动画细节以及身上的服饰细节,大部分都是个大头。我们为了避免这个问题,决定使用2D Q版小人。当然最重要的问题是我们作为一个初创团队,我们希望能够尽量地降低风险,所以我们希望能选择相对市面上比较成熟的2D动画方案,而去避免当时我们认为还没有特别好参考的3D小人的方案。当然,现在有很多友商已经做得很好了。
同时,我们想实践3D开发的流程,积累一些3D开发的管线和工作经验,所以我们最后选择了这样一个特殊的选型。选择这个选型有很多现实因素,但是最后实践下来我们认为它是别具一番风味的,相当特别。
好,这张概念刚刚展示过,是由海猫在我们项目早期立项初期创作的一张图,这张图创作的时候我们一行代码都还没有开始写。这张图是为了给整个团队的成员统一的认识,我们这个游戏究竟会长成什么样,可以从繁琐或者抽象的策划案中具体地落到到这样一个视觉的概念上。
可以看到这张图中的很多要素和我们现在的选型是一致的,包括3D的场景,包括2D的小人这里面模糊掉了,包括整个摄像机透视的方向,其实和我们现在的选型高度相似,这也是我们比较幸运的一点。
大家可以看到比较特别的是左下角有个小人是垂直站在场景上的,但是这个垂直站在场景上的行为符合场景和角色的关系,但是却不符合我们视角的比较好看的关系,那个像纸片,这个问题也是为之后的开发埋下了一些伏笔。
这两张图是我们早期的一些设计和参考图。左边这张图是早期的Q版小人,我们一共有8个小人,而Q版小人上我们的选型和当时主流的身比小的主题不同,我们选择了相对它的腿和身子会更长一些,头身比相对更大一些,而这个方向我们融合了一些美式Q版小人的风格。
右边这张参考图是ArtStation一位艺术家的作品,但是我们看到,我们认为它非常符合我们对3D场景包括对写实场景的一个审美。首先它的作画风格是偏风格化的写实,其次,整个构图是以网格为核心单元,并非是以我们最后选用的四边形或者是正方形的往格,而是使用了正六边形的网格。但是总体来说,整个这样的视觉感觉非常符合我们预期,所以我们也把它作为我们创作的参考。
然后是视觉方案的详细的描述。我们分为两部分,第一部分是场景,场景包括3D的网格状地图,地图周边的那些摆件,地图背后的远景,以及地图上可交互或装饰性的小物件,所有3D的模型都是使用标准的PBR工作流制作,在美术同学的雕刻上会特意做一些画面化的风格化的雕刻,但不会追求较低面线的方式实现一个卡通的效果,我们的面数相对比较高。
第二,在贴图绘制上我们会做一些风格化的尝试,但总体来说我们并非做一个比较常见的日式RPG或者类似游戏的卡通化风格,我们希望用更写实的风格做到一些差异化。
在Shader上,我们采用的光照模型是基于Unity Standard Shader修改得到的PBR Shader。之所以不使用Unity默认的Standard Shader是因为我们对它进行了针对性的优化,同时还添加了一些我们所需要的功能。
第二部分,单位。单位包括角色、敌人、第三方单位以及很多可交户的2D物件等等。所有的2D动画我们都是使用Spine骨骼动画软件进行制作。在着色上我们使用了经过特殊处理的一个Unlit的Shader,它不会受到任何的动态光照和动态阴影的影响,之所以选择这样的方式,并非完全源于我们的技术限制,同时也是因为我们经过实验发现,如果我们做的更加激进一点,整个场景的角色和敌人的辨识度会变得更差,OB欧宝体育电竞官网在玩的时候可能不太能分辨出来哪些是他需要关注的东西。这部分也是接下来我们进一步推进这个画面表现所需要处理的问题,如何平衡game play和视觉效果。
我们场景的视觉方案会由这三张图作最直观的展现。接下来三张图都是我们实际的渲染图。
第一张可以看到密林这样的场景,可以看到场景细节和这个地块,而第二个场景是一个熔岩洞窟的场景。
第三图是我们故事发生的主要地点,龙门夜晚的场景。
大家可以看到这三张图,在建模上面我们使用了高度抽象化的以格点为核心的构架的方式,整体的光照细节、模型贴图细节以及一些周边的装饰系,像一些建筑物和一些管道都非常写实。
我们的整个视觉方案如下,首先我们的场景是使用Unity PBR渲染模型的,在Shader上我们采用的是略微优化和修改后的BRDF2,在性能上进行了一些调优,并且添加了我们可着色的阴影,在PBR Shader层面实现了高度物,也适配我们某些场景一些特殊的效果。
在Lightmap上面,我们在Shader里面对Lightmap的编码和解码进行了一些特殊处理,使它在所有平台上能达到一致性更好的效果,这点我之后会在问题阶段详细描述它的细节。
我们每个场景都会使用Unity静态烘焙的方案,会烘出两张图,一张Lightmap,一张Shadowmask,会有比较细腻的光影和阴影的表现。在打光方案上会有一盏混合动态光,这相当于我们在运行时只有一盏动态光会配很多静态烘焙光的方式来做打光方案,并且在特殊的情况下我们会添加更多的探针做一些静态的反射,为某些场景添加一些必要的视觉效果。
除了整个模型之外,我们在场景上会添加一些Unity提供的添加方案,一些传统的滤镜特效和模型特效。大家可以看到刚刚的视频中有一个瀑布,就是用特效实现,会增加一些风味。
接下来是角色的视觉方案。我们绝大部分的角色在右边这张图中可以看到,我们的SPINE工程当中实际是用了正反两个面做每个角色的。
为什么这么做?我们参考了类似的游戏,很多2D游戏实际上只有正面一面,但是在动作上会刻意地避开像冲刺、穿刺这样方向性很强的动作,而选择画面中德克萨斯使用的半圆的圆弧斩的方式,这样能模糊方向性,但是这样会极大地限制我们美术工作者对于动作的创作包括武器的创作,所以在权衡之后,我们还是选择了把绝大部分角色做两面,做一个动作的拆分,而其他的角色以及不太重要的第三方单位,我们就会使用单面的方式。
整个这样一个方式可以看到在正面和反面的转变过程中,我们是做了一个类似于纸片人转变的动画。这个动画我们的灵感来自于任天堂一款著名的游戏系列《ob电竞》里面一个类似的画面,对比看一下,我们游戏的效果和这个是比较接近的。
好,接下来我会详细地描述几个在开发过程中遇到的问题。这些问题都是源自于我们融合3D场景2D角色做一个结合。因为这个方案比较少见,所以遇到问题也比较少见,希望给大家带来一些提示。
首先第一个是空间关系错误,刚刚我也已经提到过,我们场景和摄像机,摄像机并不是垂直于场景,它实际上和场景的X、Y平面呈一个60度夹角的关系,而角色,因为我们要展现角色,肯定是对着场景,对着摄像机,它是垂直于场景的方向的,通过简单的几何关系可以得出场景的X、Y平面和角色的夹角实际上是30度,也就是说我们的角色并不是站在场景上,而是斜躺在场景上,或者说是躺在场景上。它实际上是一个斜插的东西,它的结果可能是极易穿模,这里说可能不太直观,大家可以看一下这张图。
最左边的图就是我刚刚描述的合理空间关系,但由于角色后面的地块它的模型非常高,所以说它的头是插在模型当中的,形成了穿模。
为了解决这个问题,有的同学可能会说,把这个角色给调整到垂直场景不就解决问题了吗?那么我们最右边这张图就是把角色调整到垂直于场景,这个时候它和场景的关系对了,深度关系也对了,但是看起来非常奇怪,像纸片人。
这种情况下,如果我们调整一下摄像机的角度,比如像中间这张图一样,调整到能够正常地平视这个角色,那整个空间关系看起来是正确的,只是这样一来我们的游戏是没法玩的,因为摄像机只能以这个角度去看,OB欧宝体育电竞官网是没法操作的。
为了解决这个问题,我们最后达到的效果是希望像左边这样,但是能解决穿模的问题。这其中曾经经历了一个错误的思路,也就是我们渲染的时候关闭了一些test,同时Z-write也不大,我们把整个场景中的模型、摆件和角色都通过一个深度混排的方式,手动对它排序,类似于传统2D游戏的处理方式。我们手动排序之后手动去归置,这样确实能达到相对比较正确的结果,但是会带来两个主要的问题。第一个就是我们会破坏这个合批,打破它静态的一个batching。
因为我们整个场景是一个静态,包括它的光照贴图和阴影贴图,我们在渲染的时候可以用相当低的DrawCall做到所有的场景,绝大部分场景的DrawCall都在个位数。如果需要混排,需要打乱角色前、角色后的顺序,我们会增加非常多的DrawCall。
其次,我们会有一些小摆件,比如场景上的一些树木是跨两个格点的,这些小摆件我们大家对它进行排序就很难知道它到底在哪一层。
最后我们解决的思路是让角色需要看起来垂直于摄像机,但实际上垂直于场景的。这个听起来有点抽象,待会儿我们会展示图片。那么我们解决方案实际上是把深度进行一个调整,在Unity当中摆位或者是在场景当中的位置和着色,它的角色都是垂直于摄像机的,也就是躺在场景上的。而在Vertex Shader最后我们会把深度从刚刚那个空间变换到垂直于场景的空间,这样以来对于深度测试和深度写入来说就好像角色是垂直于场景上。
左边这张图就是正常的透视关系,也就是说角色是躺在场景上,会穿模的情况,实际上最后做深度测试的时候,我会把它角色的深度从刚刚左边这个图变换到右边这个深度空间当中,你可以看到整个角色现在是垂直于场景,并且被抽起来的,它变得更拉长了。
这张草稿能说明问题,首先这个camera是我们的摄影机方向,它和场景是有一个夹角的,角色垂直于这个camera的方向Z轴,它的夹角和场景夹角是30度,这个时候我们可以做这样的一个三角形,而这个三角形的斜边是我们箭头指的方向,就是我们在深度测试的时候实际上所在的位置,可以发现这上面线上的每个点和原本角色上的每个点是一一对应的。通过几个简单的关系,这是一个直角的三角体,而且是一个30度夹角的,斜边和对边的比例是1:2,所以说实际上这个边的长度是它的2倍。
这里我不会深入一些处理的细节,因为我相信这个比较容易,通过大家的计算都可以得到。只需要说一点,做这个变换只需要在Vertex Shader在最后做一个深度变换可以,这需要注意的是,这个时候Vertex Shader最后的位置它实际上是处于透视除法之前骑士空间当中的,所以此时如果要做一个Z轴的变化在骑士空间中需要考虑到第四位W参与运算,这里是个简单的代码。
好,那么问题解决了吗?其实并没有。我们在整个视觉方案当中还遇到了很多别的问题,刚刚提到的是其中最重要的点而已。这里图中说明的是另外一个问题,我们的干员重兵他的攻击方式比较特别,他的攻击方式是往下挥鞭的时候纵深会特别长,所以说会直接穿到这个模型里面,如果我们把它的角色深度拉伸到垂直于场景,它依然会穿进去,所以此时我们做了一个特殊处理,当它的高度大于等于0的部分,我们使用刚刚说的处理方式,而高度小于0的部分,我们使用另外一套处理方式,使这个鞭子被旋转到平行于这个场景的X、Y平面,这样才能在同样正确并且一致的条件下正确地绘制出来。
除此之外,还有空中,它其实处理方式也是不太一样的。所以,这里是有很多细节,如果大家感兴趣,接下来我们再详细探究。
第二个问题是Lightmap不一致的问题,而这个问题很多友商包括很多网友在网上也提到过,我也看到很多文章,他们会发现编辑器、在实机、在移动平台上可能最后Lightmap的结果都不太一样,但是我们调研得到的结果是如果抛开Unity版本谈这个问题是没什么意义的,因为每个Unity版本对于Lightmap编码解码的细节都有一定的调整。
所以我们这里所有的结论是在2017年的LTS版本上。这个问题的原因是因为光照贴图存储的并不是颜色,它和通常的纹理图是不一样的,它存储的是间接光的信息,它的范围是在0和1之外,我们无法用一个常规LDR的贴图格式把它存下来,它原本是一些APBR的信息。所以说我们需要把它进行编码,才能重造一些LBR的贴图格式。那么这个编码的方式在不同平台上不一样,这个原因也导致了最后不同平台上的表现结果不一致。
大家可以看这两张图,可能不太容易看清,在明暗交界的地方阴影会泛蓝紫,这个蓝紫就是阴影的细节,在左边这张图是被吞掉了,这个细节是我们需要处理的。
这里我不会详细地描述RGBM和WLDR编码,大家如果感兴趣,如果不了解的话,网上稍微查一查应该比较容易了解。整体来说RGBM会将额外的信息存储到第四个通道alpha当中,而WLDR的方式比较暴力,它直接把RGB的原始信息除以2乘下来,所以它丢失的信息比较多。
接下来是具体的问题,当Lightmap光照贴图被烘焙出来之后,它的TextureType默认是设置到Lightmap,那么这种情况下Unity就会根据当前所选择的平台来编码这个Lightmap,影响采样的结果。如果在PC上我们把Lightmap Quality设置成为High的话,它存储的是一个原生的HDR的信息,如果把它作为Normal Quality,它会把HDR信息通过RGBM进行编码,存在一张LDR的贴图里面去,如果是iOS的安卓,也就是移动平台,它会比较暴力的把所有这样的信息都给编码成double LDR的方式。而double LDR的方式下,alpha通道会直接丢弃,这才是我们想通过做一些操作把信息存到alpha通道当中,读出来的是个常量。
接下来是我们做测试的一些细节。这些细节今天我不会展开,大家如果感兴趣可以会后通过PPT的方式查看。
结论来说,如果我们继续保持Unity的默认选择 TextureType -Lightmap,它就已经存储为double DR,LDR的格式了,那double DR的格式只能存储0到2的亮度范围,亮度2以上的范围都被截断和丢失了,为了我们达到更好的效果,在不同的平台上使用RGBM编码,我们必须采取一个default的格式。
具体的方案是我们把烘焙出来的光照贴图的TextureType从Lightmap改为default,同时我们把RGBM的alpha通道这个信息从Lightmap当中抽离出来,放入shadowmask的green chanel,这个原因是因为shadowmask实际上使用了它的red chanel通道,其他通道是没有被使用的。我们为了让两张贴图都可以不存alpha通道,最大化地利用包体内存空间,我们把alpha做了一个trick的操作,这样一来我们就可以用任意我们喜欢的压缩格式,包括STC、ETC2和PVRTC对这两张shadowmask和lightmap进行处理。
我们会修改GBR的shader,用RGBM来解码这个lightmap,并使用从shadowmask中读取的信息,也就是刚才说的green chanel的信息来辅助这个解码。在PC上当然也是需要相应地修改兼容,使所有平台上达到一致的效果。
最后这张图就是我们经过这样一个处理方式之后在所有平台上包括编辑器,包括PC、安卓、iOS都达到的细节的光照贴图的效果。
最后一点,我们如何融合3D场景2D角色的渲染表现?这个问题实际上是一个比较复杂的问题,我们现在也在探索。我们总结了几点:
首先第一个是我们会对每个主题的场景定义一套作用于所有单位、所有角色的tint color,使其着色和场景氛围更接近。也就是说我们每个场景里面角色的渲染其实略微有些区别,而这个区别的tint color是由我们美术工作人员做配置。第二点,通过美术处理能够调整3D场景、2D角色,包括整个特效的整体氛围和色调,使它更加融洽。
我们也会除了刚才的tint color之外提供一些后处理的选项,包括color grading和Bloom等等,让美术工作人员能通过他们的努力使我们整个场景3D和2D更加协调。未来我们也会探索更多的方式融合这一特殊的画面表现。
最后做一个总结,《ob电竞》3D和2D结合的方案我们首先使用了PBR的渲染和工作流去处理这个3D模型的场景。然后对于2D的角色,我们使用Spinn的骨骼化软件,使用unlit的shader去处理。
第二点,为了解决3D场景、2D场景空间透视关系错误的不协调的问题,我们对shader进行修改,在深度上做了一个变换,使它看起来和实际深度当中的表现是不一致的。
第三点,我们自定义了我们Lightmap的编码和解码流程,使其在不同的平台上都能得到一个一致且更好的效果。
第四点,我们使用了一些定制化的tint color和一些后处理的选项,让3D场景和2D角色能融合得更好。
最后,我们提供了这么多的选项是让我们的美术工作人,也就是说我们的艺术家们来做最后的处理。因为我相信技术人员只是提供工具,最后的整个画面效果肯定还是需要以更加感性的认识去调整。
今天的分享就到此结束,谢谢大家,再见。
如若转载,请注明出处:http://www.ashkeling.com/2020/11/404461