NGUI为了减少GPU状态切换的消耗（比如切换material），把相同material的widget合并，减少DrawCall的数量。下文描述了NGUI如何对widget归类，以及减少DrawCall需要注意的地方。

归类widget的代码在UIPanel中的FillAllDrawCalls()里，代码如下

1. void FillAllDrawCalls ()
   
2.         {
   
3.                 for (int i = 0; i < drawCalls.size; ++i)
   
4.                         UIDrawCall.Destroy(drawCalls.buffer[i]);
   
5.                 drawCalls.Clear();
   
6. 
   
7.                 Material mat = null;
   
8.                 Texture tex = null;
   
9.                 Shader sdr = null;
   
10.                 UIDrawCall dc = null;
    
11. 
    
12.                 if (mSortWidgets) SortWidgets();
    
13. 
    
14.                 for (int i = 0; i < widgets.size; ++i)
    
15.                 {
    
16.                         UIWidget w = widgets.buffer[i];
    
17. 
    
18.                         if (w.isVisible && w.hasVertices)
    
19.                         {
    
20.                                 Material mt = w.material;
    
21.                                 Texture tx = w.mainTexture;
    
22.                                 Shader sd = w.shader;
    
23. 
    
24.                                 if (mat != mt || tex != tx || sdr != sd)
    
25.                                 {
    
26.                                         if (mVerts.size != 0)
    
27.                                         {
    
28.                                                 SubmitDrawCall(dc);
    
29.                                                 dc = null;
    
30.                                         }
    
31. 
    
32.                                         mat = mt;
    
33.                                         tex = tx;
    
34.                                         sdr = sd;
    
35.                                 }
    
36. 
    
37.                                 if (mat != null || sdr != null || tex != null)
    
38.                                 {
    
39.                                         if (dc == null)
    
40.                                         {
    
41.                                                 dc = UIDrawCall.Create(this, mat, tex, sdr);
    
42.                                                 dc.depthStart = w.depth;
    
43.                                                 dc.depthEnd = dc.depthStart;
    
44.                                                 dc.panel = this;
    
45.                                         }
    
46.                                         else
    
47.                                         {
    
48.                                                 int rd = w.depth;
    
49.                                                 if (rd < dc.depthStart) dc.depthStart = rd;
    
50.                                                 if (rd > dc.depthEnd) dc.depthEnd = rd;
    
51.                                         }
    
52. 
    
53.                                         w.drawCall = dc;
    
54. 
    
55.                                         if (generateNormals) w.WriteToBuffers(mVerts, mUvs, mCols, mNorms, mTans);
    
56.                                         else w.WriteToBuffers(mVerts, mUvs, mCols, null, null);
    
57.                                 }
    
58.                         }
    
59.                         else w.drawCall = null;
    
60.                 }
    
61.                 if (mVerts.size != 0) SubmitDrawCall(dc);

算法描述如下

先把UIPanel中的Widget按depth从小到大排序，如果depth相同那按照material的ID来排序。然后遍历每个元素，把material相同的Widget归类到同一个drawCall。合并之后的结果如下图

最后生成了3个DrawCall，并按顺序提交GPU绘制。

为何要采用这个算法呢？因为NGUI的Material是透明材质，不会写入深度缓存（但是会进行深度测试，以保证与非透明物体的层次正确），我们可以看NGUI材质所使用的Unlit/Transparent Colored这个Shader，里面有一句ZWrite Off。所以widget的前后关系与z坐标是没有关系的，而是与DrawCall的绘制顺序有关。所以如果要按照上图的depth来显示widget，必然只能分成3个DrawCall，并且按顺序绘制。