如何使用大量静态顶点数据（500k顶点）优化对webGL.bufferData的调用

Question

大家好我正在制作一个我的风格游戏，因此在单个bufferData调用中有大量顶点。我已经对事物进行了优化，以便每个顶点只有一个float32属性，它基本上构成了一个顶点ID。所以500k顶点总共只使用500k float32属性。 顶点缓冲区中的属性相当于一系列永不改变的有序数字。这只是我通过它发送的数量。

Minecraft样式立方体的实际数据将转换为纹理并传递到着色器。着色器完成解码纹理数据并将其映射到每个顶点的所有工作。

我目前正在运行60fps的chrome运行这个批次，但我想将它推到至少200万个顶点，所以我需要以某种方式提高这个批次的性能。

当在chome中进行性能基准测试时，似乎cpu，而不是gpu是主要的瓶颈。对bufferData的调用占用了33％的cpu资源，对texImage2d的调用占用了9.5％的cpu资源

我正在寻找有关如何改善这种表现的任何想法。

项目链接为here

包含webGl调用的js文件的链接是here

Answer 1

所以我找到了解决方案。您可以使用bufferSubData更新现有vertexBuffer中的顶点数据，只需存储，重新绑定和重用它。但是在我的情况下，vertexBuffer中的数据本身永远不会改变，所以我需要做的就是存储创建的vertexBuffer并在我想要使用它时重新绑定它，并且绝对不需要调用任何类型的缓冲区方法。从而消除了用于bufferData的33％cpu！还必须做进一步的测试，但到目前为止看起来还不错。 使用这个解决方案，我能够高达1400万个顶点，这只是因为其他限制而不是对teximage2d的调用，现在仍然只占30％左右。