本文由 AI 根据一次实际排查过程总结生成，源码片段来自调试时的引擎实现，仅供记录参考。
引擎版本：LayaAir 3.4.1（2D / WebGL）
一、现象
一个用代码 Graphics 每帧重绘的特效（一圈不断扩大的圆环），功能完全正常，但 drawcall 会一路涨：
- 平时 ≈ 13，涨上去能到 40+；
- 重开、切场景都降不回来，只有刷新页面才恢复；
- 帧调试器里，同一个
program + 同一个 texture 被拆成多条独立 drawElements，还在多个 VAO 之间来回跳——典型的合批被撑散。
把项目里所有用代码 graphics 绘制的地方全部注释掉 → drawcall 恢复正常；再逐块恢复，锁定到下面这一行：
// 每帧重绘一个不断扩大的圆环：半径一帧一帧地涨
const width = this.ringWidth * (1 - u);
if (width > 0.5) {
graphics.drawCircle(cx, cy, this.maxRadius * easeOutCubic(u), null, color, width);
}
二、根因
2.1 drawCircle 的段数由「半径」决定
引擎 laya.core.js 里 Graphics._drawCircle 的实现（变量名做了重命名注释）：
_drawCircle(x, y, radius, fillColor, lineColor, lineWidth) {
if (radius <= 0) return;
// 关键：段数由半径算出来
const seg = calcArcSegmentsWithScale(radius, this._tessellationScale(), 40, 5);
makeCirclePath(points, x, y, radius, seg); // 按 seg 个点拼圆
if (fillColor != null) { // 填充
writeCircleFan(fanVerts, fanIdx, x, y, radius, seg);
this._writeColorMesh(fanVerts, fanIdx, toABGR(fillColor));
}
if (lineColor != null && lineWidth > 0) { // 描边
this._appendLineMesh(points, lineWidth, true, toABGR(lineColor));
}
}
// 段数 = 半径 × 缩放 × 2π / 每段像素，再夹到 [minSegments, 2048]
function calcArcSegmentsWithScale(radius, scale, minSegments = 20, segLength = 5) {
const r = Math.max(0, radius || 0);
const s = isFinite(scale) ? Math.max(0, Math.abs(scale)) : 1;
const min = Math.max(1, minSegments | 0);
const seg = Math.max(min, Math.floor(r * s * Math.PI * 2 / (segLength || 5)));
return Math.min(2048, seg);
}
_drawCircle 传的是 (radius, scale, 40, 5)，所以：
段数 = min(2048, max(40, floor(半径 × 缩放 × 2π / 5)))
半径 ≤ 31 时恒为 40 段；半径 95 时是 ≈119 段。半径连续变大，段数就连续变大，于是每帧的顶点数都不一样。
2.2 引擎的 graphics 批次池「按顶点数分桶」，而且只增不减
LayaAir 3 的 2D Graphics 不是简单地把命令丢给批次，而是给每个图形 op 分配渲染单元和一块顶点存储（store）。相关代码在 laya.webgl_2D.js：
（1）渲染单元池按 (顶点块数, 索引数) 分桶
static take(vertexCount, indexCount, ...) {
const blocks = Math.ceil(vertexCount / GRAPHICS_INFO_VERTEX_BLOCK_SIZE);
const byBlock = this._buckets.get(blocks);
const list = byBlock && byBlock.get(indexCount);
if (!list || list.length === 0) return null; // 没有同尺寸的可用单元
...
}
static recover(unit) {
if (!unit) return;
// 回收的是「整个单元」，它占的顶点块不会归还
if (this._count >= this._maxCount) return void unit.destroy();
... 按 (vertexBlockCapacity, indexCapacity) 存进 _buckets ...
}
// _maxCount = 1024
recover 保留单元占用的顶点块以便复用，所以尺寸种类越多，池子里占着的顶点块就越多。
（2）顶点存储池是全局静态的，装不下就新建，永不回收
static allocateInto(unit, vertexCount, indexCount) {
if (!unit || vertexCount <= 0 || indexCount <= 0) return false;
// 先试上次用的 store，再挨个试所有 store
... _tryAllocateInto ...
// 都塞不下：新建一个
const blocks = Math.ceil(vertexCount / GRAPHICS_INFO_VERTEX_BLOCK_SIZE);
const store = new WebGraphicsOpVIStore(Math.max(this._defaultVertexBlocks, blocks));
this._stores.push(store); // 只 push，永不移除
return true;
}
// _defaultVertexBlocks = 4096 / GRAPHICS_INFO_VERTEX_BLOCK_SIZE
// _stores = []
每个 store 会创建自己的 vertexBuffer / indexBuffer / bufferState(VAO)——这就是帧调试器里多出来的 VAO 和 Buffer。
（3）合批要求 bufferState 相同，不同 store 合不到一起
WebGraphicsBatch 合并元素时逐个检查兼容性：
isCompatible(next) {
if (!this._isTypeKeyCompatible(next)) return false;
const key = next.textureKey;
if (key !== 0 && key !== this.textureId && this.textureId !== 0) return false;
if (this.subShader !== next.subShader ||
this.bufferState !== next.geometry.bufferState || // ← 关键：bufferState 必须相同
this.clipInfo !== next.owner.getClipInfo() ||
next.owner.globalRenderData !== this.globalRenderData) {
return false;
}
...
}
batch 自己还缓存了一份「顶点缓冲 → VAO」的表，同样只在 destroy() 时清：
constructor() {
this.bufferStates = new Map(); // vertexBuffer -> bufferState(VAO)
...
}
bindBuffer(vertexBuffer) {
let state = this.bufferStates.get(vertexBuffer);
if (!state) {
state = createBufferState();
state.applyState([vertexBuffer], this.indexBuffer);
this.bufferStates.set(vertexBuffer, state);
}
return state;
}
clear() { ... } // 不清 bufferStates
destroy() { ... this.bufferStates.forEach(s => s.destroy()); ... }
2.3 串起来
flowchart TD
A["drawCircle(半径每帧变)"] --> B["引擎按半径算段数<br/>40 → 119 连续变化"]
B --> C["每帧的顶点数都不同"]
C --> D["渲染单元池按顶点数分桶<br/>每种尺寸占一批顶点块"]
D --> E["共享 store 的顶点块被占满"]
E --> F["allocateInto 未命中<br/>新建 store（新 VAO / Buffer）"]
F --> G["元素的 bufferState 不再相同"]
G --> H["isCompatible 失败<br/>合批被打散成 N 次 drawcall"]
F --> I["池是全局静态、只增不减"]
I --> J["重开 / 切场景也回收不掉<br/>只有刷新页面才恢复"]
一句话：顶点数每帧都在变 → 批次池被撑爆 → 全局池不回收 → 合批永久坏掉。
2.4 为什么其它 graphics 都没事
| 绘制方式 | 顶点数 | 会不会出事 |
| ------------------------------------------- | ------------------------------------------- | -------------------- |
| drawLine / drawLines / drawCurves | 只跟点数有关（_drawLine 固定 2 个点） | 安全 |
| 半径很小且稳定的圆 | 半径×2π/5 < 40，被兜在最小 40 段 | 安全 |
| drawRect / drawTexture | 恒定 4 顶点（quad） | 安全 |
| drawRoundRect / drawEllipse / drawPie | 段数跟圆角半径 / 半径走 | 危险 |
| 大跨度连续变化的 drawCircle | 40 → 119 连续变化 | 危险（最容易踩） |
drawLine 一看就是固定点数：
_drawLine(x, y, fromX, fromY, toX, toY, lineColor, lineWidth) {
if (lineColor == null || lineWidth <= 0) return;
points.length = 0;
points.push(fromX + x, fromY + y, toX + x, toY + y); // 永远 2 个点
this._appendLineMesh(points, lineWidth, false, toABGR(lineColor));
}
另外一个反直觉点：_tessellationScale() 取的是 Graphics 自己 transform 栈的缩放，不是节点的 scale：
_tessellationScale() {
return Math.max(this.getCurrentScaleX(), this.getCurrentScaleY());
}
所以用节点缩放做动画不会改变段数，是安全的。
三、修复
思路：别让顶点数跟着半径跑。
drawCircle 做不到固定段数，但 drawPoly(points) 的顶点数只取决于你给的点数：
_drawPoly(x, y, points, fillColor, lineColor, lineWidth) {
if (!points || points.length < 6) return;
copyOffsetPoints(pathPoints, points, x, y); // 点相对 (x, y) 偏移
this._appendPathFillAndStroke(pathPoints, fillColor, lineColor, lineWidth, true);
}
// 填充走 earcut 三角化、描边走 _appendLineMesh，顶点数都由 points.length 决定
所以自己按固定段数数好一个圆，交给 drawPoly 即可：
/** 段数写死，顶点数才恒定 */
const RING_SEGMENTS = 96;
/** 把「圆心在原点、半径 radius」的圆写成一圈点（x,y 交替）塞进 dst */
function writeCircle(dst: number[], radius: number): void {
const step = (Math.PI * 2) / RING_SEGMENTS;
for (let i = 0, j = 0; i < RING_SEGMENTS; i++, j += 2) {
const a = i * step;
dst[j] = Math.cos(a) * radius;
dst[j + 1] = Math.sin(a) * radius;
}
}
// 向外复用一个点数组，别每帧新建；点位相对圆心，drawPoly 时把圆心传成 x / y
private readonly ringPoints: number[] = new Array(RING_SEGMENTS * 2).fill(0);
// 改前：graphics.drawCircle(cx, cy, radius, null, color, width);
writeCircle(this.ringPoints, radius);
graphics.drawPoly(cx, cy, this.ringPoints, null, color, width);
改动很小、表现几乎无感（只是圆的段数固定了），代价是每帧多一点点的三角化开销，换来的是顶点数恒定、批次池不再被撑爆。
四、小结 / 自查
- 只要在
update 里改 Graphics 的几何参数，就问一句「顶点数会不会变」。 顶点数变 = 引擎按新尺寸占/建批次，全局池只涨不跌。
- 顶点数会变的 API：
drawCircle / drawEllipse / drawPie（跟半径走）、drawRoundRect（跟圆角半径走）、drawCurves（跟采样点数走）。
- 安全的：
drawRect / drawTexture（恒定 quad）、drawLine（固定 2 点）、半径很小且稳定的圆。
- 修法优先级：能固定段数就自己
drawPoly 数点 → 能用贴图 quad 就别用程序化图元（drawTexture + matrix 可旋转拉伸）→ 实在要用 drawCircle，就把半径量化成有限档位，别让它连续变。
- 排查信号：drawcall 只涨不跌、换场景也不回收、帧调试器里同
program/texture 被拆成多条 drawElements 且在多个 VAO 之间横跳——大概率是某个全局渲染池被「非重复尺寸」撑爆了。
- 定位手法：先把可疑的
graphics 绘制全部注释掉、再逐块恢复验证（printWebglOrder 可打印每帧 GL 调用），比盯着代码猜快得多。
附：关键源码索引（LayaAir 3.4.1）
| 内容 | 位置 |
| ----------------------------------------------------------------- | ---------------------------------------------------------------- |
| Graphics._drawCircle（段数由半径决定） | laya.core.js，calcArcSegmentsWithScale(radius, scale, 40, 5) |
| calcArcSegmentsWithScale | laya.core.js，min(2048, max(minSegments, floor(r·s·2π/5))) |
| Graphics._drawLine / _drawPoly / _appendPathFillAndStroke | laya.core.js |
| Graphics._tessellationScale | laya.core.js（取 Graphics 自身 transform 的缩放） |
| WebGraphicsRenderUnitPool（按尺寸分桶、回收不还块） | laya.webgl_2D.js |
| WebGraphicsOpVIStorePool（全局静态、装不下就新建、不回收） | laya.webgl_2D.js |
| WebGraphicsBatch.isCompatible（bufferState 必须相同才合批） | laya.webgl_2D.js |
| WebGraphicsIndexBatchBuffer（bufferStates 只在 destroy 时清） | laya.webgl_2D.js |
| GraphicsDefines：GRAPHICS_INFO_VERTEX_BLOCK_SIZE = 4 | laya.core.js |
