WebGL 中的随机动画

Question

我有一个包含数万个多边形（z=0 平面上的 2d）的 WebGL 场景。每个多边形由大约 6-12 个三角形（18-36 个顶点）组成。我想通过对每个形状中的所有顶点应用 4x4 变换矩阵来对每个形状应用随机（或随机外观）3d 动画。

我知道我可以通过为每个顶点分配一个 16 数字矩阵（形状中所有 18-36 个顶点的相同矩阵）来做到这一点。我知道这只是 WebGL 的本质，但拥有 18-36 个相同的 4x4 矩阵的相同副本似乎有点低效。

我想知道是否有更有效的方法来做到这一点。例如，有没有办法只使用 20 个矩阵并为每个形状随机分配一个矩阵？我还在学习webgl，所以我不确定这是否可行。

Answer 1

在我的脑海中，我看到了你可以走的三条路线，所有这些都要求您在顶点上至少有一个额外的“索引”属性，以了解它们属于哪个多边形（您可以将其编码为位置的一部分）。

当您需要单独控制每个动画时：

上传一堆变换矩阵作为制服，并通过额外的形状索引对其进行索引。如果你真的只想在一堆可定义的矩阵之间交替，这可能是最有效的方法。

当您需要单独控制每个形状时：

通过浮点 RGBA 纹理上传大量矩阵，4 像素 = 1 个矩阵，使用形状索引作为纹理偏移量在顶点着色器中解压缩适用矩阵。

当您不需要显式控制时：

在顶点着色器中以程序方式为您的形状制作动画，使用形状索引或什至可能只是位置和噪声函数以及时间统一来动态生成您的变换（矩阵），具体取决于您的变换需要和您的顶点着色器与片段着色器加载这可能是最快的方法。

最后一种方法是这样的（顶点着色器代码）：

float rotationY = noise(shapeIndex + time)*PI;
vec3 translation = vec3(
    noise(shapeIndex + 521 + time),
    noise(shapeIndex + 123 + time),
    noise(shapeIndex + 321 + time)
) * 2.0 - 1.0; // adjust this scaling depending on your projection 
mat4 transform = mat4(
    vec4(cos(rotationY),0,sin(rotationY),0),
    vec4(0,1,0,0),
    vec4(-sin(rotationY),0,cos(rotationY),0),
    vec4(translation, 1)
);

WebGL 中的随机动画

Random animations in WebGL

webgl