UPL2-11——UI 和 UI Details 模块

关于 UGUI 相关，详见：UG3——UGUI系列

UI 和 UI Details 模块

UI（用户交互界面）、UI Details（用户交互界面详细信息）两个模块，都是用于分析和优化 Unity 中 UI 系统性能的工具，尤其是基于 UGUI 的项目
它们分别从整体统计和细节绘制层面来帮助我们排查性能问题

一般出现以下问题时，可以着重排查此处：

UI 卡顿、掉帧
UI 绘制性能差
GPU 顶点绘制负担重
UI 材质、遮罩、裁剪过多
UI 刷新过于频繁
UI 批处理问题

等等

总之，所有和 UGUI 相关的问题都可以通过他们来进行排查

UI 和 UI Details 中各参数功能的含义和作用

用户交互界面（UI）性能检测窗口
- Layout（布局）：表示 Unity 的 UI 布局系统（LayoutGroup、ContentSizeFitter 等）在这一帧的耗时
  
  它包括但不限于以下操作：
  - ContentSizeFitter 的尺寸计算
  - Horizontal / VerticalLayoutGroup 自动排列元素
  - LayoutElement 的权重影响父子嵌套布局的递归计算
  - 每次对 UI 的大小、位置进行修改（如更改 Text 内容、Image 大小、RectTransform 等），可能会触发整个 Layout 系统重新计算。
- Render（绘制）：表示 Canvas UI 的绘制开销，也就是将 UI 元素（Text、Image、RawImage 等）批处理合并、排序、生成网格、送入 GPU 渲染的时间
  
  它通常包括：
  - Canvas 生成 DrawCall
  - 合批处理（Batching）
  - 顶点生成（CanvasRenderer）
  - 渲染指令发出（Render Thread）
主要关注点：
1. UI 自动布局耗时高？看 Layout 时间是否波动大
2. UI 合批失败导致卡顿？看 Render 时间 + DrawCalls 数量
UI 详细信息视图
- Object：所属 Canvas 和每个批次（Batch）
  
  显示 Canvas 和它下面的绘制批次。每个 Batch 对应一个实际发出的 DrawCall
- Self Batch Count（自己的批处理计数）：当前对象自己产生了几个 Batch
  
  通常 Canvas 自身为 0，子物体批次数才是关键
- Cumulative Batch Count（累积的批次数（递归计算））：Canvas 所有子物体（Text 、Image 等）加起来的 Batch 总数
- Self Vertex Count：当前对象自身使用的顶点数
  
  每个 UI 元素都会转成三角形网格（比如文字、按钮、图片等）
- Cumulative Vertex Count：向下累积的顶点总数
  
  显示整个 Canvas 内 UI 元素使用的顶点总量
- Batch Breaking Reason：这个 Batch 为何不能合批（Break 的原因）
  
  核心指标！显示为什么产生了多个 DrawCall（即没能合批）
- GameObject Count：此批次内包含的 GameObject 数
  
  看这个批次渲染了几个 UI 对象
- GameObjects：该 Batch 中包含了哪些 UI 元素
  
  会显示对应的组件，比如 Image、Text (TMP)、Button、Panel 等
我们可以着重关注以下几个参数：
1. Cumulative Batch Count（总批次数）：越少越好，UGUI 性能很大程度取决于合批情况
2. Batch Breaking Reason（批处理打断原因）：用来定位性能瓶颈、合批失败的根本原因
  1. Different Texture —— 多个 Image 使用了不同图集或独立纹理
    
    可以使用 SpriteAtlas 合并图片
  2. Different Material Instance —— 比如 TMP 修改 Outline / 颜色后生成了新材质
    
    避免在运行时频繁改 TMP 样式，统一字体材质
  3. Mask 或 Clipping —— 使用 Mask、ScrollRect、RectMask2D 会触发 Canvas 分离
    
    减少 Mask 层级，必要时改用 Shader 实现遮罩
3. Self Vertex Count（单个批次顶点数）：检查是否有大图片、大段文字、复杂 Mask 等问题
4. GameObjects（每个批次中渲染的对象）：找出占 DrawCall 最多的 UI 元素进行重点优化
UI 绘制内容预览视图

Canvas 绘制内容的渲染预览视图（当我们选中左侧面板中内容时，会在该面板显示绘制内容）
它可以帮助我们直观、清晰地看到每一个 UI 绘制批次（Batch）具体渲染了什么内容，从而方便我们排查各种 UI 性能和绘制问题。
这个面板是 DrawCall 层级的“显微镜” —— 它能精准告诉你：每一个 UI 渲染批次到底绘制了谁，不仅能量化问题，还能定位具体 GameObject，非常适合做 UI 渲染调优。
- Detach（分离）：将这个预览窗口分离到一个新窗口，方便同时查看多个区域
- Checkerboard / Black / White：背景显示为棋盘格/黑色/白色模式，方便识别透明区域的 UI 元素
- Standard / Overdraw / Content：切换渲染预览模式：
  - Standard（正常）：正常模式
  - Overdraw（透支）：查看 UI 元素是否过度重叠绘制
  - Content（内容）：只显示最终内容，去除透明边界
通过它可以达到的排查目的：
1. 确认哪些 UI 元素没被合批
  
  点选某个 Batch，在右侧预览窗口看到具体渲染的是哪个按钮、图片、文本等
2. 判断透明区域重叠是否严重（Overdraw）
  
  切换成 Overdraw 模式，查看透明 UI 元素是否堆叠太多
3. 排查某个 Panel 是否触发额外 DrawCall
  
  在左侧点击该 Canvas 或 Batch，右侧能看到该 Panel 内部元素
4. 识别异常图层 / 材质 / UI 控件
  
  快速定位某个 Batch 是否使用了特殊材质、未打图集的图片、误用 TMP 等
5. 观察 TMP、Outline、Shadow 等是否引入独立批次
  
  对比视觉样式与 DrawCall 是否一一对应
6. 优化合批时进行视觉验证
  
  合批成功后，能通过这里确认多个元素是否真的画在同一个批次里了
UI 详细信息（UI Details）检测视图
- Batches（批次）：当前帧中 UI 产生的 DrawCalls 数量（批次）每一个不能合批的 UI 元素（Image / Text 等）就会形成一个新的 Batch
  
  批次数越多，DrawCall 越多，GPU 压力越大。应合批优化
- Vertices（顶点）：当前帧所有 UI 元素构建的顶点总数，比如一个按钮是两个三角形，就会有 6 个顶点
  
  用于判断 UI 绘制是否过重，顶点数高代表 GPU 负载重，文字/大图/复杂控件是主因
- Markers（标记）：表示这一帧中，UI 系统内部发生的 Canvas Rebuild、Layout 更新等标记次数，也可理解为“操作记录数量”
  
  用于检测 UI 逻辑是否频繁触发更新，比如频繁调用 SetText()、修改 Layout、触发 Rebuild