SER332 Lecture 11

Introduction to Graphics and Game Development
Projection Transformation
(201804)

Transcript

1. jgs
   SER332
   Introduction to Graphics and Game
   Development
   Lecture 11: Projection Transformation
   Javier Gonzalez-Sanchez
   javiergs@asu.edu
   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
    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