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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2 jgs Announcement § Project 1 is available § Due by Feb 15, 11:59 PM

jgs OpenGL Transformations

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4 jgs Stages of Vertex Transformation 1 2 3

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs Transformations Transformation Model-View glRotate*() glTranslate*() glScale*() glLookAt() Projection glOrtho2D*() glOrtho() glPerspective() Viewport glViewPort()

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs Model (Local or World)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7 jgs ModelView Transformation § glTranslate{fd}(TYPE x, TYPE, y, TYPE, z) § glRotate{fd}(TYPE angle, TYPE x, TYPE, y, TYPE, z) § glScale{fd}(TYPE x, TYPE, y, TYPE, z) Translate Rotate Scale

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 jgs ModelView Transformation § Translation then rotation § Rotation then translation § OpenGL transformations are specified in reverse order

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs ModelView Transformation § Will the snippets below generate same results? § Think of glRotate, glTranslate, glScale as matrix multiplication to the current (ModelView) matrix § OpenGL does post-multiplication: MVnew = MVold * M glTranslatef (10.0f, 0.0f, 0.0f); glRotatef (45.0f, 0.0f, 0.0f, 1.0f); // draw a cube glRotatef (45.0f, 0.0f, 0.0f, 1.0f); glTranslatef (10.0f, 0.0f, 0.0f); // draw a cube

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs Projection Transformations § determine how a scene is mapped onto the computer screen. § The projection transformation specifies the mechanics of how the mapping should occur, and § 2D Orthographic Projection: Viewing volume is a clipping rectangle. § gluOrtho2D (left, right, bottom, top)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 jgs Example // https://github.com/javiergs/SER332/blob/master/Lecture07/main.c #include "glut.h" int year = 0, day = 0; void myInit() { glClearColor(0.764f, 0.129f, 0.282f, 1.0); // maroon clear color // projection transformations glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-5.0, 5.0, -5.0, 5.0); // units inside } void main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutCreateWindow("simple"); myInit(); glutDisplayFunc(myDisplay); glutKeyboardFunc(myKeyboard); glutMainLoop(); //event loop }

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12 void myDisplay(void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); glPushMatrix(); /* draw 1 */ glBegin(GL_POLYGON); // fill connected polygon glColor3f(1.0f, 0.843f, 0.0f); glVertex2f(-0.7, 0.7); // vertices of the triangl 1 glVertex2f(0.6, 0.7); glVertex2f(-0.7, -0.6); glEnd(); /* draw 2 */ glRotatef((GLfloat)year, 0.0, 0.0, 1.0); glTranslatef(2.0, 0.0, 0.0); glRotatef((GLfloat)day, 0.0, 1.0, 0.0); glBegin(GL_POLYGON); glColor3f(1.0f, 0.843f, 0.0f); glVertex2f(0.7, 0.6); // vertices of the triangle 2 glVertex2f(-0.6, -0.7); glVertex2f(0.7, -0.7); glEnd(); glPopMatrix(); glFlush(); }

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13 void myKeyboard(unsigned char key, int x, int y) { switch (key) { case 'd': day = (day + 10) % 360; glutPostRedisplay(); break; case 'D': day = (day - 10) % 360; glutPostRedisplay(); break; case 'y': year = (year + 5) % 360; glutPostRedisplay(); break; case 'Y': year = (year - 5) % 360; glutPostRedisplay(); break; default: break; } }

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 jgs Example Press the key ‘d’ or ‘D’ Press the key ‘y’ or ‘Y’

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs General Reading § Read Hearn Baker chapter 5 p232-p252 (for 2D geometric transformation) § Read Hearn Baker chapter 6 p297-p305 (for 2D viewing) § Extend your understanding of 2D transformation and viewing to 3D § Read Red Book: chapter 3

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16 jgs Reading for Project 1 § Required Reading: Red Book: ch3 p73-p78, shows you the underlying OpenGL matrix multiplication scheme. This is essential, though not obvious. § Tips: there is no 2D translation, rotation and scale in OpenGL. Instead, think of your 2D scene as projected onto x-y plane § You may not have to set up your camera and call gluLookAt in your 1st 2D project, but do read about 3D viewing for your future projects § Required Reading: Red Book: ch3 p86-p92 § Tips: Do not mess with glDepthRange, if you are not confident about Z-depth value § Suggested Reading: example 3-4 to understand matrix stack § Suggested Reading: example 3-6, 3-7 to assembly everything in Chapter 3 § A summary of GLUT functions you may need to create a display application: Hearn Baker p341

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17 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.