请选择 进入手机版 | 继续访问电脑版

查看: 501|回复: 5

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

[复制链接]

1114

主题

1805

帖子

2万

贡献

管理员

Rank: 9Rank: 9Rank: 9

积分
23555
QQ
发表于 2018-7-29 08:42:11 | 显示全部楼层 |阅读模式
想要让手机和PC拥有相同的画面质量水平,一直以来都是开发者追求的,但现实是碍于当前软件和硬件的技术发展水平,开发团队必须要跨过相当大的技术门槛。对于一般开发者而言,这就像是一座天秤,画面质量与性能各自在天秤的二端,我们必须有所取捨。

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

本文中的内容请参考演讲视频:
http://v.qq.com/x/page/a0738kpeuyn.html

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

改变前的画面:
Unite-Beijing-2018-Kelvin-AAAmobile.002.jpg


改变后的画面:
Unite-Beijing-2018-Kelvin-AAAmobile.004.jpg


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


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

使用360视频作为场景见此视频:
https://v.qq.com/x/page/y0738p2vjq7.html

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

虽然有上述的限制,但是好处就是可以让手机端接近PC的画面效果,而且不用担心不同手机会有无法运行的问题。但仅使用特定的游戏类型:
1、飞行射击游戏游戏
2、过山车游戏
3、跑酷游戏
4、密室脱逃
5、博弈类游戏

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

Camera.RenderToCubemap()可以从相机的位置对环境拍摄一张Cubemap,这样的图可以做为Cubemap贴回Skybox。
Unite-Beijing-2018-Kelvin-AAAmobile.012.jpg


RenderTexture.ConvertToEquirect()把这张Cubemap在缝合成为一张全景图(Panoramic images)。
Unite-Beijing-2018-Kelvin-AAAmobile.013.jpg


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

06.jpg
最终效果


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

07.jpg
Recorder


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


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


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

10.jpg
后期处理特效关闭


11.jpg
后期处理特效开启


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

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


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

13-1.gif
使用二层360来制作飞机飞过桥下的效果


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

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

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

14.jpg
绿幕制作法


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

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

视频中Demo场景来自ArchViz Pro No.3:
https://v.qq.com/x/page/w0738pal2y6.html

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

360场景原理
这场景是如何制作的呢?

15.jpg


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

16.jpg
建模流程


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

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


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


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

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

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


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

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


22.jpg
拍摄好的绿底Key图片


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

23.jpg
使用Alpha的图片设定


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

24.jpg


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

25-1.gif


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

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

26.jpg
利用Render Queue来排序前后关系


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

27.jpg
阴影效果


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

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

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

28.jpg
使用Point Cookie制作窗户光影


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

29.jpg
镜子反射


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

30.jpg
Clear Shot制作自动切换镜头


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

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


总结
这样做有几个注意点:
1、对于视频格式的360占用空间要注意。
2、互动制作会因为场景扁平化之后变得比较不容易。
3、镜头必须动的项目类型不适合。

32.jpg


好处是:
1、不管模型多复杂,最后性能都很好。
2、不管什么奇怪的设备,只要播视频的都能运行。
3、项目可以分为二个,一个用来录制360,一个作为产品项目会很小。

33.jpg


注意事项:
1、录制360必须使用Unity 2018.1以上版本。
2、后期处理特效LOD能开就使开,LOD,OC不要开。
3、带有文字的场景烘完后从内部看字会相反,这时可以从视频来源先水平翻转一次。
4、强烈建议4K质量效果会比较好。

34.jpg


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



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

0

主题

2

帖子

20

贡献

初级UU族—1级

Rank: 1

积分
20
发表于 2018-8-2 06:30:22 | 显示全部楼层
Unity20182.0f2及版本中录制360
提示空对对象,又遇到过这种情况吗?在网上也没搜到什么相关资料!

0

主题

2

帖子

20

贡献

初级UU族—1级

Rank: 1

积分
20
发表于 2018-8-2 06:39:25 | 显示全部楼层
NullReferenceexception:Object reference not set to an instance of an object
Unityengine.Recorder.Input.Camera360Input.NewFrameReady(UnityEngine.Recorder.RecordingSession session)(at Assets/Unity Technologies/Recorder/Framework/InputsCamera360/Engine/Camera360Input.cs:92)
UnityEngine.Recorder.Recorder.SignalInputsOfStage(ERecordingSessionStage stage,UnityEngine.Recorder.RecordingSession session)(at Assets/Unity Technologies/Recorder/Framework/Core/Engine/Recorder.cs:163)UnityEngine.Recorder.RecordingSession.RecordFram()(at Assets/Unity Technologies/Recorder/Framework/Core/Engine/RecordingSession.cs:128)

0

主题

26

帖子

265

贡献

初级UU族—3级

Rank: 3Rank: 3

积分
265
发表于 2018-8-2 07:23:58 | 显示全部楼层

0

主题

2

帖子

35

贡献

初级UU族—1级

Rank: 1

积分
35
发表于 2018-8-6 01:39:47 | 显示全部楼层
请问怎么在panoramicbeta shader上加上alpha key 可以让全景图有透明效果啊?

0

主题

1

帖子

20

贡献

初级UU族—1级

Rank: 1

积分
20
发表于 2018-8-8 08:31:37 | 显示全部楼层
您好我有一个问题就是用ConvertToEquirect这个API 合成RenderTexture图片的时候 总不是很理想不像视频里这么好 需要设置什么吗
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表