Exercise: interleaved attributes confusion

[nelsonvassalo]

How do we compute the byte values for our images?

  gl.enableVertexAttribArray(0)
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0)

  gl.enableVertexAttribArray(1)
  gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8)

The solution tells us is 16, but why? And why is the second "geometry" offset by only 8 then? Assuming it starts at the end of the previous, shouldn't it be at 17?

Thanks

[ayamflow]

Had some trouble with this one too, here's what I understood:

[
  startx0, starty0, endx0, endy0, // vertex 0
  startx1, starty1, endx1, endy1, // vertex 1
  startx2, starty2, endx2, endy2, // vertex 2
  ...
]

stride is the BYTES_PER_ELEMENT * < number of elements per row >
There are 4 floats between startx0 and startx1, so the stride is 4 * 4 = 16;

offset is BYTES_PER_ELEMENT * < number of elements before the value >
there are 2 elements before endx0, so the offset is 4 * 2 = 8.

Hopefully this is correct and is helpful ✌️