Unity的三级排序层级渲染Layer,sorting layer,order in layer

偏执的太偏执、 2022-11-21 14:46 344阅读 0赞

一. 前言  
Unity游戏开发中，模型、界面、特效等等，需要规划好层的概念，涉及到摄像机（Camera）、画布（Canvas）、Shader等相关内容。

Unity大致按照三级排序进行层级渲染：**Camera的Depth CullingMask > Canvas的Sorting Layer > Canvas的Order in Layer**

二. 摄像机（Camera）  
一般3D游戏项目，会创建至少两个摄像机，一个3D摄像机（使用透视视角）和一个UI摄像机（使用正交视角）。

# 1. 3D摄像机 #

# ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70] #

# 2. UI摄像机 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 1]

# 3. 摄像机的Depth和Clear Flags设置 #

一般**UI摄像机的Depth要大于3D摄像机的Depth，这样才能使UI在3D摄像机渲染的物体的前面显示**。  
摄像机的Clear Flags建议使用Depth only，然后在Culling Mask选择相应的层（Layer）。  
比如3D摄像机的Culling Mask如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 2]

UI摄像机的Culling Mask如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 3]

这个Culling Mask的下拉列表中就是一个个的层（Layer），如果要添加新的层，可以点击Inspector窗口中的Layer，然后点击Add Layer...进行添加。

![在这里插入图片描述][20200407135519124.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 4]  
创建3D物体或UI界面的时候，都会设定物体的Layer，3D物体默认是Default层，UI默认是UI层。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 5]

**摄像机会根据Depth从小到大的顺序，渲染各自Culling Mask的层。**  
注意，在世界坐标下，物体A挡在物体B前面，但是只要渲染物体A的摄像机的Depth大于渲染物体B的摄像机的Depth，那么在Game视图中看到的效果就是物体B挡在物体A前面，如果物体A和物体B同在一个摄像机中渲染，那么正常情况下就是物体A挡住物体B（这里说正常情况下，是因为还可以通过下文的RenderQueue、SortingLayer、SortingOrder等的设置，让物体B挡在物体A前面）。

# 三. 画布（Canvas） #

UGUI中，所有UI元素都必须在画布（Canvas）的子节点中。Canvas的Render Mode一般是使用Screen Space - Camera模式，**把UICamera赋值给Canvas的Render Camera**。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 6]

这个时候，可以看到Canvas的面板中，出现了两个关键的属性：Sorting Layer、Order in Layer。

## 1. Sorting Layer ##

添加Sorting Layer可以点击Inspector窗口的Tag -> AddTag -> SortingLayer

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 7]

然后Canvas就可以在Sorting Layer中看到新加的Sorting Layer了（有点绕口）

为什么要有这个Sorting Layer呢，因为我们可以创建很多个Canvas，默认Sorting Layer是Default，这个时候，渲染顺序是根据Canvas的节点在Hierarchy窗口中的顺序来决定的，上层的节点先渲染，下层的节点后渲染。  
而有时候，可能需要打破这个顺序，让上层节点的Canvas后渲染，这个时候，就可以设置这个Sorting Layer为高的值，当然，也可以保持相等，通过设置Order in Layer。

拓展：UGUI会自动合并批次，原理是它会把一个Canvas下的所有元素合并在一个Mesh里，如果Canvas下的元素很多，任意一个元素发生位置、大小的改变，就需要重新合并所有元素的Mesh。如果元素非常多的话，就可能会造成卡顿。  
一个比较好的做法是每个UI界面都设置成一个Canvas。如果这个界面下的元素比较多，可以考虑嵌套多几个Canvas。尤其是会频繁改变位置大小的元素，这样可以降低它们合并Mesh的开销。但是Canvas嵌套太多也不好，Mesh合并是降低了，但是DrawCall又上去了，因为**每个Canvas都会单独占用一个DrawCall**。

**注意：到这里，应该明白了Layer与Sorting Layer无关，它们是两个概念：Layer是相机的相对深度值的渲染CullingMask层级,  SortingLayer是UGUI中Canvas画布的渲染层级。**

## 2. Order in Layer ##

**Order in Layer顾名思义，就是Sorting Layer的内部排序**，这样配合Sorting Layer就是**两级的排序**，可以解决大部分情况的渲染顺序需求。  
当然，如果创建多个UI摄像机，不同Canvas绑定不同的UI摄像机，**再配合摄像机的Depth，就是三级排序**，但一般不创建太多的UI摄像机，除非逼不得已。

小结: 渲染排序级别：**Camera的Depth > Canvas的Sorting Layer > Canvas的Order in Layer**

另外，ParticleSystem也有Sorting Layer和Order in Layer。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 8]

# 四. Shader的RenderQueue #

Unity提供给我们一些默认的渲染队列，每一个对应一个唯一的值，来指导Unity绘制对象到屏幕上。这些内置的渲染队列被称为Background, Geometry, AlphaTest, Transparent, Overlay。这些队列不是随便创建的，它们是为了让我们更容易地编写Shader并处理实时渲染的。  
示例

Tags\{ "RenderType" = "Geometry" \}  
1  
在材质球中可以看到显示。

Properties    Value    渲染队列描述    备注  
Background    1000    This render queue is rendered before any others.    这个队列通常被最先渲染（比如 天空盒）。  
Geometry    2000    Opaque geometry uses this queue.    这是默认的渲染队列。它被用于绝大多数对象。不透明几何体使用该队列。  
AlphaTest    2450    Alpha tested geometry uses this queue.    需要开启透明度测试的物体。Unity5以后从Geometry队列中拆出来,因为在所有不透明物体渲染完之后再渲染会比较高效。  
GeometryLast    2500    Last render queue that is considered “opaque”    所有Geometry和AlphaTest队列的物体渲染完后  
Transparent    3000    This render queue is rendered after Geometry and AlphaTest, in back-to-front order.    所有Geometry和AlphaTest队列的物体渲染完后，再按照从后往前的顺序进行渲染,任何使用了透明度混合的物体都应该使用该队列（例如玻璃和粒子效果）  
Overlay    4000    This render queue is meant for overlay effects.    该队列用于实现一些叠加效果，适合最后渲染的物体（如镜头光晕）。  
当RenderQueue填-1是使用shader自定义的值，否则使用手动填的值。  
2500是关键值，它是透明跟不透明的分界点。  
知识点:  
RenderQueue > 2500的物体绝对会在RenderQueue <= 2500的物体前面，即渲染时RenderQueue大的会挡住RenderQueue小的，不论它的Sorting Layer和Order in Layer怎么设置都是不起作用的。

当两个的RenderQueue都在同一侧时，在Sorting Layer高的绝对会在Sorting Layer前面，无视RenderQueue跟Order in Layer，只有在Sorting Layer相同的前提下，Order in Layer高的会在Order in Layer低的前面，无视RenderQueue。当Sorting Layer跟Order in Layer相同时，才看RenderQueue的高低，高的在前面。

# 小结： #

1、Sprite Renderer、ParticleSystem有sorting layer,order in layer。

2、Canvas根据Render Mode的不同，属性显示不同，当为ScreenSpace-Overlay时，只有sort Order属性，其他两种模式有sorting layer和order in layer属性，原因是Screen Space-Overlay渲染模式下，UI元素将在场景的上面，不受sorting layer的影响。

3、Layer与sortinglayer无关，layer是对游戏中所有物体分类别划分，便于相机拣选，在camera的Culling mask进行选择。

4、sorting layer与渲染次序相关，根据sortingin layer中设置的先后顺序依次渲染。Order in layer是在同一个sorting layer内的细分，根据数值由小到大依次渲染。（渲染优先级为Camera.depth,sorting layer,order in layer）

5、UGUI画布上面的UI对象的层级关系不受Z轴的影响，按照hierachy中由上到下的顺序进行渲染。游戏对象层的Z轴影响渲染顺序，渲染优先级处于Camera.depth,sorting layer,order in layer之后。

[https://blog.csdn.net/linxinfa/article/details/105361396][https_blog.csdn.net_linxinfa_article_details_105361396]

[https://www.bilibili.com/video/av795044814/][https_www.bilibili.com_video_av795044814]

# Demo:  #

下载地址： [https://github.com/petergjh/u3dcrash/tree/master/TestUGUI][https_github.com_petergjh_u3dcrash_tree_master_TestUGUI]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70][]

正常情况ImageUIPop和ImgUI都继承了Canvas的层级，ImgUI控件在ImageUIPop下面，所以先渲染黄色，再渲染红色，此时重叠部分的效果是红色遮挡了黄色

这时如果想要黄色在上面，红色在下面

### 方法一：交互两个控件的位置 ###

，把ImageUIPo移到下面，就会拒黄色遮挡红色：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1][]

### 方法二： 手动给控件增加层级组件设置不同层级 ###

### 第一步先在右上角Tag里添加一个新的 SortingLayer层 ###

注意不是右上角的Layer (相机的CullingMask层)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 3][]

### 第二步，给ImageUIPop 添加Canva画布组件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 4][]

###  第三步：设置渲染模式为相机渲染 ###

在前面的Canvas上点选OverrideSorting,这时只显示了SortOrder值来确定显示层次

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 5][]

我们查看继承的父Canvas属性里的渲染模式设置：默认的是ScreenSpace - Overlay

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 6][]

把画布的渲染模式修改为第二个 ScreenSpace - Camera 相机渲染模式

### 第四步，**把UICamera赋值给Canvas的Render Camera**。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 7][]

这时出现了画布的SortingLayer和Order in Layer选项，默认的SortingLayer是Default

查看黄色区域控件，前面新增的Canvas继承了父Canvas的渲染模式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 8][]

### 第五步，设置相机渲染的SortingLayer值 ###

修改继承过来的SortingLayer值，设置为前面新增的PopUI层：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 9][]

我们发现，虽然ImageUIPop黄色区域在ImgUI红色控件的上层，但因为渲染层级改为更前面的PopUI层，会让ImagUIPop黄色区域显示在红色的前面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 10][]

相机会先渲染SortingLayer的Default默认层，再渲染PopUI层

![20210322140301879.png][]

另外注意， 如果黄色这个pop层是一个弹窗需要点击时关闭，那就需要格外添加射线检测，

添加GraphicRaycaster物理射线检测组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 11][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70]: /images/20221120/f7311a5ffb3e469b957196d7a7c093cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 1]: /images/20221120/7ee7550342b546569d0770b16023e5ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 2]: /images/20221120/a632a99a759d4f21bdb9ae329b17895e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 3]: /images/20221120/30b04b29ede140fa91718789cd91ad29.png
[20200407135519124.png]: /images/20221120/c3a64523913a4c8f97baf872328f851f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 4]: /images/20221120/32cdcc2004f741908163b101c83c85f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 5]: /images/20221120/3664957c6b444e57bf0d8e3ff46b18fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 6]: /images/20221120/316ebf743499465d835a47e9279d987d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 7]: /images/20221120/2c621d819498401da2c8e67c99a7b216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 8]: /images/20221120/d3c515ccdc8d4d0e8c7d5d1496a4fdb7.png
[https_blog.csdn.net_linxinfa_article_details_105361396]: https://blog.csdn.net/linxinfa/article/details/105361396
[https_www.bilibili.com_video_av795044814]: https://www.bilibili.com/video/av795044814/
[https_github.com_petergjh_u3dcrash_tree_master_TestUGUI]: https://github.com/petergjh/u3dcrash/tree/master/TestUGUI
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70]: /images/20221120/c7a7287f0bae4ff780c55f69ea3b0074.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1]: /images/20221120/896ed9f6c3264d85a961195437fc7754.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 2]: /images/20221120/75671f9846354a53a51e91c2d1199402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 3]: /images/20221120/aec9a810da004d8c9192d40d8f398033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 4]: /images/20221120/cedd85892a844d728f4e4aa788aa4c70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 5]: /images/20221120/07526f1c177d430e96f7c5297aa5739f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 6]: /images/20221120/b83216ccc2ef4e7dacc10a618862f932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 7]: /images/20221120/baa9673cf0284f7ab49d158c3e86e275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 8]: /images/20221120/c226822b600246b98b64a5689e518a93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 9]: /images/20221120/c48245aa8ed84d5987161978ec84f4b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 10]: /images/20221120/e45d80d6fba34e6390f4fc7bb2d1bddb.png
[20210322140301879.png]: /images/20221120/87f69399d1a74bbca19fd4592ff7c9cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 11]: /images/20221120/06d39ac5251f4cdeba3c05a260b5e705.png