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

SER332 Lecture 05

SER332 Lecture 05

Introduction to Graphics and Game Development
Vertex
(201804)

Javier Gonzalez-Sanchez

January 23, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER332
    Introduction to Graphics and Game
    Development
    Lecture 05: Vertex
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View full-size slide

  2. jgs
    OpenGL
    Drawing Geometric Objects

    View full-size slide

  3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
    jgs
    OpenGL Function Format
    glVertex3fv( v )
    Number of
    components
    2 - (x, y)
    3 - (x, y, z)
    4 - (x, y, z, w)
    Data Type
    b - byte
    ub - unsigned byte
    s - short
    us - unsigned short
    i - int
    ui - unsigned int
    f - float
    d - double
    Vector
    omit “v” for
    scalar form
    glVertex2f( x, y )

    View full-size slide

  4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
    jgs
    OpenGL Geometric Primitives
    All geometric primitives are specified by vertices, and put between the
    glBegin(mode) and glEnd()

    View full-size slide

  5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
    jgs
    Optimize Shared Vertex Data
    Triangle Strip
    § Describe a triangle with less than 3 vertices
    § Specify vertices in order of v0
    , v1
    , v2
    , … vn-1
    § Maintain the counter-clockwise order (for back face culling), the internal
    vertex order is something like: 0-1-2, 1-3-2, 2-3-4, 3-5-4,…
    (instead of 0-1-2, 1-2-3, 2-3-4,…)

    View full-size slide

  6. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
    jgs
    Optimize Shared Vertex Data
    Triangle Fan
    § Specify vertices in order of v0
    , v1
    , v2
    , … vn-1

    View full-size slide

  7. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
    jgs
    Vertex Attributes
    § Besides the position of vertices (specified by glVertex), there are several
    other attributes you can associate each vertex with:
    § glColor*() // shading
    § glNormal*() // lighting and shading
    § glTexCoord*() // texturing
    § You can put some other OpenGL instructions between glBegin and glEnd
    too.
    § Also you can put CPU instructions too, like for loop

    View full-size slide

  8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
    jgs
    Points, Lines, and Polygons
    There are some display state variables and drawing properties you can play
    with, like:
    § Point size: glPointSize()
    § Line width: glLinewidth()
    § Dash or dotted line: GL_LINE_STIPPLE, glLineStipple()
    § Polygon pattern: GL_POLYGON_STIPPLE, glPolygonStipple()

    View full-size slide

  9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
    jgs
    Project 1

    View full-size slide

  10. jgs
    OpenGL
    Shading

    View full-size slide

  11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
    jgs
    Shading
    A process of determining pixel’s colors from lighting computation(or simply
    color attributes)

    View full-size slide

  12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
    jgs
    Example
    /**
    * https://github.com/javiergs/SER332/blob/master/Lecture05/main.c
    */
    void myDisplay() {
    glClear(GL_COLOR_BUFFER_BIT); // clear the window
    glShadeModel(GL_FLAT); //SMOOTH or FLAT
    glBegin(GL_POLYGON); // fill connected polygon
    glColor3f(1.0f, 0.843f, 0.0f); glVertex2f(-0.7, 0.7);
    glColor3f(1.0f, 1.0f, 1.0f); glVertex2f(0.6, 0.7);
    glColor3f(0.0f, 0.0f, 0.0f); glVertex2f(-0.7, -0.6);
    glEnd();
    glShadeModel(GL_SMOOTH); //SMOOTH or FLAT
    glBegin(GL_POLYGON); // fill connected polygon
    glColor3f(1.0f, 0.843f, 0.0f); glVertex2f(0.7, 0.6);
    glColor3f(1.0f, 1.0f, 1.0f); glVertex2f(-0.6, -0.7);
    glColor3f(0.0f, 0.0f, 0.0f); glVertex2f(0.7, -0.7);
    glEnd();
    glFlush();
    }

    View full-size slide

  13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
    jgs
    Shading

    View full-size slide

  14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14
    jgs
    Reading
    Draw OpenGL Geometric Primitives between glBegin() and glEnd()
    § Required reading: Red Book (pdf): Ch2 p36 – p39
    § What kinds of OpenGL instructions can appear between glBegin() and glEnd()?
    § What functionality do they each provide?
    To specify polygon filling pattern
    § Required reading: Red Book (pdf): Chapter 2 p44
    § Also, read Red Book: example 2-6.
    § Suggested reading: Hearn Baker: chapter 3 (bitmap function: p. 143 – 144 & fill
    pattern function: p. 206 – 207)
    Shading
    § Required reading: Red Book (pdf): Chapter 4 p123-p125
    § Also example 4-1, about smooth shading (Gouraud shading)

    View full-size slide

  15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
    jgs
    Homework
    Start Programming
    practice, practice, practice...

    View full-size slide

  16. 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 full-size slide