I have this old openGL game and it uses both glFrustum for the 3D aspect and glOrtho for the overlay stuff.
This works fine for 4:3 screens like 800x600 and 1600x1200 that have a aspect ratio of 1.33
However, on some displays that are 16:9 then there is slight distortion but not too bad, but on SLI or eyefinity displays or some monitors that have 4K resolution the distortion gets very bad.
What is the best way to solve this, if you don’t want to have the display squished like you see 4:3 content on 16:9 monitors with the black bars on top/bottom?
I know that you calculate the aspect ratio to be width / height, then, you take that and multiple it to the matrix, but, I can’t seem to find a way to fix both the glFrustrum & glOrtho since you can also pick some in the 3D scene.
I also know I need at least 2 cases, one for a aspect ratio of 4:3, and another one for the 4K monitor crowd, obviously, I can handle the 4:3, but it is the other one that I am confused on how to handle correctly.
Anyone share some tips on how to fix this?
AR = (float)width/(float)height;
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glTranslatef(...);
glFrustum(left *AR, right *AR, bottom, top, 100, 1000); // left right bottom top Znear Zfar
...
//ortho
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0.0f, (double)VideoBufferWidth(), (double)VideoBufferHeight(), 0.0f, 1.0f, -1.0f); // left right bottom top Znear Zfar
...
If you were setting up the projection matrix based upon the viewport’s aspect ratio, there shouldn’t be any distortion if the aspect ratio changes (however, if you were fixing the vertical field of view, the horizontal field of view will now be wider, which will tend to increase the perceived distortion of objects close to the left and right edges).
However, if you’re doing things like laying out the UI using fixed coordinates, changing to a wider aspect ratio will either cut the top and bottom edges off of the UI or add blank space on the left and right edges.
The ideal solution is to layout the UI using relative positions, i.e. everything has one edge either a fixed distance from an edge of the viewport or a fixed distance from some other component.
If this is infeasible due to the amount of code which assumes specific viewport bounds, then you can do three things: tolerate some blank space on the left and right edges, remove a portion from the top and bottom edges, and/or tolerate some distortion of the aspect ratio. Wide-screen televisions presented with a 4:3 picture typically default to doing all three, so that the effect of each is minimised. For a UI, you may not be able to adjust the top and bottom edges, but the other two options are available.
How do commercial projects handle these situations, do they have a different GUI bitmaps for each aspect ratio ?
Would be nice if there was a good, free SVG library that could be used, but, there isn’t.
I was thinking the best way to fix it is to use the black borders, but people keep saying that looks like crap.
Everything else that I have tried just looks terrible at some aspect ratios. 
Typically, there would be some empty space whose size varies with the aspect ratio. E.g. you might have sections of the UI anchored to the lower-left corner, lower-right corner, and the centre of the lower edge. You’d design for the smallest supported resolution; at higher resolutions, there would be more space between the sections. If you anticipate a wide variety of resolutions, you might have multiple sets of bitmaps.
Simpler to just generate pre-rendered icons for several resolutions. The space requirements are trivial compared to the other data.
Sometimes there is no alternative. E.g. games which use fixed or scripted third-person cameras are often designed on the assumption that a specific portion of the world will be visible at any given time. Changing the view cone would result in either seeing things you shouldn’t see or not seeing things you should see.
But a first-person view shouldn’t have any such issues. It’s just a question of whether you increase the horizontal field-of-view or decrease the vertical field-of-view, or some combination of the two. Also, if you have UI elements attached to the inside of the left and right edges of the view, you can move them outside of the view and into a border for a wide-screen display…