At first I had the problem where I had about 150 rectangles rendered every tick. I only used STATIC_DRAW and glBufferData. I added support for DYNAMIC_DRAW and glBufferSubData and now I have a very good result... but the number of draw calls (glDrawArrays) is the same. Best practices from Mozilla Dev website said it should be reduced, but how?
Every rectangle has a method render() in which I do following (shortend):
_gl.bindBuffer(WebGL.ARRAY_BUFFER, vertexBuffer);
_gl.enableVertexAttribArray(a_position);
_gl.vertexAttribPointer(a_position, 2, WebGL.FLOAT, false, 0, 0);
_gl.bufferSubData(WebGL.ARRAY_BUFFER, 0, vertices);
_gl.bindBuffer(WebGL.ARRAY_BUFFER, texCoordBuffer);
_gl.enableVertexAttribArray(a_texCoordLocation);
_gl.vertexAttribPointer(a_texCoordLocation, 2, WebGL.FLOAT, false, 0, 0);
_gl.bufferSubData(WebGL.ARRAY_BUFFER, 0, texVertices);
_gl.uniform2fv(_utranslation, _translation);
_gl.uniform2fv(_urotation, _rotation);
_gl.uniform2f(_location, Dart2D.WIDTH, Dart2D.HEIGHT);
_gl.drawArrays(WebGL.TRIANGLES, 0, 6);
So every rectangle calls drawArrays in every frame...
