Come use our code #4: WebGL instanced rendering for sprites
Instanced rendering: super fast, super hard to get working. So, we wrote a library that lets you forget that sprite instancing is happening at all... Admittedly, this under-commented code might be hard to understand, but it's not as hard as inventing it from scratch... I hope. ;)
Simply call DynamicVAO.acquire to get a handle to an object containing one element from each of the attached vertex attributes. Buffer resizing, and changing references to point to the new buffer, is handled internally: all you need to do is write to the object you're given.
There is also a static/dynamic control, so that you can let some buffers update every frame, while requiring others to only update on first draw. Static buffers only get re-sent to the GPU when refreshes are specially requested, or when sprites are added or removed.
Only one caveat: Be sure that your vertex shader produces nothing but degenerate triangles when all of its instanced attribute inputs are zero!
https://github.com/Atomotron/ld47-prep/blob/master/dynamicvao.js




