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

jgs OpenGL Drawing Geometric Objects

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 )

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()

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,…)

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

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

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()

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

jgs OpenGL Shading

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

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

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

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)

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

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.