我在html5的画布上有超过100K的gl.line，每行的两端都是随机生成的。以数据格式：
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
...
}
通过将数据绑定到顶点着色器中的vec2属性，该属性最终指定给gl_位置。
然后我想做一个动画，让所有的线像时钟的秒针一样绕着它们的第一个点旋转，但是速度要快得多，例如每秒旋转1圈。
问题是，考虑到线的数量及其随机性。由于性能原因，要通过每一帧中每一行的旋转垫子来实现这一点是完全不可能的。
所以，我试图在顶点着色器中找到一种方法，只在每帧中更新一个浮点时间变量到着色器。由于创建旋转矩阵需要知道固定点，我将矢量数据格式更新为：
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
...
}
这样，我可以通过vec4.xy访问顶点的坐标，并在顶点着色器中通过vec4.zw访问旋转的固定点。然后我使用点和时间变量来构建旋转矩阵。
但我认为问题很明显，内存使用量翻了一番。
所以，我想知道什么是最有效的方式（包括记忆和时间）来完成动画？
最佳答案
我不认为你能轻易地做得比你现有的更好。无法避免在顶点中为静止点指定足够的移动点信息。
通过存储（中心x、中心y、半径）而不是两个整点，可以在每个点使用3个值，而不是4个值；固定点的半径为零。关键在于，这会删除随机的初始角度，但是可以通过使用x坐标的精细变化作为种子来弥补着色器中的这些角度。
关于html5 - 如何在WebGL/OpenGL中高效旋转大量gl.LINES？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25014067/