This document discusses transformations in OpenGL graphics. It explains that transformations are applied in reverse order and can include translation, rotation, and scaling. The key stages are the model-view transformation, which combines the model and view, and the projection transformation, which maps the scene to the screen. Examples show how to apply transformations using OpenGL functions like glTranslate, glRotate, and glScale to manipulate 3D objects. Readings are recommended from graphics books and specifications to better understand 2D and 3D transformations and viewing.

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.