Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebGL drawElements out of range?

I am playing around with WebGL trying to learn it, so I took some code from a webgl tutorial, and tried to add my own lines, but whenever I run it, it gives me this error:

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 

Note: attribute 0 is my vertex buffer

My buffer initialization code is (obviously assume global vars if there is no definition)

    cubeVertexPositionBuffer = gl.createBuffer(); // create a buffer
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);

//for laziness
var _f=1.0/3.0;

vertices = [ // this is code from the tutorial
// Front face
-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 

// this is my own code
-1.0+  _f, -1.0, 1.0,   -1.0+  _f, -1.0, -1.0,
-1.0+2*_f, -1.0, 1.0,   -1.0+2*_f, -1.0, -1.0,
-1.0+3*_f, -1.0, 1.0,   -1.0+3*_f, -1.0, -1.0,
-1.0+4*_f, -1.0, 1.0,   -1.0+4*_f, -1.0, -1.0,
-1.0+5*_f, -1.0, 1.0,   -1.0+5*_f, -1.0, -1.0


];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
        gl.STATIC_DRAW);
cubeVertexPositionBuffer.itemSize = 3;
cubeVertexPositionBuffer.numItems = 34;

    // color buffer code is irrelevant because my color buffer is attribute 1 not 0
    // plus it's all copied from the tutorial

    // index buffer 
    // note I changed some code so the cube drawn is wireframe instead of solid
    // I tested that without extra vertex or index buffer data and it worked
    cubeVertexIndexBuffer = gl.createBuffer(); // this modified a bit from the tutorial
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
cubeVertexIndices = 
    [ 0, 1, 2, 3, 0, // Front face 
      4, 5, 6, 7, 4, // Back face 
      8, 9, 10, 11, 8, // Top face 
      12, 13, 14, 15, 12, // Bottom face 
      16, 17, 18, 19, 16, // Right face 
      20, 21, 22, 23, 20, // Left face

      // this is my code
      24, 25, 26, 27, 28, 29, 30, 31, 32, 33
    ];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(
        cubeVertexIndices), gl.STATIC_DRAW);
cubeVertexIndexBuffer.itemSize = 1;
cubeVertexIndexBuffer.numItems = 40;

And here's my drawing code

// set up perspective and stuff
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
        cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
        cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);

gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); // perspective matrix
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); // model view matrix

gl.lineWidth(1.0);
gl.drawElements(gl.LINES, cubeVertexIndexBuffer.numItems,
        gl.UNSIGNED_SHORT, 0);
like image 675
DankMemes Avatar asked Apr 01 '13 20:04

DankMemes


Video Answer


2 Answers

Actually I figured it out. Being the WebGL newb that I am, I managed to forget to add the indexes for each vertex in my color buffer. It just never came across my mind that my shaders required each vertex to have a color. (It would have been nice though, if WebGL had said it was an error in attribute 1 (my color attribute) and not attribute 0 (my vertex position attribute).

like image 99
DankMemes Avatar answered Oct 28 '22 00:10

DankMemes


The problem can also occur if the bufferData you have allocated in:

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(
    cubeVertexIndices), gl.STATIC_DRAW);

is too short (See second parameter).

This can happen if the creation of vertices happen programmatically. At least, that's the way it happened to me.

like image 22
bernardn Avatar answered Oct 27 '22 23:10

bernardn