Cocos Creator DrawCall优化

概念说明

drawCall 是什么

Draw Call 就是CPU调用图形编程接口，比如 DirectX 或 OpenGL ，来命令 GPU 进行渲染的操作。在每次调用 Draw Call 之前，CPU 需要向 GPU 发送很多内容，包括数据，状态，命令等。 这里对性能消耗巨大的是提交这个命令，而对 Draw Call 的实际渲染却很快 。 (在CPU不改变渲染数据的情况下，完成一次渲染)## 新的改变

如何减少DrawCall

由于 GPU 渲染快速而，提交这个命令消耗巨大, 所以自然而然的优化想法就是把很多小的 Draw Call 合并成一个大的Draw Call, 这就是批处理的意思。在 Cocos Creator 中默认进行了合批的处理， 我们需要做的就是按照 Cocos Creator 的合批方法来规划项目内容。

在哪里查看 DrawCall

在网页模拟器的左下角可以查看，如没有可以尝试在代码中加入并执行下面的方法。

cc.director.setDisplayStats(true);

合批的流程

假设绘制顺序是 A => B => C

• 如果 A、B、C 不使用一张贴图，那么就无法进行合批于是 DrawCall 是 3.
• 如果 A、B 使用图一个贴图，C 使用另一个贴图，则 AB 进行合批，于是 DrawCall 是 2.
• 如果 ABC 使用同一贴图，进行合批后 DrawCall 为 1.

下图使用共 5 张图片，但是图片在一张贴图中所有 DrawCall 占用 1，另一个 DrawCall 是背景所占用的。

注意事项

不打断合批的操作

1. 使用不同图片,但没有对图片所在文件夹进行自动图集的设置，不会影响到合批操作.
2. 不同图片放在不同级节点上，但仍在一次绘制流内. 如下图，虽然图片 SpriteB 与 SpriteA 不在同一层级内，但并没有打断合图.
   
3. 修改节点的 位置、旋转、缩放、锚点、尺寸、Skew 等熟悉.

打断合批的操作

1. 在图片渲染中添加文字. 下图展示了再图片中添加 Label，导致合批被打断。前3个图片算一个DrawCall, 文字算 1 个，再次进行图片的渲染还算一个.
   

2. 改变图片颜色，原因同文字.
   

3. 改变图片透明度，原因同文字.
   

4. 修改图片渲染模式(Type): 九宫格（SLICED）、平铺（TILED）.

5. 修改 Blend 模式，导致图片与其他图片的blend模式不一致.

6. 节点上添加一个Mask组件会打断合批, 一个Mask组件占用 2 个draw，尽量减少使用.

7. 多个使用Label组件的节点是不会进行合批的，如下图所示.
   

8. 使用RichText组件时，使用多少个标签<tag></tag>占用多少个DrawCall

<color=#00ff00>Rich</c>
<color=#0fffff>Text</color>
<color=#00ff00>Rich</c>
<color=#0fffff>Text</color>

9. 在使用了自动图集的情况下，在不同图集中的图片会打断合批，所以在合图的过程中要避免使用多个自动图集的图片.

其他

1. 要渲染的节点过多，这样 cpu 需要在每次渲染的时候进行数据处理.
2. 使用自动图集减少 DrawCall要在构建后才能观察到.
3. 尽量使用多个连续的节点使用相同的贴图，可以一次性批量绘制.
4. 使用cocos creator版本为2.0.9,不同版本可能有不同的处理方式,还需自行检验.