Tutorial 2 – 2D Primitives

In this tutorial we’ll discuss the various primitives available in OpenGL and we’ll draw our first polygon.

All the shapes that you can think of either are, or can be broken down into, geometric primitives. For example a pyramid can be broken down into a few triangles. All the geometry that you render in OpenGL is constructed of primitives and there are quite a few available to you. Below is a list of the OpenGL primitive types available and an example of how they can look with an example set of vertices:

In this example we’re going to be using ‘GL_TRIANGLES’ to draw a single coloured 2D triangle… But first we need to do a little bit of setup:


In modern graphics APIs drawing is performed by creating a collection of 3-dimensional geometry and then mapping it into 2-dimensional space (drawing it on the screen). To do this we need to use projection matrices. There are 2 main types of projection matrix; In the real world, objects in the distance appear smaller than those closer to us. To simulate this we would use a perspective matrix. In some circumstances we want distant objects to appear exactly the same size as those close up e.g. CAD programs or if we are trying to draw in 2-dimensions anyway. For this kind of projection we would use an orthographic matrix.

Because we are drawing a 2 dimensional triangle we will be using an orthographic projection matrix in this application. This is how we do it in code, in the Resize function we add the following:

glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0);

The first function in this code tells OpenGL that we want to deal with the projection matrix. Next we initialise the projection matrix by setting it to an identity matrix. Once the the projection matrix is initialised we want to multiply it by an orthographic matrix. This is achieved with a call to glOrtho. The parameters specify the left, right, top, bottom, near and far clipping planes, i.e. Any vertices created within the box defined by these 6 coordinates will appear on screen. For now we’re only going to change the projection matrix when the window changes size so once we’re done setting it up, we switch back to the modelview matrix (more on that later!).


Now that we’ve set up how we’ll project our scene onto the screen we just need to do the drawing. This is, of course, done in the Render function. In between the ‘glClear’ and ‘SwapBuffers’ functions we add the following:


  glColor3f(1.0f, 0.0f, 0.0f);
  glVertex2f(0.0f, 0.0f);

  glColor3f(0.0f, 1.0f, 0.0f);
  glVertex2f(0.5f, 1.0f);

  glColor3f(0.0f, 0.0f, 1.0f);
  glVertex2f(1.0f, 0.0f);


The glBegin call informs OpenGL what kind of primitive we’ll be drawing. As I mentioned above, in this example, we’re drawing a triangle and so are using GL_TRIANGLES. Now we want to specify the vertices that form our triangle. There are of course 3 vertices, starting in the bottom left, moving to the top middle, and finishing at the bottom right. Before we specify each vertex we make a call to glColor3f which takes in 3 floats and sets the RGB colour of the following vertices. The OpenGL rasteriser mixes the colours between vertices e.g. Half way between a red and a green vertex the pixels will be a yellowish colour.

Once we’re done specifying vertices/vertex attributes we call glEnd. If you follow these instructions you should end up with something that looks like this:

There is some additional message handling in the main code file that calls our Resize function if the shape of the window changes, but as far as OpenGL calls go, that’s all there is to it. Check out the code here:

OpenGL Tutorial 2

  1. No comments yet.
  1. No trackbacks yet.

Tell me what you think!

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

%d bloggers like this: