Question

我有一个非常简单的'你好世界'webgl应用程序（臭名昭着的三角形），我决定我想改变每个顶点每个顶点的颜色，以便有一个很酷的颜色显示，所以我在我的渲染方法中有这个

if (tick % 5 == 0) {
    data[3] = rand.nextDouble();
    data[4] = rand.nextDouble();
    data[5] = rand.nextDouble();

    data[3 + 6] = rand.nextDouble();
    data[4 + 6] = rand.nextDouble();
    data[5 + 6] = rand.nextDouble();

    data[3 + 12] = rand.nextDouble();
    data[4 + 12] = rand.nextDouble();
    data[5 + 12] = rand.nextDouble();
}

其中data是一个Float32List，包含3个顶点的6个浮点数。

我目前在上面的代码

之后执行此操作

gl.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
gl.bufferDataTyped(GL.ARRAY_BUFFER, data, GL.DYNAMIC_DRAW);

做了这项工作，但不知怎的，我觉得这不是我的问题的正确答案，可能会产生性能影响。

Answer 1

如果您需要为自己的应用做更多的事情，那么每帧更新顶点都没有错。例如，这些示例每帧更新所有顶点

https://www.khronos.org/registry/webgl/sdk/demos/google/nvidia-vertex-buffer-object/index.html

http://webglsamples.googlecode.com/hg/google-io/2011/10000-objects-optimized.html

至于你在评论中提到的精灵，有各种方法来实现精灵。

最常见的方法是可能使用单位纹理坐标制作单位方形四边形，然后使用3x3或4x4矩阵调整顶点以渲染所需的大小，位置和方向并使用纹理坐标的另一个矩阵或偏移和乘数，以便您可以平移和缩放它们以从纹理图集中选择特定的精灵。

我怀疑，虽然上面的第二个示例类似于更新顶点的技术，最终会绘制更多的精灵，而不是使用矩阵进行方向绘制一个精灵，并为纹理坐标添加额外的精灵。

例如，here is a sample that draws one sprite per draw call。在我的机器上，我以50fps

获得了大约8000个精灵

here is a sample that updates vertices every frame所以它使用较少的绘制调用。我以50fps获得了72000个精灵。即使它每帧更新72000x4或280000个顶点，它的速度几乎是速度的9倍。

当然这些样本并没有完成真正的精灵引擎的全部工作，因为它们总是绘制相同的精灵。如果您使用了纹理图集（因此需要更新纹理坐标），并且您支持以不同大小，比例和方向绘制精灵（因此您需要在JavaScript中进行顶点*矩阵计算），时间可能会有很大差异。

如果我是你，我会从最简单的方法开始并抽象你的用法，以便你可以在以后用更优化的东西替换它，如果你需要的话。

Webgl和dart每帧在顶点缓冲区中更改数据

1 个答案: