SER431 Lecture 04

Advanced Graphics
Skyboxes
(201808)

Transcript

1. jgs
   SER 431
   Advanced Graphics
   Lecture 04: Skyboxes
   Javier Gonzalez-Sanchez
   javiergs@asu.edu
   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
    javiergs@asu.edu
    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