Points, Lines, Triangles, Quadrilaterals, and Polygons

The previous post (HelloTriangle) drew a single white triangle. It is possible to draw points, lines, triangles, quads (four sided polygons), and polygons. This post will look at drawing those objects.

The starting point for the code used in this post is the HelloTriangle project that was developed in the HelloTriangle post. Since the HelloTriangle project will be the starting point for a few of these posts, I suggest that you create a new project. It can be in the same solution as the HelloTriangle project. Copy the 6 source files from HelloTriangle to the new project and then in the Solution Explorer, added them to the project. Before attempting to build the new project, you will have to update the project properties VC++ Directories -> Include Directories  and -> Library Directories to point to the wxWidgets include and library directories. In Configuration Properties -> General, set the Character Set to match the settings that you used when building the wxWidgets libraries. If you need help with this, see the instructions in Creating wxWidgets Programs with Visual Studio 2015 – Part 1.

Next, you need to add the nupengl.core NuGet package to the project. See Visual Studio, wxWidgets, and OpenGL if you need assistance.

At this point, the project should build and run to produce a white triangle on a black background.

In TriangleCanvas::SetupGraphics, the vertices of the triangle are defined as:

	float points[] = {
		0.0f, 0.5f,
		0.5f, -0.5f,
		-0.5f, -0.5f,
	};

In TriangleCanvas::OnPaint, see the line containing:

    glDrawArrays(GL_TRIANGLES, 0, 3);

draws the single triangle whose vertices are defined in the points array. The GL_TRIANGLES parameter specifies that triangles should be drawn. There are a number of other parameters that specify additional objects: points, lines, quadrilaterals, and polygons. This post will look at each of the possible combinations.

Points

To draw points, just change GL_TRIANGLES to GL_POINTS. Build and run the program. The result is a set of three white pixels, one at each vertex defined in points.

Lines

GL_LINES

Changing GL_TRIANGLES to GL_LINES in glDrawArrays draws line segments from v0 to v1, from v2, to v3, and so forth. The lines may intersect. If the points array contains an odd number of points, the last point cannot be used. With the points array as it is currently defined, only one line will be drawn: from {0.0, 0.5} to {0.5, -0.5}. To draw more line segments, additional data points must be added to the points array. Say instead of a filled in triangle, you want to draw lines around the triangle. To do that, the points array must be modified to:

    float points[] = {
        0.0f, 0.5f,
        0.5f, -0.5f,
        0.5f, -0.5f,
        -0.5f, -0.5f,
        -0.5f, -0.5f,
        0.0f, 0.5f
    };

and the call to glDrawArrays in OnPaint must be changed to:

	glDrawArrays(GL_LINES, 0, 6);

GL_LINES says to draw lines, and the 6 says there are 6 vertices specified.

Here is the resulting display:

trianglelines

GL_LINE_STRIP

With GL_LINE_STRIP, the lines are drawn from v0 to v1, v1 to v2, and so forth. To draw the same lines as above using GL_LINE_STRIP, the points array should be set to:

	float points[] = {
		0.0f, 0.5f,
		0.5f, -0.5f,
		-0.5f, -0.5f,
		0.0f, 0.5f
	};

Remember to change the number of vertices in the glDrawArrays call to 4.

GL_LINE_LOOP

Finally for lines, GL_LINE_LOOP draws lines like GL_LINE_STRIP, but closes the figure by adding a line from the last vertex specified to the first vertex. To use GL_LINE_LOOP to draw the edges of the triangle, change the points array back to:

	float points[] = {
		0.0f, 0.5f,
		0.5f, -0.5f,
		-0.5f, -0.5f
	};

and the glDrawArrays line to:

	glDrawArrays(GL_LINE_LOOP, 0, 3);

Triangles

GL_TRIANGLES

The simple GL_TRIANGLES draws filled triangles whose vertices are specifed as groups of three (v0, v1, v2 for the first rectangle, v3, v4, v5 for the second triangle, and so forth). As an example, let’s draw two triangles. The first will be the same as the triangle in the HelloTriangle example. Change the points array to:

	float points[] = {
		0.0f, 0.5f,
		0.5f, -0.5f,
		-0.5f, -0.5f,
		-0.9f, 0.9f,
		-0.1f, 0.9f,
		-0.5f, 0.1f
	};

and the glDrawArrays call to:

	glDrawArrays(GL_TRIANGLES, 0, 6);

The 6 specifies 6 vertices.

Here is the resulting display:

twotriangles

GL_TRIANGLE_STRIP

GL_TRIANGLE_STRIP draws a series of triangles using the vertices v0, v1, v2, then v2, v1, v3, then v2, v3, v4, and so forth. The order is to ensure that the triangles are all drawn with the same orientation so that the triangles can all form part of the same surface.

Here is the same set of vertices plotted using GL_TRIANGLE_STRIP instead of GL_TRIANGLES:

trianglestrip

I leave it to the reader to determine how this image was created.

GL_TRIANGLE_FAN

GL_TRIANGLE_FAN works the same as GL_TRIANGLE_STRIP except that the vertices are v0, v1, v2, then v0, v2, v3, then v0, v3, v4 and so forth.

The vertices specified in the points array, above, do not make a particularly good example. Instead, change the points array to:

	float points[] = {
		0.0f, 0.0f,
		0.5f, 0.0f,
		0.35f, 0.35f,
		0.0f, 0.5f,
		-0.7f, 0.2f,
		-0.2f, -0.5f
	};

Drawing these points as a GL_TRIANGLE_FAN results in the following display:

trianglefan

Quadrilaterals

In various examples, you will see references to GL_QUADS and GL_QUAD_STRIP. These types have been deprecated and therefore should not be used in new code. To draw the equivalent, you should use two triangles per quadrilateral.

Polygons

Polygons (GL_POLYGON) are also deprecated. Triangles should be used to build up your polygons.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s