CODEWITHSUNDEEP
javascriptruntime-errorwebglwireframe
Nichole Lasater
Nichole Lasater

Reputation: 21

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

I'm attempting to create a generalized cylinder wireframe. I keep getting this error:

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

I'm setting up my buffers and calling DrawElements() like this:

       // Create a buffer object
          var vertexBuffer = gl.createBuffer();
          var indexBuffer = gl.createBuffer();

          gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
          gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
          gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexes), gl.STATIC_DRAW);

       // Draw
          gl.drawElements(gl.LINE_STRIP, indexes.length, gl.UNSIGNED_SHORT, 0);

(also, I know 'indexes' isn't the plural of index. Just go with it.)

When I get this error, my indexes and vertices arrays look like this:

Vertices.length: 26
Indexes.length: 60

Indexes[]: 0,12,13,1,0,1,13,14,2,1,2,14,15,3,2,3,15,16,4,3,4,16,17,5,4,5,17,18,6,5,6,18,19,7,6,7,19,20,8,7,8,20,21,9,8,9,21,22,10,9,10,22,23,11,10,11,23,24,12,11



 Vertices[]: 
-0.7149857878684998,0.7199857831001282,0.20000000298023224,
-0.7820903062820435,0.6458441019058228,0.17320507764816284,
-0.8491948246955872,0.5717024207115173,0.17320507764816284,
-0.9162993431091309,0.4975607395172119,0.17320507764816284,
-0.9834038615226746,0.4234190583229065,0.17320507764816284,
-1.0505083799362183,0.3492773771286011,0.17320507764816284,
-1.1176128387451172,0.27513569593429565,0.17320507764816284,
-1.1847172975540161,0.20099402964115143,0.17320507764816284,
-1.251821756362915,0.1268523633480072,0.17320507764816284,
-1.318926215171814,0.05271069332957268,0.17320507764816284,
-1.386030673980713,-0.021430976688861847,0.17320507764816284,
-1.4531351327896118,-0.09557265043258667,0.17320507764816284,
-1.5202395915985107,-0.1697143167257309,0.17320507764816284,
0.7600141763687134,-0.6150141954421997,0.20000000298023224,
0.6929096579551697,-0.6891558766365051,0.17320507764816284,
0.625805139541626,-0.7632975578308105,0.17320507764816284,
0.5587006211280823,-0.837439239025116,0.17320507764816284,
0.49159613251686096,-0.9115809202194214,0.17320507764816284,
0.42449164390563965,-0.9857226014137268,0.17320507764816284,
0.35738715529441833,-1.0598642826080322,0.17320507764816284,
0.290282666683197,-1.1340059041976929,0.17320507764816284,
0.2231781780719757,-1.2081475257873535,0.17320507764816284,
0.1560736894607544,-1.2822891473770142,0.17320507764816284,
0.08896919339895248,-1.3564307689666748,0.17320507764816284,
0.021864697337150574,-1.4305723905563354,0.17320507764816284,
-0.04523979872465134,-1.504714012145996,0.17320507764816284

As far as I can tell, I shouldn't be referencing a vertex out of bounds, so I'm not sure why this error is surfacing. Am I misusing the buffer? I'm still quite new to WebGL, so any pointers in the right direction would be greatly appreciated.

Upvotes: 1

Views: 1411

Answers (1)

user8556290
user8556290

Reputation:

Try with pointsArray http://www.eng.utah.edu/~cs4600/lectures/Wk11_TextureMapping2.pdf

var Indexes = [0,12,13,1,0,1,13,14,2,1,2,14,15,3,2,3,15,16,4,3,4,16,17,5,4,5,17,18,6,5,6,18,19,7,6,7,19,20,8,7,8,20,21,9,8,9,21,22,10,9,10,22,23,11,10,11,23,24,12,11];

var Vertices[-0.7149857878684998,0.7199857831001282,0.20000000298023224,
-0.7820903062820435,0.6458441019058228,0.17320507764816284,
-0.8491948246955872,0.5717024207115173,0.17320507764816284,
-0.9162993431091309,0.4975607395172119,0.17320507764816284,
-0.9834038615226746,0.4234190583229065,0.17320507764816284,
-1.0505083799362183,0.3492773771286011,0.17320507764816284,
-1.1176128387451172,0.27513569593429565,0.17320507764816284,
-1.1847172975540161,0.20099402964115143,0.17320507764816284,
-1.251821756362915,0.1268523633480072,0.17320507764816284,
-1.318926215171814,0.05271069332957268,0.17320507764816284,
-1.386030673980713,-0.021430976688861847,0.17320507764816284,
-1.4531351327896118,-0.09557265043258667,0.17320507764816284,
-1.5202395915985107,-0.1697143167257309,0.17320507764816284,
0.7600141763687134,-0.6150141954421997,0.20000000298023224,
0.6929096579551697,-0.6891558766365051,0.17320507764816284,
0.625805139541626,-0.7632975578308105,0.17320507764816284,
0.5587006211280823,-0.837439239025116,0.17320507764816284,
0.49159613251686096,-0.9115809202194214,0.17320507764816284,
0.42449164390563965,-0.9857226014137268,0.17320507764816284,
0.35738715529441833,-1.0598642826080322,0.17320507764816284,
0.290282666683197,-1.1340059041976929,0.17320507764816284,
0.2231781780719757,-1.2081475257873535,0.17320507764816284,
0.1560736894607544,-1.2822891473770142,0.17320507764816284,
0.08896919339895248,-1.3564307689666748,0.17320507764816284,
0.021864697337150574,-1.4305723905563354,0.17320507764816284,
-0.04523979872465134,-1.504714012145996,0.17320507764816284];
...
indexes.push(vertices[x]);
gl.drawElements(gl.LINE_STRIP, pointsArray.length, gl.UNSIGNED_SHORT, 0);

Upvotes: 1

Related Questions