《QQ飞车》人物3D层次及质感优化技法

发表于2015-05-01
评论0 7.3k浏览

      QQ飞车项目组提出了对飞车品质表现进行优化的一系列想法,其中包括了角色的优化,当接到这个任务的时候,考虑了很多方面的因素,一方面飞车是个有百万级玩家的产品,轻微的改动都是影响巨大的,一方面由于飞车当时设计的时候底层架构的不完善,导致很多美术效果无法实现。但是作为一款4年的产品,毕竟有自身的限制,时代是在不断变化的,所以我们也要想办法跟上时代的步伐。

最初有考虑过做体形上的区别,但是考虑到上千动作与交互动作,然而时间只有几个月,我只有利用有限的资源做最大的提升,最后我决定还是在现有体形基础上做美术表现的优化。

首先我分析了现在飞车角色表现欠缺的地方,通过观察论坛里玩家的评价,普遍认为飞车是个2D游戏,原因在于1.飞车虽然是个3D方法制作的游戏,但是贴图缺少对光阴层次的绘制,导致整体出来效果非常平面。2. 缺少对各种质感的表现。

http://km.oa.com/files/post_photo/264/174264/89f153277eac14eda48dd95e28ef441a.gif

基于上面2个问题我开始着手对飞车角色进行优化,由于有了程序的延迟渲染的支持,使得飞车可以在游戏里打灯光而不会太耗性能,这样就没必要在贴图上做静态效果了,而且直接画在贴图上的光影一旦角度变化就会显得很假,但是直接打灯光的话由于之前模型的制作没有考虑到法线的问题,效果会非常的难看,甚至比以前的还差,法线转折不平滑的地方会出现大片的棱角分明的面,这不是我们想要的结果,所以为了照顾老的资源,只能再规划一套新的制作方式。
下面是我用8猴(Marmoset Toolbag)的引擎做了一些渲染效果测试:http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image002.jpg

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image003.jpg

有了光,就可以使用法线贴图和高光贴图表现更多的细节。
决定了大致效果后,我开始在GB引擎里面实现类似的效果

 首先我制作了高模用来烘培法线贴图

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image004.jpg      

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image005.gif

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image006.gif 

然后我开始着手在GB引擎里面尝试一些材质:

皮肤部分是最先引起我关注的地方,飞车现在的皮肤质感都是靠手绘的,这样画出来的皮肤在灯光下的效果非常奇怪,于是我想到了渲染常用的SSS效果,真实3S材质的效果固然很好,但是用在游戏里是非常费资源的,所以只能模拟3S的效果。其实3S的效果主要是给暗部增加了层次,使得皮肤和玉等这些质感的物体看起来更加通透。所以皮肤材质关键在于解决暗部的颜色,不过单纯的调整暗部颜色是不够的,还要可以调整覆盖暗部的范围,这样模拟出来的皮肤材质基本就有那种感觉了。

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image007.jpg

 解决了皮肤,还要有增加体感的表现,菲涅尔效果对于表现角色的轮廓有很大的作用,而且可以模拟绒布的质感

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image008.gif        http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image009.gif

接下来我开始对头发质感做优化,以前的头发用的都是全透明的,但是边缘会有很明显的锯齿感,像被狗牙咬过一样,半透明效果对表现头发的柔软起到关键的作用,GB引擎里面默认的半透明排序不太人性化,如果出现问题只能手工排序,最头痛的问题是当半透明是多层叠加互相又有穿插的情况下会很难处理,在这里排序只做了简单的2次排序,头发内部的是判定为不透明区域,然后外面有半透明的边缘则最后渲染,这样可以得到一个柔和的,看起来能接受的结果。

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image010.gif

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image011.gif 

另一个对头发质感影响很大的是头发的高光,头发的高光在现实中应该是顺着发丝一圈的,而且是不规则的,

 

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image012.gif

    头发材质利用切线就可以模拟出这种高光顺着头发流动的感觉。

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image013.gifhttp://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image014.gif

接下来要处理的金属,皮,胶等就比较简单了,这里面主要是反射的应用,GB引擎里面的反射是一张CUBEMAP 得到CUBEMAP方法有很多,可以在MAX里面用VRAY渲染生成,也可以靠别的插件制作,得到了CUBEMAP后,因为CUBEMAP是有对应的场景坐标的,可以根据下图的顺序排列

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image015.gif

反射贴图选择对于不同表面质感的表现也是关键的

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image016.gif

实际运用的时候还需要对反射范围进行控制,为了节省贴图,用了单独一个贴图的绿色通道来做这个遮罩处理

 

http://avocado.oa.com/fconv/files/201309/c5558f1f5f89f1dd170161c1ad6259e4.files/image017.gif

当解决了这些技术问题后,就可以开始应用于实践中,但是如果是以这种效果放回飞车,那整体的风格会变得很不协调,这里要做一下中和,弱化下体感,使之能融合进飞车世界里。最终我实现的效果是这样。

image018.gif

image019.gif 

由于面数的剧增,同时也会带来效率的问题,所以制作LOD也是必须的。通过分析我们决定制作3级的LOD,传统手工制作LOD又非常浪费时间,对批量生产限制很大,通过多次测试我们决定选用SIMPYGON,最后出来效果也不错,在LOD的制作上可以节省大量的重复劳动。在确定了所有这些准备工作后,就可以开始制定规范给外包批量生产了。

着手对一个上线的产品进行优化是一项需要谨慎思考的工作,因为方方面面都会牵扯到,但是通过对资源的合理利用,产品定位的认真分析,以及公司的强力支持,还是做到了一定的突破,希望品质版能带给用户全新的感受。

 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引