
Graphics Lecture: 3D Surfaces, Projections, and Matrices
Explore the essentials of working with 3D surfaces in computer graphics, understand the process of projections in OpenGL, and learn about matrices for different types of projections like orthographic and oblique in this comprehensive lecture series. Dive into the concept of perspective normalization for realistic rendering effects.
Download Presentation

Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Graphics CSCI 343, Fall 2023 Lecture 13 Viewing II--Projection 1
A Note on 3D Surfaces When we create 3D surfaces, we need a way to specify the front and back of the surface, so that we only display what s necessary. This will be important for shading and texture mapping. In OpenGL, the order of vertices determines the front face of the surface using the right-hand rule. p0-p1-p2-p3 correctly specifies the outer face as the front. p2 p3 p3-p2-p1-p0 specifies the inner face as front. p0 p1 Make sure the triangles conform to this order as well. 2
Projection Normalization OpenGL accomplishes projections by the following steps: 1. Transform clipping volume to the canonical volume. 2. Use orthographic projection to project to the image plane. Orthographic Projection: (1, 1, -1) (xmax, ymax, zmin) 2 (-1, -1, 1) (xmin, ymin, zmax) Canonical Volume Clipping Volume 3
Transforming the clipping volume To transform the clipping volume for orthographic projection we must: 1. Translate it so it is centered on the origin. 2. Scale it so the length of each side is 2. Translation: Scaling: 4
Parallel Oblique Projection x (xp, 0) xp = x - z cot (x, z) z y (y, z) yp = y - z cot (yp, 0) z P = ? 5
Matrices for Oblique Projection -cotq -cotf 0 0 -cotq -cotf 1 0 1 0 0 0 0 1 0 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 0 1 P = = = MORTHH(q,f) Shear Matrix To transform to canonical volume, use scale and translation after shear: P = MORTHSTH( ) 6
Orthographic and Oblique projections Orthographic Projection: 1) Translate clipping volume to origin 2) Scale sides of clipping volume to be 2x2x2 M = MORTHOST Oblique Projection: 1) Shear clipping volume to be rectangular box. 2) Translate to origin 3) Scale sides to 2x2x2 M = MORTHOSTH 7
Perspective Normalization Consider a perspective projection where the viewing angle is 90 deg and the focal distance is 1. x x = -z 1 0 0 0 0 1 0 0 0 0 1 -1 0 0 0 0 PPROJ= z -1 Clipping Volume enclosed by: x = +/- z, y = +/- z, zmin < z < zmax x = z 8
Splitting the projection matrix To fit this in the canonical volume, we want to find a matrix, N, such that: PPROJ = MORTHN We know that we will have to translate along the Z axis and scale the Z components. Try the following: 1 -x/z -y/z -a -b/z 1 1 0 0 0 0 1 0 0 0 0 a -1 0 0 b 0 x y z x y p''= p'= Np = = az + b -Z 9
Fitting the canonical volume Sides of canonical volume At x = -z, x'' = (-(-z/z)) = 1 At x = z, x'' = (-z/z) = -1 The same is true for y. For zmax and zmin: zmin'' = -( + /zmin) = -1 zmax'' = -( + /zmax) = +1 Solve for and : a =- zmax+ zmin zmax-zmin ( ( ) 2zmaxzmin zmax-zmin b = ( ) ) 10
Scaling the X and Y edges If the perspective projection does not have a 90 deg viewing angle: We must first scale x and y so the sides are at x = +/-z, y=+/-z x (xmax, zmax) S = ? z (xmin, zmax) PPROJ = MORTHNS 11
Dealing with a non-centered clipping volume If the frustum that defines the clipping volume is not a right frustum (i.e. the near and far planes are not centered on the Z axis), we must first Shear the clipping volume to center these. cotq =(xmax+ xmin) x (xmax, zmax) Shear along x: 2zmax cotf =(ymax+ ymin) z Shear along y: 2zmax (xmin, zmax) 12
The Shear Matrix -(xmax+ xmin) 2zmax -(ymax+ ymin) 2zmax 1 0 1 0 0 -cotq -cotf 1 0 1 0 0 0 0 1 0 0 0 0 0 1 H q,f ( )= 0 1 0 = 0 0 0 0 0 1 Note that this matrix transforms the center point: p'= 0,0,zmax ( ) xmin+ xmax 2 ,ymin+ ymax p= to ,zmax 2 Full Perspective Projection: P = MORTHONSH 13
Projections and Shadows In simple situations we can generate shadows with a projection trick. Suppose we have a light source at (xa, ya, za) The "shadow" of a polygon is its projection onto the x,z plane. y (xa, ya, za) x z 14
Projecting a shadow 1. Translate the image so that the light source is at the origin. T(-xa, -ya, -za) 2. Compute the projection along the Y axis, with the focal distance equal to -ya. 3. Translate back to the original position: T(xa, ya, za) Step 2: Projection Matrix: y 1 0 0 0 0 1 0 0 0 1 0 0 0 0 0 x M = z -ya -1/ya 15
Shadow projection in OpenGL Setting up the matrix, M: light = vec3(0.0, 2.0, 0.0); m = mat4(); m[3][3] = 0; m[3][1] = -1/light[1]; Rendering a square: // model-view matrix for square modelViewMatrix = mat4( ); modelViewMatrix = mult(modelViewMatrix, rotate(30.0, 1.0, 0.0, 0.0)); // send color and matrix for square then render gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) ); gl.uniform4fv(fColor, flatten(red)); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
Drawing the shadow // rotate light source light[0] = Math.sin(theta); light[2] = Math.cos(theta); // model-view matrix for shadow then render modelViewMatrix = mult(modelViewMatrix, modelViewMatrix = mult(modelViewMatrix, m); modelViewMatrix = mult(modelViewMatrix, // send color and matrix for shadow gl.uniformMatrix4fv( modelViewMatrixLoc, false, gl.uniform4fv(fColor, flatten(black)); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); translate(light[0], light[1], light[2])); translate(-light[0], -light[1], -light[2])); flatten(modelViewMatrix) );