glVertexAttribPointer with interleaved VBO

I’m not exactly sure if this is a “beginners” question. However, I’m a beginner with WebGL, which is actually an OpenGL ES implementation inside your Browser. Currently I’m using Firefox 3.7a1pre (“Minefield” / Nightly-Build). The development version of Google Chrome should also have support for it.

I’m using OpenGL for some time now, however, I have never used glVertexAttribPointer before.

Can some body tell me why the code below does need an VBO which is larger than the size needed for storing the vertices? What is wrong here?

I have three vertices, each with position, normal and 2D-texcoords. That makes 8 floats per vertex, 24 floats total.

   // JavaScript:

   var vertices = [
       // px py pz | nx ny nz | tu tv
       0.0,  0.5,  0.0,  0.0,  0.0,  1.0,  0.5,  0.0,
      -0.5, -0.5,  0.0,  0.0,  0.0,  1.0,  0.0,  1.0,
       0.5, -0.5,  0.0,  0.0,  0.0,  1.0,  1.0,  1.0,

      0.0, 0.0, 0.0  // additional values to make the VBO larger

   var vbo = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
   gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(vertices), gl.STATIC_DRAW);

   gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8, 0);
   gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8, 3);
   gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 6);

   // ...

   gl.drawArrays(gl.TRIANGLES, 0, 3);

If the VBO is large enough everything works as excepted.
If the VBO is smaller than 27 floats I get this:

VBO too small for bound attrib index 1: need at least 27 elements, but have only 26

Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsICanvasRenderingContextWebGL.drawArrays]"  nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)"  location: "JS frame :: file:///mnt/data/edit/webgl/test1/test.html :: draw :: line 207"  data: no]

If I disable index 1 (the normals) then positions and texcoords are correct and no error appears. This means that index 0 and index 2 are correct and this offset-setting-thing works?

Any idea what is wrong here? Bug in Firefox? (it’s Pre-Alpha…)
Thanks in advance.

Here is the piece of source code that generates that error, but for the life of me I can’t figure out why it’s happening.

edit I see why, I think it should be:

GLuint needed = vd.offset + (vd.stride ? vd.stride : vd.size) * (count-1);

The -1 is because you don’t use the stride for the first element.

2nd edit No no no, that’s still wrong:

GLuint needed = vd.offset + (vd.stride ? vd.stride : vd.size) * (count-1) + vd.size;


GLuint needed = vd.offset + (vd.stride ? vd.stride : vd.size) * (count-1) + vd.size;

Yeah, I think that’s correct. Thanks!

But, the question is then: Why did index2 work?

gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 6);

6 + 8 * 3 is 30, not 24.
There must be something else also wrong.

Did you just remove index 1? Or did you renumber the other attribute?


I did comment out these two lines:

gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8, 3);

Texcoords where correct, so it worked…

I will try to reindex.

When removing index 1 and then renaming index 2 to index 1 same error happens. So this has something to do how GL_ACTIVE_ATTRIBUTES does count the attributes.

Edit: I will report that bug to Mozilla, as soon I find out how to do so…