coo-ui-batcher 帮你把 drawcall 打下来

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 运行演示 GIF

欢迎体验 coo-ui-batcher

5赞

这个和98k的多纹理合批是一样的吗

没了解过哦

有测过不batch的情况下和batch的情况下的 frame time差距吗

batch 降低frame time和render time