【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物体,夹在红色图片和蓝色图片之间,在蓝色图片之上又是两个粒子,黑色粒子在最上面。
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39804671/article/details/123963705
今日推荐