drawElements with webGL

Question

I have face-indices (pointing to points) and the points and want to draw triangles in a loop. The web console gives me this error:

WebGL: drawElements: bound element array buffer is too small for given count and offset

This is my code:

for(var i=1;i<38000;i++){
 var vtx = new Float32Array(
 [points[faces[i][1]][1],points[faces[i][1]][2],points[faces[i][1]][3],
  points[faces[i][2]][1],points[faces[i][2]][2],points[faces[i][2]][3],
  points[faces[i][3]][1],points[faces[i][3]][2],points[faces[i][3]][3]
]
);
var idx = new Uint16Array([0, 1]);
initBuffers(vtx, idx);
gl.lineWidth(1.0);
gl.uniform4f(shaderProgram.colorUniform, 0, 0, 0, 1);
gl.drawElements(gl.LINES, 3, gl.UNSIGNED_SHORT, 0);
unbindBuffers();
}
}

The routine doesn't draw anything. How can I fix that?

Answer 1

Your drawElements call needs a different value for the second arg (count).

First off: It represents the number of vertices (not primitives!) you are drawing. So (gl.TRIANGLES, 3...) would draw a single triangle. (gl.LINES, 2...) would draw one line, (gl.LINES, 4...) would draw 2, but (gl.LINES, 3...) would draw, what, a line and a half? Make sure your count matches the primitive type.

Secondly, assuming that you are properly uploading idx into a buffer and binding it, you only provided two indices while your draw call indicated that you were drawing three. This is probably the cause of your error. Change the count to 2 and your code should work (assuming that you have everything else set up correctly). At least you'll avoid the error message you are getting.