DerekMallon
DerekMallon

Reputation: 25

WebGL Element Array Buffers not working

I'm learning WebGL with haxe and I'm stuck on the part describing element arrays. What is suppose to be a square isn't showing up and I dont know why?

var verticesArray = [   
                             0.5, 0.5,      
                             0.5,-0.5,  
                            -0.5,-0.5, 
                            -0.5, 0.5   
                        ];

    var indicesArray = [0, 1, 3, 1, 2, 3];

    var VBO = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, VBO);
    GL.bufferData(GL.ARRAY_BUFFER,new Float32Array(verticesArray), GL.STATIC_DRAW);

    var EBO = GL.createBuffer();
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, EBO);
    GL.bufferData(GL.ELEMENT_ARRAY_BUFFER,  new UInt16Array(indicesArray), GL.STATIC_DRAW);

    GL.vertexAttribPointer(0, 2, GL.FLOAT, false, 0, 0);
    GL.enableVertexAttribArray(0);

    GL.useProgram(shaderProgram);


    GL.drawElements(GL.TRIANGLES, 6, GL.UNSIGNED_INT, 0);

    GL.bindBuffer(GL.ARRAY_BUFFER, null);
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);

Here's all the code that's suppose to draw the square I have got the shader programing working for sure

Upvotes: 1

Views: 3131

Answers (1)

Winchestro
Winchestro

Reputation: 2188

Make sure the type in your call to drawElements matches the provided index array type, which is

  • gl.UNSIGNED_BYTE for Uint8Array
  • gl.UNSIGNED_SHORT for Uint16Array
  • gl.UNSIGNED_INT for Uint32Array (needs OES_element_index_uint extension)

Also VertexAttribPointer and enableVertexAttribArray calls always operate on the buffer currently bound to the ARRAY_BUFFER target, which in this case isn't a problem, but very well become one the way you wrote it if you add additional VBOs. So either set them after creating and binding the buffer or make otherwise sure the correct buffer is bound.

Upvotes: 6

Related Questions