Webgl drawElements: attributes not set correctly (repeated n times)

Question

So, I started a pretty instant trip to the world of visual three-dimensional programs. I am currently in the shadow of webgl with a pretty strong background in javascript and most web oriented languages, but this is my first graphic language.

When I tried to draw my first fairly simple form, I ran into an error that I could not find a solution to. It reads in chrome as:

WebGL: INVALID_OPERATION: drawElements: setting is incorrectly assigned (repeated n times)

where n is a number that apparently changes randomly. This code is here:

var tessVertexPositionBuffer; var tessVertexColorBuffer; var tessVertexIndexBuffer; function initBuffers () { tessVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexPositionBuffer); var vertices = [ //innerfront -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, //innerleft -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, //innerback -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, //innerright 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, //topfront -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -2.0, 2.0, 2.0, 2.0, 2.0, 2.0, //topleft -1.0, 1.0, 1.0, -2.0, 2.0, 2.0, -1.0, 1.0, -1.0, -2.0, 2.0, -2.0, //topback -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0, //topright 1.0, 1.0, 1.0, 2.0, 2.0, 2.0, 1.0, 1.0, -1.0, 2.0, 2.0, -2.0, //outerfront -2.0, 2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, //outerleft -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, //outerback -2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, //outerright 2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, //bottomfront 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, //bottomleft -1.0, -1.0, 1.0, -2.0, -2.0, 2.0, -1.0, -1.0, -1.0, -2.0, -2.0, -2.0, //bottomback -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, //bottomright 1.0, -1.0, 1.0, 2.0, -2.0, 2.0, 1.0, -1.0, -1.0, 2.0, -2.0, -2.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); tessVertexPositionBuffer.itemSize = 3; tessVertexPositionBuffer.numItems = 64; tessVertexColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexColorBuffer); var colors = [ [0.7, 0.7, 0.7, 1.0], //all inner sides [0.7, 0.7, 0.7, 1.0], [0.7, 0.7, 0.7, 1.0], [0.7, 0.7, 0.7, 1.0], [0.7, 0.0, 0.7, 1.0], //all top sides [0.7, 0.0, 0.7, 1.0], [0.7, 0.0, 0.7, 1.0], [0.7, 0.0, 0.7, 1.0], [0.7, 0.7, 0.0, 1.0], //all outer sides [0.7, 0.7, 0.0, 1.0], [0.7, 0.7, 0.0, 1.0], [0.7, 0.7, 0.0, 1.0], [0.0, 0.7, 0.7, 1.0], //all bottom sides [0.0, 0.7, 0.7, 1.0], [0.0, 0.7, 0.7, 1.0], [0.0, 0.7, 0.7, 1.0], ]; var unpackedColors = []; for (var i in colors) { var color = colors[i]; for (var j=0; j< 4; j++) { unpackedColors = unpackedColors.concat(color); } } gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW); tessVertexColorBuffer.itemSize = 4; tessVertexColorBuffer.numItems = 64; tessVertexIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tessVertexIndexBuffer); var tessVertexIndices = [ 0, 1, 2, 0, 2, 3, 4, 5, 6, 5, 6, 7, 8, 9, 10, 9, 10, 11, 12, 13, 14, 13, 14, 15, 16, 17, 18, 17, 18, 19, 20, 21, 22, 21, 22, 23, 24, 25, 26, 25, 26, 27, 28, 29, 30, 29, 30, 31, 32, 33, 34, 33, 34, 35, 36, 37, 38, 37, 38, 39, 40, 41, 42, 41, 42, 43, 44, 45, 46, 45, 46, 47, 48, 49, 50, 48, 50, 51, 52, 53, 54, 53, 54, 55, 56, 57, 58, 57, 58, 59, 60, 61, 62, 61, 62, 63 ]; gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(tessVertexIndices), gl.STATIC_DRAW); tessVertexIndexBuffer.itemSize = 1; tessVertexIndexBuffer.numItems = 96; } 

and the actual drawing of the buffers is here:

  gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vetexPositionAttribute, tessVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexColorBuffer); gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, tessVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tessVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, tessVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); 

Now, this is relatively verbatim from learningwebgl, I'm just trying to draw a simple shape. I am sure that my problem lies in my types of buffers, because I honestly do not understand them too much (and most of the webGl literature that I found is either a beginner with a general understanding of the language, or the HYPERSUPERPRO kind).

I'm really stuck. I checked the actual positions of the vertices / colors / indices several times, and unless I became familiar enough with the code so that I was blind to simple errors, I cannot find the error there.

I would really appreciate any lights you could tell on this subject.

Answer 1

Your problem seems to be a small typo. The second line of your "actual buffer drawing" code should be:

 gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, tessVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 

This line is missing r in vertexPositionAttribute .

I modified LearningWebGL Lesson 4 to use your code (with a fixed typo) and I have a link to it here .

If you notice that there is a blue triangle, and the yellow triangle is drawn in the same place in space, which causes some flickering. I am not sure if it was intentional.