Here's the best way:
Create just one quad out of 4 vertices
.
Use a transformation matrix
(not 3D transform; just transforming 2D position and size) to move the quad around the screen and resize it if you want.
This way you can use 1 vertex array (of the quad) and texture Coordinates array and 1 VAO
and do the same vertex bindings for every drawcall however for each drawcall there is a different texture.
Note: the texture coordinates will also have to be transformed with the vertices.
I think the conversion between the vertex coordinate system (2D) and texture coordinate system is vertex vPos = texturePos / 2 + 0.5
, therefore texturePos = (vPos - 0.5) * 2
OpenGL's textureCoords system goes from 0 - 1 (with the axes starting at the bottom left of the screen):

while the vertex (screen) coordinate system goes from -1 to 1 (with axes starting in the middle of the screen)

This way you can correctly transform textureCoords to your already transformed vertices.
OR
if you do not understand this method, your proposed method is alright but be careful not to have way too many textures or else you will rendering lots of VAOs!
This might be hard to understand, so feel free to ask questions below in the comments!
EDIT:
Also, noticing @Botje helpful comment below, I realised the textureCoords array
is not needed. This is because if your textureCoords
are calculated relative to the vertex positions
through the method above, it can be directly performed in the vertex shader. Make sure to have the vertices transformed first though.