How to rotate huge amout of gl.LINES efficiently in WebGL/OpenGL?

Question

I have over 100K gl.LINES in a html5 canvas, both ends of the lines are randomly generated. in a data format:

array{
a, b, // first point of a line
c, d, // second point of a line
a1, b1, // first point of a line
c1, d1, // second point of a line
...
}

By binding the data to a vec2 attribute in the vertex shader, which finally assigned to a gl_Position.

Then I want to do an animation, make all the lines rotate around their first point like a second hand of a clock, but much faster, for example, 1 round per second.

The problem is, considering the number of the lines and its randomness. It is quite impossible to do this in the way of passing the rotation mat for every line in every frame for performance reason.

So, I tried to figure out a way to do this in vertex shader, and only update a float time variable to shaders in each frame. As create a rotation matrix need to know the fix point, I update the vector data format to:

array{
a, b, a, b, // first point of a line
c, d, a, b, // second point of a line
a1, b1, a1, b1 // first point of a line
c1, d1, a1, b1 // second point of a line
...
}

In this way, I can get access to the coord of the vertex by vec4.xy, and the fix point for rotation by vec4.zw in the vertex shader. Then I use the point and a time variable to build the rotation matrix.

But I think the problem is quite obvious, the memory usage doubles.

So, I wondered what is the most efficient way (both memory and time) to accomplish the animation?

Kevin Reid Kevin Reid · Accepted Answer · 2014-07-29T15:21:27

I don't think you can easily do better than what you've got. There's no way to avoid specifying enough-information-for-a-moving-point in the vertices for the stationary points as well.

You could use 3 values rather than 4 per point by storing (center x, center y, radius) rather than two entire points; stationary points have radius zero. The catch is that this removes the random initial angles, but you can make up those in the shader by, e.g., using fine variations of the x coordinate as a seed.

How to rotate huge amout of gl.LINES efficiently in WebGL/OpenGL?

1 Answers