微信号:Unity-GreaterChina

介绍:Unity官方开发者平台,分享最前沿的技术文章和开发经验,精彩的Unity活动和社区相关信息.

Pre-Bake 360如何使用360转录技术制作无模型场景

2018-07-29 17:05 Unity

想要让手机和PC拥有相同的画面质量水平,一直以来都是开发者追求的,但现实是碍于当前软件和硬件的技术发展水平,开发团队必须要跨过相当大的技术门槛。对于一般开发者而言,这就像是一座天秤,画面质量与性能各自在天秤的二端,我们必须有所取捨。


在以前,游戏开发不像现在有这么多的资源能运用,往往一个画面要透过许多技巧或各种假画面,来欺骗玩家眼睛达到在当时技术门槛难以达到的高效画面。本文由Unity技术经理罗志达分享,主要内容是如何利用Unity 2018新的拍摄API来实现高质量画面低Draw Call的场景。


本文中的内容请参考演讲视频:



项目介绍

下面使用的项目是Unity官方名为Space Shooter的演示项目,这是一个2D游戏射击游戏,使用非常简单的太空图片作为背景。在本文中我们把背景换成了视频后,保持了原来的性能消耗,但画面比起原来的版本要好许多。


改变前的画面:



改变后的画面



虽然画面变好看了,但对于玩家而言还是太过单调,所以我们做了第二次的调整,把运镜的感觉与摄像头有限度的转动导入了本次的改变,效果好了很多,而且Draw Call并没有增长太多,效果如下:



可以让场景保持低消耗,还能有这样的画面表现与互动,是因为我们使用的是360视频。



使用360视频作为场景


虽然这样的呈现非常棒,但还是有很多限制,由于是视频格式,所以占用硬盘的空间比原来的贴图大很多,而且我们必须把视频先打包进项目中,或是使用网络进行下载,但仍然会占用较大的空间。360的产品交互设计也相对困难,最重要的是这类项目的镜头只能转动,不能位移。

 

虽然有上述的限制,但是好处就是可以让手机端接近PC的画面效果,而且不用担心不同手机会有无法运行的问题。但仅使用特定的游戏类型:

  • 飞行射击游戏游戏

  • 过山车游戏

  • 跑酷游戏

  • 密室脱逃

  • 博弈类游戏


Unity 2018新的API


想要把场景拍成360,可以使用Unity 2018二个新的API:  Camera.RenderToCubemap() 和RenderTexture.ConvertToEquirect()。


Camera.RenderToCubemap()可以从相机的位置对环境拍摄一张Cubemap,这样的图可以做为Cubemap贴回Skybox。



RenderTexture.ConvertToEquirect()把这张Cubemap在缝合成为一张全景图(Panoramic images)。



最后会生成一张如下所示的图,把这张图包在一颗球中,从里面看就可以还原当时的场景。


最终效果

Recorder


这个测试项目,使用了Unity官方的插件Recorder,它完美的使用上述二个API,并且可以和Timeline整合在一起,搭配Cinemachine的Dolly track轨道安排的路径,依照规划的路线拍出想要的镜头。


Recorder


Unity2018及以上版本中录制360的选项


透过Dolly Track安排镜头的移动路线,依照路径录制场景移动


Post Processing后期处理特效


一般来说,在手机平台的特效都会建议少开,遮挡剔除(Occlusion Culling)或是场景LOD多使用,但在这个预烘焙案例中,反而建议是把所有特效全开,遮挡剔除和LOD能不开就不开,为的就是预烘焙的品质可以得到最好。


后期处理特效关闭


后期处理特效开启


但是由于后期处理特效有些是基于屏幕空间,因此需要注意的是某些特效不这合用在这种流程,否则就会烘出下面这种有问题的图。


并非所有后期处理特效都适合烘焙360

Masking遮罩技巧

有时候我们想让飞机飞过一座桥的下面,但一般来说这种预烘焙360图层已经扁平化,没办法做到在物体下面的效果,这时我们可以另外烘焙一层遮罩,来达成想要的效果。


使用二层360来制作飞机飞过桥下的效果


Unity原生支援二种带有Alpha频道的视频格式,分别是Apple的ProRes 4444和Google的Webm VP8,但在本次测试中我们并没有使用这二种格式,主要是因为制作不易之外,多一个Alpha频道也让空间占用更大。

  

我们使用的是业内比较常见的Chorma Key,也就是把顏色去掉的绿幕的方法。我们把石桥和桥上面的物件单独设定为一个Layer,然后在相机中设定Clear Flags为Solid Color,绿色。Culling Mask设定只显示石桥的Layer,结果就会只渲染石桥与上面的元件,其它部分都会只会渲染成绿色。这样的好处是,完全不需要去切换物件的位置或是状态,就能在不同图层切换。

 

最后再包回圆球,并用Shader把绿色都去掉,就会呈现样子如下图所示。只要渲染在飞机之上就能呈现出经过桥下的效果,由于它也是一个视频,因此可以完美无瑕的和背景视频结合在一起。


绿幕制作法

静态图片的360场景


介绍完使用360视频制作的场景之后,我们来谈谈如何用静态的360图片来制作场景。使用图片的好处是占用硬盘空间比视频要少。


我们使用一个密室脱逃的游戏类型来当作Demo进行演示,主角Ethan在一个有六个房间和一个走廊的建筑结构中行走,每个房间都带有一个镜头,主角可以自由行走在这些房间,镜头会主动判断切换。


视频中Demo场景来自ArchViz Pro No.3:


 

你看到的画面实际上是并不存在真实的3D建筑模型,而是在七个不同的360图片之间作切换,并共用同一组碰撞结构,进而达成这样的效果,重点是Draw Calls还是维持非常低的20以内,很神奇对吗?


360场景原理

这场景是如何制作的呢?

 

 

首先必须有建模流程,我们从Asset Store资源商店中购买了一套著名的Archvizpro interior No.3室内设计模型作为本次Demo的模型,在还没烘焙成360之前,正常播放大约Draw Calls平均是2500-3000左右。我们在场景的每一个房间安置了Cinemachine的虚拟镜头(下图红点处),然后各自用Recorder录制了一张全景图。


建模流程


场景拍摄完后,我们把所有的Mesh Renderer元件都移除,这会让场景只剩下Collider碰撞结构,每个房间的镜头位置都加上一个Sphere圆球,并把刚刚拍好的全景图各自贴回去对应的房间,材质Shader指定为Skybox-Panoramic。由于碰撞结构沿用场景原本的Colliders,镜头的位置也都精准的放在对的位置,因此你会发现这时候的镜头,看出去和碰撞结构的位置会完美的叠合一起。

 

将模型材质都清除只留下碰撞结构


被圆球包覆眼睛看出去和碰撞结构可以完美迭合

Shader着色器的选择

Unity内置的Standard Shader并不适用在全景图上,Skybox-Cubemap才适合,但Cubemap不适合用在视频格式的全景图,因此我们是使用也是内置的Skybox-Panoramic的Shader。


但目前这二个内置的Shader并没有绿幕Key的功能,因此我们从官网下载Skybox-Panoramic Shader的原始代码,然后自行加上Chroma Key或Alpha Key的功能,通常是技术美术来负责这项工作。


Panoramic Shader放360图片线条才不会歪掉


有了这个Shader之后,运用和前面视频的遮罩制作方式,一样把要留住的物件标记为独立的Layer,然后从Camera中过滤,留下要作为前景的物件,拍出一张带有Alpha的图片或如下图的绿底照片。


把箭头的物件都设为一个Layer,利用镜头过滤掉其它的物件


拍摄好的绿底Key图片


静态图片和动态视频不同的是,你可以用带有Alpha的图片,甚至用其它的软体来处理图片,Unity设置好后,可以很容易就把不要的地方去掉。


使用Alpha的图片设定


由于人的眼睛在固定的定点时,只有一只眼睛,所看到的画面并无深度信息,这好比场景被渲染到画面之后就已经扁平化了,因此不管叠了多少层,人眼都无法感知深度的变化,我们可以利用这点来叠上无限层数的前景,随心所欲的设计各种不同的遮罩区域,来达到几乎跟真实3D场景一样的前后效果。



但是要注意:这种方法镜头不能移动,但可以360度的转动。


渲染前后顺序

在一开始的场景你或许会觉得很奇怪,为什么球体都那么小?


为了要确保主角一定要在背景前面与前景后面,所以我们在脚本中做了一些判断,来动态的调整前景和背景的Render Queue,确保主角进入房间之后,该居室的背景和前景都会对应正确的数字,让主角渲染在背景之前,前景之后。这样不管球体多小,一定会在人物之前渲染。

 

利用Render Queue来排序前后关系

阴影处理

360原理是被一个圆球包覆,实际上没有真实的地板来投放阴影,因此许多AR或是这种360场景都没有做阴影处理。我们可以放一片网格在脚上跟着主角,阴影会产生在这片临时地板上,再透过Shader把阴影以外的部分去除掉,调低光源的强度让阴影带有一点半透明,就会产生不错的影子效果。


阴影效果

窗户投射的光源

为了要让主角更加融入场景,我们希望主角走过窗户时,要有光投射到身上的效果。

 

我们可以很简单的把这个房间的背景图复制一份之后,使用Photoshop处理剩下光照的部分并把图片设定作为Cookie。最重要的设定是Alpha Source要设定为From Gary Scale才能以图片灰阶为Alpha。

 

在镜头的位置摆设一颗Point Light之后,指定这张Cookie并只对主角有作用,就可以达到在对的位置投射窗户的效果到主角身上,完全不需要任何模型作为基础。

 

使用Point Cookie制作窗户光影

制作镜子反射

还原镜子的反射,我们使用了第二只镜头放在镜子位置的后面,并且只设定对Player物件有反应。因此主角走过去后会被镜头捕捉到,并做成一张Render Texture贴到原本镜子该有的位置,从画面上看来就可以造成几可乱真的镜子叠合假象。


镜子反射

自动切换镜头

Demo的镜头切换使用Cinemachin中里的Clear Shot镜头功能,它可以指定一个镜头群,并智能的判断该切换到哪一个房间的镜头。

 

Clear Shot制作自动切换镜头

互动制作

从镜子的制作过程中,我们可以发现到,如果有一些想要互动的物件,仍然可以把它们留在场景里不要删除,这些物件在镜头观看的时候还是会和360完美叠合一起,然后可以使用一般的开发流程来添加互动要素。

 

360场景留下一台可以互动的游戏机模型物件

总结

这样做有几个注意点:

  • 对于视频格式的360占用空间要注意。

  • 互动制作会因为场景扁平化之后变得比较不容易。

  • 镜头必须动的项目类型不适合。



好处是:

  • 不管模型多复杂,最后性能都很好。

  • 不管什么奇怪的设备,只要播视频的都能运行。

  • 项目可以分为二个,一个用来录制360,一个作为产品项目会很小。



注意事项:

  • 录制360必须使用Unity 2018.1以上版本。

  • 后期处理特效LOD能开就使开,LOD,OC不要开。

  • 带有文字的场景烘完后从内部看字会相反,这时可以从视频来源先水平翻转一次。

  • 强烈建议4K质量效果会比较好。



如果是使用360镜头拍摄的是否也能够做同样的处理?答案是可行的,但它的处理方式又会有很多地方需要注意。可以参考上面的演讲视频。希望本文在制作无模型场景方面能够带给你一些启示。


更多Unity的技术内容分享尽在Unity官方中文论坛(UnityChina.cn) !


推荐阅读



官方活动

实时优化,智造收益 - Unity Monetization开发者生态沙龙

8月3日,Unity将于举办为期半天的Unity Monetization开发者生态沙龙!本次活动将与大家共同探讨移动游戏开发与变现相关难点与痛点。[了解详情]

报名地址:

https://connect.unity.com/events/unityads


7月Asset Store资源商店促销 

7月,只需在Asset Store资源商店消费满30-199美元,最高可获得价值235美元的5款免费资源,参与活动,获得夏日精选资源包。

活动地址:

https://assetstore.unity.com/g/july-promo-activation-cn



点击“阅读原文”访问Unity官方中文论坛

 
Unity官方平台 更多文章 ChinaJoy | Unity展位现场互动指南 制作蝴蝶烟火视觉特效 Unity ChinaJoy 2018圆满落幕,期待来年夏日相聚! 在Unity中创建风格化视觉特效 直播预告|ProBuilder快速关卡建模实践
猜您喜欢 谈谈移动支付 MySQL 5.7新特性--支持原生JSON格式 如何有效说服他人——结构思考力随堂笔记 老板如何为员工创造“忠诚”? PostgreSQL中BRIN和BTREE索引的比较(一)