SER332 Lecture 07

Introduction to Graphics and Game Development
ModelView Transformations
(201804)

Transcript

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

   View Slide

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

   View Slide

3. jgs
   OpenGL
   Transformations
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 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)
    

    View Slide

11. 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
    }
    

    View Slide

12. 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();
    }
    

    View Slide

13. 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;
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
    jgs
    Homework
    Start Programming
    practice, practice, practice...
    

    View Slide

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

    View Slide