1. 1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

2. 2 Orthogonal Projection Matrices Ed Angel Professor Emeritus of Computer Science University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

3. 3 Objectives Derive the projection matrices used for standard orthogonal projections Introduce oblique projections Introduce projection normalization Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

4. 4 Normalization Rather than derive a different projection matrix for each type of projection, we can convert all projections to orthogonal projections with the default view volume This strategy allows us to use standard transformations in the pipeline and makes for efficient clipping Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

5. 5 Pipeline View modelview transformation projection transformation perspective division clippingprojection nonsingular against default cube 3D  2D Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 4D  3D (clipping volume now the default cube)

6. 6 Notes We stay in four-dimensional homogeneous coordinates through both the modelview and projection transformations ­Both these transformations are nonsingular ­Default to identity matrices (orthogonal view) Normalization lets us clip against simple cube regardless of type of projection Delay final projection until end ­Important for hidden-surface removal to retain depth information as long as possible Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

7. 7 Orthogonal Normalization ortho(left,right,bottom,top,near,far) normalization  find transformation to convert specified clipping volume to default Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

8. 8 Orthogonal Matrix Two steps ­Move center to origin T(-(left+right)/2, -(bottom+top)/2,(near+far)/2)) ­Scale to have sides of length 2 S(2/(right-left),2/(top-bottom),2/(near-far)) P = ST = Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 Remember that near and far are positive values Maps plane z= -far to the plane z=1 (and z= -near to z= -1)

9. 9 Important note about MV.js There are errors in the implementation of the ortho() function in the original distribution of MV.js (available on the resource site of the reference book). Here is a correct implementation : Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 function ortho( left, right, bottom, top, near, far ) { if ( left == right ) { throw "ortho(): left and right are equal"; } if ( bottom == top ) { throw "ortho(): bottom and top are equal"; } if ( near == far ) { throw "ortho(): near and far are equal"; } var w = right - left; var h = top - bottom; var d = far - near; var result = mat4(); result[0][0] = 2.0 / w; result[1][1] = 2.0 / h; result[2][2] = -2.0 / d; // next three lines were modified to be consistent with well-known orthographic projection matrix used in OpenGL // (see http://www.songho.ca/opengl/gl_projectionmatrix.html#ortho)http://www.songho.ca/opengl/gl_projectionmatrix.html#ortho result[0][3] = -(left + right) / w; // note: original code was result[0][3] = (left + right) / w; result[1][3] = -(top + bottom) / h; // note: original code was result[1][3] = (top + bottom) / h; result[2][3] = -(near + far) / d; // note: original code was result[2][3] = (near + far) / d; return result; }

10. 10 Final Projection Set z =0 Equivalent to the homogeneous coordinate transformation Hence, general orthogonal projection in 4D is Note that clipping occurs before M orth is applied M orth = Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 P = M orth ST

11. 11 Oblique Projections The OpenGL projection functions cannot produce general parallel projections such as However if we look at the example of the cube it appears that the cube has been sheared Oblique Projection = Shear + Orthogonal Projection Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

12. 12 General Shear top view side view Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

13. 13 Shear Matrix xy shear ( z values unchanged) Projection matrix General case: H( ,  ) = P = M orth H( ,  ) P = M orth STH( ,  ) Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

14. 14 Equivalency Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

15. 15 Effect on Clipping The projection matrix P = STH transforms the original clipping volume to the default clipping volume top view DOP near plane far plane object clipping volume z = -1 z = 1 x = -1 x = 1 distorted object (projects correctly) Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015