Keeping the geometry intact on screen size change

Question

I have made some shapes like this :

// Triangle
glBegin(GL_TRIANGLES);
    glVertex3f(0.0,0.0,0);
    glVertex3f(1.0,0.0,0);
    glVertex3f(0.5,1.0,0);
glEnd();

// Cube using GLUT
glColor3f(0.0,0.0,1.0);
glutSolidCube(.5);

// Circle
glPointSize(2);
glColor3f(1.0,0.0,1.0);
glBegin(GL_POINTS);

float radius = .75;

for( float theta = 0 ; theta < 360 ; theta+=.01 )
    glVertex3f( radius * cos(theta), radius * sin(theta), 0  );

glEnd();

Initially I keep my window size as 500x500 and the output is as shown :

However, if I change the width and height (not in proportion) of my widget, the shapes get distorted (Circle looks oval, Equilateral triangle looks isosceles) :

This is the widget update code :

void DrawingSurface::resizeGL(int width, int height)
{ 
   // Update the drawable area in case the widget area changes
   glViewport(0, 0, (GLint)width, (GLint)height);
}

I understand that I can keep the viewport itself with same width and height, but then lot of space will get wasted on sides.

Q. Any solution for this ?

Q. How do game developers handle this in general, designing OpenGL game for different resolutions ?

P.S. : I do understand that this isn't modern OpenGL and also there are better ways of making a circle.

Answer 1

They solve it by using the projection matrix, both the perspective matrix and ortho projection traditionally have a way of getting the aspect ratio (width/height) and use that to adjust the result on screen.