WebGL1是否支持GL_EXT_draw_instanced？求实例化渲染替代方案

MDN WebGL扩展列表的权威性 #

MDN的WebGL扩展列表是权威参考，它基于WebGL规范以及各浏览器的实际实现情况维护。你提到的GL_EXT_draw_instanced在WebGL1环境下确实支持度极低，很多老旧设备的浏览器根本没有实现这个扩展，所以测试时无法使用是正常的。

WebGL1中实现实例化渲染的替代方法 #

1. 手动复制顶点数据 #

把每个实例的顶点数据完整复制一份，合并到同一个顶点缓冲区中，然后调用一次drawArrays或drawElements完成绘制。比如每个实例需要不同的位置偏移，就给每个实例的所有顶点都加上对应的偏移量，再把这些顶点数据拼接起来。

• 优点：实现简单，无需特殊扩展
• 缺点：内存占用随实例数量线性增长，实例多的时候内存压力大

2. 循环调用绘制命令+顶点属性赋值 #

为每个实例单独设置对应的实例属性（比如位置、旋转角度），然后循环调用drawArrays/drawElements绘制单个实例。
示例伪代码：

// 假设已经有顶点缓冲区和基础属性
for (let i = 0; i < instanceCount; i++) {
  // 设置当前实例的位置属性
  gl.vertexAttrib3f(instancePositionLoc, positions[i].x, positions[i].y, positions[i].z);
  // 绘制单个实例
  gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
}

• 优点：内存占用低，逻辑直观
• 缺点：绘制调用次数等于实例数，实例多的时候会有明显性能损耗

3. 用纹理存储实例数据 #

将所有实例的参数（位置、缩放、旋转等）打包成纹理数据（比如使用Float32Array创建纹理），在顶点着色器中通过顶点索引计算出当前顶点所属的实例ID，然后从纹理中采样获取该实例的参数。
顶点着色器示例：

precision mediump float;
attribute vec3 aPosition;
uniform sampler2D uInstanceData;
uniform int uInstanceCount;
uniform int uVertexPerInstance;

void main() {
  // 计算当前实例ID
  int instanceId = gl_VertexID / uVertexPerInstance;
  // 计算纹理坐标（假设实例数据按列存储）
  float texX = float(instanceId) / float(uInstanceCount);
  vec4 instanceData = texture2D(uInstanceData, vec2(texX, 0.5));
  // 应用实例变换
  vec3 pos = aPosition + instanceData.xyz;
  gl_Position = vec4(pos, 1.0);
}

• 优点：内存效率高，支持大量实例
• 缺点：需要处理纹理坐标的计算，WebGL1的纹理采样精度有限，且需要注意纹理格式的兼容性

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