Webgl 和 dart 每帧更改顶点缓冲区中的数据答案

【问题标题】：Webgl and dart changing data in vertex buffer every frameWebgl 和 dart 每帧更改顶点缓冲区中的数据
【发布时间】：2014-09-21 15:57:15
【问题描述】：

我有一个非常简单的“hello world”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);

它完成了这项工作，但不知何故我觉得这不是我问题的正确答案，并且可能会对性能产生影响。

【问题讨论】：

嗯，它对你的三角形很好。对于更复杂的基元，您可能需要使用片段着色器。编辑：你说的是你的“问题”，你的问题是什么？
这很可能是一个简单的渲染引擎，用于只有精灵的游戏（每个精灵 4 个顶点）。我可以想象我的精灵的 xyz 坐标会经常变化，屏幕上可能会同时出现很多精灵
现在我明白了，不，你不想每帧更新你的顶点缓冲区来转换你的几何图形。平移、旋转和缩放等变换通常是通过向着色器提交一个 4x4 矩阵并在顶点着色器内部进行顶点变换来完成的。
所以对于我的精灵，我应该有 4 个顶点和 6 个索引（正方形/矩形）并将我的精灵变换（位置、旋转等）应用于传递给着色器的统一 Matrix4 ?
是的，除此之外，您将只有一个顶点缓冲区（平面）并多次渲染它，绑定不同的矩阵和精灵纹理。

标签： dart webgl

【解决方案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

至于您在 cmets 中提到的 sprite，有多种实现 sprite 的方法。

最常见的方法是可能用单位纹理坐标制作一个单位正方形四边形，然后使用 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 中进行顶点 * 矩阵计算），那么时间可能会大不相同。

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

【讨论】：