🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

Back to General and Gameplay Programming

Suggestions regarding rendering UI elements and text with OpenGL

None · 2020-09-21T06:37:29

Hello friends, I got a quick question. I was looking at a nice dev update over at ThinMatrix and noticed he's making his own UI system: Question about UI Elements: Sounds like a nice project. What would be the best way to implement these windows? Because I could just render quads on the screen, but wouldn't that be a single draw call per each element?I know how instancing works now, so I'm guessing I'd have to instance all the UI elements so all UI elements represent one draw call, am I right about that? -------------------------------------------------------------------------- Question about Font Rendering:My question regarding fonts is very similar. I noticed reading tutorials I have to make a “spritesheet” of all the font's available letters and update quads on screen with those letters (as textures). My question is, do I also have to batch these quads so it's not a draw call per letter? What's the current go to way to render text in an OpenGL game?Thanks again everybody, always helpful!

General and Gameplay Programming Programming OpenGL ui fontrendering

Started by EBZ September 17, 2020 05:08 PM

14 comments, last by Shaarigan 3 years, 9 months ago

taby

1,512

September 18, 2020 09:31 PM

@Juliean

I’m passing a set of points into a geometry shader, which produces triangles by using Marching Cubes.

My problem is that I can’t figure out how to do feedback to copy the triangle data to a CPU buffer. Do you know how to do this?

My prototype code actually only generates 2 triangles from an input buffer consisting of 1 point: https://github.com/sjhalayka/opengl_gs_transform_feedback

Do you know how to fix this?

P.S. This is for an open source project, where the code is in the public domain: https://github.com/sjhalayka/julia4d3

_WeirdCat_

1,512

September 19, 2020 12:00 AM

I am surprised that no one is talking about vcl-style ui, basically he idea is that you have a layer where you put a set of controls that are rendered and you can interact with them. This is how wyswig editors (visual editors where you put lets say an image on a form)

Basically you can implement something like this

ill make a simplified pseudo code.

Base Control class - BControl

{

vec2 position, vec2 size;

bool OnMouseDown(x,y) { if lets say in its rect return true }

Base Layer cass CLayer : public BControl { where it holds an array of BControl }

UIManager where you handle drawing and touch/mouse input

{

CLayer * active_layer;

draw() { through all activelayer cotrols }

void handle_input { through all activelayer controls test if i hit it(x,y) }

then in main game loop you just call Draw() and handle_input() which does pretty everything.

Master & Mentor
https://sites.google.com/site/customprog/

Juliean

7,352

September 19, 2020 09:39 AM

taby said:
My problem is that I can’t figure out how to do feedback to copy the triangle data to a CPU buffer. Do you know how to do this?

No, I don't think I know how do that specifically in OpenGL. I haven't had to do draw-feedback for readbacks on CPU so far, and I only know the very basic process in DirectX, but not at all in GL. Sorry

_WeirdCat_ said:
I am surprised that no one is talking about vcl-style ui,

Because thats not what was asked? From OPs question it seems he wanted to have some technical details, not how to organise the UI.

_WeirdCat_

1,512

September 19, 2020 09:54 AM

What would be the best way to implement these windows

Now someone smart explain me, what line above means, i fell that stupid that no one can measure now.

how is that you know what he meant and i don't, thats not a sarcasm etc. i'm just curious

Master & Mentor
https://sites.google.com/site/customprog/

Shaarigan

1,471

September 21, 2020 06:37 AM

We in our AAA toolbox use batching all the time regardless if it is just a button or a full blown game UI. The reason is as I wrote in your other quaestion, that GPU is faster in parallelizing a single draw call to a huge buffer than a lot of smaller draws. So what we have is that every part of the UI that is unlikely to change will be put into the same vertex buffers, while anything that could change is placed in it's own buffer. This solution is optimized, so if text is supposed to have a size limit, we just change the texture to something that is alpha blended to invisible instead of generating a new buffer all the time, this is much more efficient.

Anyways, it get's tricky if something causes a relayout of the UI, then you have to redraw everything.

Another interesting technique I recently use for drawing free text on the screen is that I have a font texture of equal sized letters which I attach to a shader. Another texture is attached to the sprite I finally want to render and a third texture defines my text buffer. This works because our Font is limited to 256 characters and so a character occupies a single byte in every cell of the texture. The remaining bytes are used to store information like position and color of the sentense I want to draw.

We use this to have a performant way to display rapid changing debug text in our engine