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

SER431 Lecture 04

SER431 Lecture 04

Advanced Graphics
Skyboxes
(201808)

Javier Gonzalez-Sanchez
PRO

August 27, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER 431
    Advanced Graphics
    Lecture 04: Skyboxes
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View Slide

  2. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 1
    jgs
    Previously

    View Slide

  3. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2
    jgs
    A box

    View Slide

  4. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3
    jgs
    A box
    // 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);
    // continue in the next slide
    3
    2
    1
    0

    View Slide

  5. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 4
    jgs
    // 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;
    }
    A Texture Outside the Box

    View Slide

  6. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5
    jgs
    What about inside the box?

    View Slide

  7. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6
    jgs
    Load Textures
    // 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 Slide

  8. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 7
    jgs
    A Texture for the Horizon

    View Slide

  9. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 8
    jgs
    A texture for a Room
    https://www.facebook.com/asuphotos/photos/a.1636426986668999/1691991784445852/?type=3&theater

    View Slide

  10. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9
    jgs
    Texture Sources
    § Azimuth Chrome Plugin
    https://chrome.google.com/webstore/detail/azimuth-download-facebook/
    https://www.360toolkit.co
    § Skyboxes Textures
    http://www.custommapmakers.org/skyboxes.php

    View Slide

  11. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 10
    jgs
    Add a Texture to a Box
    void init() {
    // CREATE MESH DATA STRUCTURES
    mesh_cube = createCube();
    // TEXTURES (Lecture 23 in SER 332)
    GLuint texture_array[6];
    texture_from_file(&texture_array[0], "../../bmp files/top.bmp");
    texture_from_file(&texture_array[1], "../../bmp files/left.bmp");
    // ...
    // DISPLAY LIST
    skybox= meshToDisplayList(1, mesh_cube, texture_array);
    // CONFIGURE LIGHT
    }

    View Slide

  12. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11
    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;
    }
    Add a Texture to a Box

    View Slide

  13. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 12
    jgs
    Texture inside a Box

    View Slide

  14. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13
    jgs
    Texture inside a Box
    https://www.facebook.com/asuphotos/photos/a.1636426986668999/1691991784445852/?type=3&theater

    View Slide

  15. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14
    jgs
    Quiz 1
    § Work with your team
    § Create a Skybox
    § Submit your source code on Blackboard. Due: August 29, 11:59 PM

    View Slide

  16. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15
    jgs
    Test Yourselves
    Combine a sky box and a terrain. Allow the camera to be moved.

    View Slide

  17. jgs
    SER431 Advanced Graphics
    Javier Gonzalez-Sanchez
    [email protected]
    Fall 2018
    Disclaimer. These slides can only be used as study material for the class SER431 at ASU. They cannot be
    distributed or used for another purpose.

    View Slide