Vertex Array Objects

Vertex array objects (VAOs) allow you to store all of the vertex/index binding information for a set of buffers in a single, easy to manage object. That is, the state of attributes, which buffers to use for each attribute, and how to pull data out from those buffers, is collected into a VAO. Although we can implement VAOs in WebGL 1 by using extensions, they are available by default in WebGL 2.

This is an important feature that should always be used, since it significantly reduces rendering times. When not using VAOs, all attributes data is in global WebGL state, which means that calling functions such as gl.vertexAttribPointer, gl.enableVertexAttribArray, and gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer) manipulates the global state. This leads to performance loss, because before any draw call, we would need to set up all vertex attributes and set the ELEMENT_ARRAY_BUFFER where indexed data is being used. On the other hand, with VAOs, we would set up all attributes during our application's initialization and simply bind the data at render, yielding much better performance.

Let's see how we can start using VAOs from here on out!