绘制实例化数组后，如何清理WebGL2状态恢复常规渲染？

核心问题：未重置实例化相关的WebGL状态 #

你遇到的问题根源是实例化渲染修改了顶点属性除数（vertexAttribDivisor），但仅禁用了顶点数组，未将除数恢复为默认值0。后续普通渲染（如全屏四边形背景）时，这些属性会继续按实例间隔读取数据，导致顶点数据解析错误。此外，缓冲区、程序绑定的残留状态也可能干扰正常渲染流程。

具体修复步骤 #

针对你的代码，补充以下状态清理操作即可解决问题：

1. 重置顶点属性除数 #

在禁用实例化属性数组后，必须将每个属性的除数改回默认值0（按顶点步进）：

for (let i = 0; i < 4; ++i) {
  const loc = matrixAttribute + i;
  gl.disableVertexAttribArray(loc);
  // 关键：重置除数为默认值，恢复普通顶点属性行为
  gl.vertexAttribDivisor(loc, 0);
}

2. 解绑实例化相关缓冲区 #

渲染完成后，解绑当前绑定的ARRAY_BUFFER，避免后续渲染误读残留的矩阵数据：

gl.bindBuffer(gl.ARRAY_BUFFER, null);

3. 明确切换程序（可选但更严谨） #

渲染完圆形后，解绑当前着色器程序，确保后续背景渲染时不会残留之前的uniform或属性配置：

gl.useProgram(null);

整合后的完整清理代码片段 #

把上述修改添加到你的渲染代码末尾：

gl.drawArraysInstanced(
  gl.TRIANGLE_FAN,
  0,
  sides+2,
  count,
);
unbindIndexBuffer(gl);
unbindVertexBuffer(gl, vertexPositionAttribute);

// 清理实例化属性状态
for (let i = 0; i < 4; ++i) {
  const loc = matrixAttribute + i;
  gl.disableVertexAttribArray(loc);
  gl.vertexAttribDivisor(loc, 0); // 重置除数是核心修复点
}

// 解绑实例化矩阵缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// 解绑当前程序，隔离渲染状态
gl.useProgram(null);

额外建议 #

• 状态隔离原则：将不同渲染对象的操作封装成独立函数（如renderCircles()、renderBackground()），每个函数执行前明确设置自身所需的所有状态（绑定程序、缓冲区、uniform等），执行后清理非全局状态，避免状态污染。
• 不依赖默认状态：WebGL是状态机，所有渲染操作都应显式设置所需状态，不要假设上一次渲染的残留值符合当前需求。比如渲染背景时，要重新绑定自身的顶点缓冲、设置属性指针，而非依赖清理后的空状态。

内容的提问来源于stack exchange，提问作者whiterook6