NGUI 渲染顺序概述

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

以下内容基于 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 需要控制的渲染顺序包括以下。

渲染顺序

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

在使用 NGUI 时,都知道可以设置 Panel 和 Widget 的 Depth 属性。Depth 值越低,越容易被覆盖。根据上面的渲染机制分析可以得到:Depth 值低的 Panel 或 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

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

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看