vertexAttribDivisor 是 WebGL2 中控制顶点属性按实例步进更新的关键机制；值为 0 表示每顶点更新，1 表示每实例更新，从而支持高效实例化渲染，避免多次 draw call 和 CPU 矩阵计算。
vertexAttribDivisor 是什么，为什么它能加速实例化
vertexAttribDivisor 是 WebGL2（及 OpenGL ES 3.0+）中控制顶点属性更新频率的关键机制。它不改变顶点数据本身，而是告诉 GPU：这个 vertexAttribPointer 绑定的 attribute，每多少个「实例」才取下一个值。值为 0 表示“每个顶点都取”，值为 1 表示“每个实例取一次”，值为 n 表示“每 n 个实例取一次”。
真正实现「大量重复物体」高效绘制的核心，是把变化量（如位置、颜色、缩放）从 CPU 逐个提交，变成一次性上传为「实例属性数组」，再靠 vertexAttribDivisor 让 shader 按实例步进读取——避免了成百上千次 drawArrays/drawElements 调用，也绕开了 JS 层循环拼接矩阵的性能瓶颈。
必须满足的 WebGL2 前置条件
不是所有环境都能直接用 vertexAttribDivisor，漏掉任一环节都会静默失败或报 INVALID_OPERATION：
- 确保上下文是
webgl2：创建 canvas 时显式传{ alpha: false, antialias: false }并检查gl.getParameter(gl.VERSION)是否含WebGL 2.0 - 必须启用扩展（即使 WebGL2 原生支持）：
gl.getExtension('ANGLE_instanced_arrays')或gl.getExtension('EXT_instanced_arrays')—— 某些旧 Chrome/Android WebView 仍需显式获取 - 调用
vertexAttribPointer后，**必须立刻**跟gl.vertexAttribDivisor(index, divisor)，顺序不能颠倒；否则 divisor 保持默认0，实例化失效 - shader 中对应 attribute 必须用
in修饰符声明，且类型需匹配（如vec3、mat4），不能是uniform
如何上传实例数据并设置 divisor
假设你要绘制 1000 个立方体，每个带唯一 modelMatrix（4×4），共 16 个 float。你不能把整个矩阵塞进一个 attribute（单 attribute 最大 4 分量），得拆成 4 个 vec4 attribute：
立即学习“前端免费学习笔记（深入）”；
const matrices = new Float32Array(1000 * 16); // 按列主序排布 // ... 填充数据（注意：第0个矩阵的第0列 → matrices[0..3]，第1列 → matrices[4..7]...） <p>const matrixBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, matrixBuffer); gl.bufferData(gl.ARRAY_BUFFER, matrices, gl.STATIC_DRAW);</p><p>// 绑定第0列到 location=3 gl.enableVertexAttribArray(3); gl.vertexAttribPointer(3, 4, gl.FLOAT, false, 64, 0); // stride=16*4=64 字节，offset=0 gl.vertexAttribDivisor(3, 1); // ✅ 关键：每实例更新一次</p><p>// 绑定第1列到 location=4 gl.enableVertexAttribArray(4); gl.vertexAttribPointer(4, 4, gl.FLOAT, false, 64, 16); // offset=16 字节 gl.vertexAttribDivisor(4, 1);</p><p>// 同理绑定第2、第3列（location=5,6），stride 和 offset 按 16 字节递增
注意：stride 是整个矩阵的字节数（16×4），不是单列；offset 是该列在矩阵内的起始偏移（0, 16, 32, 48）；divisor 全部设为 1，确保每实例读取完整矩阵。
drawElementsInstanced 的调用要点和常见崩溃点
最终绘制必须用 gl.drawElementsInstanced（或 drawArraysInstanced），传入实例数而非顶点数。最容易出错的是参数错位和未清空状态：
-
gl.drawElementsInstanced(mode, count, type, indicesOffset, instanceCount)—— 第 5 个参数才是实例数，不是第 2 个！写成drawElementsInstanced(..., 1000)才对，别写成drawElements(..., 1000) - 如果之前用了
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo)，确保ibo是索引缓冲区（非顶点缓冲区），且数据格式与type一致（gl.UNSIGNED_SHORT或gl.UNSIGNED_INT） - 每次绘制前，务必确认所有用到的 attribute 都已
enableVertexAttribArray，且vertexAttribDivisor已设；漏掉任意一个，该 attribute 会退化为 per-vertex 行为，导致模型错位或全黑 - 移动端尤其注意：某些 Mali GPU 对
divisor > 1支持不稳定，建议实例数超过 1000 时优先用divisor = 1，避免用divisor = 2等非常规值
实例化不是银弹——矩阵计算仍发生在 GPU 上，但把「CPU 准备→GPU 传输→GPU 绘制」的链路压到了最低开销。真正卡点往往不在 shader，而在 buffer 上传时机和 divisor 设置的原子性：少一次 vertexAttribDivisor 调用，就可能让 10 万个实例退化成 10 万个 draw call。
