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

Question

I am trying to render different shapes of objects with the same shader.

If I try the following code with only one shape, the code works. If I try the following code with 2 identical shapes, code works. But if I try with 2 different shapes, using the same shader, I get the following error: glDrawElements: attempt to access out of range vertices in attribute 0 and only one, disfigured object is shown.

For every uploaded shape, I save its vertices ( positions ) and indices( positions_indices ). After that I create vertex_buffer and index_buffer and save those in the model object. Here is the code:

var model = new Model(positions,positions_indices);

Answer 1

You have forgotten to bind the element array buffer before you draw the elements:

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

Further you have to bind the array buffer, before you define an array of generic vertex attribute data.

Your code should look somehow like this:

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); 
}