Transformations - ViewPort

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

2. Part 4: OpenGL
Transformations

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

4. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 4
Viewport Transformation
The viewport indicates the size and the location of the
available screen area.
gluViewport (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.

5. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 5
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();
}
// Full example at https://github.com/javiergs/SER332/blob/master/L07

6. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 6
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

7. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 7
Example 2: Viewport

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

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

10. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 10
Example 3: window resize (snippet)
// Full example at https://github.com/javiergs/SER332/blob/master/L07
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);
}
}

11. Javier Gonzalez-Sanchez | SER431 | Fall 2016 | 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();
}

12. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 12
Example 3: window resize

13. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 13
Reading
• In general, you should :
§ 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
• A relatively quicker path (just to survive the 1st project):
§ Required Reading: Red Book (pdf): 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 (pdf): 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

14. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 14
Homework
Start Programming
practice, practice, practice...

15. SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
javiergs@asu.edu
Spring 2017
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.