OpenGL Polygon Triangle Tessellation (Strip) and Corner Order Demystified
© 2013 Darel Rex Finley. This complete article, unmodified, may be freely distributed for educational purposes.



Q: I’m trying to draw a simple polygon like this square:


    


But when I render it in OpenGL it comes out all broken looking, like this:


    


What the heck? What’s going on here?

A: Welcome to the world of triangle tessellation! It sounds complicated, but it’s really easy once you understand it.

OpenGL renders triangles. If you pass it a three-cornered polygon (i.e. a triangle), it will render correctly:


    


You cannot really draw a polygon with more than three corners, so if you want to draw a square (for example), you must draw it as two triangles:


    


One way to do that is to first draw one triangle, then draw the other triangle. However, as a convenience, OpenGL allows you to pass in the four corners of the polygon and it will render the two triangles automatically. But to do that, the corners must be in a triangle-sequence order, like so:


    


What OpenGL actually does is this: First it renders a triangle using points 0, 1, and 2. Then it renders another triangle using points 1, 2, and 3. It just renders a triangle for each set of three consecutive points in the list of points you passed in.

Using this technique, it is easy to render any convex polygon: Simply start at any corner, and alternate corners in opposite directions around the polygon, like so:


    


But if you want to render a concave polygon, it’s not so easy. For example, this concave polygon...


    


...can be rendered via that technique, but only if you choose a good starting corner and direction, like so:


    


Whereas this concave polygon...


    


...cannot be rendered via that technique at all! To render it, we will have to break it into two or more pieces, like this...


    


...then render each piece with its own OpenGL call.

Note: Most 2-D OpenGL games do not even need to address these issues, because each object in the game is simply a two-triangle rectangle, with a bitmap that has transparent sections.

That’s all — hope it was helpful!


Send me an e-mail!

Back to tutorials.