WebGL "range out of bounds for buffer" error for sorted symbol layers

[ChrisLoer]

Symbol layers that require sorting (because they might overlap) dynamically update their index buffers at render time with a bufferSubData call. I haven't found clear documentation yet, but it appears that we're required to bind the associated VAO before we make the bufferSubData call, and we're not doing that, so we end up with WebGL warning showing up in the console.

This will get triggered by the one-way arrows visible on the map here: http://localhost:9966/debug/#15.94/38.8273/-77.0615/-47.6

Rotating/pitching that map will trigger warnings that look like:

[.Offscreen-For-WebGL-0x7fbcca85c600]GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

While there are no visible errors in that example because the symbols aren't actually overlapping, if they were overlapping, they could end up showing in the incorrect sort order.

I'm not sure of the fix, but I think the simplest fix with our current code is to require a freshBind in VertexArrayObject#bind whenever the index array order has changed.

/cc @mourner @ansis

[jfirebaugh]

It's not the bufferSubData call per se that matters, it's the bindBuffer(ELEMENT_ARRAY_BUFFER, ...) call that precedes it. Recall that the index (element) buffer binding is part of VAO state -- changing the binding modifies the state of whatever VAO is currently bound.

[ChrisLoer]

Fixed with #5621.