我有一个非常简单的“ 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);
可以完成工作，但不知何故我感觉这不是解决我的问题的正确方法，并且可能会对性能产生影响。
如果这是您需要为应用程序完成的操作，则每帧更新顶点没有任何问题。例如，这些示例每帧更新所有顶点
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
至于您在评论中提到的Sprite，有多种实现Sprite的方法。
最常见的方法可能是使用单位纹理坐标制作一个单位方形的四边形，然后使用3x3或4x4矩阵调整顶点以呈现所需的大小，位置和方向，并使用另一个矩阵或offset和multiplier作为纹理坐标，因此您可以对其进行转换和缩放以从纹理图集中选择特定的精灵。
我怀疑，尽管与上面第二个示例类似的更新顶点的技术最终会比一次绘制一个精灵多得多，但同时带有方向矩阵和纹理坐标矩阵。
例如，这里有一个示例，每个draw调用绘制一个精灵。在我的机器上，以50fps的速度拍摄了大约8000个精灵
这是一个示例，该示例每帧更新顶点，因此使用较少的绘制调用。我以50fps的速度获得了72000个精灵。即使每帧更新72000x4或280000个顶点，其速度也接近9倍。
当然，由于这些样本始终在绘制相同的子图形，因此它们并不能完全发挥出其真正的子图形引擎的作用。如果使用纹理图集（因此需要更新纹理坐标），并且支持使用不同大小，比例和方向的图形精灵（因此需要在JavaScript中执行顶点*矩阵计算），则时间可能会大不相同。
如果您是我，那么我将从最简单的方法开始，然后抽象您的用法，以便以后可以根据需要使用更优化的方法替换它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句