Unity层级问题 #03 | MeshRender vs UI 组件

引言

编码过程中,遇到了一个非常经典的渲染层级问题:即特效(由Mesh Render渲染,例如粒子特效或 3D 网格)作为背景时,无论怎样调整,都会在文字(基于 UGUI 的 TextMeshPro)上方。

为了解决这个问题,我进行了一系列的尝试:

  • 尝试调整过字体的 Pos Z(Z轴深度);
  • 尝试给 UI 区域单独加一个 Canvas 并调整层级(但由于父节点有多个 Canvas,导致文字材质丢失或渲染成了黑色,暂时不知道如何解决);
  • 也尝试了直接在 Inspector 中调整 Mesh Renderer 所在的层级(Layer)。

一、Mesh Render vs UI组件

在 Unity 中,Mesh Renderer(网格渲染器)和基于 Canvas 的 UI 组件(如 ImageTextMeshPro)虽然最终都会把画面输出到屏幕上,但它们所遵循的空间坐标系和层级排序规则(Sorting)完全不同。

  • Mesh Render
    • 使用世界坐标系,受标准 Transform 控制(Position, Rotation, Scale)。
    • 它会受到相机的透视(Perspective)关系影响------即"近大远小"。
  • UI组件
    • UI元素必须依赖于Canvas存在,使用 RectTransform 代替了普通的 Transform。
    • 通常情况下,Canvas 的渲染模式是 Screen Space - Overlay(屏幕空间-覆盖)。在这种模式下,UI 就像是直接贴在玩家屏幕玻璃上的贴纸,它脱离了 3D 世界,永远渲染在所有 3D 物体的最前方

那为什么会导致UI被渲染在特效下方呢?

原因很简单。Canvas有三个模式,如果你的 Canvas 设置为了 Screen Space - CameraWorld Space,此时,深度和遮挡关系就不再是简单的"UI 永远在最前面"了。

下面是两者渲染顺序的比较方法:

排序决定因素 UI (Canvas 下的 Image/TMP) 特效/3D物体 (Mesh Renderer)
第一优先级 Canvas 的 Sorting Layer 和 Order in Layer 材质球 (Material) 的 Render Queue (渲染队列)
第二优先级 Hierarchy 面板中的节点上下顺序(越靠下,渲染越晚,越显示在顶层) Sorting Layer 和 Order in Layer
第三优先级 Z 轴深度(在普通 UI 中几乎无效) 相机距离(Z-Buffer 深度测试,离相机越近越靠前)

二、产生"特效遮挡文字"的原因

  1. 特效材质的渲染队列(Render Queue)极高: 很多特效(特别是透明特效、光效)的 Shader 中,渲染队列被设置为了 Transparent(3000及以上),甚至有的是 Overlay(4000)。由于我项目的UI Canvas 也是在 Camera 模式下,它的默认渲染队列往往争不过这些特效。
  2. UI 的 Z 轴在 3D 排序中失效: 我尝试调整 TextMeshPro 的 Pos Z,这在纯 UGUI 的基于 Hierarchy 排序的逻辑里是无效的。在不修改 Canvas 属性的前提下,Z 轴位移改变不了 UI 面片与 3D 网格的渲染先后顺序。
  3. Canvas 嵌套导致的材质变黑: 我尝试添加子 Canvas 来控制 Order,但文字变黑的原因,是因为 TextMeshPro 的材质需要特定的 Shader 配合,多个 Canvas 嵌套如果导致了额外的批处理打断、或者 Mask 遮罩冲突,亦或是相机剔除,就会引起 TMP 渲染异常(变黑)。

三、解决思路与实践

方法一:修改MaterialRender Queue(渲染队列)

这显然不太合理,但是也不失为一个方法

方法二:添加Sorting Group组件

  • 如果你的特效不仅有 Mesh Renderer,还包含了多层 Particle System(粒子系统),修改单个材质会非常麻烦。这时可以利用 Sorting Group
  • 在特效的根节点添加Sorting Group组件,这个组件会把其下的所有渲染器打包成一个整体参与排序。将 Sorting Group 的 Sorting Layer 设置为低于 UI 的层级,或者修改Order in Layer的层级使其低于UI层。

缺点 :这个组件会强制打断合批,导致Draw Call增加,它会将其所有的子节点作为一个"孤岛"进行整体排序和渲染。这样就会使得即使后续有其他特效的材质和它完全一样也无法合并为一个Draw Call,如果同屏大量出现使用Sorting Group的特效,会造成CPU提交渲染指令的压力激增。

使用时机:如缺点所提到的,这种方法只适合低频、唯一、同屏数量极少的特效使用(比如结算动画、抽卡展示动画等),切勿在高频触发且同屏数量多的时候使用!

方法三:利用Render Texture(RT)

如果特效和 UI 之间的穿插关系极其复杂(比如 UI 夹在两个特效中间,或者在做类似 3D 角色展示的卡牌界面),最一劳永逸的方法是物理隔离。

操作步骤:

  1. 创建一个新的 Camera(专门用来拍特效)。
  2. 创建一张 Render Texture (RT)。
  3. 将新 Camera 的 Target Texture 设为这张 RT。
  4. 在 UI 层级中创建一个 Raw Image,将 RT 拖给它。
  5. 此时,3D 特效彻底降维成了一张 2D 图片,你只需要按照普通的 UGUI Hierarchy 节点上下顺序来拖拽这个 Raw Image,这时就不会出现遮挡问题。

这种方法性能较好,并且不会打断合批,建议使用

方法四:让特效重新更改

让特效老师把特效改成UI Image,如果仅仅只是因为这个用Mesh Render的特效遮盖了UI组件的话,这是更简单粗暴的方法。

四、总结

按照综合推荐度(项目规范、性能消耗、后期维护成本)的话,如下:

方法四 > 方法三 > 方法二 > 方法一

首选:方法四(让特效重新更改)

推荐度:最佳实践 这是最符合"UI 归 UI,3D 归 3D"架构规范的终极方案。直接从资源源头解决问题,将其改为序列帧或 UI 粒子,完美融入 UGUI 的层级管理体系。它能与 UI 完美合批,后期维护成本极低,没有额外的渲染状态干涉负担。

次选:方法三(利用 Render Texture)

推荐度:重点推荐 当特效必须保留复杂的 3D 表现力(如透视、模型穿插),无法妥协为纯 2D 时,这是最标准且一劳永逸的做法。它实现了 UI 与 3D 场景的物理隔离,彻底"降维打击"。只要控制好 RT 的分辨率和资源释放,它既不会打断 UI 合批,也不会带来任何层级穿插的灵异 Bug。

谨慎使用:方法二(添加 Sorting Group 组件)

推荐度:谨慎使用 这是一个"快速出效果但有隐患"的补丁方案。正如你总结的缺点,它最大的原罪是强制打断合批并增加 Draw Call。它只能作为低频、唯一特效(如抽卡展示、结算动画)的特例手段,绝不能作为常规的高频 UI 特效混排方案。

最不推荐:方法一(修改 Material 的 Render Queue)

推荐度:极不推荐 这是最容易引发后续连锁反应的做法。直接修改材质的渲染队列,极其容易和场景中其他依赖深度测试的物体产生冲突。并且在预设体嵌套、多人协作的项目中,这种纯靠手动捏造 Queue 值来控制层级的方式,会导致后期排查渲染 Bug 时如同大海捞针。

五、感想

复盘这次的解决过程,感觉还是学到了不少东西的。最大的感悟是:不要死磕表象,要去看透底层规则

Unity 的很多"玄学"问题,本质上都是因为我们对引擎底层的渲染顺序或机制不够了解。把时间花在理清 Render QueueSorting LayerZ-Buffer 这些基础概念上,也能收获不少。

相关推荐
SmalBox3 小时前
【节点】[ScleraIrisBlend节点]原理解析与实际应用
unity3d·游戏开发·图形学
SmalBox1 天前
【节点】[IrisUVLocation节点]原理解析与实际应用
unity3d·游戏开发·图形学
avi91111 天前
[AI教做人]CinemachineCamera 各项调整配置参数入门 + Profiler
unity·游戏开发·camera·cinemachine·visual camera·镜头配置
_zhourui_h_2 天前
MyFramework:Unity大型项目里的 UI 生命周期应该怎么管理
unity3d
甲维斯2 天前
普通人慎入!Fable5原创游戏“死线求生”第一版!
人工智能·ai编程·游戏开发
SmalBox2 天前
【节点】[IrisOutOfBoundColorClamp节点]原理解析与实际应用
unity3d·游戏开发·图形学
Ethan的技术工坊2 天前
Unity Windows 客户端从 Mono 切换到 IL2CPP 后,安装包体积翻倍的排查记录
unity3d
_zhourui_h_2 天前
MyFramework Unity:TweenSequence 和 DOTween 有什么区别
unity3d
SmalBox3 天前
【节点】[IrisOffset节点]原理解析与实际应用
unity3d·游戏开发·图形学