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

jgs OpenGL Transformations

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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4 jgs Viewport Transformation The viewport indicates the size and the location of the available screen area. glViewport (x, y, width, height) § x - The lower-left corner of the viewport rectangle, in pixels. The default is (0,0). § y - The lower-left corner of the viewport rectangle, in pixels. The default is (0,0). § width - The width of the viewport. When an OpenGL context is first attached to a window, width and height are set to the dimensions of that window. § height - The height of the viewport. When an OpenGL context is first attached to a window, width and height are set to the dimensions of that window.

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs Example 2: Viewport (snippet) void display() { glViewport(0, 0, 250, 250); // the first viewport glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 1.0, -1.0, 1.0); glClear(GL_COLOR_BUFFER_BIT); glShadeModel(GL_FLAT); // SMOOTH or FLAT glBegin(GL_TRIANGLES); glColor3f(1.0, 0.0, 0.0); glVertex2f(0.0f, 0.0f); glColor3f(0.0, 1.0, 0.0); glVertex2f(0.5f, 0.5f); glColor3f(0.0, 0.0, 1.0); glVertex2f(0.5f, 0.0f); glEnd(); glViewport(250, 250, 250, 250); // the second viewport glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 1.0, -1.0, 1.0); glShadeModel(GL_SMOOTH); // SMOOTH or FLAT glBegin(GL_TRIANGLES); glColor3f(1.0, 0.0, 0.0); glVertex2f( 0.0f, 0.0f); glColor3f(0.0, 1.0, 0.0); glVertex2f(-0.5f,-0.5f); glColor3f(0.0, 0.0, 1.0); glVertex2f(-0.5f, 0.0f); glEnd(); glFlush(); }

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs Example 2: Viewport 500 500 0, 0 250,250 500,500 § window § viewport § your units -0.5, -0.5 -0.5,0 0,0 0.5,0 0,0 0.5,0.5 0, 0

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7 jgs Example 2: Viewport

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 jgs Example 2: Viewport small window 250 x 250 large window 1265 x 790

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs More Viewport Transformation § Window size & viewport size has to cooperate with the projection transformation. § Aspect ratio and distortion ratio = width / height; //cast int to float glViewport (x, y, width, height); gluOrtho2D (left, right, bottom, top); // and gluOrtho

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs Example 3: window resize // Full example at // https://github.com/javiergs/SER332/blob/master/Lecture08/example_two.c void reshapeWindow(int width, int height) { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); float aspectRatio = (float)width / (float)height; if (width >= height) { gluOrtho2D (-defaultWidth*aspectRatio, defaultWidth*aspectRatio, -defaultHeight, defaultHeight); } else { gluOrtho2D (-defaultWidth, defaultWidth, -defaultHeight/aspectRatio, defaultHeight / aspectRatio); } }

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 // myDisplay void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); glShadeModel(GL_FLAT); // SMOOTH or FLAT glBegin(GL_TRIANGLES); glColor3f(1.0, 0.0, 0.0); glVertex2f(0.0f, 0.0f); glColor3f(0.0, 1.0, 0.0); glVertex2f(50.0f, 50.0f); glColor3f(0.0, 0.0, 1.0); glVertex2f(50.0f, 0.0f); glEnd(); glFlush(); }

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12 jgs Example 3: window resize

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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 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 | 15 jgs Homework 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.