Viewing Transformation

Transcription

1 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

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

3 Computing i,j,k I Peye pref w Ept I Wpxi ftp.eh Of II Exit PeyeMriew pm qq.iq am Mia'm Mcamm

4 Viewing Transformation M view

5 Projection Transformation M proj 3D scene à 2D image pinhole camera image plane real pinhole camera camera lens

6 Projection definition perspective projection parallel projection

7 Projections Taxonomy planar projections perspective:,2,3-point oblique parallel orthographic cabinet cavalier top, front, side axonometric isometric dimetric

8

9

10 Perspective Projection y P(x,y,z) P(x,y,d) z=d z

11 Homogeneous Coordinates homogeneous cartesian ( x, y, z, h) redundant representation h=0: point at infinity (direction) geometric interpretation h P( x, y, z, h)

12 Perspective Projection A simple version of h / = / - z y x d M proj

13 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

14 View Volumes OpenGL / WebGL canonical view volume

15 Orthographic View Volume

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

17 Orthographic View Volume Derivation solving for a and b gives:

18 Perspective View Volume

19 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

20 Perspective View Volume ) ( 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);

21 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

22 Perspective Projection -- Example Example tracks in VCS: left x=-, y=- right x=, y=- view volume left = -, right = bot = -, top = near =, far = 4

23 Perspective Projection -- Example Example = / h

24 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

25 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?

26 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?