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

我认为你不能轻易做得比你得到的更好。也没有办法避免在静止点的顶点中为移动点指定足够的信息。

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

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

1 个答案: