Modern OpenGL and 2D drawing UI

[noizex]

Hello,

I have question regarding drawing 2D geometry for user interface purposes using modern GL, so VBOs / shaders etc. I have a “design” problem because I’m not sure how to approach this. What I need is a simple textured rectangle of various sizes/positions to be drawn. I plan on having from 0 to maybe 10-20 such rectangles (regular windows, health bar display etc.). So properties of a window are:

[ol]
[li]vec2 position[/li][li]vec2 size[/li][li]texture of same size as window size[/li][li]alpha (for transition in/out or just window transparency)[/li][/ol]

Geometry is static most of the time, except for window move/resize.

For now I just created VBO for each window instance, and it just had 4 vertices describing corners of that window. Then I just drawn it with one draw call per window. I think this is way too much for such a simple thing, and having VBO with just 4 vertices feels weird too. In the old days it was all just thrown out in immediate mode and nobody really cared, but now I’m really lost in the amount of ways I can solve this.

These are my ideas at this moment, and I can’t decide which one to use:

[ol]
[li]have 1 VBO for all windows containing 4 vertices per window, this requires subbing data in VBO each time any window is moved/resized and also makes it harder for texturing if I would like to draw it with one draw call (texture arrays require same size textures and my textures are rectangular and have different sizes)[/li][li]have 1 VBO with just basic 0,0,1,1 quad and scale it (will it work for rectangle?) and position using uniforms when drawing, requires one draw call for each window anyway[/li][li]forget VBOs and just use DrawArrays with data sent over to GPU each frame, it will be 4 vertices * number of windows so very tiny amount, but it still requires as many draw calls as there are windows[/li][li]drawinstanced? geometry shader to create quad on the fly? all seem like total overkill for me[/li][/ol]

So the question is - what is the best, proper and most efficient way to draw up to 20 textured 2D rectangles on the screen with modern GL.

Thanks,
n.

[imported_kyle]

@noizex;1237541

[ol]
[li]have 1 VBO for all windows containing 4 vertices per window, this requires subbing data in VBO each time any window is moved/resized and also makes it harder for texturing if I would like to draw it with one draw call (texture arrays require same size textures and my textures are rectangular and have different sizes) [/li][li]have 1 VBO with just basic 0,0,1,1 quad and scale it (will it work for rectangle?) and position using uniforms when drawing, requires one draw call for each window anyway [/li][li]forget VBOs and just use DrawArrays with data sent over to GPU each frame, it will be 4 vertices * number of windows so very tiny amount, but it still requires as many draw calls as there are windows [/li][li]drawinstanced? geometry shader to create quad on the fly? all seem like total overkill for me [/li][/ol]

So the question is - what is the best, proper and most efficient way to draw up to 20 textured 2D rectangles on the screen with modern GL.

Does it matter for you that much? I dont think there is all that much to win on max 20 windows from batching.

2/3 should be good.
You probably shouldnt use texture arrays at all (as you figured out in 1.)

You could also draw up to 16 (or is it higher now?) windows per batch (through instancing, like in 4.) with array of samplers and passing everything through uniforms (like in 2.)