WebGL.
It appears that gl.drawArray() is expensive! Didn’t gather numbers, but could see that more than a few started racking up the CPU load. Adopted a “sprite” approach, that lets the same geometry values get reused, and a texture is submitted to the vertex shader to offset them. Handy!
A bit of the vertex shader goes like so.
attribute float sprite; // each vertex is anchored to an offset, represented by a pixel in the Sprite Control texture uniform sampler2D sprites; // ... vec4 spritePos = texture2D(sprites, vec2(sprite, 0.5)); // texture is 512 by 1 pos4.xyz += spritePos.xyz; // (and use spritePos.w for a yaw rotation.)
Here we see 511 sprites, all rendered with a single gl.drawArray() call.
The motion comes by moving each sprite along a different 3d Lissajous path.