Html 如何在WebGL/OpenGL中高效地旋转大量的gl线？

我在html5画布上有超过10万行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_位置

---

然后我想做一个动画，使所有的线围绕它们的第一个点旋转，就像时钟的秒针一样，但速度要快得多，例如每秒旋转一圈。

问题是，考虑到线的数量及其随机性。由于性能原因，在每一帧的每一行中通过旋转垫是不可能做到这一点的

所以，我试图找出一种在顶点着色器中实现这一点的方法，并且只在每个帧中更新一个浮点时间变量到着色器。由于创建旋转矩阵需要知道定点，我将矢量数据格式更新为：

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坐标的细微变化作为种子来弥补着色器中的初始角度。

感谢您加入讨论：）。但现在似乎只有半径数据才能决定旋转矩阵，即使初始角度不变。在顶点着色器中，我们无法判断当前点是直线的第一点还是第二点。抱歉，我没有指定-对于固定点，半径可以为零。