Some FreeGLUT Tricks for Beginners Nov 9th 2020 Words: 744
This post is created a year ago, the content may be outdated.

Polygon breaking

The genuine polygon does not exist in the world of computer graphics, because all polygons are assembled by triangles. In OpenGL, the first vertex defined in a polygon is used as the shared vertex of all triangles in the polygon, which could lead to confusing output when programming.

For example, when constructing a “C” shaped polygon, one cannot simply define the vertex one by one and produce the expected result. It is because the first vertex is used to construct all the triangles, and with this limitation, the final result may be be look like a “D” instead.

To solve the problem, one technique is to choose the starting vertex wisely and arrange the order of the following vertex, avoid creating overlapping triangles manually.

The other method is to use a auxiliary point in the middle of the polygon as the first polygon, which will generate the triangles in a “star” pattern.

Ultimately, if the above two method failed, manually slice the polygon to two or more smaller polygons and they will display as a whole when rendering.

Smooth polygon

By default the rendered polygon has jitters in the edge, especially when the shape has contains curvy edge or rotation. Simply enable the polygon smooth does help with the edge smoothing, but it also caused new problem. As the previous section discussed, all polygons are actually a set of triangles. When polygon smooth is enabled, the edge of the triangles will become visible.

Since the line strip does not have the triangle problem, one possible workaround for this problem is to draw the polygon with smooth disabled, then use the same vertex to draw the outline of the polygon, with line strip smooth enabled.

Gradient color fill

To fill a polygon with gradient color, for example, a rectangle with brighter color at the bottom, set the darker color when drawing the upper edge, then before drawing the bottom edge, set the color to the lighter one.

Aspect ratio correction

When launching the application, it is initialized with a fixed size, which is usually used as a reference to the coordination system. However, user may break the content alignment by resize the window. Furthermore, the coordinator passed to the mouse handler is absolute to the window size.

In the reshape handler, the new window size will be passed as parameter. So to prevent the resize issue, the viewport should always be adjusted to fill the screen, so the window size will not influence the coordination system. The reshape window function is also used to force the application use the specified aspect ratio.

Scale line width/point size

Even the viewport can transform according to the window size, the values of line width and the point size are still absolute. This is potentially problematic when resize the window.

A solution is to use a global variable to keep track of the scale coefficient, it must be recalculated upon each window reshape. When set the point size or line width, this coefficient should be multiplied.

Smooth line terminal

Although the line can be easily anti aliased by enabling the line strip smooth option, by default, the terminal or turning points of the line segment is sharp and ugly.

The technique is to use a set of vertex to draw the line first, then use the same set of vertex to draw the point with the point size same as the line width, while using point smooth function. The points will rendered as round dot whose diameter is the same as the line, cover the sharp turning.

Draw circle/ellipse/egg

To draw the shape whose coordinator is usually represented as a equation, rather than a function, problem is for a specific x, there are two corresponding y. The technique is to loop from the left bound to the right bound, drawing vertex using only the positive value of y, then loop from right to left, drawing the lower edge of the shape.

Draw shadow/highlight

A simple method can be used to create a shadow or highlight, or any other custom gradient pattern. For example, to create an ellipse shape shadow, first draw an ellipse at full size with a tiny alpha color. Then draw a smaller ellipse with the same color. Loop the process until the ellipse being drawn is negligibly small. Since the color will blend together when rendering, The final result will be a ellipse whose color is dark at center, and gradually transit to transparent from center to edge.