Unity中的层级以及渲染顺序

0x00 写在前面
在使用unity3d开发游戏项目时，层级的问题往往伴随着UI的开发，而在引入了3D模型、粒子特效后，层级的问题就变得有些扑朔迷离了，甚至会牵扯到Unity的渲染顺序。本篇主要从UGUI的角度出发，浅析UGUI中影响层级的因素。后续会分析UI与3D对象，UI与粒子特效之间层级的关系。

0x01 影响层级的因素
前提条件：
- Camera-Clear Flags
- Canvas-Render Mode

影响层级的因素：

• Camera
  
  • depth
• Canvas
  
  • Hierarchy中的排列顺序
  • sorting layer
    
    • order in layer
• Shader中的RenderQueue

0x02 Camera中的Clear Flags
skybox
屏幕上的空白处将会以以当前camera的skybox填充。
solid color
屏幕上的空白处将会以当前camera的background color填充。
Depth only
每次绘制前，只是清空深度缓冲区，但是并没有清空颜色缓冲区。（一般适用于多个camera的情况）
Don’t Clear
该模式不清除任何颜色或者深度缓存。每帧绘制在下一帧之上，造成涂片效果。

camera的clear Flags选定Don’t Clear 或者 当我们只有一个camera时选定Depth only 会出现以下涂片效果：

参考资料：https://docs.unity3d.com/Manual/class-Camera.html

0x03 Canvas的Render Mode
Render Mode主要用于定义UI如何渲染于屏幕之上。通常一个Scene只需一个Canvas即可，不过Canvas自身也是支持嵌套的，默认情况下，子Canvas与父Canvas的Render Mode保持一致。
Screen Space-Overlay
此模式下，Canvas会被缩放以适应屏幕，然后直接渲染到屏幕上，无需任何摄像机。屏幕尺寸或者分辨率改变了，UI会自动进行缩放，UI会覆盖所有其他摄像机的画面。

该模式下需要特别注意：Canvas需要放在Hierarchy所有元素的顶层，否则UI可能会从视图中消失。这是Unity内置的限制。
原文：Note: The Screen Space - Overlay canvas needs to be stored at the top level of the hierarchy. If this is not used then the UI may disappear from the view. This is a built-in limitation. Keep the Screen Space - Overlay canvas at the top level of the hierarchy to get expected results.

---

Screen Space-Camera
此模式下，Canvas会渲染于摄像机前面指定距离的一个平面上。UI在屏幕上的大小并不随此距离变化而变化（有点像正交投影）。场景中的物件可能与UI遮挡。

---

World Space
此模式下，UI被看作是场景中的一个平面物体。UI此时可以不朝向Camera，其他场景中的物件除了可以与UI遮挡外，还可能与UI穿插。

参考资料：https://docs.unity3d.com/Manual/class-Canvas.html

0x04 UI与3D物体
通常的游戏项目会采用两个Camera，一个UICamera用于绘制UI，一个GameCamera用于绘制游戏中的3D对象。这时候就引入了新的复杂度，多个Camera如何管理，又如何协同工作的问题。不考虑3DUI的普遍情况下，UI往往位于场景中的3D模型上方。

GameCamera的Depth = -1，Culling Mask为everything不进行剔除操作，ClearFlags的标志为skybox，表示空白的地方以天空盒填充。

扫描二维码关注公众号，回复： 3766902 查看本文章

---

UICamera的Depth = 0，Culling Mask为UI，UICamera嘛盯着UI就够了。Projection一般选Orthographic就好，选择PerspectiveUI可能会出现类似透视Camera下的旋转和扭曲等奇怪的现象。去除Audio Listener是为了避免unity中2 audio listeners的报错。

---

将Canvas的Render Mode设置为Screen Space-Camera。

---

最后的效果如图：