Dart 每帧顶点缓冲区中的Webgl和省道更改数据

我有一个非常简单的“hello world”webgl应用程序（臭名昭著的三角形），我决定要更改每个帧的每个顶点的颜色，以获得一个很酷的颜色显示，所以我在渲染方法中有这个

if（勾选%5==0）{
数据[3]=rand.nextDouble（）；
数据[4]=rand.nextDouble（）；
数据[5]=rand.nextDouble（）；
数据[3+6]=rand.nextDouble（）；
数据[4+6]=rand.nextDouble（）；
数据[5+6]=rand.nextDouble（）；
数据[3+12]=rand.nextDouble（）；
数据[4+12]=rand.nextDouble（）；
数据[5+12]=rand.nextDouble（）；
}

其中数据是一个浮动列表，包含3个顶点的6个浮动

我目前是在上面代码块之后做这件事的

gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferDataTyped（gl.ARRAY\u BUFFER，数据，gl.DYNAMIC\u DRAW）；

---

这很管用，但不知怎的，我觉得这不是我问题的正确答案，可能会对性能产生影响。

如果你需要为你的应用程序每帧更新一次顶点，那也没什么错。例如，这些示例每帧更新所有顶点

至于您在评论中提到的精灵，实现精灵的方法有很多种

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

不过我怀疑，与上面第二个示例类似的技术，即更新顶点，最终将绘制更多的精灵，而不是一次绘制一个精灵，使用矩阵表示方向，并使用额外的纹理坐标

例如。在我的机器上，我以每分钟50帧的速度得到大约8000个精灵

因此，它使用较少的draw调用。我以每秒50帧的速度得到72000个精灵。这几乎是每帧更新72000x4或280000个顶点速度的9倍

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

---

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

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