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

SER332 Lecture 17

SER332 Lecture 17

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

Javier Gonzalez-Sanchez
PRO

March 22, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

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

    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
    [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 Slide