【Unity】UI、3D物体、粒子间的复杂渲染层级关系

在实际项目中，往往会遇到这样的需求：比如一个UI背景，背景上有粒子，粒子上可能又有个图片，然后在上面有个3D模型，然后模型上又有一个UI，UI上又有粒子，然后再上面又有一个粒子，比如鼠标点击产生的一个粒子之类的。。。
是不是感觉有点晕？如果用图来表示的话可能清晰一点，就是下面这样：

渲染的顺序就是：背景-》粒子1-》UI1-》3D物体-》UI2-》粒子2-》粒子3

在这里其实可以以3D物体作为一个分界线，把背景-》粒子1-》UI1分为一组，3D物体为一组，UI2-》粒子2-》粒子3为一组，因为粒子和UI可以都属于UI层，而3D物体如果不用RenderTexture的方法是很难融入到UI中的。
在这里，我们要明确Unity中渲染的优先级，大致为Camera的depth（值越大越靠后渲染）-》Sorting Layer（值越大越靠后渲染）-》Order In Layer（值越大越靠后渲染）-》RenderQueue（值越大越靠后渲染）

所以总的来说，一个大组比如UI和3D物体分别用Depth不同的Camera来渲染，Canvas之间用Sorting Layer区分，每个Canvas下的子物体由Order In Layer区分，如果不指定，则默认为Hierarchy面板中从上到下依次渲染（当然粒子和UI之间不行，因为这两个本质上来说不是一个渲染体系，只能说粒子能放到UI层而已）。

所以我们这里用3个Camera，第一个Camera渲染背景-》粒子1-》UI1这一层，第二个Camera渲染3DModel，第三个渲染UI2-》粒子2-》粒子3这一层（其实如果粒子3是最上层的话可以单独拿出来，这里为了简便就都放进去了）

这里注意，所有的Camera都要设置为Depth Only，这样才能看到UI，而且所有用来渲染UI的Camera都要设置Projection为Orthographic，这样UI就不会近大远小了。

首先我们需要添加两个层Model和UI2来放3D物体和第二层UI，这样才能分开渲染。（第一层UI偷懒就用原始UI层了）

然后首先新建一个ModelCamera专门来渲染3D物体，所以它的CullingMask只需要Model层就行了，这个Model层是我们新建的一个层，3D物体也必须属于这个层。如下所示：

然后我们再新建两个Camera来分别渲染两层UI，各司其职，所以它们的CullingMask中需要剔除Model层和另一个UI层


最后，3个Camera的渲染层级由Depth控制，从小到大，数值越小的越先渲染，数值越大的越靠后渲染，因此按照UI1Camera-》ModelCamera-》UI2Camera的顺序依次设置depth为0、1、2，当然其他递增的顺序也是可以的。



之后为每层UI都创建一个Canvas，每个Canvas都要设置为Screen Space-Camera，然后指定各自的相机。


这样一来三个组就能按照顺序渲染了。当然每个组下面还要细分，这时候就要用到Sorting Layer还有Order In Layer了。
首先是第一层，第一层大概就是要一个粒子夹在两个UI中间（这个也是Unity面试的常考问题），很简单，只要把它们放到一个Canvs（这个Canvas必须要用Camera渲染的才行）里面然后控制它们之间的Order In Layer就行了，越大的越往后渲染，也就是说背景-》粒子1-》UI1的Order In Layer按照从小到大的顺序填即可，这里要注意的是有些UI比如Image没有Sorting Order以及Order In Layer属性，那么就需要自己加个Canvas组件并勾选Override Soring然后就能填Order In Layer了，当然这种方法因为要加Canvas所以势必会增加Batches所以还是需要控制数量。粒子是不需要加Canvas的，只要在Render的Order In Layer这里改就行了。



Model层不用说了，毕竟完全是靠Camera的dpeth来控制渲染的，只需要把需要在这层渲染的3D物体都设置为Model层就行了。

最后是第二层UI，和第一层一样如法炮制，只需要控制UI和粒子的Order In Layer就行，唯一不用的要增加一层Sorting Layer，也就是级别要比Model和UI都要高（不过其实这个不加也无所谓，因为已经通过相机控制好渲染层级了，不过为了更清晰还是加了）



当然，如果说最上层的粒子是要覆盖在所有UI之上比如鼠标点击粒子或者花瓣粒子之类的可以单独拿出来，只要保证它的Sorting Layer和Order In Layer比其他的都要高就行了。

最后是整个系统的层级图以及最终的效果，可以看见白色粒子夹在灰色背景和红色图片之间，黄色的为3D物体，夹在红色图片和蓝色图片之间，在蓝色图片之上又是两个粒子，黑色粒子在最上面。