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

Question

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

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

做这个的最好方式是什么？

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

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

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

最好的概念方法是什么？

Answer 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）可能只有一次绘制调用。每个字母没有一个。那将是放慢速度的方式。

这是一篇关于它的文章

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

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