jgs SER332 Introduction to Graphics and Game Development Lecture 17: Lab 05 (OBJ Files) Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

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

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

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 = …

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

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

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

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

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

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"

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/

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

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.

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.

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.

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

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

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.