Basic OpenGL for the Newbie, Part 1

BlitzMax Forums/BlitzMax Tutorials/Basic OpenGL for the Newbie, Part 1

The forum is locked. These are the original blitzbasic.com forums, kept so they can still be read. No new topics, replies or edits can be made here. To join in, head over to the Blitz3D+ forums.

Translation

So now we know how to rotate a shape how about next we try and move it around the screen.

Remember the translate command we used in the above example, let's take a look again:

glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();

glTranslatef(0,0,-5.0);

glRotatef(anglex,1.0,0.0,0.0);
glRotatef(angley,0.0,1.0,0.0);

It's even easier to use then the rotate command, just enter the values you want the screen or shape to move. In this case it is moving the shape away from the screen by adding -5.0 units to its position. Later on in the series we will study camera techniques, but for now let's stick with moving the shape around the camera.

The parameters are in the same order as the rotate command, that is: X, Y & Z

Remember that adding a negative number will move it further into the screen - if the shape moves more then 1 unit (positive), the face-culling with automatically cut in and the shape face will disappear.

Try adjusting the values to move the shape around.

If you would like to code a quick example then follow the below mini tutorial to produce a pulsating cube based on the code from the previous example.

Include the following 2 variables somewhere in the top of your program:

global moveabout:float=-5.0
global direction:float=0

In the IDLE function add the following:

if (direction==0) moveabout=moveabout-0.01;
if (moveabout<=-9.0) direction=1;
if (direction==1) moveabout=moveabout+0.01;
if (moveabout>=-4.0) direction=0;

Lastly find the TRANSLATE command in the DISPLAY function, and change it to:

glTranslatef(0,0,moveabout);

Voila !, a spinning, moving cube...

If the cube moves to quickly or slowly change the variables in the IDLE function. (0.01)

I think its time we put everything we have learnt into practice, how about we start to design a toy tank object. This will be made up of 3 parts: the main body, the turret and lastly the gun barrel - of course it will only be a basic shape, but in time we will learn to get the camera to follow it around and finally texture it.

I will slowly build up the model one stage at a time so that you can see the process take shape.

Let's start with the body:

You can insert the code below into the listing from the previous example, just remember to change the lines that I suggest or things may look a little weird.

Find: glTranslatef(0,0,-5.0);
Change it to: glTranslatef(0,0,-15.0);

We need to move the object further into the screen, away from the window - as the shape will be pretty big.

Find: glRotatef(anglez,0.0,0.0,1.0);
Change it to: 'glRotatef(anglez,0.0,0.0,1.0);

We won't need the rotation around the Z axis for now as this will cause the shape to spin too much in odd directions. (you could delete the entire line out if you want)

Now find the cube object that we defined (between the glBegin and glEnd) - delete all the necessary lines of code. insert the following instead of it:
' ** Tank Body

glBegin(GL_QUADS);

glColor3(0.3,0.8,0.2);        ' Back Face
glVertex3f(4.0, 1.0, -2.0)
glVertex3f(3.0, -1.0, -2.0)
glVertex3f(-3.0, -1.0, -2.0)
glVertex3f(-4.0, 1.0, -2.0)

glColor3f(0.3,0.8,0.2);        ' Front Face
glVertex3f(-4.0, 1.0, 2.0)
glVertex3f(-3.0, -1.0, 2.0)
glVertex3f(3.0, -1.0, 2.0)
glVertex3f(4.0, 1.0, 2.0)

glColor3f(0.3, 0.9,0.3);       ' Left Face
glVertex3f(-4.0, 1.0, -2.0)
glVertex3f(-3.0, -1.0, -2.0)
glVertex3f(-3.0, -1.0, 2.0)
glVertex3f(-4.0, 1.0, 2.0)

glColor3f(0.3, 0.9,0.3);       ' Right Face
glVertex3f(4.0, 1.0, 2.0)
glVertex3f(3.0, -1.0, 2.0)
glVertex3f(3.0, -1.0, -2.0)
glVertex3f(4.0, 1.0, -2.0)

glColor3f(0.3, 1.0,0.2);       ' Top Face
glVertex3f(-4.0, 1.0, -2.0)
glVertex3f(-4.0, 1.0, 2.0)
glVertex3f(4.0, 1.0, 2.0)
glVertex3f(4.0, 1.0, -2.0)

glColor3f(0.3, 1.0,0.2);       ' Bottom Face
glVertex3f(-3.0, -1.0, 2.0)
glVertex3f(-3.0, -1.0, -2.0)
glVertex3f(3.0, -1.0, -2.0)
glVertex3f(3.0, -1.0, 2.0)

glEnd()

Done that? Hopefully you saw the bottom section of the tank happily rotating about. If not the re-check your code for errors..

Time to define the next section, the turret.

This will be a separate object from the first part, so instead of editing the existing code we will just be ADDING it. After the end of the first shape (glEnd) - insert the following new code:
' Turret Section

glBegin(GL_QUADS);

glColor3f(0.3,0.8,0.2);         ' Back Face
glVertex3f(-4.0, 1.0, -2.0);
glVertex3f(-2.5, 2.0, -1.5);
glVertex3f(0.5, 2.0, -1.5);
glVertex3f(2.5, 1.0, -2.0);

glColor3f(0.3,0.8,0.2);         ' Front Face
glVertex3f(2.5, 1.0, 2.0);
glVertex3f(0.5, 2.0, 1.5);
glVertex3f(-2.5, 2.0, 1.5);
glVertex3f(-4.0, 1.0, 2.0);

glColor3f(0.3, 0.9,0.3);         ' Left Face
glVertex3f(-4.0, 1.0, 2.0);
glVertex3f(-2.5, 2.0, 1.5);
glVertex3f(-2.5, 2.0, -1.5);
glVertex3f(-4.0, 1.0, -2.0);

glColor3f(0.3, 0.9,0.3);         ' right Face
glVertex3f(0.5, 2.0, 1.5);
glVertex3f(2.5, 1.0, 2.0);
glVertex3f(2.5, 1.0, -2.0);
glVertex3f(0.5, 2.0, -1.5);

glColor3f(0.3, 1.0,0.1);         ' top Face
glVertex3f(0.5, 2.0, -1.5);
glVertex3f(-2.5, 2.0, -1.5);
glVertex3f(-2.5, 2.0, 1.5);
glVertex3f(0.5, 2.0, 1.5);
glEnd();

Now for the last section, the gun itself. As before it will be a separate object so the code below will need to be added after the previous code.
' Gun

glBegin(GL_QUADS);

glColor3f(0.3,0.8,0.2);         ' Back Face
glVertex3f(0.0, 1.2, -0.5)
glVertex3f(0.0, 1.7, -0.5)
glVertex3f(4.0, 1.7, -0.5)
glVertex3f(4.5, 1.2, -0.5)

glColor3f(0.3,0.8,0.2);         ' Front Face
glVertex3f(4.5, 1.2, 0.5)
glVertex3f(4.0, 1.7, 0.5)
glVertex3f(0.0, 1.7, 0.5)
glVertex3f(0.0, 1.2, 0.5)

glColor3f(0.3,0.7,0.3);         ' Top Face
glVertex3f(4.0, 1.7, 0.5)
glVertex3f(4.0, 1.7, -0.5)
glVertex3f(0.0, 1.7, -0.5)
glVertex3f(0.0, 1.7, 0.5)

glColor3f(0.3,0.7,0.2);         ' Bottom Face
glVertex3f(0.0, 1.2, 0.5)
glVertex3f(0.0, 1.2, -0.5)
glVertex3f(4.5, 1.2, -0.5)
glVertex3f(4.5, 1.2, 0.5)

glEnd();

We now have a complete tank !. But as you can see we have a small problem, the sides are being drawn correctly but they are not being drawn in any order. Parts of the tank is being drawn over sections that should be displayed last. The way to combat this is to use a procedure known as Depth Testing, but that's another story for another tutorial....