如何在 WebGL/OpenGL 中有效地旋转大量 gl.LINES？

Question

我在 html5 画布中有超过 100K gl.LINES，行的两端是随机生成的。数据格式：

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_Position。

---

然后我想做一个动画，让所有的线条像时钟的秒针一样围绕它们的第一个点旋转，但要快得多，例如每秒 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 访问旋转的固定点。然后我使用点和时间变量来构建旋转矩阵。

但是我觉得问题还是挺明显的，内存占用翻倍了。

那么，我想知道完成动画最有效的方式（内存和时间）是什么？

Answer 1

我不认为你可以轻易地做得比你所拥有的更好。没有办法避免在顶点中为静止点指定足够的信息。

通过存储 (center x, center y, radius) 而不是两个完整的点，您可以使用 3 个值而不是每个点的 4 个；静止点的半径为零。问题是这会移除随机的初始 角度，但您可以通过例如使用 x 坐标的精细变化作为种子来弥补着色器中的那些。