Time for Action: Rendering a Square Using a VAO

Let's refactor a previous example using VAOs:

1. Open up ch02_01_square.html in your editor.
2. First, we update our global variables:

// Global variables that are set and used
// across the application
let gl,
  program,
  squareVAO,
  squareIndexBuffer,
  indices;

3. We've replaced squareVertexBuffer with squareVAO, as we no longer need to reference the vertex buffer directly.

4. Next, we update the initBuffers functions as follows:

// Set up the buffers for the square
function initBuffers() {
  /*
    V0                    V3
    (-0.5, 0.5, 0)        (0.5, 0.5, 0)
    X---------------------X
    |                     |
    |                     |
    |       (0, 0)        |
    |                     |
    |                     |
    X---------------------X
    V1                    V2
    (-0.5, -0.5, 0)       (0.5, -0.5, 0)
  */
  const vertices...