Real-Time 3D Graphics with WebGL 2 - Second Edition

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 applicationlet 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 squarefunction 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 = [    -0.5, 0.5, 0,    -0.5, -0.5, 0,    0.5, -0.5, 0,