Unity-Optimizing Unity UI(UGUI优化)01 导航、Unity UI的基础概念与原理

Unity 官方文档 ,文本翻译官方文档,加之自己的理解。

摘要:
通过Unity UI优化用户的界面驱动是一门艺术,以下将讨论基本的概念、算法和在Unity UI相关代码

1.Unity UI优化的导航

通过Unity UI优化用户的界面驱动是一门艺术。这里几乎没有硬性的规则;取而代之的,每一个应用场景都要进行系统的分析。核心的张力是当优化Unity UI的时候通过平衡draw calls通过batcking costs。同时一些常用的技术可以减少一个或者多个DC,复杂的UI要做权衡

在开始优化Unity UI 系统之前去定位观察到的性能问题的原因是优化的基础工作,这有四种用户遇到Unity UI问题的场景:

  • GPU 的片元着色利用率过高
  • CPU 消耗过多的重建Canvas batch的时间
  • Canvas batches的数量过多
  • CPU 生成定点数据事件过长

原则上Unity UI的表现是受到draw calls发送到GPU的绝对数量的影响。然而,在实际情况中,任何使用绘制调用重载GPU的项目更有可能受到填充率过度使用的约束。

下面将给出一些基本概念,算法和Unity UI的底层代码。分为以下5个部分:

1.Unity UI的基础,这个章节定义了Unity UI的特殊术语和讨论了许多UI渲染的基础细节,包括building of batched grometry。强烈建议从这一章节开始阅读

2.Unity UI 分析工具,这个章节包括各种开发人员可用的性能数据

3.Fill-rate(填充率),Canvases和input,这个章节讨论了提升Unity UI Canvas和Input组件的性能表现

4.UI controls,这个章节讨论了UI Text,Scroll View和其他的特定组件的优化,以及一些技术不适用的场景

5.Other techniques and tips ,这个章节讨论了一些不适合使用场景的问题,包括UI系统中的一些坑的解决办法

UI Source Code
Unity UI的绘图和 Layout 组件是开源的,他们的源码可以在这里查看,在UI下面。

Unity UI的基础

理解Unity UI系统的各个部分是重要的。这里有几个基础的类和组件。本章首先定义了一些文中使用的术语,Unity UI关键系统的底层实现细节。

术语

Canvas是Unity渲染系统中在游戏世界空间中提供几何分层的Unity源生组件。

画布负责结合几何形状到批处理中,生成合适的渲染指令,发送到Unity的图形系统中。所有的操作是在原生的C++代码上完成,设个过程也叫做重新批处理rebatch或者批处理构建batch build。当Canvas被标记为含有需要重新批处理的几何形状的时候将请求重新批处理,画布被认为是脏dirty的。

Geometry由Canvases的Canvas Renderer组件提供

子画布Sub-canvas是一个Canvas组件内嵌在另一个Canvas组件中。Sub-canvas将其子物体与父物体隔绝;dirty的子canvas不会强制parent 重建它的geometry,反之亦然。这有一些特殊的边界情况可能有些不同,父canvas可能造成子canvas的重建。

Graphic是一个基础类由Unity UI C# library提供。它是全部Unity UI C# 提供了绘制图元给Canvas系统的基类。大部分Unity UI内置的图形是通过MaskableGraphic子类实现的,它们允许通过继承IMaskable接口,可以被遮罩。Drawable的主要子类是ImageText,它们提供了同名组件。

Graphic:
Base class for all visual UI Component.
When creating visual UI components should inherit from this class.

Layout组件控制RectTransform的尺寸和位置,它通常用于创建复杂布局并且内部组件需要相应尺寸或者相对位置的UI。Layout组件只依赖RectTransform并且之影响与其关联的RectTransform的属性。他们不依赖Graphic类,并且可以独立于UI系统的Graphic类使用。

Graphic 和 Layout组件都依赖CanvasUpdateRegistry类,此类没有在UnityEditor接口中公开。这个类跟踪必须更新的Layout组件和Graphic组件,当触发器需要更新的时候与它们关联的Canvas调用willRenderCanvases事件。

更新Layout和Graphic组件被称为rebuild,此过程会在后面详细介绍

渲染细节

当在Unity UI中编写用户界面的时候,记住所有的图元是通过Canvas在一个Transparent queue中进行绘制。这意味着,图元被Unity UI通过从后到前绘制通过alpha混合。重要的是,多边形的每个像素都会被采样,即使它被其他不透明多边形覆盖。对于移动端来说,高水平的重绘将急剧的增加GPU的填充率。

Batch的构建过程(Canvases)

Canvas组合包含UI元素的网格和生成合适的渲染指令并发送到Unity图像队列的过程称为batch building过程,这个过程的结果会缓存和重复利用直到Canvas被标记为dirty(consitituent mesh中发生了变化)。
网格数据从Canvas中的Canvas Renderer组件中拿取,不包含Sub-canvas。
计算batches需要对网格进行排序和验证它们是否被覆盖,是否有共享的材质等等。这个操作是多线程的,所以其表现将在不同的CPU架构下有很大差异,特别是在移动SoC(只有少量CPU核心)和现代台式电脑CPU之间(通常有4个或者以上的核心数量)。

重建(rebuild)过程(Graphics)

重建过程是指Unity UI的C# Graphic组件的 layout和mesh重新计算的过程。这个过程在CanvasUpdateRegistry类中执行。
CanvasUpdateRegistry中,需要关注PerformUpdate方法。这个方法在Canvas调用WillRenderCanvases事件的时候被调用。这个事件每一帧都被调用。

PerformUpdate将分三步:

  • Dirty Layout组件需要通过ICanvasElement.Rebuild方法重建他们的layout。
  • 任何注册的裁剪组件(比如Masks)要被剔除,这个过程是通过ClippingRegistry.Cull完成。
  • Dirty Graphic组件被要求去重建他们的图形元素

Layout和Graphic的重建,过程被分为几个部分。Layout重建被分为3部分,Graphic重建被分为2部分。

Layout重建

按照Layouts的层级顺序,重新计算包含在Layout中的组件的大小、位置。Layouts中靠近GameObject的根节点的Layout,这种节点可能改变它们内部嵌套的Layout的大小或者位置,需要优先进行计算。
UI系统根据Layout在层级中的深度对脏的Layout进行排序,接近Root的项会被移动到列表的前面。
使用排序后的Layout组件对Layouts进行重建,这时Layout组件改变UI元素的位置和大小。

Graphic重建

在Graphic组件进行重建的时候,Unity UI将控制交给继承ICanvasElement接口的Rebuild方法。Graphic组件实现这个方法并在重建中实行两步:

  • 如果顶点数据被标记为dirty(eg:RectTransform改变了size),之后网格将进行重建
  • 如果材质资源被标记为dirty(eg:组件的材质或者贴图发生了变化),附加到Canvas Renderer的材质将更新。
    Graphic重建的过程没有特别的顺序,也不会采用排序操作。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容