Unity中UI与模型特效混排方案
在做项目的时候会遇到将模型与UI混合编排,以前用FairyGUI 的时候可以直接把模型放在其中,通过在FairyGUI独有的编辑器上对其Order进行合理设值即可实现混排。而UGUI则不太一样,通过这两天的查找资料与真机实践,下面将阐述所得。
我们在屏幕上看到的具有前后遮挡关系的图像,本质上是由渲染顺序决定的(ZWrite及ZTest默认的情况下),先渲染的会被后渲染的所覆盖,从而形成遮挡关系。
能够影响渲染顺序的因素有:
-
Camera Depth
相机组件上设置的相机深度,深度越大越靠后渲染。
-
Sorting Layer
意为排序层级,对于2d图像相关的一些组件,一般都会具有该属性,值越大,越靠后渲染。值得注意的是,粒子系统中也具备该属性,因为粒子特效本身是用“点精灵”渲染的,每个粒子就是一个点精灵,可以看做一个片模型。 -
Order In Layer
意为层中的排序,值越大,越靠后渲染。
-
RenderQueue
Shader中对Tags设置的“Queue”。
-
空间位置
默认情况下,会基于物体距离摄像机的远近来排出渲染顺序,远的先渲染,近的后渲染。
五个影响因素的优先级如下:
1. Camera Depth永远最高。Camera Depth小的一定先进渲染管线。
2. 当Sorting Layer和Order In Layer相同时,RenderQueue小的先渲染。
3. 当Sorting Layer和Order In Layer不相同时
a. 当两个材质使用了不同的RenderQueue,且这两个RenderQueue都在[0~2500]或[2501~5000]时,SortingLayer和OrderInLayer的排序生效。
b. 当两个材质使用了不同的RenderQueue,且这两个RenderQueue分别在[0~2500]和[2501~5000]时,则一定会按照RenderQueue绘制,无视SortingLayer、OrderInLayer的排序。
4.空间位置。
鉴于以上的影响因素及其渲染顺序,可以得出方案:
UI与特效混排:
假设容纳底下这层UI的Canvas为CA,容纳顶上这层UI的Canvas为CB,特效为P,那么将其Sorting Layer都设为Default,Order in Layer依次为 1/3/2即可。如图所示:
(CA)
(P)
(CB)
显示效果:
UI与模型混排:
由于模型为3d物体,3d物体没有Sorting Layer 与 Sort In Layer属性,所以考虑方案如下:
1. 利用Camera 的Depth实现:用三个摄像机完成。效果如图所示:
2. 利用空间位置实现。
a. 将底层UI的Canvas与顶层UI的Canvas的RenderMode都设置为Screen Space-Camera,使得UI具有空间意义。
b. 将两个Canvas的Sorting Layer与Order设置相等,设置Plane Distance使得顶层Canvas具有较小值,这样顶层Canvas可以显示在上面。
c. 将模型放置于顶层Canvas与底层Canvas之间即可。效果如图所示:
3. 利用RederTexture将摄像机的内容渲染其中,然后使用UI组件RawImage将RenderTexture加载出来,即可通过Sorting Layer及Sort In Layer进行排序。效果如图所示:
综合以上三个方案,方案1需要多个摄像机,那这需要一套良好的摄像机管理方案才可以。方案3则是需要一个额外的RenderTexture,模型在接入时的调整也不够直观。而方案2只需要一个摄像机,且易于实现,所以我个人倾向于方案2。