SER332 Lecture 08

Introduction to Graphics and Game Development
Viewport Transformation
(201804)

Transcript

1. jgs
   SER332
   Introduction to Graphics and Game
   Development
   Lecture 08: Viewport Transformation
   Javier Gonzalez-Sanchez
   javiergs@asu.edu
   PERALTA 230U
   Office Hours: By appointment
   

   View Slide

2. jgs
   OpenGL
   Transformations
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
    jgs
    Homework
    practice, practice, practice...
    

    View Slide

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