Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

jgs Transformations Projection

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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 … );

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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);

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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 */ );

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

jgs Bonus Display Lists

Slide 20

Slide 20 text

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(); // …

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.