rounded rectanges/squares in OpenGL

Hi everyone,

I just started dabbling around with OpenGL. I am trying to create basic shapes etc.

How does one go about drawing a rounded rectangle in OpenGL? I know this is a very brief and probably a stupid question, but I cannot figure it out. I have seen functions for drawing filled rectangles, but could not figure out how to draw rectangles with rounded corners. Also, how does one go about filling such a shape with a specified color?

Can a rounded corner be implemented using GL_QUADS? If someone has any sample code or some reference which could help me, I would really appreciate it.

Thanks and cheers!
xargy

You could just use a GL_TRIANGLE_FAN and simply issue all the vertices around the primitive in sequence, of course you calculate those vertices with simple trig.

This is by far the easiest way to draw concave primitives.

Hi dorbie,

Thanks for the reply. I guess I can issue a call to glDrawArrays(GL_TRIANGLE_FAN, 0, numVertices)… However, I am having problem trying to compute the vertices for such a rounded rectangle. I was wondering if you could provide some assistance in how to go about calculating the vertices that would render a nice, anti-aliased round sides for a rectangle.

Thanks,
xargy

If you download the code at the supplied URL then look at my example code for the water chapter it includes GUI code that draws parameterized rounded rectangles including bevels and surface normals for lighting. It assumes semicircles rather than quarters though, you need to have something to do

http://glbook.gamedev.net/moglgp/code.asp

cool! Thanks. You rock!

Hi,

Another question. I tried enabling anti-aliasing on the water example, but it did not help much. I tried increasing the number of vertices that are calculated with the same result. What I was trying to do is to make the curves look smoother. Any suggestions on how to achieve that?

Also, probably using glDrawArrays would be faster…

Cheers and thanks,
xargy

Ok, I tried something like this. It got close to what I want, but the joins look a bit gagged. If someone can help me further improve it, I
would be greateful!

glPointSize(10.0);
// disable blending
glDisable(GL_BLEND);
// turn on anti-aliasing
glEnable(GL_POINT_SMOOTH);
// enable use of alpha function
glEnable(GL_ALPHA_TEST);
// alpha comparison
glAlphaFunc(GL_GREATER, 0.5);

glBegin(GL_POINTS);
// draw anti-aliased vertices with the alpha function on…
glVertex2f(50.0, 10.0);
glVertex2f(50.0, 30.0);
glVertex2f(150.0, 10.0);
glVertex2f(150.0, 30.0);

glEnd();
glDisable(GL_POINT_SMOOTH);

glLineWidth(10.0);
glBegin(GL_LINES);
glVertex2f(50.0, 10.0);
glVertex2f(50.0, 30.0);
glVertex2f(150.0, 10.0);
glVertex2f(150.0, 30.0);

glVertex2f(50.0, 10.0);
glVertex2f(150.0, 10.0);
glVertex2f(50.0, 30.0);
glVertex2f(150.0, 30.0);

glEnd();

glRectf(50.0, 10.0, 150.0, 30.0);

glDisable(GL_ALPHA_TEST);
glDisable(GL_POINT_SMOOTH);

Hi,

I was wondering if it is possible to draw the rounded edges with a berier curve or something like that… Any thoughts?

If you want anti-aliased lines then just enable GL_LINE_SMOOTH, or for poly’s GL_POLYGON_SMOOTH

If the smoothing doesnt make a difference, you could try calling glHint(GL_LINE_SMOOTH, GL_NICEST)…

There is no point using bezier curves for this.

Hi,

I want smooth corners… the lines are fine.

By the way, I even tried the partial disk function and the corners just look very bad…

glPushMatrix();
glTranslatef(102.0, 20.0, 0.0);

glEnable(GL_POLYGON_SMOOTH);
gluQuadricNormals(m_Quadratic, GL_SMOOTH);
gluQuadricDrawStyle(m_Quadratic, GLU_LINE);
gluPartialDisk(m_Quadratic, 0, 30.0, 30, 1, 1, 120);

glDisable(GL_POLYGON_SMOOTH);
glPopMatrix();

Hi everyone,

Can someone tell me how I can generate a texture for an anti-aliased filled circle?

Thanks,
xargy

To get smoother edges… try doing this before you draw your polygons:

glHint(GL_POLYGON_SMOOTH, GL_NICEST);
glEnable(GL_POLYGON_SMOOTH);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

As for creating an anti-aliased circle texture, what you want is a soft alpha edge to the circle when you create it. Again to get this to look correct in OpenGL you will need to have alpha blending enabled.