title: How to draw 3 rectangles with WebGL2
body: <p>I am able to write out by hand the full boilerplate to WebGL2 pretty much, and have this much working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.createElement('canvas')
  document.body.appendChild(canvas)
  
  const gl = canvas.getContext('webgl2', { antialias: true })
  const width = 800
  const height = 500
  
  canvas.width = width
  canvas.height = height
  
  const vertexShader = gl.createShader(gl.VERTEX_SHADER)
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
  
  gl.shaderSource(vertexShader, `#version 300 es
  
  in vec3 position;
  in vec4 color;
  
  out vec4 thecolor;
  
  void
  main() {
    gl_Position = vec4(position, 1.0);
  
    thecolor = color;
  }
  `)
  
  gl.shaderSource(fragmentShader, `#version 300 es
  precision mediump float;
  
  in vec4 thecolor;
  
  out vec4 color;
  
  void
  main() {
    color = thecolor;
  }
  `)
  
  gl.compileShader(vertexShader)
  var success = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)
  if (!success) throw new Error(gl.getShaderInfoLog(vertexShader))
  
  gl.compileShader(fragmentShader)
  var success = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)
  if (!success) throw new Error(gl.getShaderInfoLog(fragmentShader))
  
  const program = gl.createProgram()
  
  gl.attachShader(program, vertexShader)
  gl.attachShader(program, fragmentShader)
  
  gl.linkProgram(program)
  gl.useProgram(program)
  
  const positionAttribute = gl.getAttribLocation(program, 'position')
  const colorAttribute = gl.getAttribLocation(program, 'color')
  
  gl.viewport(0, 0, width, height)
  gl.clearColor(0, 0, 0, 0)
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  
  // I don't know what the purpose of this is.
  const positionVAO = gl.createVertexArray()
  gl.bindVertexArray(positionVAO)
  
  const vertexBuffer = gl.createBuffer()
  const indexBuffer = gl.createBuffer()
  
  const vertexArray = [
    // don't know how to structure this on my own.
  ]
  
  const indexArray = [
    // don't know how to structure this either.
  ]
  
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexArray), gl.DYNAMIC_DRAW)
  
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), gl.STATIC_DRAW)
  
  gl.enableVertexAttribArray(positionAttribute)
  gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0)
  
  gl.enableVertexAttribArray(colorAttribute)
  gl.vertexAttribPointer(colorAttribute, 4, gl.FLOAT, false, 0, 0)
  
  gl.drawElements(gl.TRIANGLES, indexArray.length, gl.UNSIGNED_SHORT, 0)</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, there are 3 comments in there.</p>
  
  <ol>
  <li><del>I don't know what the purpose of <code>gl.createVertexArray</code> and <code>gl.bindVertexArray</code> are.</del> <a href="https://webgl2fundamentals.org/webgl/lessons/webgl1-to-webgl2.html" rel="nofollow noreferrer">This</a> explains it.</li>
  <li>Don't know how to structure the vertices in <code>vertexArray</code>.</li>
  <li>Don't know how to structure the indices in <code>indexArray</code>.</li>
  </ol>
  
  <p>I've gone through many tutorials but they usually gloss over the creation and definition of the the vertices/indices. They don't really explain how they designed them or structured them or why it's like that, so I haven't really been able to reconstruct it on my own yet. I would like to use <code>drawElements</code> with the indices instead of <code>drawArrays</code>.</p>
  
  <p>Wondering if one could show how to draw 3 rectangles each with a different color (which gets passed in through the <code>vertexArray</code>). I was imagining interleaving the positions/colors in the <code>vertexArray</code>, but I don't know how to do that properly, and also don't know how to associate the data with the <code>indexArray</code>. By "properly", I mean I don't understand intuitively yet what goes into the <code>Float32Array</code> for vertices and the <code>Uint32Array</code> for indices. If it is <code>x, y</code>, or <code>x, y, r, g, b, a</code> in this case, or what. I don't understand how the rectangle closes and its "surface" gets colored. Wondering if one could help explain and demonstrate this drawing of 3 rectangles of different colors. That would help solidify how to draw in WebGL!</p>
  
  <p>My attempt at drawing them is this:</p>
  
  <pre><code>const vertexArray = [
    1, 1, 1, 1, 1, 1, // x y r g b a
    0, 1, 1, 1, 1, 1,
    1, 0, 1, 1, 1, 1,
    0, 0, 1, 1, 1, 1
  ]
  
  const indexArray = [
    1,
    2,
    3,
    4
  ]
  </code></pre>
  
  <p>But it doesn't do anything.</p>