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

Question

我在 html5 Canvas 中有超过 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
...
}

通过将数据绑定(bind)到顶点着色器中的一个 vec2 属性，最终分配给一个 gl_Position。

---

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

问题是，考虑到行数及其随机性。出于性能原因，通过为每一帧中的每一行传递旋转垫的方式来做到这一点是完全不可能的。

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

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

我不认为你可以轻易地做得比你现有的更好。也无法避免在固定点的顶点中为移动点指定足够的信息。

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