Basically, I want to know how I can remove distortion or stretching of the rendered image when the viewport/window size changes.
The following images exemplify the distortion/stretching I'm talking about:
Original Image (Square Window)
Distorted/Stretched Image (Rectangular Window)
Ideally, the second image should display the sphere without the horizontal stretching, and would expose more of the scene to the user to account for the larger window size.
How can this be done?
I'm working with OpenGL to render the image, and I make use of the perspective projection via the calls:
gluPerspective(60, window.width/window.height, 0.01f, 100.0f)
width/height is in accordance to all of the documents/tutorials I've come across, so I don't expect it to be incorrect. However, my suspicion is that it is affecting the stretching problem.
Honestly, as I think about the issue more, I'd led to believe that the solution involves a directly proportional relationship between the fovy (field of view in the y-direction) angle and the aspect-ratio.
Using the above image as a reference, if the width grows (causing a horizontal stretch), it seems very plausible that the fovy angle must increase to cause a vertical stretch that 'fixes' the proportionality of the rendered image.
Likewise, a decrease in width requires a decrease in the fovy angle.
So, after investigating this further, I've decided to change the way I've set up the viewing frustum like this:
gluPerspective(60 * (float)window.width/window.height, (float)window.width/window.height, 0.01f, 100.0f)
And my expectations were correct, that solved the proportionality issue. However, it doesn't achieve my desired results. When the window width increases, the rendered image becomes smaller (but the sphere is indeed circular). Instead, the sphere shouldn't change size at all; only the amount of scene that is displayed should change.