Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SER332 Lecture 08

SER332 Lecture 08

Introduction to Graphics and Game Development
Viewport Transformation
(201804)

Javier Gonzalez-Sanchez
PRO

February 08, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER332
    Introduction to Graphics and Game
    Development
    Lecture 08: Viewport Transformation
    Javier Gonzalez-Sanchez
    [email protected]
    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
    [email protected]
    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