Unity中UI与模型特效混排方案

在做项目的时候会遇到将模型与UI混合编排,以前用FairyGUI 的时候可以直接把模型放在其中,通过在FairyGUI独有的编辑器上对其Order进行合理设值即可实现混排。而UGUI则不太一样,通过这两天的查找资料与真机实践,下面将阐述所得。

我们在屏幕上看到的具有前后遮挡关系的图像,本质上是由渲染顺序决定的(ZWrite及ZTest默认的情况下),先渲染的会被后渲染的所覆盖,从而形成遮挡关系。

能够影响渲染顺序的因素有:

  1. Camera Depth
    相机组件上设置的相机深度,深度越大越靠后渲染。
    Unity中UI与模型特效混排方案
  2. Sorting Layer
    意为排序层级,对于2d图像相关的一些组件,一般都会具有该属性,值越大,越靠后渲染。值得注意的是,粒子系统中也具备该属性,因为粒子特效本身是用“点精灵”渲染的,每个粒子就是一个点精灵,可以看做一个片模型。Unity中UI与模型特效混排方案
  3. Order In Layer
    意为层中的排序,值越大,越靠后渲染。
    Unity中UI与模型特效混排方案
  4. RenderQueue
    Shader中对Tags设置的“Queue”。
    Unity中UI与模型特效混排方案
  5. 空间位置
    默认情况下,会基于物体距离摄像机的远近来排出渲染顺序,远的先渲染,近的后渲染。Unity中UI与模型特效混排方案

 

五个影响因素的优先级如下:

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即可。如图所示:
Unity中UI与模型特效混排方案 (CA)
Unity中UI与模型特效混排方案 (P)
Unity中UI与模型特效混排方案 (CB)

显示效果:
Unity中UI与模型特效混排方案

UI与模型混排:
由于模型为3d物体,3d物体没有Sorting Layer 与 Sort In Layer属性,所以考虑方案如下:
1. 利用Camera 的Depth实现:用三个摄像机完成。效果如图所示:Unity中UI与模型特效混排方案

 

2. 利用空间位置实现。
a. 将底层UI的Canvas与顶层UI的Canvas的RenderMode都设置为Screen Space-Camera,使得UI具有空间意义。

b. 将两个Canvas的Sorting Layer与Order设置相等,设置Plane Distance使得顶层Canvas具有较小值,这样顶层Canvas可以显示在上面。
c. 将模型放置于顶层Canvas与底层Canvas之间即可。效果如图所示:Unity中UI与模型特效混排方案

 

3. 利用RederTexture将摄像机的内容渲染其中,然后使用UI组件RawImage将RenderTexture加载出来,即可通过Sorting Layer及Sort In Layer进行排序。效果如图所示:
Unity中UI与模型特效混排方案

 

综合以上三个方案,方案1需要多个摄像机,那这需要一套良好的摄像机管理方案才可以。方案3则是需要一个额外的RenderTexture,模型在接入时的调整也不够直观。而方案2只需要一个摄像机,且易于实现,所以我个人倾向于方案2。