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

SER332 Lecture 11

SER332 Lecture 11

Introduction to Graphics and Game Development
Projection Transformation
(201804)

Javier Gonzalez-Sanchez
PRO

February 20, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER332
    Introduction to Graphics and Game
    Development
    Lecture 11: Projection Transformation
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View Slide

  2. jgs
    Transformations
    Projection

    View Slide

  3. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
    § X, Y and Z axis
    § A plane (gray)
    § Several Pyramids
    (red, green, blue, and white faces)
    § Use arrows to navigate
    Let us move to a 3D World

    View Slide

  4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
    jgs
    Step 1
    Z-buffering. The Z-buffer stores how far a pixel is away from the camera in camera
    space (normalized device coordinate, more precisely. Typically, it ranges [0, 1]). Limited
    precision: 16-bit, 24-bit, and 32-bit depth value
    The Z-buffer is necessary to resolve visibility:
    a) Clear the z-buffer
    b) Enable the z-buffer
    Commands:
    § glClear( GL_DEPTH_BUFFER_BIT | … colors … );
    § glEnable( GL_DEPTH_TEST );
    § glutInitDisplayMode( GLUT_DEPTH | … colors … | … double … );

    View Slide

  5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
    jgs
    Example
    // https://github.com/javiergs/SER332/blob/master/Lecture11/main.c
    // main
    int main(int argc, char **argv) {
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA);
    glutInitWindowPosition(0, 0);
    glutInitWindowSize(800, 800);
    glutCreateWindow("3D");
    myInit();
    glutSpecialFunc(mySpecial);
    glutDisplayFunc(myDisplay);
    glutReshapeFunc(myReshape);
    glutMainLoop();
    return(0);
    }

    View Slide

  6. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
    // myInit
    void myInit() {
    glShadeModel (GL_SMOOTH);
    glEnable(GL_DEPTH_TEST);
    createDrawingList();
    }
    Example

    View Slide

  7. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
    // myInit
    void myInit() {
    glShadeModel (GL_SMOOTH);
    // glEnable(GL_DEPTH_TEST);
    createDrawingList();
    }
    Example

    View Slide

  8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
    jgs
    Example
    // myDisplay
    void myDisplay(void) {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glViewport(0, 0, width, height);
    // projection
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    // to be continue ...
    }

    View Slide

  9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
    jgs
    Step 2
    Set the projection:
    glMatrixMode(GL_PROJECTION);
    Two Options
    a) Orthographic Projection
    b) Perspective

    View Slide

  10. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
    jgs
    Orthographic Projection
    glOrtho (left, right, bottom, top, near, far)
    § Viewing volume is a box.
    § Objects appear same size irrespective of their distance from the camera.
    § Use it to show messages

    View Slide

  11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
    jgs
    Perspective Projection
    gluPerspective (fov, aspectratio, near, far)
    § Viewing volume is a truncated pyramid.
    § Farther objects appear small and closer objects appear big.
    § These commands calculates the projection matrix and multiplies the current
    projection matrix by it.

    View Slide

  12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
    jgs
    Example
    // myDisplay
    void myDisplay(void) {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glViewport(0, 0, width, height);
    // projection
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    // glOrtho(-10, 10, -10, 10, -10, 10); -- uncomment it to try
    gluPerspective(45, ratio, 1, 1000);
    // to be continue ...
    }

    View Slide

  13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
    jgs
    Example

    View Slide

  14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14
    jgs
    Notes
    § Changing the distance between the near and far clipping planes can have a
    big effect on the dimensions of the view volume and the angle of the
    projectors, making it tricky to set up a reasonable view volume for a given
    scene.
    § Where and how to incorporate it into your program?
    a) Set once per frame (put it in your display function). Some overhead,
    but safer
    b) Set once in init function, and update whenever window resizes

    View Slide

  15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
    jgs
    Step 3
    § Set the camera parameters before you define other transformations to
    model objects in the scene.
    § Set camera transformation once per frame (in case you have to move your
    camera interactively)
    § Try to restore camera matrix each frame. Do not accumulate the viewing
    matrix, the accumulation might be skewed due to accumulation of
    computational errors
    glMatrixMode(GL_MODELVIEW);

    View Slide

  16. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
    jgs
    gluLookAt
    § Viewing transformation can be specified using the command
    gluLookAt (
    eye_x, eye_y, eye_z,
    center_x, center_y, center_z,
    up_x, up_y, up_z
    )
    § It encapsulates a series of rotation and translation commands. Viewing
    transformation can be specified using following commands too. This,
    however, makes your life harder!
    § glTranslate {f,d} (x, y, z)
    § glRotate {f,d} (angle, x, y, z)
    § glScale {f,d} (x, y, z)

    View Slide

  17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
    jgs
    gluLookAt
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    gluLookAt(
    0.0, 1.0, 1.0, /* eye is at (0,1,1) */
    0.0, 1.0, 2.0, /* look at point (0,1,2), viewing direction vector is (0,0,1) */
    0.0, 1.0, 0.0 /* up is in positive Y direction */
    );

    View Slide

  18. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18
    // display
    void myDisplay(void) {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // projection
    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    //glOrtho(-10, 10, -10, 10, -10, 10);
    gluPerspective(45, ratio, 1, 1000);
    // view
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    gluLookAt(x, y, z, x + lx, y + ly, z + lz, 0.0f, 1.0f, 0.0f);
    // draw
    glColor3f(0.9f, 0.9f, 0.9f);
    glBegin(GL_QUADS);
    // vertex
    glEnd();
    // ...
    glutSwapBuffers();
    }

    View Slide

  19. jgs
    Bonus
    Display Lists

    View Slide

  20. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20
    jgs
    Creating A Complex Display List
    // …
    //create several pyramids
    GLuint worldDL = glGenLists(1);
    glNewList(worldDL, GL_COMPILE);
    for (int i = -3; i < 3; i++)
    for (int j = -3; j < 3; j++) {
    glPushMatrix();
    glTranslatef(i*10.0, 0, j * 10.0);
    glCallList(pyramidDL);
    glPopMatrix();
    }
    glEndList();
    // …

    View Slide

  21. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21
    jgs
    Reading
    3D geometric transformation & viewing:
    § (Required) Read Hearn Baker ch5 p261-p277, p283 – p291
    § (Required) Read Hearn Baker ch7 p344-p398, focus on perspective
    projection (pp 368-383), and 3D viewing in OpenGL (pp 383-389)
    Z-buffer:
    § Red Book (pdf): ch10, focus on depth buffer related content
    § Hearn Baker ch9 p531-p534
    Front / Back face culling:
    § Red Book (pdf): ch2 p43-p44

    View Slide

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