Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SER332 Lecture 23

SER332 Lecture 23

Introduction to Graphics and Game Development
Lab 07 (Materials)
(201804)

Javier Gonzalez-Sanchez

April 17, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

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

    View full-size slide

  2. jgs
    Project 4

    View full-size slide

  3. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. jgs
    Textures
    Create or Load Textures

    View full-size slide

  7. 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
    }

    View full-size slide

  8. 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
    );
    }

    View full-size slide

  9. 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);
    }

    View full-size slide

  10. 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]
    # #

    View full-size slide

  11. 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);

    View full-size slide

  12. 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

    View full-size slide

  13. 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.

    View full-size slide

  14. 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);
    }

    View full-size slide

  15. 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

    View full-size slide

  16. jgs
    Textures
    Add Texture Coordinates

    View full-size slide

  17. 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
    }

    View full-size slide

  18. 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

    View full-size slide

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

    View full-size slide

  20. 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)

    View full-size slide

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

    View full-size slide

  22. jgs
    Textures
    Draw Scene

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

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

    View full-size slide

  26. 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.

    View full-size slide

  27. 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.

    View full-size slide