201707 SER332 Lecture 21

SER332
Introduction to Graphics and
Game Development
Lecture 21:
Textures
Javier Gonzalez-Sanchez
javiergs@asu.edu
PERALTA 230U
Office Hours: By appointment

Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 2
From this

To this

Texture Mapping | Create
1. Create a texture object
2. Bind the texture object with a texture target, such
as GL_TEXTURE_2D
3. Create or load a texture image
4. Specify texture mapping parameters, like wrapping
mode and filtering mode

Texture Mapping | Use
5. For each vertex specify texture coordinates (u, v)
6. Enable texture mapping
7. Bind the texture object with a texture target, such
as GL_TEXTURE_2D
8. Draw the Scene

1. Create a Texture Object
glGenTextures (size, name);
• Create an array of texture names
• Similar to display lists
• Note: Create texture names one by one (size=1).
// example
GLuint texture_name1;
GLuint texture_name2;
// size 1 à create an array with 1 texture names
glGenTextures(1, &texturename1);
glGenTextures(1, &texturename2);

2. Bind a Texture Object
glBindTexture (GL_TEXTURE_2D, texture_name1);
• When object is first bound, the texture object is
created with default values.
• Subsequent texture commands (e.g. glTexImage,
glTexParameter, etc.) affect the actively bound
texture

3. Load a Texture (Algorithmic)
// Create from algorithm
void codedTexture(UINT textureArray[], int n) {
const int TexHeight = 128; const int TexWidth = 128;
// create
GLubyte textureImage[TexHeight][TexWidth][4];
for (int i = 0; i < TexHeight; i++)
for (int j = 0; j < TexWidth; j++) {
textureImage[i][j][0] = 127+i; // red value from 0 to 255
textureImage[i][j][1] = 0; // green value from 0 to 255
textureImage[i][j][2] = 127+j; // blue value from 0 to 255
textureImage[i][j][3] = 1; // alpha value from 0 to 255
}
// setup texture
glGenTextures(1, &textureArray[n]);
glBindTexture(GL_TEXTURE_2D, textureArray[n]);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // must set to 1 for compact data
// glTexImage2D Whith size and minification
gluBuild2DMipmaps (GL_TEXTURE_2D, 3, TexWidth, TexHeight,
GL_BGR_EXT, GL_UNSIGNED_BYTE, textureImage);
}

3. Load a Texture (BMP file)
// load BMP file
void bmpTexture (UINT textureArray[], LPSTR file, int n) {
BITMAPINFO *bitmapInfo; // Bitmap information
GLubyte *bitmapBits; // Bitmap data
if (!file) {
cout << "texture file not found!" << endl; return;
}
// read file
bitmapBits = LoadDIBitmap(file, &bitmapInfo);
// setup texture
glGenTextures(1, &textureArray[n]);
glBindTexture(GL_TEXTURE_2D, textureArray[n]);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // must set to 1 for compact data
// glTexImage2D Whith size and minification
gluBuild2DMipmaps (GL_TEXTURE_2D, 3, // width, height,
GL_BGR_EXT, GL_UNSIGNED_BYTE, butmapsBits);
}

Javier Gonzalez-Sanchez | SER431 | Fall 2016 | 10
// Load a DIB/BMP file from disk.
GLubyte *LoadDIBitmap(const char *filename, BITMAPINFO **info) {
FILE *fp; // open file pointer
GLubyte * bits; // bitmap pixel bits
int bitsize; // Size of bitmap
int infosize; // Size of header information
BITMAPFILEHEADER header; // File header
// open the file; use "rb" mode to read this *binary* file.
// read the file header and any following bitmap information.
// allocate memory for the bitmap and read *it* in.
// OK, everything went fine - return the allocated bitmap.
}

4. Parameters
glPixelStorei (GL_UNPACK_ALIGNMENT, 1);
• read Red Book chapter 8 Pixel Packing and
Unpacking.

4. Parameters
glTexParameter*(GL_TEXTURE_2D, parameter)
• GL_TEXTURE_WRAP_S
• GL_TEXTURE_WRAP_T
• GL_TEXTURE_MAG_FILTER
• GL_TEXTURE_MIN_FILTER
• GL_TEXTURE_BASE_LEVEL
• GL_TEXTURE_MAX_LEVEL

4. Wrapping & Filtering Parameters
• Wrapping: GL_TEXTURE_WRAP_*(S,T,R)
o GL_CLAMP
o GL_CLAMP_TO_EDGE
o GL_REPEAT
• Filtering: GL_TEXTURE_MIN(MAG)_FILTER
o GL_NEAREST (MIN/MAG)
o GL_LINEAR (MIN/MAG)
o GL_NEAREST_MIPMAP_NEAREST (MIN)
o GL_NEAREST_MIPMAP_LINEAR (MIN)
o GL_LINEAR_MIPMAP_NEAREST (MIN)
o GL_LINEAR_MIPMAP_LINEAR (MIN)
• Note: If no mipmap present, you shouldn’t set
GL_XX_MIPMAP_XX parameter.

4. Mipmaps
• pre-calculated, optimized sequences of images, each of which is a
progressively lower resolution representation of the same image. The
height and width of each image, or level, in the mipmap is a power
of two smaller than the previous level.
• Mipmaps can be created manually (much work) with:
glTexImage*D()
The level parameter controls uploading to the corresponding level of
the mipmap
• Mipmaps can be created automatically:
gluBuild2DMipMapLevels()
gluBuild2DMipMaps()

5. Texture coordinates
Draw triangles and for each vertex specify:
• geometry (x, y, z)
• normals (nx, ny, nz)
• texture coordinates (u, v) //glTexCoord{2|3}{i|f}

Example | A cube
// create a triangulated cube
Mesh* createCube() {
Mesh *mesh = new Mesh;
// Define 8 Vertexes
mesh->dot_vertex.push_back(Vec3<GLfloat>( 0.0, 32.0, 32.0));
// ..
// Define 6 Faces; 2 triangles each
mesh->face_index_vertex.push_back(0);
// ..

Remember: Front and Back

Javier Gonzalez-Sanchez | SER431 | Fall 2016 | 18
// Define texture vertex
mesh->dot_texture.push_back(Vec2<GLfloat>(0.0, 1.0));
// Define texture faces
for (int t = 0; t<6; t++) {
mesh->face_index_texture.push_back(0);//0
}
return mesh;
}

Example

Example
// global
GLuint textureArray[8];
// init
void init() {
// ..
// TEXTURES
bmpTexture (textureArray, "../bmp files/oldbox.bmp", 0);
bmpTexture (textureArray, "../bmp files/brick.bmp", 1);
codedTexture(textureArray, 2);
// DISPLAY LIST
displayDiamond = meshToDisplayList(mesh1, 1);
displayPlane = meshToDisplayList(mesh2, 2);
displayMesh = meshToDisplayList(mesh3, 3);
// ..
}

6. Enable Texture Mapping
• glEnable( XXX );
• glDisable( XXX );
• typically: glEnable(GL_TEXTURE_2D)
• Other options:
o GL_TEXTURE_1D
o GL_TEXTURE_3D
o GL_TEXTURE_CUBE_MAP

6. Enable Texture Mapping
glTexEnvf(target, pname, param);
• Specify Texturing Function
• e.g. target = GL_TEXTURE_ENV
• e.g. pname = GL_TEXTURE_ENV_MODE
• e.g. param = GL_DECAL, GL_REPLACE,
GL_MODULATE, or GL_BLEND

7. Bind a Texture Object
glBindTexture (GL_TEXTURE_2D, texture_name1);
• When object is first bound, the texture object is
created with default values.
• Subsequent texture commands (e.g. glTexImage,
glTexParameter, etc.) affect the actively bound
texture

8. Draw the Scene
// draw
GLuint meshToDisplayList(Mesh* m, int id) {
GLuint listID = glGenLists(id);
glNewList(listID, GL_COMPILE);
glEnable(GL_TEXTURE_2D);
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glBindTexture(GL_TEXTURE_2D, textureArray[id - 1]);
glBegin(GL_TRIANGLES);
for (unsigned int i = 0; i < m->face_index_vertex.size(); i++) {
// PER VERTEX NORMALS - glNormal3fv( …
// TEXTURES - glTexCoord2fv( …
// VERTEX - glVertex3fv( …
}
glEnd();
glDisable(GL_TEXTURE_2D);
glEndList();
return listID;
}

Test Yourself
• Use the example on Blackboard
https://github.com/javiergs/SER332/blob/master/L21/
• Create a cabin model as follows: 1 window, 1 door, 1 boxy body, 1
triangular roof, floor.
• Draw textures as BMP files: window, walls, door, roof, green floor.
• Apply textures

Reading
• To get a general picture of texture mapping:
o Red Book (pdf): ch9 p247 ex9-1
• Pixel storage format
o Red Book ch8 Pixel Packing and Unpacking section
• Required reading for texture mapping:
o Red Book (pdf): ch9 p250-p274
o Hearn Baker: ch10 p628-p633, p648-p658
o Reading tip: mainly focus on the instructions discussed in the
slides. You are also encouraged to read all other instructions.

SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
javiergs@asu.edu
Spring 2017
Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.

201707 SER332 Lecture 21

More Related Content

What's hot (6)

Similar to 201707 SER332 Lecture 21 (20)

More from Javier Gonzalez-Sanchez (20)

Recently uploaded (20)

201707 SER332 Lecture 21