文档章节

NGUI 渲染顺序概述

ylme
 ylme
发布于 2017/04/24 23:43
字数 976
阅读 101
收藏 0

以下内容基于 NGUI v.3.11.2 。示例是在 Unity 5.5 中测试。

渲染结构

NGUI 用 Panel 管理渲染。一个 UIPanel 实例表示一个 Panel 。UIPanel.widgets 表示 Panel 中需要渲染的物体,UIPanel.drawCalls 表示 Panel 中的渲染指令,而 static UIPanel.list 存放所有的 Panel 。默认情况下用于渲染的 GameObject (DrawCall 所在的)是隐藏的,可以定义宏 SHOW_HIDDEN_OBJECTS 来显示 DrawCall GameObject 。于是 NGUI 需要控制的渲染顺序包括以下。

  • 不同的 Panel 的渲染顺序。
  • 同一 Panel 中所有 Widget 的渲染顺序。
  • 同一 DrawCall 中绘制的三角形顺序。

渲染顺序

UI 是 2D 的,不需要在渲染时开启深度测试(depth test)。因此,若渲染位置相同时,后渲染的图形覆盖先渲染的图形。既然 NGUI 通过创建 DrawCall GameObject 来渲染,那么先创建的 DrawCall GameObject 就表示先渲染,后创建的 DrawCall GameObject 在相同位置渲染时就会覆盖之前渲染的图形。

在使用 NGUI 时,都知道可以设置 Panel 和 Widget 的 Depth 属性。Depth 值越低,越容易被覆盖。根据上面的渲染机制分析可以得到:Depth 值低的 Panel 或 Widget 会先被处理。下面进入具体的代码中来验证。

  • 根据 Depth 排序 Panel 。在 UIPanel.cs 文件查找 list.Sort(CompareFunc); ,再看 UIPanel.CompareFunc 函数刚好发现 Depth 越小,在 list 中越靠前。
  • 根据 Depth 排序 Widget 。在 UIPanel.cs 文件查找 widgets.Sort(UIWidget.PanelCompareFunc); 再看比较函数,发现和 Panel 一样,Depth 越小在列表中越靠前。注:NGUI 并不是每次都重新排序所有的 Widget ,新加的 Widget 根据 Depth 插入到指定位置就避免了完全重排,但是排序规则都一样的。
  • 合并 DrawCall 。查看函数 UIPanel.FillAllDrawCalls 可知,若 UIPanel.widgets 相邻的 Widget 满足 Material 、Texture 、Shader 相同,则会把此 Widget 的绘制合并到前一个 Widget 的 DrawCall 中。其实合并或者不合并,后一个 Widget 都是后绘制,因此不影响最终的结果。

我们明白了应用层面 Depth 的设置,但是实际的渲染是在 Shader 中进行的,如何根据应用层的 Depth 控制 Shader 的渲染呢?其实很简单。排序后设置相应的 renderQueue 即可。具体实现搜索 UIDrawCall.cs 中 mDynamicMat.renderQueue = mRenderQueue;

经过上面分析,Depth 小的 Panel 先绘制,同一 Panel 中 Depth 小的 Widget 先绘制。这就是 NGUI 渲染顺序。由于需要控制 Panel 绘制顺序,所以 NGUI 绘制时在单个 LateUpdate 中根据列表处理所有的 Panel ,为了避免所有 Panel 的 LateUpdate 都处理一遍,因此引入了 static UIPanel.mUpdateFrame 控制调用频率。如下代码(为了方便显示,删除了一些代码)。

void LateUpdate ()
{
	if (mUpdateFrame != Time.frameCount)
	{
		mUpdateFrame = Time.frameCount;

		// Update each panel in order
		for (int i = 0, imax = list.Count; i < imax; ++i)
			list[i].UpdateSelf();
	}
}

模拟渲染

既然写了那么多字,下面来模拟一下渲染。先看运行截图。

NGUIRenderTest

  • 一共绘制左右两组三角形,每组包含 2 个 DrawCall ,每个 DrawCall 绘制了 2 个三角形。
  • 每个 DrawCall 先绘制亮色三角形,再绘制暗色三角形,所以暗色挡住亮色区域。
  • 查看 Hierarchy 视图中以 __dc 开头的 GameObject ,它们就是用于渲染的 DrawCall GameObject 。
  • 看下面的渲染调用。左边绿色三角形的 renderQueue 更大,因此后绘制而挡住了红色三角形。右边则相反。
DrawCallMgr.CreateDrawCall(Vector3.zero, Color.green, "green", 3001);
DrawCallMgr.CreateDrawCall(new Vector3(Vector3.zero.x, Vector3.zero.y - 0.5f, Vector3.zero.z), Color.red, "red", 3000);

DrawCallMgr.CreateDrawCall(new Vector3(Vector3.zero.x + 3.0f, Vector3.zero.y, Vector3.zero.z), Color.green, "green", 3000);
DrawCallMgr.CreateDrawCall(new Vector3(Vector3.zero.x + 3.0f, Vector3.zero.y - 0.5f, Vector3.zero.z), Color.red, "red", 3001);

如何运行示例代码呢。下载 DrawCallTest.csSimpleColor.shader 然后把文件导入 Unity 工程中(我是在 Unity5.5 中测试的,5.x 应该都可以)。导入文件后,新建场景,把 DrawCallTest.cs 拖动到 Main Camera 上,然后运行游戏即可。


我的博客地址 https://my.oschina.net/iirecord/blog

© 著作权归作者所有

共有 人打赏支持
ylme
粉丝 12
博文 42
码字总数 42711
作品 0
广州
程序员
私信 提问
NGUI全面实践教程(大学霸内部资料)

NGUI全面实践教程(大学霸内部资料) 试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国内NGUI最新教程,以全新的3.8...

大学霸
2015/03/31
0
0
C#程序员整理的Unity 3D笔记(十五):Unity 3D UI控件至尊–NGUI

目前,UGUI问世不过半年(其随着Unity 4.6发布问世),而市面上商用的产品,UI控件的至尊为NGUI:影响力和广度(可搜索公司招聘Unity3D,常常能看到对NGUI关键词)。 NGUI虽然不是Unity官方原生...

润物互动技术团队博客
2015/03/10
0
4
Unity3d性能优化(CPU)

性能优化是项目开发中一个永恒的话题。用户的需求和项目的要求总在不停地增长,同屏人数、屏幕特效和场景复杂度永远在向着“榨干”硬件的趋势逼近。所以,无论硬件设备发展到何种程度、研发团...

咖喱酱_zero
2016/05/27
0
0
使用NGUINGUI的相关介绍

1.3 使用NGUI 要使用NGUI,需要首先为游戏项目导入NGUI插件资源,然后再创建UI Root对象,在这以后才可以添加各种UI控件,下面本节会详解介绍这些知识本文选自NGUI从入门到实战! 1.3.1 导入...

大学霸
2015/01/14
0
0
学习NGUI前的准备NGUI的相关信息

学习NGUI前的准备NGUI的相关信息 第1章 学习NGUI前的准备 NGUI是Unity最重要的插件,在Unity资源商店(Asset Store)的付费排行榜中始终名列前茅,如图1-1所示。本章作为本书的第一讲,内容主...

大学霸
2015/04/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象接口多态

第3天 面向对象 今日内容介绍  接口  多态  笔记本案例 今日学习目标  写出定义接口的格式  写出实现接口的格式  说出接口中成员的特点  接口和抽象类的区别  能够说出使用多...

stars永恒
24分钟前
2
0
摄像头基础介绍

一、摄像头结构和工作原理. 拍摄景物通过镜头,将生成的光学图像投射到传感器上,然后光学图像被转换成电信号,电信号再经过模数转换变为数字信号,数字信号经过DSP加工处理,再被送到电脑中...

天王盖地虎626
25分钟前
2
0
浅谈一致性Hash原理及应用

在讲一致性Hash之前我们先来讨论一个问题。 问题:现在有亿级用户,每日产生千万级订单,如何将订单进行分片分表? 小A:我们可以按照手机号的尾数进行分片,同一个尾数的手机号写入同一片/...

Java干货分享
47分钟前
3
0
React SSR样式及SEO的实践

前一篇主要记录了一下SSR配置以及结合Redux的使用。这里简单说一下React SSR中样式处理和更优雅的SEO SSR样式 在React客户端渲染,添加样式很容易。写一个css样式文件,在对应组件中引用。标...

前端小攻略
53分钟前
5
0
华为手机太猛!余承东吹的牛今天都实现了

华为是世界上少有的在2B和2C领域同时取得成功公司。如今,华为消费者业务的营收,已经在华为总营收中占据“半壁江山”。 12月27日,华为董事长郭平在新年致辞中披露,预计2018年华为预计实现...

linux-tao
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部