coo-ui-batcher 帮你把 drawcall 打下来
Cocos 引擎的 Batcher2D 按相邻提交的渲染状态合批。引擎源码 cocos/2d/renderer/render-data.ts 中的 RenderData.updateHash():
public updateHash (): void {
const bid = this.chunk ? this.chunk.bufferId : -1;
const hashString = `${bid}${this.layer} ${this.textureHash}`;
this.dataHash = murmurhash2_32_gc(hashString, 666);
this.hashDirty = false;
}
bid 是当前 MeshBuffer ID(没有 chunk 时为 -1),this.layer 是节点 Layer,this.textureHash 来自纹理帧的 hash;引擎把三者拼成字符串后生成 MurmurHash2。
在 cocos/2d/renderer/batcher-2d.ts 的 commitComp() 中,dataHash 、材质、Stencil 变化时,会调用 autoMergeBatches() 打断当前合批:
if (this._currHash !== dataHash || dataHash === 0 || this._currMaterial !== mat
|| this._currDepthStencilStateStage !== depthStencilStateStage) {
this.autoMergeBatches(this._currComponent!);
}
每个 DrawBatch 绑定一套材质、纹理和采样器;相邻 UI 的纹理交替时就容易断批。
为减少这类纹理断批,coo-ui-batcher 在保持绘制顺序和 Stencil 边界的前提下,用多纹理槽兼容合批提交。以下是测试工程实测。
| 页面 | 场景规模 | Draw Call | FPS | Frame time | Renderer |
|---|---|---|---|---|---|
| 多纹理 | 128 组纹理 / 128 个渲染对象 | 6 | 60 | 1.2 ms | 1.14 ms |
| 背包 | 360 件道具 / 5040 个渲染对象 | 8 | 60 | 3.71 ms | 3.66 ms |
| 聊天室 | 256 条消息 / 2304 个渲染对象 | 8 | 60 | 3.49 ms | 3.41 ms |
| 压力测试 | 10000 个渲染对象 | 11 | 60 | 4.69 ms | 4.44 ms |
10000 个渲染对象
多纹理边界测试
背包
聊天室 (RichText合批)
测试工程覆盖动态图集、散图、背包列表和 RichText 图文聊天。

欢迎体验 coo-ui-batcher





