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.                 Material mat = null;
  7.                 Texture tex = null;
  8.                 Shader sdr = null;
  9.                 UIDrawCall dc = null;

  10.                 if (mSortWidgets) SortWidgets();

  11.                 for (int i = 0; i < widgets.size; ++i)
  12.                 {
  13.                         UIWidget w = widgets.buffer[i];

  14.                         if (w.isVisible && w.hasVertices)
  15.                         {
  16.                                 Material mt = w.material;
  17.                                 Texture tx = w.mainTexture;
  18.                                 Shader sd = w.shader;

  19.                                 if (mat != mt || tex != tx || sdr != sd)
  20.                                 {
  21.                                         if (mVerts.size != 0)
  22.                                         {
  23.                                                 SubmitDrawCall(dc);
  24.                                                 dc = null;
  25.                                         }

  26.                                         mat = mt;
  27.                                         tex = tx;
  28.                                         sdr = sd;
  29.                                 }

  30.                                 if (mat != null || sdr != null || tex != null)
  31.                                 {
  32.                                         if (dc == null)
  33.                                         {
  34.                                                 dc = UIDrawCall.Create(this, mat, tex, sdr);
  35.                                                 dc.depthStart = w.depth;
  36.                                                 dc.depthEnd = dc.depthStart;
  37.                                                 dc.panel = this;
  38.                                         }
  39.                                         else
  40.                                         {
  41.                                                 int rd = w.depth;
  42.                                                 if (rd < dc.depthStart) dc.depthStart = rd;
  43.                                                 if (rd > dc.depthEnd) dc.depthEnd = rd;
  44.                                         }

  45.                                         w.drawCall = dc;

  46.                                         if (generateNormals) w.WriteToBuffers(mVerts, mUvs, mCols, mNorms, mTans);
  47.                                         else w.WriteToBuffers(mVerts, mUvs, mCols, null, null);
  48.                                 }
  49.                         }
  50.                         else w.drawCall = null;
  51.                 }
  52.                 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,并且按顺序绘制。