SER332 Lecture 05

Introduction to Graphics and Game Development
Vertex
(201804)

Transcript

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

   View Slide

2. jgs
   OpenGL
   Drawing Geometric Objects
   

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

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

   View Slide

10. jgs
    OpenGL
    Shading
    

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

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

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

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

    View Slide

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