Slide 1

Slide 1 text

jgs SER332 Introduction to Graphics and Game Development Lecture 23: Textures Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

Slide 2

Slide 2 text

jgs Project 4

Slide 3

Slide 3 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3 jgs Project 3 and 4 Score:00000 1. Project 1 included 2. Navigation Mouse and arrows 3. Menu to control speed: Normal and Fast 4. Light Emissive and Ambient. Static and Mobile 5. Materials 6. Textures 7. OBJs 8. Transformations: movements 9. GAME x

Slide 4

Slide 4 text

jgs Textures

Slide 5

Slide 5 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs From this

Slide 6

Slide 6 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs To this

Slide 7

Slide 7 text

jgs Textures Create or Load Textures

Slide 8

Slide 8 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 jgs Create or Load Textures void init() { // CREATE MESH DATA STRUCTURES // TEXTURES GLuint texture_array[3]; texture_from_file(&texture_array[0], "../../bmp files/oldbox.bmp"); texture_from_file(&texture_array[1], "../../bmp files/brick.bmp"); texture_from_algorithm(&texture_array[2]); // DISPLAY LIST display_cube = meshToDisplayList(1, mesh_cube, texture_array[0]); display_floor = meshToDisplayList(2, mesh_floor, texture_array[1]); display_ball = meshToDisplayList(3, mesh_ball, texture_array[2]); // CONFIGURE LIGHT }

Slide 9

Slide 9 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs Create or Load Textures (from File) // Create texture from a DIB or BMP file void texture_from_file(GLuint *textureArray, const char * file) { BITMAPINFO *bitmapInfo; // Bitmap information GLubyte *bitmapBits; // Bitmap data if (!file) { cout << "texture file not found!" << endl; return;} // load image bitmapBits = load_bmp_file(file, &bitmapInfo); // setup texture glGenTextures(1, textureArray); glBindTexture(GL_TEXTURE_2D, *textureArray); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // must set to 1 for compact data gluBuild2DMipmaps(GL_TEXTURE_2D, 3, bitmapInfo->bmiHeader.biWidth, bitmapInfo->bmiHeader.biHeight, GL_BGR_EXT, GL_UNSIGNED_BYTE, bitmapBits ); }

Slide 10

Slide 10 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs Create or Load Textures (from File) // Load a DIB/BMP file from disk. GLubyte* load_bmp_file(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. return (bits); }

Slide 11

Slide 11 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 jgs GL_TEXTURE_2D Create or Load Textures (from File) Glubyte * bitmapBits Glubyte * bits Glubyte * bitmapBits Glubyte * bits gluBuild2DMipmaps GLuint *textureArray GLuint *textureArray glBindTexture Gluint texture_array[3] # #

Slide 12

Slide 12 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12 jgs Generate and Bind glGenTextures (size, name) § Create an texture identifier (similar to display lists) § Create texture names one by one (size=1). 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 // generate GLuint texture_array[3]; // size 1 à create an array with 1 texture names glGenTextures(1, &texture_array[0]); // bind glBindTexture(GL_TEXTURE_2D, texture_array[0]); // configure binding // set to 1 // read Red Book chapter 8 Pixel Packing and Unpacking. glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

Slide 13

Slide 13 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13 jgs 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

Slide 14

Slide 14 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 jgs Mipmaps gluBuild2DMipmaps(GLenum target, GLint internalFormat, GLsizei width, GLsizei height, GLenum format, GLenum type, const void * data); gluBuild2DMipmaps(GL_TEXTURE_2D, 3, width, height, GL_BGR_EXT, GL_UNSIGNED_BYTE, an_array); § Create mipmaps automatically § Mipmaps are pre-calculated, optimized sequences of images, each of which is a progressively lower resolution representation of the same image.

Slide 15

Slide 15 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs Create or Load Textures (from Algorithm) // Create texture from algorithm void texture_from_algorithm(GLuint *textureArray) { const int TexHeight = 128; const int TexWidth = 128; // create texture in memory GLubyte textureImage[TexHeight][TexWidth][3]; 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 } // setup texture glGenTextures(1, textureArray); glBindTexture(GL_TEXTURE_2D, *textureArray); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // must set to 1 for compact data gluBuild2DMipmaps(GL_TEXTURE_2D, 3, TexWidth, TexHeight, GL_BGR_EXT, GL_UNSIGNED_BYTE, textureImage); }

Slide 16

Slide 16 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16 jgs GL_TEXTURE_2D Create or Load Textures Glubyte * bitmapBits Glubyte * bits Glubyte * bitmapBits Glubyte * bits gluBuild2DMipmaps GLuint *textureArray GLuint *textureArray glBindTexture Gluint texture_array[3] # # # Glubyte textureImage[][][] GLuint *textureArray

Slide 17

Slide 17 text

jgs Textures Add Texture Coordinates

Slide 18

Slide 18 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18 jgs Create or Load Textures void init() { // CREATE MESH DATA STRUCTURES // TEXTURES GLuint texture_array[3]; texture_from_file(&texture_array[0], "../../bmp files/oldbox.bmp"); texture_from_file(&texture_array[1], "../../bmp files/brick.bmp"); texture_from_algorithm(&texture_array[2]); // DISPLAY LIST mesh_cube = createCube(); display_cube = meshToDisplayList(1, mesh_cube, texture_array[0]); // CONFIGURE LIGHT }

Slide 19

Slide 19 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19 jgs Cube | Vertex (1/2) // create a triangulated cube Mesh* createCube() { Mesh *mesh = new Mesh; // Define 8 Vertexes mesh->dot_vertex.push_back(Vec3( 0.0, 32.0, 32.0)); mesh->dot_vertex.push_back(Vec3( 32.0, 32.0, 32.0)); mesh->dot_vertex.push_back(Vec3( 32.0, 0.0, 32.0)); mesh->dot_vertex.push_back(Vec3( 0.0, 0.0, 32.0)); // .. // Define 6 Faces; 2 triangles each mesh->face_index_vertex.push_back(0); mesh->face_index_vertex.push_back(3); mesh->face_index_vertex.push_back(1); mesh->face_index_vertex.push_back(1); mesh->face_index_vertex.push_back(3); mesh->face_index_vertex.push_back(2); // .. 3 2 1 0

Slide 20

Slide 20 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20 jgs Remember: Front and Back

Slide 21

Slide 21 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21 jgs // create a triangulated cube Mesh* createCube() { Mesh *mesh = new Mesh; // Define 8 Vertexes and Define 6 Faces; 2 triangles each // Define texture vertex mesh->dot_texture.push_back(Vec2(0.0, 1.0)); mesh->dot_texture.push_back(Vec2(1.0, 1.0)); mesh->dot_texture.push_back(Vec2(1.0, 0.0)); mesh->dot_texture.push_back(Vec2(0.0, 0.0)); // Define texture faces for (int t = 0; t<6; t++) { mesh->face_index_texture.push_back(0);//0 mesh->face_index_texture.push_back(2);//1 mesh->face_index_texture.push_back(1);//2 mesh->face_index_texture.push_back(0);//0 mesh->face_index_texture.push_back(3);//2 mesh->face_index_texture.push_back(2);//3 } return mesh; } Cube | Texture Coordinates (2/2)

Slide 22

Slide 22 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22 jgs Example

Slide 23

Slide 23 text

jgs Textures Draw Scene

Slide 24

Slide 24 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 24 jgs GLuint meshToDisplayList(int id, Mesh* m, GLuint texture) { GLuint listID = glGenLists(id); glNewList(listID, GL_COMPILE); glEnable(GL_TEXTURE_2D); // Other options: GL_TEXTURE_1D, GL_TEXTURE_3D, GL_TEXTURE_CUBE_MAP glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glBindTexture(GL_TEXTURE_2D, texture); glBegin(GL_TRIANGLES); // PER VERTEX NORMALS // TEXTURES if (!m->dot_texture.empty() && !m->face_index_texture.empty()) { glTexCoord2fv(&m->dot_texture[m->face_index_texture[i]].x); } // COLOR // VERTEX glEnd(); glDisable(GL_TEXTURE_2D); glEndList(); return listID; } Draw Scene

Slide 25

Slide 25 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 25 jgs Texture Environment Parameters glTexEnvf(target, pname, param); § 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

Slide 26

Slide 26 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 26 jgs Homework Review the Example on Blackboard https://github.com/javiergs/SER332/blob/master/Lecture23/main.cpp

Slide 27

Slide 27 text

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 27 jgs Reading § To get a general picture of texture mapping: oRed Book (pdf): ch9 p247 ex9-1 § Pixel storage format oRed Book ch8 Pixel Packing and Unpacking section § Required reading for texture mapping: oRed Book (pdf): ch9 p250-p274 oHearn Baker: ch10 p628-p633, p648-p658 oReading tip: mainly focus on the instructions discussed in the slides. You are also encouraged to read all other instructions.

Slide 28

Slide 28 text

jgs SER332 Introduction to Graphics Javier Gonzalez-Sanchez [email protected] Spring 2018 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.