I've been trying to learn Web GL using [these awesome tutorials](http://games.greggman.com/game/webgl-fundamentals/). My goal is to make a very simple 2D game framework to replace the canvas-based jawsJS.

I basically just want to be able to create a bunch of sprites and move them around, and then maybe some tiles later.

I put together a basic demo that does this, but I hit a performance problem that I can't track down. once I get to ~2000 or so sprites on screen, the frame rate tanks and I can't work out why. Compared to this [demo of the pixi.js webgl framework](http://www.goodboydigital.com/pixijs/bunnymark/), which starts losing frames at about ~30000 bunnies or so (on my machine), I'm a bit disappointed.

[My demo](http://games.subdimension.co.uk/webgl/unoptimized.html) ([framework source](http://games.subdimension.co.uk/webgl/glixl-basic.js)) has 5002 sprites, two of which are moving, and the frame rate is in the toilet.

I've tried working through the pixi.js framework to try to work out what they do differently, but it's 500kloc and does so much more than mine that I can't work it out.

I found [this answer](https://stackoverflow.com/questions/13009328/drawing-many-shapes-in-webgl) that basically confirmed that what I'm doing is roughly right - my algorithm is pretty much the same as the one in the answer, but there must be more to it.

I have so far tried a few things - using just a single 'frame buffer' with a single shape defined which then gets translated 5000 times for each sprite. This did help the frame rate a little bit, but nothing close the the pixi demo (it then meant that all sprites had to be the same shape!). I cut out all of the matrix maths for anything that doesn't move, so it's not that either. It all seems to come down to the `drawArrays()` function - it's just going really slow for me, but only for my demo!

I've also tried removing all of the texture based stuff, replacing the fragment shader with a simple block colour for everything instead. It made virtually no difference so I eliminated dodgy texture handling as a culprit.

I'd really appreciate some help in tracking down what incredibly stupid thing I've done!

Edit: I'm definitely misunderstanding something key here. I stripped the whole thing right back to basics, changing the vertex and fragment shaders to super simple:

```
attribute vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0, 1);
}

```

and:

```
void main() {
    gl_FragColor = vec4(0,1,0,1);  // green
}

```

then set the sprites up to draw to (0,0), (1,1).

With 5000 sprites, it takes about 5 seconds to draw a single frame. What is going on here?