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 是背景所占用的。
注意事项
不打断合批的操作
- 使用不同图片,但没有对图片所在文件夹进行自动图集的设置,不会影响到合批操作.
- 不同图片放在不同级节点上,但仍在一次绘制流内. 如下图,虽然图片 SpriteB 与 SpriteA 不在同一层级内,但并没有打断合图.
- 修改节点的 位置、旋转、缩放、锚点、尺寸、Skew 等熟悉.
打断合批的操作
-
在图片渲染中添加文字. 下图展示了再图片中添加
Label
,导致合批被打断。前3个图片算一个DrawCall
, 文字算 1 个,再次进行图片的渲染还算一个.
-
改变图片颜色,原因同文字.
-
改变图片透明度,原因同文字.
-
修改图片渲染模式(Type): 九宫格(
SLICED
)、平铺(TILED
). -
修改 Blend 模式,导致图片与其他图片的blend模式不一致.
-
节点上添加一个
Mask
组件会打断合批, 一个Mask
组件占用 2 个draw
,尽量减少使用. -
多个使用
Label
组件的节点是不会进行合批的,如下图所示.
-
使用
RichText
组件时,使用多少个标签<tag></tag>
占用多少个DrawCall
<color=#00ff00>Rich</c>
<color=#0fffff>Text</color>
<color=#00ff00>Rich</c>
<color=#0fffff>Text</color>
9. 在使用了自动图集的情况下,在不同图集中的图片会打断合批,所以在合图的过程中要避免使用多个自动图集的图片.
其他
- 要渲染的节点过多,这样 cpu 需要在每次渲染的时候进行数据处理.
- 使用自动图集减少 DrawCall要在构建后才能观察到.
- 尽量使用多个连续的节点使用相同的贴图,可以一次性批量绘制.
- 使用cocos creator版本为2.0.9,不同版本可能有不同的处理方式,还需自行检验.