您需要 登录 才可以下载或查看，没有账号？注册
x
本帖最后由 kanisen 于 2019-11-19 14:10 编辑
想要让手机和PC拥有相同的画面质量水平，一直以来都是开发者追求的，但现实是碍于当前软件和硬件的技术发展水平，开发团队必须要跨过相当大的技术门槛。对于一般开发者而言，这就像是一座天秤，画面质量与性能各自在天秤的二端，我们必须有所取捨。
在以前，游戏开发不像现在有这么多的资源能运用，往往一个画面要透过许多技巧或各种假画面，来欺骗玩家眼睛达到在当时技术门槛难以达到的高效画面。本文由Unity技术经理罗志达分享，主要内容是如何利用Unity 2018新的拍摄API来实现高质量画面低Draw Call的场景。
本文中的内容请参考演讲视频：https://v.qq.com/x/page/a0738kpeuyn.html
项目介绍
下面使用的项目是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镜头拍摄的是否也能够做同样的处理？答案是可行的，但它的处理方式又会有很多地方需要注意。可以参考上面的演讲视频。希望本文在制作无模型场景方面能够带给你一些启示。
| 
