什么是 OpenGL 和 WebGL2 中的顶点数组？

Question

我使用 WebGL1 已经有一段时间了，但现在我正在了解更多关于 WebGL2 的知识，我对 Vertex Arrays 的实际作用感到困惑。例如，在下面的example 中，我可以删除对它们的所有引用（例如创建、绑定、删除）并且示例继续工作。

Answer 1

这已在其他地方解释过，但您可以认为 WebGL1 和 WebGL2 都有一个顶点数组。只是 WebGL1 默认只有一个，WebGL2 可以创建多个顶点数组（尽管 99.9% 的 WebGL1 实现都支持它们作为扩展）

顶点数组是所有属性状态加上ELEMENT_ARRAY_BUFFER绑定的集合。

你可以这样想WebGL的状态

class WebGLRenderingContext {
  constructor() {
   // internal WebGL state
   this.lastError: gl.NONE,
   this.arrayBuffer = null;
   this.vertexArray = {
     elementArrayBuffer: null,
     attributes: [
       { enabled: false, type: gl.FLOAT, size: 3, normalized: false, 
         stride: 0, offset: 0, value: [0, 0, 0, 1], buffer: null },
       { enabled: false, type: gl.FLOAT, size: 3, normalized: false, 
         stride: 0, offset: 0, value: [0, 0, 0, 1], buffer: null },
       { enabled: false, type: gl.FLOAT, size: 3, normalized: false, 
         stride: 0, offset: 0, value: [0, 0, 0, 1], buffer: null },
       { enabled: false, type: gl.FLOAT, size: 3, normalized: false, 
         stride: 0, offset: 0, value: [0, 0, 0, 1], buffer: null },
       { enabled: false, type: gl.FLOAT, size: 3, normalized: false, 
         stride: 0, offset: 0, value: [0, 0, 0, 1], buffer: null },
       ...
     ],
   }
   ...

你可以认为gl.bindBuffer 是这样实现的

   // Implementation of gl.bindBuffer. 
   // note this function is doing nothing but setting 2 internal variables.
   this.bindBuffer = function(bindPoint, buffer) {
     switch(bindPoint) {
       case gl.ARRAY_BUFFER;
         this.arrayBuffer = buffer;
         break;
       case gl.ELEMENT_ARRAY_BUFFER;
         this.vertexArray.elementArrayBuffer = buffer;
         break;
       default:
         this.lastError = gl.INVALID_ENUM;
         break;
     }
   };

所以你可以在上面看到，用gl.ELEMENT_ARRAY_BUFFER 调用gl.bindBuffer 设置当前vertexArray 的elementArray 部分

您还可以看到vertexArray 有许多属性。它们定义了如何从缓冲区中提取数据以提供给顶点着色器。调用 gl.getAttribLocation(someProgram, "nameOfAttribute") 会告诉您顶点着色器将查看哪个属性以从缓冲区中获取数据。

您可以使用 4 个函数来配置属性如何从缓冲区获取数据。 gl.enableVertexAttribArray、gl.disableVertexAttribArray、gl.vertexAttribPointer 和 gl.vertexAttrib??。

他们有效地实现了这样的东西

this.enableVertexAttribArray = function(location) {
  const attribute = this.vertexArray.attributes[location];
  attribute.enabled = true;  // true means get data from attribute.buffer 
};

this.disableVertexAttribArray = function(location) {
  const attribute = this.vertexArray.attributes[location];
  attribute.enabled = false; // false means get data from attribute.value
};

this.vertexAttribPointer = function(location, size, type, normalized, stride, offset) {
  const attribute = this.vertexArray.attributes[location];
  attribute.size       = size;       // num values to pull from buffer per vertex shader iteration
  attribute.type       = type;       // type of values to pull from buffer
  attribute.normalized = normalized; // whether or not to normalize
  attribute.stride     = stride;     // number of bytes to advance for each iteration of the vertex shader. 0 = compute from type, size
  attribute.offset     = offset;     // where to start in buffer.

  // IMPORTANT!!! Associates whatever buffer is currently *bound* to 
  // "arrayBuffer" to this attribute
  attribute.buffer     = this.arrayBuffer;
};

this.vertexAttrib4f = function(location, x, y, z, w) {
  const attribute = this.vertexArray.attributes[location];
  attribute.value[0] = x;
  attribute.value[1] = y;
  attribute.value[2] = z;
  attribute.value[3] = w;
};

现在，当您调用gl.drawArrays 或gl.drawElements 时，系统知道您希望如何从您为提供顶点着色器而创建的缓冲区中提取数据。 See here for how that works.

然后有 3 个函数将管理连接到 this.vertexArray 的所有状态。它们是gl.createVertexArray、gl.bindVertexArray 和gl.deleteVertexArray。在 WebGL1 中，它们在 OES_vertex_array_object 扩展上可用，稍微重命名。在 WebGL2 上，它们只是默认可用 这也是 WebGL 2.0 的一个特性。

调用gl.createVertexArray 创建新的顶点数组。调用gl.bindVertexArray 设置this.vertexArray 指向你传入的那个。你可以想象它是这样实现的

 this.bindVertexArray = function(vao) {
   this.vertexArray = vao ? vao : defaultVertexArray;
 }    

好处应该是显而易见的。在您要绘制的每一件事之前，您需要设置所有属性。设置每个属性至少需要每个使用的属性调用一次。更常见的是每个属性 3 次调用。一次调用gl.bindBuffer 将缓冲区绑定到ARRAY_BUFFER，一次调用gl.vertexAttribPointer 然后将该缓冲区绑定到特定属性并设置如何提取数据，一次调用gl.enableVertexAttribArray 以打开从属性的缓冲区。

对于具有 9 次调用的位置、法线和纹理坐标的典型模型，如果您使用索引并且需要将缓冲区绑定到 ELEMENT_ARRAY_BUFFER，则 +1 更多。

对于顶点数组，所有这些调用都发生在初始化时。您为要绘制的每个事物创建一个顶点数组，然后设置该事物的属性。在绘图时，只需调用一次gl.bindVertexArray 即可设置所有属性和ELEMENT_ARRAY_BUFFER。

如果您只想始终使用顶点数组，您可以在 WebGL1 中使用 this polyfill。如果扩展存在或模拟它，它使用内置的。当然，仿真速度较慢，但​​任何需要仿真的 GPU 都可能已经太慢了。

请注意，如果您正在寻找示例，可以将https://webglfundamentals.org 上的相应示例与https://webgl2fundamentals.org 进行比较。 WebGL2 站点到处都使用顶点数组。您会在绘制之前的 WebGL1 示例中注意到，对于每个顶点数据，该数据的缓冲区被绑定，然后该数据的属性被设置。在 WebGL2 示例中，发生在初始化时间而不是绘制时间。在绘制时，所有发生的事情都是调用gl.bindVertexArray

关于顶点数组需要注意的另一件事是它们通常需要更多的组织。如果您要使用不同的着色器程序多次绘制同一个对象，那么一个着色器程序可能会对相同的数据使用不同的属性。换句话说，在没有额外组织的情况下，shaderprogram1 可能将属性 3 用于位置，而 shaderprogram2 可能将属性 2 用于位置。在这种情况下，相同的顶点数组将无法用于相同数据的两个程序。

解决方案是手动分配位置。您可以在 WebGL2 中的着色器本身中执行此操作。您也可以通过在为 WebGL1 和 WebGL2 中的每个着色器程序链接着色器之前调用 gl.bindAttribLocation 来完成此操作。我倾向于认为使用 gl.bindAttribLocation 比在 GLSL 中使用更好，因为它更多的是 D.R.Y.