绘制多个对象时，什么时候创建一个新的顶点数组对象？答案

【问题标题】：When drawing multiple objects, when do you create a new vertex array object?绘制多个对象时，什么时候创建一个新的顶点数组对象？
【发布时间】：2020-10-19 16:09:10
【问题描述】：

我正在尝试使用 WebGL 创建游戏。

我目前有三个纹理，一个是字体的字母，一个是角色的精灵表，一个是世界的瓦片图。所以我有一些大纹理，我需要多次绘制其中的一小部分。

最好的方法是什么？

我目前的方法是为每个字母、地图上的正方形、角色姿势等使用 VAO……所以我会有 150 多个 VAO。我认为 VAO 很好，因为它们既简单又快速，但 this、this 和其他人认为这不是最佳选择。

我知道的另一种方法是只使用三个 VAO，并更改 WebGL 在缓冲区中开始读取的位置，以获取正确字母的位置。因此，我将拥有三个带有大型阵列的 VAO，而不是数百个带有小阵列的 VAO。如果这是正确的方法，我每次绘制东西时是否必须在 gl.enablevertexAttribArray() 之后调用 gl.vertexAttribPointer() ，还是只修改 gl.drawArrays() 中的 count 参数？

gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS) 是 16 或 32，因此切碎纹理似乎也不是一个好方法。

什么是最好的概念方法？

【问题讨论】：

标签： javascript vertex-buffer webgl2 vertex-array-object

【解决方案1】：

有多少 VAO 取决于您。有很多权衡。就文本而言，最常见的文本方式是将字形放入纹理图集中，并生成一个缓冲区，其中包含您要绘制的所有字母的顶点。

换句话说。

each frame
   for each string
      for each letter in string
         add vertices for letter to buffer

drawArray/drawElements(gl.TRIANGLES, ... totalOfAllLettersInAllStrings * 6);

因此，所有字母可能只有一个绘制调用（如 UI）。每个字母没有一个。那会很慢。

Here's an article on it

您对 MAX_TEXTURE_IMAGE_UNITS 的评论听起来也可能存在误解？纹理单元只是着色器在单个绘制调用中可以引用的最大纹理数量。它们不是纹理周期的最大数量。您可以拥有 1000 种纹理。您只能在每次绘制调用时为它们引用特定的数字。

就绘制文本而言，对于简单的情况，每个字体样式通常只需要一个纹理。 ^{如果你想支持所有的 unicode 而不是只支持 ASCII，它会很快变得复杂。}

【讨论】：