Viewing and Projection Transformations Projective Rendering Pipeline OCS WCS VCS modeling transformation Mm.odd viewing transformation Mview OCS - object coordinate system WCS - world coordinate system VCS - viewing coordinate system CCS - clipping coordinate system NDCS - normalized device coordinate system DCS - device coordinate system projection transformation / h viewport transformation CCS NDCS DCS pixel acoorde
Viewing Transformation Defining the camera position and orientation eye point target point up vector three.js: camera.position.set(0,2,20); // eye camera.up.set(0,,0); // up vector camera.lookat(0,0,0); // specify target; compute M_view // internally: object.matrix.lookat(eye,target,up)
Computing i,j,k I Peye pref w Ept I Wpxi ftp.eh Of II Exit PeyeMriew pm qq.iq am Mia'm Mcamm
Viewing Transformation M view
Projection Transformation M proj 3D scene à 2D image pinhole camera image plane real pinhole camera camera lens
Projection definition perspective projection parallel projection
Projections Taxonomy planar projections perspective:,2,3-point oblique parallel orthographic cabinet cavalier top, front, side axonometric isometric dimetric
Perspective Projection y P(x,y,z) P(x,y,d) z=d z
Homogeneous Coordinates homogeneous cartesian ( x, y, z, h) redundant representation h=0: point at infinity (direction) geometric interpretation h P( x, y, z, h)
Perspective Projection A simple version of h / = / - z y x d M proj
View Volumes: more about M proj specifies field-of-view, used for clipping restricts domain of z stored for visibility test orthographic view volume perspective view volume
View Volumes OpenGL / WebGL canonical view volume
Orthographic View Volume
Orthographic View Volume 2 right left 2 top bot 2 far near right + left right left top + bot top bot far + near far near three.js var cam = new THREE.OrthographicCamera(left,right,top,bot,near,far)
Orthographic View Volume Derivation solving for a and b gives:
Perspective View Volume
Perspective View Volume Derivation x y z z / d = / d x y z earlier: with additional ability to scale, etc.: = ' ' ' ' z y x D C B F A E h z y x
Perspective View Volume + + + 2 ) ( 2 2 n f fn n f f b n t b t b t n l r l r l r n view volume left = -, right = bot = -, top = near =, far = 4 3 8/ 3 5/ three.js var camera = new THREE.PerspectiveCamera(fov, aspect, near, far) // which eventually calls: // matrix.makeperspective(left, right, top, bottom, near, far);
Perspective View Volume Derivation top plane: repeat for bot plane to get another eqn, then solve for F and B similar process for solving for the other unknowns, using the left/right and near/far planes
Perspective Projection -- Example Example tracks in VCS: left x=-, y=- right x=, y=- view volume left = -, right = bot = -, top = near =, far = 4
Perspective Projection -- Example Example = / h
Viewport Transformation (,) (w,h) (-,-) NDCS (0,0) DCS x a y b three.js: WebGL: renderer.setviewport(x,y,a,b); gl.viewport(x,y,a,b); gl.viewport(0,0,w,h) is default
Name Perspective Projection -- example y I P A (0, 5,6) P B (0, 5,2) z F cam Compute the projected coordinates of the given points for a perspective projection. The image plane is located at z = -2. In which direction should we move the image plane in order to obtain a larger image?
Impossible Photography? moon How could we take a photograph like the one on the left? The edges of the building on the left are parallel, despite the viewer standing on the ground while taking the photograph. How is this possible?