Attempted to render a circle in opengl es 1.1, renders as oval

Question

Hi all,

I attempted to render a circle in opengl es 1.1 as a test before building a larger program, but it renders as an oval. Here is the code I use to generate and render my vertices:

static const int numVerts = 40;

static GLfloat myFirstCircle[82];

myFirstCircle[0] = 0.0f;
myFirstCircle[1] = 0.0f;

for (int i = 2; i < (numVerts+1)*2; i+=2) {
    myFirstCircle[i] = .5 * cosf(i*2*3.14159/numVerts);
    myFirstCircle[i+1] = .5 * sinf(i*2*3.14159/numVerts);
}

---

glVertexPointer(2, GL_FLOAT, 0, myFirstCircle);
glEnableClientState(GL_VERTEX_ARRAY);

glDrawArrays(GL_TRIANGLE_FAN, 0, 22);

I'm still somewhat new to this system, so I may have a silly error that I do not see, but it seems to me like this should generate 40 vertices on a circle of radius .5. When it renders, the shape on screen appears to be an oval, significantly taller than it is wide.

My question is thus: why is my circle rendering this way, and what could I do to fix it? This is the first question on stackoverflow, so I'm not sure how to share an image of my output.

Answer 1

You have to set up your projection matrix according to your screen's proportions. As it is now, all the edges of your screen are at +-1.0, causing stretching in the long dimension. This little ditty sets the top and bottom edges to +-1.5.

glMatrixMode(GL_PROJECTION);
glOrthof(-1.0, 1.0, -1.5, 1.5, 1, 100);

Answer 2

As lexu said, the problem is that your perspective setup is probably square, but your screen is rectangular. You need to compensate for that by setting the projection matrix to represent the appropriate rectangle.

In regular OpenGL, you would probably do this as follows:

gluPerspective(45.0f, 320.0f/480.0f, 0.1f,100.0f);

Field of view of 90 degrees (45*2), near cut-off of 0.1, far cut-off of 100, and where the resolution of your screen is 320 pixels wide by 480 pixels high. Of course, that function doesn't exist in ES, so you will need to do it manually.

Someone has kindly posted code to replace it here:

http://maniacdev.com/2009/05/opengl-gluperspective-function-in-iphone-opengl-es/

Hope this helps.

EDIT Codewarrior has posted the code if you are doing an orthographic projection, most likely for a 2D application. This code is is you want perspective for a 3D game with more realistic depth.

Answer 3

If you want to leave your perspective the same way it was to begin with, it would be easiest to just say

glScalef(1, 1.0/1.5, 1);

I would probably do it to the projection matrix (say glMatrixMode(GL_PROJECTION); before the scale)