Lesson
6
| |
|
|
|
| |
Learning
how to texture map has many benefits. Lets say you wanted a missile to
fly across the screen. Up until this tutorial we'd probably make the entire
missile out of polygons, and fancy colors. With texture mapping, you can
take a real picture of a missile and make the picture fly across the screen.
Which do you think will look better? A photograph or an object made up
of triangles and squares? By using texture mapping, not only will it look
better, but your program will run faster. The texture mapped missile would
only be one quad moving across the screen. A missile made out of polygons
could be made up of hundreds or thousands of polygons. The single texture
mapped quad will use alot less processing power.
Lets start
off by adding five new lines of code to the top of lesson one. The first
new line is #include <stdio.h>. Adding this header file allows us to
work with files. In order to use fopen() later in the code we need to include
this line. Then we add three new floating point variables... xrot, yrot
and zrot. These variables will be used to rotate the cube on the x axis,
the y axis, and the z axis. The last line GLuint texture[1] sets aside
storage space for one texture. If you wanted to load in more than one texture,
you would change the number one to the number of textures you wish to load. |
|
| |
|
|
#include <windows.h> // Header File For Windows
#include <stdio.h> // Header File For Standard Input/Output ( NEW )
#include <gl\gl.h> // Header File For The OpenGL32 Library
#include <gl\glu.h> // Header File For The GLu32 Library
#include <gl\glaux.h> // Header File For The GLaux Library
HDC hDC=NULL; // Private GDI Device Context
HGLRC hRC=NULL; // Permanent Rendering Context
HWND hWnd=NULL; // Holds Our Window Handle
HINSTANCE hInstance; // Holds The Instance Of The Application
bool keys[256]; // Array Used For The Keyboard Routine
bool active=TRUE; // Window Active Flag
bool fullscreen=TRUE; // Fullscreen Flag
GLfloat xrot; // X Rotation ( NEW )
GLfloat yrot; // Y Rotation ( NEW )
GLfloat zrot; // Z Rotation ( NEW )
GLuint texture[1]; // Storage For One Texture ( NEW )
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); // Declaration For WndProc
| |
|
|
|
| |
Now
immediately after the above code, and before ReSizeGLScene(), we want to
add the following section of code. The job of this code is to load in a
bitmap file. If the file doesn't exist NULL is sent back meaning the texture
couldn't be loaded. Before I start explaining the code there are a few
VERY important things you need to know about the images you plan to use
as textures. The image height and width MUST be a power of 2. The width
and height must be at least 64 pixels, and for compatability reasons, shouldn't
be more than 256 pixels. If the image you want to use is not 64, 128 or
256 pixels on the width or height, resize it in an art program. There are
ways around this limitation, but for now we'll just stick to standard texture
sizes.
First thing
we do is create a file handle. A handle is a value used to identify a resource
so that our program can access it. We set the handle to NULL to start off. |
|
| |
|
|
AUX_RGBImageRec *LoadBMP(char *Filename) // Loads A Bitmap Image
{
FILE *File=NULL; // File Handle
| |
|
|
|
| |
Next
we check to make sure that a filename was actually given. The person may
have use LoadBMP() without specifying the file to load, so we have to check
for this. We don't want to try loading nothing :) |
|
| |
|
|
if (!Filename) // Make Sure A Filename Was Given
{
return NULL; // If Not Return NULL
}
| |
|
|
|
| |
If
a filename was given, we check to see if the file exists. The line below
tries to open the file. |
|
| |
|
|
File=fopen(Filename,"r"); // Check To See If The File Exists
| |
|
|
|
| |
If
we were able to open the file it obviously exists. We close the file with
fclose(File) then we return the image data. auxDIBImageLoad(Filename) reads
in the data. |
|
| |
|
|
if (File) // Does The File Exist?
{
fclose(File); // Close The Handle
return auxDIBImageLoad(Filename); // Load The Bitmap And Return A Pointer
}
| |
|
|
|
| |
If
we were unable to open the file we'll return NULL. which means the file
couldn't be loaded. Later on in the program we'll check to see if the file
was loaded. If it wasn't we'll quit the program with an error message. |
|
| |
|
|
return NULL; // If Load Failed Return NULL
}
| |
|
|
|
| |
This
is the section of code that loads the bitmap (calling the code above) and
converts it into a texture. |
|
| |
|
|
int LoadGLTextures() // Load Bitmaps And Convert To Textures
{
| |
|
|
|
| |
We'll
set up a variable called Status. We'll use this variable to keep
track of whether or not we were able to load the bitmap and build a texture.
We set Status to FALSE (meaning nothing has been loaded or built) by default. |
|
| |
|
|
int Status=FALSE; // Status Indicator
| |
|
|
|
| |
Now
we create an image record that we can store our bitmap in. The record will
hold the bitmap width, height, and data. |
|
| |
|
|
AUX_RGBImageRec *TextureImage[1]; // Create Storage Space For The Texture
| |
|
|
|
| |
We
clear the image record just to make sure it's empty. |
|
| |
|
|
memset(TextureImage,0,sizeof(void *)*1); // Set The Pointer To NULL
| |
|
|
|
| |
Now
we load the bitmap and convert it to a texture. TextureImage[0]=LoadBMP("Data/NeHe.bmp")
will jump to our LoadBMP() code. The file named NeHe.bmp in the Data directory
will be loaded. If everything goes well, the image data is stored in TextureImage[0],
Status
is set to TRUE, and we start to build our texture. |
|
| |
|
|
// Load The Bitmap, Check For Errors, If Bitmap's Not Found Quit
if (TextureImage[0]=LoadBMP("Data/NeHe.bmp"))
{
Status=TRUE; // Set The Status To TRUE
| |
|
|
|
| |
Now
that we've loaded the image data into TextureImage[0], we will build a
texture using this data. The first line glGenTextures(1, &texture[0])
tells OpenGL we want to generate one texture name (increase the number
if you load more than one texture). Remember at the very beginning of this
tutorial we created room for one texture with the line GLuint
texture[1].
Although you'd think the first texture would be stored at &texture[1]
instead of &texture[0], it's not. The first actual storage area is
0. If we wanted two textures we would use GLuint texture[2] and the second
texture would be stored at texture[1].
The second
line glBindTexture(GL_TEXTURE_2D, texture[0]) tells OpenGL to bind the
named texture texture[0] to a texture target. 2D textures have both height
(on the Y axes) and width (on the X axes). The main function of glBindTexture
is to assign a texture name to texture data. In this case we're telling
OpenGL there is memory available at &texture[0]. When we create the
texture, it will be stored in the memory that &texture[0] references. |
|
| |
|
|
glGenTextures(1, &texture[0]); // Create The Texture
// Typical Texture Generation Using Data From The Bitmap
glBindTexture(GL_TEXTURE_2D, texture[0]);
| |
|
|
|
| |
Next
we create the actual texture. The following line tells OpenGL the texture
will be a 2D texture (GL_TEXTURE_2D). Zero represents the images level
of detail, this is usually left at zero. Three is the number of data components.
Because the image is made up of red data, green data and blue data, there
are three components. TextureImage[0]->sizeX is the width of the texture.
If you know the width, you can put it here, but it's easier to let the
computer figure it out for you. TextureImage[0]->sizey is the height of
the texture. zero is the border. It's usually left at zero. GL_RGB tells
OpenGL the image data we are using is made up of red, green and blue data
in that order. GL_UNSIGNED_BYTE means the data that makes up the image
is made up of unsigned bytes, and finally... TextureImage[0]->data tells
OpenGL where to get the texture data from. In this case it points to the
data stored in the TextureImage[0] record. |
|
| |
|
|
// Generate The Texture
glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
| |
|
|
|
| |
The
next two lines tell OpenGL what type of filtering to use when the image
is larger (GL_TEXTURE_MAG_FILTER) or stretched on the screen than the original
texture, or when it's smaller (GL_TEXTURE_MIN_FILTER) on the screen than
the actual texture. I usually use GL_LINEAR for both. This makes the texture
look smooth way in the distance, and when it's up close to the screen.
Using GL_LINEAR requires alot of work from the processor/video card, so
if your system is slow, you might want to use GL_NEAREST. A texture that's
filtered with GL_NEAREST will appear blocky when it's stretched. You can
also try a combination of both. Make it filter things up close, but not
things in the distance. |
|
| |
|
|
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); // Linear Filtering
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR); // Linear Filtering
}
| |
|
|
|
| |
Now
we free up any ram that we may have used to store the bitmap data. We check
to see if the bitmap data was stored in TextureImage[0]. If it was we check
to see if the data has been stored. If data was stored, we erase it. Then
we free the image structure making sure any used memory is freed up. |
|
| |
|
|
if (TextureImage[0]) // If Texture Exists
{
if (TextureImage[0]->data) // If Texture Image Exists
{
free(TextureImage[0]->data); // Free The Texture Image Memory
}
free(TextureImage[0]); // Free The Image Structure
}
| |
|
|
|
| |
Finally
we return the status. If everything went OK, the variable Status
will be TRUE. If anything went wrong,
Status will be FALSE. |
|
| |
|
|
return Status; // Return The Status
}
| |
|
|
|
| |
I've
added a few lines of code to InitGL. I'll repost the entire section of
code, so it's easy to see the lines that I've added, and where they go
in the code. The first line if (!LoadGLTextures()) jumps to the routine
above which loads the bitmap and makes a texture from it. If LoadGLTextures()
fails for any reason, the next line of code will return FALSE. If everything
went OK, and the texture was created, we enable 2D texture mapping. If
you forget to enable texture mapping your object will usually appear solid
white, which is definitely not good. |
|
| |
|
|
int InitGL(GLvoid) // All Setup For OpenGL Goes Here
{
if (!LoadGLTextures()) // Jump To Texture Loading Routine ( NEW )
{
return FALSE; // If Texture Didn't Load Return FALSE ( NEW )
}
glEnable(GL_TEXTURE_2D); // Enable Texture Mapping ( NEW )
glShadeModel(GL_SMOOTH); // Enable Smooth Shading
glClearColor(0.0f, 0.0f, 0.0f, 0.5f); // Black Background
glClearDepth(1.0f); // Depth Buffer Setup
glEnable(GL_DEPTH_TEST); // Enables Depth Testing
glDepthFunc(GL_LEQUAL); // The Type Of Depth Testing To Do
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); // Really Nice Perspective Calculations
return TRUE; // Initialization Went OK
}
| |
|
|
|
| |
Now
we draw the textured cube. You can replace the DrawGLScene code with the
code below, or you can add the new code to the original lesson one code.
This section will be heavily commented so it's easy to understand. The
first two lines of code glClear() and glLoadIdentity() are in the original
lesson one code. glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) will
clear the screen to the color we selected in InitGL(). In this case, the
screen will be cleared to black. The depth buffer will also be cleared.
The view will then be reset with glLoadIdentity(). |
|
| |
|
|
int DrawGLScene(GLvoid) // Here's Where We Do All The Drawing
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear Screen And Depth Buffer
glLoadIdentity(); // Reset The Current Matrix
glTranslatef(0.0f,0.0f,-5.0f); // Move Into The Screen 5 Units
| |
|
|
|
| |
The
following three lines of code will rotate the cube on the x axis, then
the y axis, and finally the z axis. How much it rotates on each axis will
depend on the value stored in xrot, yrot and zrot. |
|
| |
|
|
glRotatef(xrot,1.0f,0.0f,0.0f); // Rotate On The X Axis
glRotatef(yrot,0.0f,1.0f,0.0f); // Rotate On The Y Axis
glRotatef(zrot,0.0f,0.0f,1.0f); // Rotate On The Z Axis
| |
|
|
|
| |
The
next line of code selects which texture we want to use. If there was more
than one texture you wanted to use in your scene, you would select the
texture using glBindTexture(GL_TEXTURE_2D, texture[number of texture
to use]). If you wanted to change textures, you would bind to the new
texture. One thing to note is that you can NOT bind a texture inside glBegin()
and glEnd(), you have to do it before or after glBegin(). Notice how we
use glBindTextures to specify which texture to create and to select a specific
texture. |
|
| |
|
|
glBindTexture(GL_TEXTURE_2D, texture[0]); // Select Our Texture
| |
|
|
|
| |
To
properly map a texture onto a quad, you have to make sure the top right
of the texture is mapped to the top right of the quad. The top left of
the texture is mapped to the top left of the quad, the bottom right of
the texture is mapped to the bottom right of the quad, and finally, the
bottom left of the texture is mapped to the bottom left of the quad. If
the corners of the texture do not match the same corners of the quad, the
image may appear upside down, sideways, or not at all.
The first
value of glTexCoord2f is the X coordinate. 0.0f is the left side of the
texture. 0.5f is the middle of the texture, and 1.0f is the right side
of the texture. The second value of glTexCoord2f is the Y coordinate. 0.0f
is the bottom of the texture. 0.5f is the middle of the texture, and 1.0f
is the top of the texture.
So now we
know the top left coordinate of a texture is 0.0f on X and 1.0f on Y, and
the top left vertex of a quad is -1.0f on X, and 1.0f on Y. Now all you
have to do is match the other three texture coordinates up with the remaining
three corners of the quad.
Try playing
around with the x and y values of glTexCoord2f. Changing 1.0f to 0.5f will
only draw the left half of a texture from 0.0f (left) to 0.5f (middle of
the texture). Changing 0.0f to 0.5f will only draw the right half of a
texture from 0.5f (middle) to 1.0f (right). |
|
| |
|
|
glBegin(GL_QUADS);
// Front Face
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); // Bottom Left Of The Texture and Quad
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); // Bottom Right Of The Texture and Quad
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f); // Top Right Of The Texture and Quad
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 1.0f); // Top Left Of The Texture and Quad
// Back Face
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); // Bottom Right Of The Texture and Quad
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); // Top Right Of The Texture and Quad
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); // Top Left Of The Texture and Quad
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); // Bottom Left Of The Texture and Quad
// Top Face
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); // Top Left Of The Texture and Quad
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, 1.0f, 1.0f); // Bottom Left Of The Texture and Quad
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, 1.0f, 1.0f); // Bottom Right Of The Texture and Quad
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); // Top Right Of The Texture and Quad
// Bottom Face
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f); // Top Right Of The Texture and Quad
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f); // Top Left Of The Texture and Quad
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); // Bottom Left Of The Texture and Quad
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); // Bottom Right Of The Texture and Quad
// Right face
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); // Bottom Right Of The Texture and Quad
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); // Top Right Of The Texture and Quad
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f); // Top Left Of The Texture and Quad
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); // Bottom Left Of The Texture and Quad
// Left Face
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); // Bottom Left Of The Texture and Quad
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); // Bottom Right Of The Texture and Quad
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 1.0f); // Top Right Of The Texture and Quad
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); // Top Left Of The Texture and Quad
glEnd();
| |
|
|
|
| |
Now
we increase the value of xrot, yrot and zrot. Try changing the number each
variable increases by to make the cube spin faster or slower, or try changing
a + to a - to make the cube spin the other direction. |
|
| |
|
|
xrot+=0.3f; // X Axis Rotation
yrot+=0.2f; // Y Axis Rotation
zrot+=0.4f; // Z Axis Rotation
return true; // Keep Going
}