Tutorial 3 – The Third Dimension

In the last tutorial we created our first 2-Dimensional polygon. To render this correctly in 2 dimensions we also used an orthographic projection matrix. This setup works great for games that you want to look 2D (Pacman, Super Mario World, Castle Crashers etc.) or for 2D menu’s.

Many of todays games are of course attempting to render 3D scenes and this is what we will be learning to do in this tutorial. It’s not too much of a drastic departure from our last tutorial.

Projections Revisited

Last tutorial we mentioned both orthographic and perspective projection matrices, but we only used the former. In this tutorial we will be using the perspective projection matrix to make distant objects appear smaller than those closer to us. This is how you set it up; Where in the last tutorial you had a call to “glOrtho”, this time we make the following call to gluPerspective:

               (double) m_width / (double) m_height,

The first thing you should note about this function is that it is prefixed with “glu” rather than “gl”. This is because gluPerspective is part of the OpenGL Utility Library (Basically a library of high level functions, such as the one we’ve just called, which makes your day to day OpenGL life a little easier!). The function creates a perspective matrix from the parameters given (Field of view in degrees in the y-direction, aspect ratio in the x-direction, and the near and far clipping planes) and then multiplies the currently selected matrix by this new perspective matrix. The overall effect is that when we map our scene from world space to screen space, we will see it as though it were a regular 3D world.

The Camera & Motion

In the last tutorial I mentioned that we needed to switch back from using the projection matrix to using the modelview matrix. The need for this becomes much more apparent now that we are going to position ourselves within the scene and even move the scene around. Now that you’ve set up how any geometry will be mapped to your screen, you need to tell OpenGL where you are looking from in this world. To do this we’ll be using another one of those handy “glu” functions:

gluLookAt(0.0f, 0.0f, 4.0f,
	  0.0f, 0.0f, 0.0f,
	  0.0f, 1.0f, 0.0f);

This multiplies the current matrix (ModelView because that’s the mode that we’ve changed back to!) by a new matrix in order to give the world the appearance that we are viewing it from a position 4 units away from the origin in a Z direction, with our view focused on the origin, and with our idea of “up” being in the Y direction.

We are now in a position to start drawing our scene but just to make things a little more interesting we’ll add some motion before we start. To do this we create a rotation matrix about the Y-axis using the following call:

glRotatef(m_rotation, 0.0f, 1.0f, 0.0f);

This function creates the desired rotation matrix and then rotates the currently selected matrix by this rotation. The effect of this is that all of our vertices will be rotated in world space around the Y-axis by “m_rotation” degrees.

Polygons In Depth

We’ve already drawn a polygon in 2 dimensions, and it’s quite easy to add that 3rd dimension to your code. Rather than making a call to glVertex2f, we specify a vertex with 3 floating point coordinates:

glVertex3f(-1.0f, -1.0f, 0.0f);

For this tutorial we’re not actually displacing any of the vertices in the Z axis so we’ll just set them to 0.0. Remember that each of the vertices we specify will be rotated, translated, transformed etc. by all of the ModelView Matrix manipulations that we have coded in the previous few lines.

Do all of this and you should have a window that looks something like this:

For the majority of the following tutorials we’ll be using a 3D scene, but as long as you know how to control and use matrices you should have no trouble converting it to a 2D system.

OpenGL Tutorial 3

  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: