WebGL2 实例化绘制：gl.drawArraysInstanced 与性能优化

概述实例化绘制允许一次调用渲染多个实例（共享几何，不同变换/颜色），减少 JS 与 GPU 间的调用开销。WebGL2 原生支持；WebGL1 可使用 `ANGLE_instanced_arrays` 扩展。示例（简化）// WebGL2

gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount)

// WebGL1 扩展

const ext = gl.getExtension('ANGLE_instanced_arrays')

ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, vertexCount, instanceCount)

工程建议数据组织：使用实例属性（变换/颜色）与缓冲对象减少重复数据。批量与状态：减少绑定与状态切换；监控瓶颈与纹理上传。兼容：检测扩展与环境；提供降级路径。参考与验证MDN WebGL2 实例化文档：https://developer.mozilla.org/docs/Web/API/WebGL_API/Using_Vertex_Array_Objects#instanced_drawingANGLE 扩展说明：相关平台文档