Transformations - ModelView

1. SER332
Introduction to Graphics and
Game Development
Lecture 06:
Transformations - ModelView
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
Stages of Vertex Transformation
1 2 3

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

5. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 5
Model (Local or World)

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

7. Javier Gonzalez-Sanchez | SER431 | Fall 2016 | 7
Translation then rotation Rotation then translation
Thinking about Transformations
OpenGL Transformations are specified in reverse order!

8. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 8
Thinking about Transformations
§ Will the snippets below generate same results?
§ Think of glRotate, glTranslate, glScale as matrix
multiplication to the current (ModelView) matrix
§ OpenGL does post-multiplication. So, if current
ModelView matrix is Mvold , calling glMultMatrixf(M)
will result in 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

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

10. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 10
Example 1: Transformations
/**
https://github.com/javiergs/SER332/blob/master/L06/
*/
#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
}
// main
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
}

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

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

13. Javier Gonzalez-Sanchez | SER332 | Spring 2017 | 13
Example 1: Transformations
Press the key ‘d’ or ‘D’
Press the key ‘y’ or ‘Y’

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

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

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