SER332 Lecture 17

Introduction to Graphics and Game Development
Lab 05 (OBJ Files)
(201804)

Transcript

1. jgs
   SER332
   Introduction to Graphics and Game
   Development
   Lecture 17: Lab 05 (OBJ Files)
   Javier Gonzalez-Sanchez
   javiergs@asu.edu
   PERALTA 230U
   Office Hours: By appointment
   

   View Slide

2. jgs
   Load data in a Mesh
   Reading a File in C/C++
   

   View Slide

3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
   jgs
   OBJ File Format
   v 0.0 2.0 0.0
   v 0.0 -2.0 0.0
   v -1.0 0.0 -1.0
   v 1.0 0.0 -1.0
   v 1.0 0.0 1.0
   v -1.0 0.0 1.0
   f 1 4 3
   f 1 3 6
   f 1 6 5
   f 1 5 4
   f 2 3 4
   f 2 6 3
   f 2 5 6
   f 2 4 5
   

   View Slide

4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
   jgs
   Mesh Data Structure
   Normal Coordinates
   n
   0
   x = … y = … z = …
   n
   1
   x = … y = … z = …
   n
   2
   x = … y = … z = …
   n
   3
   x = … y = … z = …
   n
   4
   x = … y = … z = …
   n
   5
   x = … y = … z = …
   Normal Index Indices
   ni
   0
   (f
   0
   )
   ni
   1
   (f
   1
   )
   ni
   2
   (f
   2
   )
   ni
   3
   (f
   3
   )
   ni
   4
   (f
   4
   )
   ni
   5
   (f
   5
   )
   Face Indices
   f
   0
   0, 4, 3
   f
   1
   0, 3, 1
   f
   2
   1, 3, 2
   f
   3
   0, 5, 6
   f
   4
   0, 6, 4
   f
   5
   4, 6, 7
   Vertex Coordinates
   V
   0
   x = … y = … z = …
   V
   1
   x = … y = … z = …
   V
   2
   x = … y = … z = …
   V
   3
   x = … y = … z = …
   V
   4
   x = … y = … z = …
   V
   5
   x = … y = … z = …
   V
   6
   x = … y = … z = …
   V
   7
   x = … y = … z = …
   Texture Indices
   ti
   0
   ti
   1
   ti
   2
   ti
   3
   ti
   4
   ti
   5
   Texture Coordinates
   t
   0
   s = … t = …
   t
   1
   s = … t = …
   t
   2
   s = … t = …
   t
   3
   s = … t = …
   t
   4
   s = … t = …
   t
   5
   s = … t = …
   

   View Slide

5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
   jgs
   Example
   // full example:
   // https://github.com/javiergs/SER332/tree/master/Lecture17
   // mesh data structure
   typedef Vec3 Vec3f;
   typedef Vec2 Vec2f;
   struct Mesh {
   // vertex
   vector dot_vertex;
   vector dot_normal;
   vector dot_texture;
   // faces
   vector face_index_vertex;
   vector face_index_normal;
   vector face_index_texture;
   };
   

   View Slide

6. jgs
   Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
   // load a mesh from an OBJ file
   Mesh* loadFile(const char* file) {
   // ...
   switch (current_line[0]) {
   case'v':
   float x, y, z;
   switch (current_line[1]) {
   case 'n':
   sscanf_s(current_line, "vn %f %f %f", &x, &y, &z);
   break;
   case 't':
   sscanf_s(current_line, "vt %f %f", &x, &y);
   m->dot_texture.push_back(Vec2f(x, y));
   break;
   default:
   sscanf_s(current_line, "v %f %f %f", &x, &y, &z);
   m->dot_vertex.push_back(Vec3f(x, y, z));
   break;
   }
   break;
   // ...
   }
   

   View Slide

7. jgs
   Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
   // return a displayList id with the mesh elements
   GLuint meshToDisplayList(Mesh* m, int id) {
   GLuint listID = glGenLists(id);
   glNewList(listID, GL_COMPILE);
   glBegin(GL_TRIANGLES);
   for (unsigned int i = 0; i < m->face_index_vertex.size(); i++) {
   if (!m->dot_normal.empty() && !m->face_index_normal.empty())
   glNormal3fv(&m->dot_normal[m->face_index_normal[i]].x);
   if (!m->dot_texture.empty() && !m->face_index_texture.empty())
   glTexCoord2fv(&m->dot_texture[m->face_index_texture[i]].x);
   // color
   Vec3f offset = (m->dot_vertex[m->face_index_vertex[i]]);
   glColor3f(fabs(sin(offset.x)), fabs(cos(offset.y)), fabs(offset.z));
   glVertex3fv(&m->dot_vertex[m->face_index_vertex[i]].x);
   }
   glEnd();
   glEndList();
   return listID;
   }
   

   View Slide

8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
   jgs
   Example
   

   View Slide

9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
   jgs
   OBJ files
   

   View Slide

10. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
    jgs
    Step 1
    § Download and run this source code:
    https://github.com/javiergs/SER332/blob/master/Lecture17/
    § You will need Ilmbase and STL libraries configured to be able to compile
    and run.
    § Also, check line 78.
    Mesh* mesh = loadFile("../obj files/f-16.obj");
    § If the file f-16.obj is not in the correct folder the program execution will fail.
    You could use absolute paths, such as "c:/f-16.obj"
    

    View Slide

11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
    jgs
    Step 2
    • Download the OBJ files al.obj , porsche.obj, and house.obj
    https://github.com/javiergs/SER332/blob/master/Lecture17/obj files/
    

    View Slide

12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
    jgs
    Step 3
    1. Remove the f-16.OBJ, and add house.obj, porsche.obj, and al.obj
    2. We use a display list to store each OBJ file.
    § In Line 27 you have : GLuint displayList;
    § The variable displayList stores the f-16.obj.
    § We can used it to store house.obj
    § But, we need 2 more variables to store porsche.obj and al.obj
    § Declare 2 more variables type GLuint
    

    View Slide

13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
    jgs
    Step 3
    3. In the init() method (line 178), we call the method loadFile()
    to read an OBJ file and store it in a Mesh data structure instance, such as:
    Mesh* mesh = loadFile("../obj files/f-16.obj");
    4. Replace f-16.OBJ for house.OBJ
    5. Create 2 more Mesh* variables and load on them porshe.OBJ and
    al.OBJ.
    

    View Slide

14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14
    jgs
    Step 3
    4. Also, inside the init()method (line182). The method
    meshToDisplayList is called to create a new display list using the data
    stored in the mesh data structure passed as a parameter, such as:
    displayList = meshToDisplayList(mesh, 1);
    Add to more lines like that to transform the 3 Mesh variables that
    you create before in the three display list. Use the variables names
    that you declared in step 2.
    

    View Slide

15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
    jgs
    Step 3
    5. Finally, inside the display() method (line 268), an OBJ file can be draw
    calling the method glCallList()and passing as a parameter the list that
    we want to show.
    Add two more calls to the glCallList()method to display the 2 extra
    display list that you added.
    6. Compile and run. You should be able to see 3 object in your 3D world.
    

    View Slide

16. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
    jgs
    Step 4
    § Use rotation, translation and scale to make all objects be on the floor.
    Not floating around.
    § Also, the size of the objects should be as shown below: “house” is bigger
    than “porsche”, and “porsche” higher that “al”.
    

    View Slide

17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
    jgs
    Step 5
    § Make the porsche rotate around the house
    § Make possible to control al position with the arrows keys.
    Forward
    Backward
    Left
    Right
    

    View Slide

18. jgs
    SER332 Introduction to Graphics
    Javier Gonzalez-Sanchez
    javiergs@asu.edu
    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 Slide