NeHe Productions: 3D Shapes

1 of 5

HOME

TWITTER

FACEBOOK

3D Shapes

RSS

ATOM

FORUM

Like

35

+14

Expanding on the last tutorial, we'll now make the object into TRUE 3D object, rather than 2D objects in a 3D world. We will do this
by adding a lef t, back, and right side to the triangle, and a lef t, right, back, top and bottom to the square. By doing this, we turn
the triangle into a py ramid, and the square into a cube.
We'll blend the colors on the py ramid, creating a smoothly colored object, and f or the square we'll color each f ace a dif f erent
color.
?
1 int DrawGLScene(GLvoid)
// Here's Where We Do All The Drawing
2{
3
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear The Screen And The Depth Buffer
glLoadIdentity();
// Reset The View
4
glTranslatef(-1.5f,0.0f,-6.0f);
// Move Left And Into The Screen
5
6
glRotatef(rtri,0.0f,1.0f,0.0f);
// Rotate The Pyramid On It's Y Axis
7
8
glBegin(GL_TRIANGLES);
// Start Drawing The Pyramid
9
A f ew of y ou hav e taken the code f rom the last tutorial, and made 3D objects of y our own. One thing I'v e been asked quite a bit
is "how come my objects are not spinning on their axis? It seems like they are spinning all ov er the screen". In order f or y our
object to spin around an axis, it has to be designed AROUND that axis. You hav e to remember that the center of any object
should be 0 on the X, 0 on the Y, and 0 on the Z.
The f ollowing code will create the py ramid around a central axis. The top of the py ramid is one high f rom the center, the bottom of
the py ramid is one down f rom the center. The top point is right in the middle (zero), and the bottom points are one lef t f rom center,
and one right f rom center.
Note that all triangles are drawn in a counterclockwise rotation. This is important, and will be explained in a f uture tutorial, f or now,
just know that it's good practice to make objects either clockwise or counterclockwise, but y ou shouldn't mix the two unless y ou
hav e a reason to.
We start of f by drawing the Front Face. Because all of the f aces share the top point, we will make this point red on all of the
triangles. The color on the bottom two points of the triangles will alternate. The f ront f ace will hav e a green lef t point and a blue
right point. Then the triangle on the right side will hav e a blue lef t point and a green right point. By alternating the bottom two colors
on each f ace, we make a common colored point at the bottom of each f ace.
?
1 glColor3f(1.0f,0.0f,0.0f);
2 glVertex3f( 0.0f, 1.0f, 0.0f);
3 glColor3f(0.0f,1.0f,0.0f);
4 glVertex3f(-1.0f,-1.0f, 1.0f);
5 glColor3f(0.0f,0.0f,1.0f);
6 glVertex3f( 1.0f,-1.0f, 1.0f);

// Red
// Top Of Triangle (Front)
// Green
// Left Of Triangle (Front)
// Blue
// Right Of Triangle (Front)

Now we draw the right f ace. Notice then the two bottom point are drawn one to the right of center, and the top point is drawn one
up on the y axis, and right in the middle of the x axis. causing the f ace to slope f rom center point at the top out to the right side
of the screen at the bottom.

NeHe Productions: 3D Shapes

2 of 5

Notice the lef t point is drawn blue this time. By drawing it blue, it will be the same color as the right bottom corner of the f ront
f ace. Blending blue outwards f rom that one corner across both the f ront and right f ace of the py ramid.
Notice how the remaining three f aces are included inside the same glBegin(GL_TRIANGLES) and glEnd() as the f irst f ace.
Because we're making this entire object out of triangles, OpenGL will know that ev ery three points we plot are the three points of a
triangle. Once it's drawn three points, if there are three more points, it will assume another triangle needs to be drawn. If y ou were
to put f our points instead of three, OpenGL would draw the f irst three and assume the f ourth point is the start of a new triangle. It
would not draw a Quad. So make sure y ou don't add any extra points by accident.
?
1 glColor3f(1.0f,0.0f,0.0f);
2 glVertex3f( 0.0f, 1.0f, 0.0f);
3 glColor3f(0.0f,0.0f,1.0f);
4 glVertex3f( 1.0f,-1.0f, 1.0f);
5 glColor3f(0.0f,1.0f,0.0f);
6 glVertex3f( 1.0f,-1.0f, -1.0f);

// Red
// Top Of Triangle (Right)
// Blue
// Left Of Triangle (Right)
// Green
// Right Of Triangle (Right)

Now f or the back f ace. Again the colors switch. The lef t point is now green again, because the corner it shares with the right f ace
is green.
?
1 glColor3f(1.0f,0.0f,0.0f);
2 glVertex3f( 0.0f, 1.0f, 0.0f);
3 glColor3f(0.0f,1.0f,0.0f);
4 glVertex3f( 1.0f,-1.0f, -1.0f);
5 glColor3f(0.0f,0.0f,1.0f);
6 glVertex3f(-1.0f,-1.0f, -1.0f);

// Red
// Top Of Triangle (Back)
// Green
// Left Of Triangle (Back)
// Blue
// Right Of Triangle (Back)

Finally we draw the lef t f ace. The colors switch one last time. The lef t point is blue, and blends with the right point of the back
f ace. The right point is green, and blends with the lef t point of the f ront f ace.
We're done drawing the py ramid. Because the py ramid only spins on the Y axis, we will nev er see the bottom, so there is no need
to put a bottom on the py ramid. If y ou f eel like experimenting, try adding a bottom using a quad, then rotate on the X axis to see
if y ou'v e done it correctly. Make sure the color used on each corner of the quad matches up with the colors being used at the f our
corners of the py ramid.
?
1
glColor3f(1.0f,0.0f,0.0f);
2
glVertex3f( 0.0f, 1.0f, 0.0f);
3
glColor3f(0.0f,0.0f,1.0f);
glVertex3f(-1.0f,-1.0f,-1.0f);
4
glColor3f(0.0f,1.0f,0.0f);
5
glVertex3f(-1.0f,-1.0f, 1.0f);
6
glEnd();
// Done
7

// Red
// Top Of Triangle (Left)
// Blue
// Left Of Triangle (Left)
// Green
// Right Of Triangle (Left)
Drawing The Pyramid

Now we'll draw the cube. It's made up of six quads. All of the quads are drawn in a counter clockwise order. Meaning the f irst point
is the top right, the second point is the top lef t, third point is bottom lef t, and f inally bottom right. When we draw the back f ace, it
may seem as though we are drawing clockwise, but y ou hav e to keep in mind that if we were behind the cube looking at the f ront
of it, the lef t side of the screen is actually the right side of the quad, and the right side of the screen would actually be the lef t
side of the quad.
Notice we mov e the cube a little f urther into the screen in this lesson. By doing this, the size of the cube appears closer to the
size of the py ramid. If y ou were to mov e it only 6 units into the screen, the cube would appear much larger than the py ramid, and
parts of it might get cut of f by the sides of the screen. You can play around with this setting, and see how mov ing the cube
f urther into the screen makes it appear smaller, and mov ing it closer makes it appear larger. The reason this happens is
perspectiv e. Objects in the distance should appear smaller :)
?
1 glLoadIdentity();
2 glTranslatef(1.5f,0.0f,-7.0f);
3
4 glRotatef(rquad,1.0f,1.0f,1.0f);
5
6 glBegin(GL_QUADS);

// Move Right And Into The Screen

// Rotate The Cube On X, Y & Z
// Start Drawing The Cube

We'll start of f by drawing the top of the cube. We mov e up one unit f rom the center of the cube. Notice that the Y axis is alway s

NeHe Productions: 3D Shapes

3 of 5

one. We then draw a quad on the Z plane. Meaning into the screen. We start of f by drawing the top right point of the top of the
cube. The top right point would be one unit right, and one unit into the screen. The second point would be one unit to the lef t, and
unit into the screen. Now we hav e to draw the bottom of the quad towards the v iewer. so to do this, instead of going into the
screen, we mov e one unit towards the screen. Make sense?
?
1 glColor3f(0.0f,1.0f,0.0f);
2 glVertex3f( 1.0f, 1.0f,-1.0f);
3 glVertex3f(-1.0f, 1.0f,-1.0f);
4 glVertex3f(-1.0f, 1.0f, 1.0f);
5 glVertex3f( 1.0f, 1.0f, 1.0f);

// Set
//
//
//
//

The Color To Green

Top Right Of The Quad (Top)
Top Left Of The Quad (Top)
Bottom Left Of The Quad (Top)
Bottom Right Of The Quad (Top)

The bottom is drawn the exact same way as the top, but because it's the bottom, it's drawn down one unit f rom the center of the
cube. Notice the Y axis is alway s minus one. If we were under the cube, looking at the quad that makes the bottom, y ou would
notice the top right corner is the corner closest to the v iewer, so instead of drawing in the distance f irst, we draw closest to the
v iewer f irst, then on the lef t side closest to the v iewer, and then we go into the screen to draw the bottom two points.
If y ou didn't really care about the order the poly gons were drawn in (clockwise or not), y ou could just copy the same code f or the
top quad, mov e it down on the Y axis to -1, and it would work, but ignoring the order the quad is drawn in can cause weird results
once y ou get into f ancy things such as texture mapping.
?
1 glColor3f(1.0f,0.5f,0.0f);
2 glVertex3f( 1.0f,-1.0f, 1.0f);
3 glVertex3f(-1.0f,-1.0f, 1.0f);
4 glVertex3f(-1.0f,-1.0f,-1.0f);
5 glVertex3f( 1.0f,-1.0f,-1.0f);

// Set
//
//
//
//

The Color To Orange

Top Right Of The Quad (Bottom)
Top Left Of The Quad (Bottom)
Bottom Left Of The Quad (Bottom)
Bottom Right Of The Quad (Bottom)

Now we draw the f ront of the Quad. We mov e one unit towards the screen, and away f rom the center to draw the f ront f ace.
Notice the Z axis is alway s one. In the py ramid the Z axis was not alway s one. At the top, the Z axis was zero. If y ou tried
changing the Z axis to zero in the f ollowing code, y ou'd notice that the corner y ou changed it on would slope into the screen.
That's not something we want to do right now :)
?
1 glColor3f(1.0f,0.0f,0.0f);
2 glVertex3f( 1.0f, 1.0f, 1.0f);
3 glVertex3f(-1.0f, 1.0f, 1.0f);
4 glVertex3f(-1.0f,-1.0f, 1.0f);
5 glVertex3f( 1.0f,-1.0f, 1.0f);

// Set
//
//
//
//

The Color To Red

Top Right Of The Quad (Front)
Top Left Of The Quad (Front)
Bottom Left Of The Quad (Front)
Bottom Right Of The Quad (Front)

The back f ace is a quad the same as the f ront f ace, but it's set deeper into the screen. Notice the Z axis is now minus one f or all
of the points.
?
1 glColor3f(1.0f,1.0f,0.0f);
2 glVertex3f( 1.0f,-1.0f,-1.0f);
3 glVertex3f(-1.0f,-1.0f,-1.0f);
4 glVertex3f(-1.0f, 1.0f,-1.0f);
5 glVertex3f( 1.0f, 1.0f,-1.0f);

// Set
//
//
//
//

The Color To Yellow

Bottom Left Of The Quad (Back)
Bottom Right Of The Quad (Back)
Top Right Of The Quad (Back)
Top Left Of The Quad (Back)

Now we only hav e two more quads to draw and we're done. As usual, y ou'll notice one axis is alway s the same f or all the points.
In this case the X axis is alway s minus one. That's because we're alway s drawing to the lef t of center because this is the lef t
f ace.
?
1 glColor3f(0.0f,0.0f,1.0f);
2 glVertex3f(-1.0f, 1.0f, 1.0f);
3 glVertex3f(-1.0f, 1.0f,-1.0f);
4 glVertex3f(-1.0f,-1.0f,-1.0f);
5 glVertex3f(-1.0f,-1.0f, 1.0f);

// Set
//
//
//
//

The Color To Blue

Top Right Of The Quad (Left)
Top Left Of The Quad (Left)
Bottom Left Of The Quad (Left)
Bottom Right Of The Quad (Left)

This is the last f ace to complete the cube. The X axis is alway s one. Drawing is counter clockwise. If y ou wanted to, y ou could
leav e this f ace out, and make a box :)
Or if y ou f elt like experimenting, y ou could alway s try changing the color of each point on the cube to make it blend the same
way the py ramid blends. You can see an example of a blended cube by downloading Ev il's f irst GL demo f rom my web page.
Run it and press TAB. You'll see a beautif ully colored cube, with colors f lowing across all the f aces.

NeHe Productions: 3D Shapes

4 of 5

?
1
2
3
4
5
6
7
8
9
10
}
11

glColor3f(1.0f,0.0f,1.0f);
// Set The Color To Violet
glVertex3f( 1.0f, 1.0f,-1.0f);
// Top Right Of The Quad (Right)
glVertex3f( 1.0f, 1.0f, 1.0f);
// Top Left Of The Quad (Right)
glVertex3f( 1.0f,-1.0f, 1.0f);
// Bottom Left Of The Quad (Right)
glVertex3f( 1.0f,-1.0f,-1.0f);
// Bottom Right Of The Quad (Right)
glEnd();
// Done Drawing The Quad
rtri+=0.2f;
rquad-=0.15f;
return TRUE;

// Increase The Rotation Variable For The Triangle

// Decrease The Rotation Variable For The Quad
// Keep Going

By the end of this tutorial, y ou should hav e a better understanding of how objects are created in 3D space. You hav e to think of
the OpenGL screen as a giant piece of graph paper, with many transparent lay ers behind it. Almost like a giant cube made of of
points. Some of the points mov e lef t to right, some mov e up and down, and some mov e f urther back in the cube. If y ou can
v isualize the depth into the screen, y ou shouldn't hav e any problems designing new 3D objects.
If y ou're hav ing a hard time understanding 3D space, don't get f rustrated. It can be dif f icult to grasp right of f the start. An object
like the cube is a good example to learn f rom. If y ou notice, the back f ace is drawn exactly the same as the f ront f ace, it's just
f urther into the screen. Play around with the code, and if y ou just can't grasp it, email me, and I'll try to answer y our questions.
Jeff Molofee (NeHe)
* DOWNLOAD Visual C++ Code For This Lesson.
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD

ASM Code For This Lesson. ( Conv ersion by Foolman )

Borland C++ Builder 6 Code For This Lesson. ( Conv ersion by Christian Kindahl )
C# Code For This Lesson. ( Conv ersion by Sabine Felsinger )
VB.Net CsGL Code For This Lesson. ( Conv ersion by X )
Code Warrior 5.3 Code For This Lesson. ( Conv ersion by Scott Lupton )
Cy gwin Code For This Lesson. ( Conv ersion by Stephan Ferraro )
D Language Code For This Lesson. ( Conv ersion by Familia Pineda Garcia )
Delphi Code For This Lesson. ( Conv ersion by Michal Tucek )
Dev C++ Code For This Lesson. ( Conv ersion by Dan )
Euphoria Code For This Lesson. ( Conv ersion by Ev an Marshall )
Game GLUT Code For This Lesson. ( Conv ersion by Milikas Anastasios )
GLUT Code For This Lesson. ( Conv ersion by Andy Restad )
Irix Code For This Lesson. ( Conv ersion by Lakmal Gunasekara )
Jav a Code For This Lesson. ( Conv ersion by Jef f Kirby )
Jav a/SWT Code For This Lesson. ( Conv ersion by Victor Gonzalez )
Jedi-SDL Code For This Lesson. ( Conv ersion by Dominique Louis )
JoGL Code For This Lesson. ( Conv ersion by Kev in J. Duling )
LCC Win32 Code For This Lesson. ( Conv ersion by Robert Wishlaw )
Linux Code For This Lesson. ( Conv ersion by Richard Campbell )
Linux/GLX Code For This Lesson. ( Conv ersion by Mihael Vrbanec )
Linux/SDL Code For This Lesson. ( Conv ersion by Ti Leggett )
LWJGL Code For This Lesson. ( Conv ersion by Mark Bernard )
Mac OS Code For This Lesson. ( Conv ersion by Anthony Parker )
Mac OS X/Cocoa Code For This Lesson. ( Conv ersion by Bry an Blackburn )
MASM Code For This Lesson. ( Conv ersion by Nico (Scalp) )
Power Basic Code For This Lesson. ( Conv ersion by Angus Law )
Pelles C Code For This Lesson. ( Conv ersion by Pelle Orinius )
Perl Code For This Lesson. ( Conv ersion by Cora Hussey )
Py thon Code For This Lesson. ( Conv ersion by Tony Colston )
REALbasic Code For This Lesson. ( Conv ersion by Thomas J. Cunningham )
Ruby Code For This Lesson. ( Conv ersion by Manolo Padron Martinez )
Scheme Code For This Lesson. ( Conv ersion by Jon DuBois )
Solaris Code For This Lesson. ( Conv ersion by Lakmal Gunasekara )
Visual Basic Code For This Lesson. ( Conv ersion by Ross Dawson )
Visual Fortran Code For This Lesson. ( Conv ersion by Jean-Philippe Perois )
Visual Studio .NET Code For This Lesson. ( Conv ersion by Grant James )

NeHe Productions: 3D Shapes

5 of 5

< Lesson 04Lesson 06 >

1997-2014 Gamedev . All rights reserv ed.
NeHe and NeHe Productions are trademarks of GameDev.net, LLC
OpenGL is a registered trademark of Silicon Graphics Inc.