三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

Unity双摄像机分层渲染：实现《明日方舟》式UI与3D场景融合

发布时间：2026/8/11 1:43:48 三亩地 编程学习日记
Unity双摄像机分层渲染：实现《明日方舟》式UI与3D场景融合

1. 项目概述：为什么《明日方舟》式主界面值得深究？

如果你玩过《明日方舟》，或者体验过一些高品质的二次元手游，一定会对它们的主界面印象深刻。那是一种非常独特的视觉感受：清晰锐利、动效流畅的2D UI界面，与一个带有景深、光影细腻的3D场景背景完美地融合在一起。UI按钮仿佛悬浮在3D场景之上，互不干扰，层次感极强。这种效果，在Unity开发中，我们称之为“UI与3D场景的分层渲染”。

乍一看，这似乎很简单——不就是把UI画在3D模型前面吗？但当你真正动手在Unity里尝试时，坑就来了。最常见的问题是“Z轴冲突”（Z-Fighting）：你的UI精灵（Sprite）和3D模型在深度上“打架”，导致UI时而被背景模型穿透，时而闪烁。另一个问题是性能：如果整个场景（包括复杂的3D背景和全屏UI）都用同一个摄像机渲染，Overdraw（过度绘制）会非常严重，特别是UI部分常常是全屏透明的，这会给GPU带来不必要的负担。

所以，这个项目的核心目标非常明确：使用双摄像机方案，彻底、干净地分离UI层与3D场景层，实现视觉上无缝融合、性能上高效合理、开发上清晰易维护的“明日方舟”式主界面。这不仅仅是解决一个渲染问题，更是对游戏前端架构的一种优化。接下来，我会带你从原理到实践，一步步拆解这个方案，并分享我在多个项目中趟过的坑和总结的经验。

2. 核心原理：正交与透视，双摄像机的分工哲学

要实现干净的分层，首先要理解Unity摄像机的两种核心投影方式：正交投影（Orthographic）和透视投影（Perspective），以及它们如何通过渲染顺序（Depth）和剔除遮罩（Culling Mask）协同工作。

2.1 透视投影摄像机：负责3D世界

透视投影摄像机模拟了人眼的视觉效果，有近大远小的景深感。它用于渲染游戏中的3D场景、角色、特效等一切需要空间感的内容。

  • 工作原理：像一个锥体，物体离摄像机越远，在屏幕上成像越小。
  • 关键参数：Field of View（视野）、Clipping Planes（近裁面和远裁面）。我们需要精心设置这些参数来框定3D背景的显示范围。

2.2 正交投影摄像机：负责2D UI

正交投影摄像机没有透视变形，无论物体在Z轴（深度轴）上多远，其在屏幕上的大小都是一样的。这完美契合了2D UI的需求——一个按钮无论在UI层的“前面”还是“后面”，我们都希望它保持设计时的大小。

  • 工作原理：像一个长方体，所有光线平行投射，物体大小与距离无关。
  • 关键参数：Size（对于竖直方向）或Width（对于水平方向），它定义了摄像机能看到的世界空间高度的一半。Clipping Planes同样重要，它定义了UI层的“厚度”。

2.3 双摄像机协同的核心机制

  1. 渲染顺序（Depth）：Unity中摄像机的Depth值决定了它们的渲染顺序。值越大的摄像机越晚渲染。因此，我们的策略是：

    • 3D摄像机（透视）：Depth = 0。先渲染，作为背景。
    • UI摄像机（正交）：Depth = 1。后渲染，其画面会覆盖在3D画面之上。 这样，UI自然就显示在了3D场景的前面。

  2. 剔除遮罩（Culling Mask）：这是实现“分层”的关键。每个摄像机都可以选择只渲染特定层（Layer）的物体。

    • 3D摄像机：只勾选“Default”、“3DScene”等包含你3D背景模型的层。务必取消勾选“UI”层。
    • UI摄像机：只勾选“UI”层。务必取消勾选“Default”等3D层。 通过这种方式，两个摄像机各司其职，从根源上避免了渲染内容的交叉。

  3. 清除标志（Clear Flags）：这决定了摄像机在开始绘制新一帧前，如何处理上一帧的颜色和深度缓冲区。

    • 3D摄像机：通常设置为Solid Color或Skybox。它会清除颜色和深度缓冲区，为渲染3D场景准备一块干净的“画布”。
    • UI摄像机：必须设置为Depth Only。这意味着它只清除深度缓冲区，但不清除颜色缓冲区。这样，UI摄像机渲染的内容（UI）就会与3D摄像机已经渲染好的颜色缓冲区（3D场景）进行合成，而不是覆盖掉它。这是实现UI叠加在3D背景上的另一技术关键。

注意：很多新手会忽略Clear Flags的设置，导致UI摄像机把漂亮的3D背景清成单一颜色，画面只剩UI。记住这个口诀：3D清全部，UI只清深度。

3. 实战搭建：从零构建分层渲染系统

理解了原理，我们开始动手。假设我们要为一个二次元游戏制作主界面，背景是一个带有简单光影的3D办公室场景，前景是各种功能按钮和看板娘立绘。

3.1 场景与层级（Layer）设置

  1. 创建层级：打开Edit -> Project Settings -> Tags and Layers。在Layers列表中，我们至少需要定义两个自定义层：

    • 3DScene：用于存放所有3D背景相关的物体（模型、灯光、环境等）。
    • UI：Unity默认已有，用于存放所有Canvas下的UI元素。 （你可以根据项目复杂度增加更多层，如UIEffects用于UI粒子特效。）

  2. 组织场景物体：

    • 将你的3D办公室模型（地板、桌椅、书架等）、灯光、环境光探头（Light Probe）等，全部放入一个空的GameObject下（比如命名为“_3DSceneRoot”），并将这个根节点的Layer设置为3DScene。务必勾选应用此层级到所有子物体。
    • 你的UI应该在一个Canvas下。确保Canvas及其所有子物体的Layer都是UI。

3.2 创建与配置双摄像机

  1. 创建3D摄像机（透视）：

    • 在场景中创建摄像机，重命名为“Camera_3D”。
    • Transform：根据你的场景构图调整位置和角度。例如，放在办公室的一角，看向中心。
    • Projection：Perspective。
    • Culling Mask：只勾选3DScene。取消勾选UI和其他无关层。
    • Depth：0。
    • Clear Flags：Solid Color。选择一个适合作为背景底色的颜色（如深灰色），以防有未被渲染到的角落。
    • 其他设置：根据需求调整Field of View（比如60），设置合适的近裁面（如0.3）和远裁面（如1000），确保能覆盖整个3D场景。

  2. 创建UI摄像机（正交）：

    • 创建第二个摄像机，重命名为“Camera_UI”。
    • Transform：位置设为(0,0,-10)，旋转归零。正交摄像机的位置只要在Canvas的“前面”即可，具体Z值影响不大。
    • Projection：Orthographic。
    • Size：这个值需要计算。如果你的Canvas是Screen Space - Camera模式，且Canvas Scaler的Reference Resolution是1920x1080，那么UI摄像机的Size应设置为1080 / 2 / 100 = 5.4（假设Canvas的Reference Pixels Per Unit为100）。公式是：Size = (Reference Resolution Height / 2) / Reference Pixels Per Unit。
    • Culling Mask：只勾选UI。取消勾选3DScene和Default。
    • Depth：1（必须大于3D摄像机的Depth）。
    • Clear Flags：Depth Only（这是最关键的一步！）。
    • 其他设置：近裁面（如0）和远裁面（如10）要能包含所有UI元素的Z轴位置。UI元素通常Z坐标为0，所以设置一个较小的范围如0-50即可。

3.3 配置Canvas渲染模式

UI Canvas的渲染模式必须与我们的双摄像机方案匹配。

  1. 选中主Canvas。
  2. 在Render Mode下拉菜单中，选择Screen Space - Camera。
  3. 将Render Camera拖拽赋值为我们刚刚创建的Camera_UI。
  4. 确保Plane Distance的值在UI摄像机的近裁面和远裁面之间（例如5）。这个值决定了Canvas平面在UI摄像机视野中的“深度”位置。

至此，基础架构就搭建完成了。运行游戏，你应该能看到3D场景作为背景，UI清晰地叠加在其上，互不干扰。

4. 深度进阶：处理UI与3D的交互与特效

基础的分层渲染只是开始。一个真正成熟的主界面，还需要处理一些复杂的交互和视觉效果。

4.1 UI中的3D模型（看板娘/角色展示）

我们常常需要在UI界面上显示一个3D角色（比如看板娘）。这个角色是3D的，但需要像UI一样被UI摄像机渲染，并且位于某些UI元素之后、另一些之前。这需要一点技巧。

  1. 创建渲染纹理（Render Texture）方案（推荐）：

    • 这是最稳定、性能可控的方案。你创建一个新的摄像机（Camera_Char），专门用于拍摄这个3D角色，将其输出到一张Render Texture上。
    • 然后在UI中，创建一个Raw Image组件，将这张Render Texture赋值给它，就像显示一张普通图片一样。
    • 优点：角色渲染与主场景完全隔离，可以使用独立的光照、后处理效果，且深度顺序完全由UI层级的父子关系和Canvas Order决定，简单可靠。
    • 缺点：需要额外的摄像机和显存来存储Render Texture。

  2. 使用额外的摄像机与层级混合方案：

    • 将你的3D角色放在一个单独的层，例如UI3DCharacter。
    • 修改Camera_UI的Culling Mask，同时勾选UI和UI3DCharacter。
    • 这时，这个角色会被UI摄像机渲染。你需要通过精确控制这个3D角色GameObject的世界坐标Z值，以及UI元素的RectTransform的局部坐标Z值，来手动调整它们之间的前后遮挡关系。这非常繁琐且容易出错。
    • 注意：此方案下，该3D角色无法接收来自3DScene层的光照，需要单独打光或使用自发光材质。

实操心得：对于静态或简单动画的看板娘，Render Texture方案是首选。虽然多了一步，但换来了绝对的稳定性和易控性。对于需要与UI深度交互（如点击、拖拽旋转）的复杂3D模型，可以结合World Space模式的Canvas，但这属于更高级的议题，初期建议用Render Texture。

4.2 UI粒子和后处理特效

  1. UI粒子特效：Unity的Particle System默认在Default层。如果想让粒子作为UI特效（如按钮光效），你需要：

    • 将粒子系统GameObject的Layer改为UI。
    • 确保粒子系统的Renderer组件中的Order in Layer属性被正确设置，以控制它在UI中的渲染顺序。或者，更常见的做法是，将粒子系统作为某个UI元素的子物体，其渲染顺序会受到Canvas的Sort Order和父UI元素的Hierarchy顺序影响。

  2. 后处理（Post Processing）：你可能会想给3D场景添加Bloom（泛光）、Color Grading（色彩校正）等后处理效果。

    • 这些效果应该只加在Camera_3D上。创建一个Post-process Volume，并确保其Layer包含3DScene，这样它只会影响3D摄像机。
    • 绝对不要将全局后处理加在Camera_UI上，否则会导致UI元素也被模糊或调色，破坏其清晰度。

4.3 性能优化要点

双摄像机本身是一种性能优化（通过减少Overdraw），但配置不当也会有开销。

  1. 控制3D场景的复杂度：主界面背景通常是静态或半静态的。尽量使用静态合批（Static Batching）、遮挡剔除（Occlusion Culling）对于移动端可能不适用，因为视角固定）来优化。减少实时灯光，使用光照贴图（Lightmap）和光照探头（Light Probe）来烘焙静态光影。
  2. UI摄像机的优化：
    • 禁用不必要的组件：UI摄像机不需要物理碰撞检测，可以禁用Physics Raycaster（如果你没有为UI添加额外的射线检测需求）。
    • 合理设置Clipping Planes：将UI摄像机的近/远裁面范围设置得尽可能紧贴UI元素的Z轴分布范围，避免对无用深度空间进行计算。
  3. 渲染纹理的优化：如果使用Render Texture展示3D角色，纹理尺寸不要盲目使用屏幕分辨率。根据角色在UI中占据的实际大小，使用256x256或512x512这样的分辨率通常就足够了，能显著节省显存和带宽。

5. 常见问题与排查技巧实录

即使按照步骤操作，你也可能会遇到一些诡异的问题。下面是我在项目中实际踩过的坑和解决方案。

问题现象可能原因排查与解决方案
UI完全不见了1. Canvas渲染模式错误。
2.Camera_UI的Culling Mask未包含UI层。
3.Camera_UI的Depth值小于Camera_3D，被先渲染然后覆盖。		1. 确认Canvas为Screen Space - Camera，且Render Camera指向Camera_UI。
2. 检查Camera_UI的Culling Mask，确保UI层被勾选。
3. 确保Camera_UI的Depth（如1） >Camera_3D的Depth（如0）。
3D背景变成纯色（如灰色）Camera_UI的Clear Flags错误地设置为Solid Color或Skybox。将Camera_UI的Clear Flags改为Depth Only。这是最高频的错误。
UI显示，但3D背景是黑的1.Camera_3D的Culling Mask未包含3D场景所在层。
2. 3D场景没有受到任何光照，或摄像机指向错误。
3. 3D模型材质/shader问题。		1. 检查Camera_3D的Culling Mask，确保3DScene层被勾选。
2. 检查场景中是否有光源，确认摄像机视角能看到物体。
3. 检查材质球是否丢失，Shader是否支持当前渲染管线（URP/HDRP需用对应Shader）。
UI和3D场景边缘出现闪烁（Z-Fighting）UI元素与3D场景的几何体在深度缓冲区（Z-Buffer）中值过于接近，精度不足导致渲染顺序不确定。1.根本解决：确保两者被不同的摄像机渲染（我们的方案已实现）。
2.微调：适当拉大UI Canvas的Plane Distance与3D场景最远物体的距离，为深度缓冲区提供更充裕的精度范围。
UI上的3D角色（RenderTexture方式）很模糊Render Texture的分辨率太低。在Project面板中选中使用的Render Texture，在Inspector中提高其Size（如从256提高到512或1024）。需权衡清晰度与性能。
点击事件穿透UI，触发到了3D物体如果3D物体带有碰撞体和物理射线检测，且UI事件系统未完全拦截。1. 确保UI按钮的Raycast Target为true。
2. 检查EventSystem，确保其使用的Input Module（如Standalone Input Module）工作正常。
3. 一个更粗暴但有效的方法：为Camera_3D添加一个Physics Raycaster组件，并为其设置一个更高的Event Mask优先级，或者通过代码在点击UI时屏蔽对3D层的射线检测。
在编辑器Scene视图正常，Game视图异常可能某个摄像机的Target Display设置错误。检查所有摄像机的Target Display选项，确保都是Display 1。

独家避坑技巧：

  • 调试利器：Frame Debugger：当出现渲染问题时，第一时间打开Window -> Analysis -> Frame Debugger。它可以暂停游戏，并逐条查看每一帧的渲染指令（Draw Call）。你可以清晰地看到是哪个摄像机在渲染、渲染了哪些物体、使用的Shader和渲染状态是什么。这是定位渲染问题的终极武器。
  • 给摄像机“上色”：在调试初期，可以临时将Camera_3D的Background（当Clear Flags为Solid Color时）设置为醒目的红色，将Camera_UI的背景设置为醒目的绿色。这样在游戏运行时，你能一眼看出屏幕上的每个区域是由哪个摄像机渲染的，快速定位是哪个环节没起作用。

通过这套双摄像机分层渲染方案，你不仅能复现出《明日方舟》那样清晰、富有层次感的主界面，更能建立起一个清晰、高性能的UI渲染框架。它让UI美术和3D场景美术的工作可以最大程度解耦，后期维护和特效添加也会更加方便。记住，好的技术方案不仅是实现功能，更是为整个项目的开发流程和性能表现打下坚实的基础。

编程学习 学习日记 实战经验
← 返回列表