NGUI是啥用过的老铁都知道。渲染UI也遵循基本的渲染物体条件
渲染器Renderer +?材质Material + Shader + Mesh网格顶点 + Texture贴图 + UV
这和渲染3D物体没有区别，唯一的小区别是，UI是平面的，6个在同一平面的顶点组合成一个长方形。一张图片如何渲染出来大家都懂，但UI不是一张图，而是一个复杂的堆叠关系，NGUI就是一个管理渲染堆叠关系的框架。
图元是如何一层一层叠上去的？
看一下NGUI的Shader就知道，开启深度测试但不开启深度写入，换言之，后面渲的会覆盖前面渲的。
难道说，NGUI的功能就是把所有要渲的物体排好序然后依次渲到屏幕上？事情肯定没这么简单，看下面的图
测试场景中有两个UISprite，如果是依次绘制的话肯定是要Draw Mesh Wooden Atlas两次，从FrameDebugger中看很明显两张图是一起渲的。此处没有GPUInstance也没有SRP Batch合并技术，很明显他们压根就是一个Renderer渲染出来的，它到底是怎么实现的呢
Atlas图集
NGUI的图集是干啥的，就是开发功能的同学尽可能的把同时出现在一个屏幕内的Texture合并成一个大的Texture。如果不合并，大胆猜测一下渲染两张图的流程大概是这样子，Renderer(物体A) +?材质Material + Shader + Mesh网格顶点(物体A) + Texture贴图(物体A) + UV(物体A)?，再来一遍Renderer(物体B) +?材质Material + Shader + Mesh网格顶点(物体B) + Texture贴图(物体B) + UV(物体B) ,而合并后，由于贴图变成了一个，渲染流程变成了Renderer+?材质Material + Shader + Mesh网格顶点(物体A+?物体B) +?合并贴图?+ UV(物体A+物体B)?
顶点+贴图是如何在渲出来两张图的？不懂渲染基础的小伙伴建议看我另一篇比较基础的文章
[游戏开发][渲染篇][第一篇]渲染的本质_liuyongjie1992的博客-CSDN博客_渲染本质
UIPanel
?上文已经验证了打包图集可以一次渲多个UI，其本质还是因为他们共用了一个图集。下面我们介绍一种情况，即便是同一个图集的两张图，也会分两次渲染，看下图
操作是将两个GameObject放到两个新建的panel上，分别是Panel1和Panel2，为何会这样？原因是UIPanel是渲染的管理层，每个Panel的渲染独自管理。
下面看一下UIPanel的代码，如何管理渲染，核心创建的地方是FillAllDrawCalls函数，调用该函数的条件是mRebuild参数为true。
void FillAllDrawCalls ()
{
//遍历该UIPanel下的所有UIWidget控件物体
for (int i = 0; i < widgets.Count; ++i)
UIWidget w = widgets[i];
...
Material mt = w.material;
Texture tx = w.mainTexture;
Shader sd = w.shader;
//检验渲染目标是否发生变化，如果发生了变化，置空dc,下面会再创建一个新dc
if (mat != mt || tex != tx || sdr != sd)
if (dc != null && dc.verts.size != 0)
drawCalls.Add(dc);
...
dc = null;
mat = mt;
tex = tx;
sdr = sd;
if (mat != null || sdr != null || tex != null)
//第一次走到这或渲染目标切换，会创建一个dc
if (dc == null)
dc = UIDrawCall.Create(this, mat, tex, sdr);
...
else
...
w.drawCall = dc;
...
else w.drawCall = null;
...
}FillAllDrawCalls有几点需要注意的地方
1：FillAllDrawCalls的函数会Destroy当前全部UIDrawCall并再次遍历生成新UIDrawCall，因此项目中任何频繁调用它的地方都要优化掉
2：遍历UIWidget时如果发现material或Texture或Shader发生变化时都会把上一个UIDrawCall存进List并再次生成一个新的UIDrawCall，请注意变化的检测条件！
下面看一下UIDrawCall具体是干啥的
UIDrawCall
上文说了UIPanel对UIDrawCall的管理，但UIPanel并不负责渲染，把渲染物体需要的参数传给UIDrawCall后由它来负责。
比较核心的函数有UpdateGeometry、UpdateMaterials、CreateMaterial()
DrawCall创建或变化时优点调用UpdateGeometry函数，该函数的作用是
- 创建Mesh
- 给Mesh赋值顶点、UV，顶点和UV是在开发人员摆UI的时候就确定好的，存放在UIWidget的UIGeometry里
- 创建MeshRenderer，渲染器是必要元素之一
- 检查是否需要重构material