Error while playing with DrawArrays and face normals

Hi,
first of all: I’m dangerously new to WebGL (and OpenGL).
At the moment I’m failing while trying to call gl.drawArrays several times, the error is as follows:
“VBO too small for bound attrib index 0: need at least 50616 bytes, but have only 50544”
and
“DrawArrays: bound vertex attribute buffers do not have sufficient data for given first and count”

Now the story how it began:

After creating a buffer object with a lot of vertices (yes, I know: ugly coordinates…) via

 function initBuffers() {
    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
3489286.81640625, 5553185.875, -704.9661865234375,
3493642.32421875, 5553185.875, -704.9661865234375,
3493642.32421875, 5557816.65625, -704.9661865234375,
3489286.81640625, 5553185.875, -704.9661865234375,
3493642.32421875, 5557816.65625, -704.9661865234375,
3489286.81640625, 5557816.65625, -704.9661865234375,
3490144.908203125, 5553064.015625, -346.9530029296875,
3490357.40625, 5553064.015625, -352.03399658203125,
3490076.625, 5553390.3125, -356.61334228515625, 
...
];

    gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);

These coordinates belong to many object which can be triangles or lines.

it’s time to define some normal data in the same way:

 cubeVertexNormalBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
    var vertexNormals = [
0.0, -0.0, 1.0,
0.0, -0.0, 1.0,
0.0, -0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.023889650412349105, 0.034579139834484546, 0.9991163934654876,
0.023889650412349105, 0.034579139834484546, 0.9991163934654876,
0.023889650412349105, 0.034579139834484546, 0.9991163934654876, 
...
];

gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);

After taking count of all the other necessary stuff I want to draw, lets say some triangles and lines:


gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.drawArrays(gl.TRIANGLES, 6, 12);
gl.drawArrays(gl.TRIANGLES, 12, 18);

And then comes the above mentioned error.
It only works when I don’t use the normal-vector stuff, i.e. don’t use lighting.

My question now: Is there a way to draw different primitive out of one vertices-array and one normals-array? Or would you do this in a completely different manner ?

Regards,
m.sirin

It seems your buffer sizes don’t match, meaning you have more vertices than normals, texcoords or indices. This is just a wild guess, but I had this error several times when I forgot to rename or mistyped the indices buffer.

yes, you’re right, it does not match. but it does not matter anymore, because now i found or picked another solution. every primitive-type has its own buffer:

  triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  var vertices = [...];
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);

..

    gl.bindBuffer(gl.ARRAY_BUFFER, segmentVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLES,0,4212);

and then the same for lines or points (and separately for their normals).

The question now: that is not efficient, isn’t it?