Fall 25 M ss =M screen * M ersective * M view What is Persective? A mechanism for ortraing 3D in 2D True Persective corresons to rojection onto a lane True Persective corresons to an ieal camera image Comuter Grahics CS46
Fall 25 Persective (Mural) Games M C Esher, Another Worl II (947) Persective M.C. Escher, Ascening an Descening (96) Comuter Grahics CS46 2
Fall 25 M. C. Esher M.C. Escher, Ascening an Descening (96) M. C. Esher Persective is local Persective consistenc is not transitive Nonlanar (herbolic) rojection Comuter Grahics CS46 3
Fall 25 Nonlanar (Herbolic) Projection M C Esher, Heaven an Hell Nonlanar (Herbolic)Projection M C Esher, Heaven an Hell Comuter Grahics CS46 4
Fall 25 Curvilinear Projection True Persective in 2D (,) h Comuter Grahics CS46 5
Fall 25 True Persective in 2D h (,) h h True Persective in 2D? 2 Comuter Grahics CS46 6
Fall 25 True Persective in 2D Geometr Same for Ee at Origin Screen Plane (,) h Comuter Grahics CS46 7
Fall 25 What Haens to Secial Points? What is this oint?? Observe, We see that Let s Look at a Limit n n n lim n n on -ais Comuter Grahics CS46 8
Fall 25 Where oes Ee Point Go? It gets sent to - on -ais Where oes + go on -ais go? What haens to +? It comes back to virtual ee oint! Comuter Grahics CS46 9
Fall 25 What Does This Mean? Pencil of Lines Becomes Parallel Comuter Grahics CS46
Fall 25 Parallel Lines Become a Pencil of Lines! Parallel Lines Become Pencil of Lines! Comuter Grahics CS46
Fall 25 What Does This Mean? True Persective in 2D Comuter Grahics CS46 2
Fall 25 True Persective in 2D Viewing Frustum Comuter Grahics CS46 3
Fall 25 True Persective in 2D True Persective in 2D Comuter Grahics CS46 4
Fall 25 What haens for large? lim Projection Becomes Orthogonal: Right Thing Haens (,) h= Comuter Grahics CS46 5
Fall 25 Projections an Normalization The efault rojection in the ee (camera) frame is orthogonal For oints within the efault view volume = = z = Most grahics sstems use view normalization All other views are converte to the efault view b transformations that etermine the rojection matri Allows use of the same ieline for all views Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Homogeneous Coorinate Reresentation efault orthograhic rojection = = = M z = w = M = In ractice, we can let M = I an set the z term to zero later Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 6
Fall 25 WebGL Orthogonal Viewing ortho(left,right,bottom,to,near,far) near an far measure from camera Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 View Frustum Derecate =to FOV -z z=-near Parameterize b: [glfrustum frustum()] z=-far left,right,to,bottom (generall smmetric) near,far Or, when smmetric, b: [glupersective ersective() ] Fiel of view (FOV), asect ratio near,far Asect ratio is the / ratio of the final islae image. Common values: 4/3 for TV & ol movies;.66 for cartoons & Euroean movies; 6/9 for American movies & HDTV; 2.35 for eic movies right left asect ratio= to bottom right to tan(fov /2) to near Comuter Grahics CS46 7
Fall 25 OenGL using MV.js erective(fov, asect, near, far) Fiel of view in the irection, FOV, (vertical fiel-of-view) Asect ratio, a, shoul match winow asect ratio Near an far cliing lanes, n an f Defines a smmetric view volume frustum(left,right,bottom,to,near,far) Give the near an far cli lane, an laces where the other cli lanes cross the near lane Defines the general case Use for stereo viewing, mostl Persective to Frustum These functions on t a basic functionalit, the are just more convenient So how oes Persective convert to Frustum? Smmetric, so onl nee t an n FOV / 2 t? z n Comuter Grahics CS46 8
Fall 25 Persective to Frustum These functions on t a basic functionalit, the are just more convenient So how oes Persective convert to Frustum? Smmetric, so onl nee t an n FOV / 2 t? z n right left asect ratio= to bottom right to tan(fov /2) to near Demo Projection Tutor Comuter Grahics CS46 9
Fall 25 M ss =M screen * M ersective * M view Projection Plane 3D Projection (,,z) (,,-) h z 4 Comuter Grahics CS46 2
Fall 25 Comuter Grahics CS46 2 4 3D Projection z (,,z) h Projection Plane (,,-) This image cannot currentl be islae. Z X X X Z X * ' ' Z Y Y Y Z Y * ' ' 42 3D Projection Proj * * z z z z z
Fall 25 Comuter Grahics CS46 22 43 3D Projection Proj * * z z z z z How man vanishing oints? Projections an Normalization The efault rojection in the ee (camera) frame is orthogonal For oints within the efault view volume Most grahics sstems use view normalization All other views are converte to the efault view b transformations that etermine the rojection matri Allows use of the same ieline for all views = = z = Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25
Fall 25 Homogeneous Coorinate Reresentation efault orthograhic rojection = = = M z = w = M = In ractice, we can let M = I an set the z term to zero later Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Simle Persective Center of rojection at the origin Projection lane z =, < Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 23
Fall 25 Comuter Grahics CS46 24 Persective Equations Consier to an sie views = z / z / = z / z = Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Homogeneous Coorinate Form M = / consier q = M where z z z / q = = Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25
Fall 25 Persective Division However w, so we must ivie b w to return from homogeneous coorinates This ersective ivision iels = = z z / z / = the esire ersective equations We will consier the corresoning cliing volume with mat.h functions that are equivalent to erecate OenGL functions Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 WebGL Orthogonal Viewing ortho(left,right,bottom,to,near,far) near an far measure from camera Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 25
Fall 25 WebGL Persective frustum(left,right,bottom,to,near,far) Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Using Fiel of View With frustum it is often ifficult to get the esire view erective(fov, asect, near, far) often rovies a better interface front lane asect = w/h Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 26
Fall 25 Comute in JS file, sen to verte shaer with gl.uniformmatri4fv Dnamic: uate in rener() or shaer Comuting Matrices 53 Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 ersective2.js var rener = function(){ gl.clear( gl.color_buffer_bit gl.depth_buffer_bit); ee = vec3(raius*math.sin(theta)*math.cos(hi), raius*math.sin(theta)*math.sin(hi), raius*math.cos(theta)); moelviewmatri = lookat(ee, at, u); rojectionmatri = ersective(fov, asect, near, far); gl.uniformmatri4fv( moelviewmatriloc, false, flatten(moelviewmatri) ); gl.uniformmatri4fv( rojectionmatriloc, false, flatten(rojectionmatri) ); gl.rawarras( gl.triangles,, NumVertices ); requestanimframe(rener); } Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 27
Fall 25 verte shaer attribute vec4 vposition; attribute vec4 vcolor; varing vec4 fcolor; uniform mat4 moelviewmatri; uniform mat4 rojectionmatri; voi main() { gl_position = rojectionmatri*moelviewmatri*vposition; fcolor = vcolor; } Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Simle Persective Consier a simle ersective with the COP at the origin, the near cliing lane at z = -, an a 9 egree fiel of view etermine b the lanes = z, = z Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 28
Fall 25 Persective Matrices Simle rojection matri in homogeneous coorinates M = Note that this matri is ineenent of the far cliing lane Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Generalization N = α β after ersective ivision, the oint (,, z, ) goes to = /z = /z Z = -(+/z) which rojects orthogonall to the esire oint regarless of an Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 29
Fall 25 If we ick Picking an near far = far near 2near far = near far the near lane is mae to z = - the far lane is mae to z = an the sies are mae to =, = Hence the new cliing volume is the efault cliing volume, in Normalize Device Coorinates, NOTE the fli to left-han sstem Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Normalization Transformation istorte object rojects correctl original cliing volume original object new cliing volume Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 3
Fall 25 WebGL Persective gl.frustum allows for an unsmmetric viewing frustum (although gl.ersective oes not) What transformation oes this iml? Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Persective Matrices frustum 2* near right left P 2* near to bottom right left right left to bottom to bottom far near far near 2* far * near far near ersective near right near P to far near far near 2* far * near far near Angel an Shreiner: Interactive Comuter Grahics 7E Aison-Wesle 25 Comuter Grahics CS46 3
Fall 25 Canonical View Volume Cli Sace Persective Divie NDC Normalize Device Coorinates Canonical to Winow Canonical Viewing Volume (what is it? (NDC)) To Winow M winow n 2 n 2 n 2 n 2 M M ss winow M ers M view Comuter Grahics CS46 32
Fall 25 Comlete Persective Projection After aling the ersective matri, oints are in the canonical view volume (Normalize Device Coorinates): 2* near right left Mers 2* near to bottom right left right left to bottom to bottom far near far near 2* far * near far near M M ss winow M ers M view glviewort() glufrustum() glulookat() Full OenGL Ortho Projection Comuter Grahics CS46 33
Fall 25 Full OenGL Persective Proj Comuter Grahics CS46 34