Javascript 使用相同着色器更改不同形状的缓冲区在渲染时失败-WebGL

我试图用同一个着色器渲染不同形状的对象

如果我只使用一个形状尝试下面的代码，那么代码可以工作。如果我用两个相同的形状尝试下面的代码，代码就可以工作了。但是，如果我尝试使用同一着色器使用两个不同的形状，我会得到以下错误：

gldraurements:尝试访问属性0中超出范围的顶点，并且只显示一个变形对象

对于每个上传的形状，我保存其顶点（
位置
）和索引（
位置_索引
）。之后，我创建
vertex\u buffer
和
index\u buffer
，并将它们保存在
模型
对象中。代码如下：

var model = new Model(positions,positions_indices);

在绘制元素之前，您忘记绑定元素数组缓冲区：

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer);

此外，在定义通用顶点属性数据数组之前，必须绑定数组缓冲区

您的代码应该是这样的：

for(var i = 0;i<models.length;i++) {
    //creating and setting model matrix and setting color uniform property to shader

   gl.bindBuffer(gl.ARRAY_BUFFER, models[i].vertex_buffer);
   gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0);
   gl.enableVertexAttribArray(position);

   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer);

   gl.drawElements(gl.TRIANGLES, models[i].positions_indices.length, gl.UNSIGNED_INT, 0); 
}

for（var i=0；i您在绘制元素之前忘记绑定元素数组缓冲区：

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer);

此外，在定义通用顶点属性数据数组之前，必须绑定数组缓冲区

您的代码应该是这样的：

for(var i = 0;i<models.length;i++) {
    //creating and setting model matrix and setting color uniform property to shader

   gl.bindBuffer(gl.ARRAY_BUFFER, models[i].vertex_buffer);
   gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0);
   gl.enableVertexAttribArray(position);

   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer);

   gl.drawElements(gl.TRIANGLES, models[i].positions_indices.length, gl.UNSIGNED_INT, 0); 
}

（变量i=0；i）的