WebGL errors and exceptions .Solve ’em all

WebGL errors.Here I will write about all tricky stuff that I find and lead to nasty errors  in WebGL

So first one is a exception and it doesn’t render anything if vertices are on position 0 in shader :

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

When create buffer to render with indices:

this.indexBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Float32Array(this.indices), this.gl.STATIC_DRAW);

Modify last line  with:

this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), this.gl.STATIC_DRAW);

This lead to error because WebGl expects that all  indices must be positive and integers.

However this exception is not thrown if this  line is not added before your bindings in your DrawMethod and you can spend hours to find this problem:

this.gl.enableVertexAttribArray(this.gl.getAttribLocation(shader, "aVertexPosition"));//aVertexPosition from shader on attribute 0

Second one is about alpha blending in Webgl. I dedicated an entire post  here :WebGL Transparency


Third one is about  webgl bufferSubData. Don’t forget to multiply your offset index with size. For example for Float32Array you should multiply with 4.

this.gl.bufferSubData(this.gl.ARRAY_BUFFER,  index *  4 , new Float32Array(vertices );


Forth:  IF you have more than 2^16(65536) indices consider using OES_element_index_uint extension , to use 2^ 32 indices( usgined int).

To activate add this:


Set indices:

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);

Draw elements

gl.drawElements(gl.TRIANGLES, buffer.numItems, gl.UNSIGNED_INT, 0);

I will add more if I find out


blog comments powered by Disqus