Unit8: Perspective Mike Chantler, 3/10/2008 Unit contents - PDF document

Unit8: Perspective 3D Modelling & Animation Module F21MA Unit8: Perspective Mike Chantler, 3/10/2008 Unit contents • Perspective • Motion in three dimensions • Perspective distortion of images • Manipulating multiple images in 3D 1

Unit8: Perspective Perspective Perspective •The foreshortening effect of perspective projection is an important depth cue perspective projection orthographic projection 2

Unit8: Perspective Perspective •Parallel lines converge on the vanishing point Foreshortening •The further the z coordinate is from the camera – the more we need points to the camera’s optical centre line: perspective projection orthographic projection 3

Unit8: Perspective Perspective Projection f Coordinate system +z f +x +y 4

Unit8: Perspective Coordinate system Adopt right-hand coordinate system with origin at centre of screen. +z (same as Peters) object +x Image/screen +y Coordinate system Optical axis of camera = z-axis Hence vanishing point is at centre of +z screen camera +x +y 5

Unit8: Perspective Plan view +z +x screen camera Front (image) view +z into screen vanishing point +x screen +y 6

Unit8: Perspective Perspective calculation by similar triangles +z +x screen camera Consider single point p = (x pos , y pos , z pos ) +z wrt vanishing point +x screen camera 7

Unit8: Perspective Consider single point +z +x screen camera Consider single point x pos scale=f/(f+z pos ) z pos x p =scale*x pos x + y p =scale*y pos f f 8

Unit8: Perspective Front (image) view vanishing point +x scale screen +y 3D Modelling & Animation Module F21MA Code 9

Unit8: Perspective Perspective for Display Objects x y Have to move towards vp and shrink 3D coordinates wrt vp x p = (x pos , y pos , z pos ) y wrt vanishing point 10

Unit8: Perspective 3D coordinates x (vpX, vpY) p = (x pos , y pos , z pos ) y wrt vanishing point Move ball closer to vp x scale = fl/(fl+z pos ) y ball.x=vpX+x pos *scale ball.y=vpY+y pos *scale 11

Unit8: Perspective Scale ball appropriately x ball.scaleX=scale y ball.scaleY=scale Peters: ch15/Perspective1.as • Up-arrow key increases z • Down-arrow key reduces z 12

Unit8: Perspective Motion in three dimensions Extend ball to use (x pos , y pos , z pos ) x x pos y y pos (z pos into screen) 13

Unit8: Perspective Modifications to xyBall Component public function advance( ): void { //Calculate velocity vx += ax; vy += ay; vz+=az; //Calculate position x pos += vx; y pos += vy; z pos +=vz; Modifications to xyBall Component //Handle bounce conditions if (z pos >back) {z pos =back; vz *= -1*bounceFactor;} else if(z pos <0) {z pos = 0; vz *= -1*bounceFactor;} //x pos , y pos similar to x, y before but note vpX, vpY shift 14

Unit8: Perspective Z-sorting Z-sorting (hidden layer removal) Foreground object “ontop” of background object 15

Unit8: Perspective Use “setChildIndex( )” setChildIndex(dsplayObject, level ); setChildIndex(man2, 0 ); setChildIndex(man1, 1 ); Level ‘0’ = furthest away Level ‘1’ = next furthest away); Level ‘2’ etc. Example: 14 men = diplayObject of type “mSilhouette” men = new Array(); for(i=0; i<14; i++){ var man:mSilhouette = new mSilhouette; man.zpos=Math.random(); men.push(man); } 16

Unit8: Perspective Example: 14 men Men.sortOn(zpos”, Array.DESCENDING | Array.Numeric); for(i=0; i<15; i++){ var man:mSilhouette = men[i]; setChildIndex(man, i); } Example: crowdMain.mxml 17

Unit8: Perspective 3D Modelling & Animation Module F21MA Perspective distortion of images Flash Matrix Operations • The flash.geom.Matrix class allows you to apply the following operations to display objects: – rotation – scaling – translation – skewing • You have to define a matrix & then load it into the display object: – myDisplayObject.transform.matrix = my Matrix • But you can’t perform a perspective transformation 18

Unit8: Perspective Perspective operation BitmapTransformer class From: http://www.flashandmath.com/advanced/menu3d 19

Unit8: Perspective BitmapTransformer class Constructor : BitmapTransformer (w:Number,h:Number, hdiv:int=2, vdiv:int=2) (w,h) – width & height of source in pixels hdiv, vdiv – number of Horizontal & Vert. divisions Main Method instance.mapBitmapData( input:BitmapData, tl:Point, tr:Point, tr br:Point, tl bl:Point, bl displayObject br ):void 20

Unit8: Perspective Creating Transformation ‘bt’ //Create transformation bt = BitmapTransformer(512, 512, 2, 2); //Setup points of quad tl = Point(0,0); tr = Point(200,120); bl = Point(0,400); br = Point(200, 280); tr bt tl bl br Apply Transformation ‘bt’ bt.mapBitmapData (input, tl, tr, br, bl, displayObject); tr tl bt bl (BitmapData) br 21

Unit8: Perspective Perspective operation No. quads=1 bt See unit8, BitmapTransformer Perspective operation No. quads=5 bt See unit8, BitmapTransformer 22

Unit8: Perspective 3D Modelling & Animation Module F21MA Manipulating multiple images in 3D Manipulating images in 3D 23

Unit8: Perspective Represent as quads in 3D Each quad requires four (x, y, z) points Perform perspective calc. on each point as before p = (x, y, z) +z wrt vanishing point +x screen camera 24

Unit8: Perspective Perspective calculations as before vanishing point +x camera point3D class //two-D projection of the point: twoD:Point; //3D location of point x:Number, y:Number, z:Number; //vanishing point and focal length vp:Point, fl:Number; 25

Unit8: Perspective point3D class: constructor function point3D(x, y, z, vp:Point, fl) { xcp= this .x=x; ycp= this .y=y; zcp= this .z=z; this .vp=vp; this .fl=fl; calcPerspective(); } point3D.as – perspective calc function calcPerspective(){ scale = fl/(fl+z); x2 = vp.x + x*scale; y2 = vp.y + y*scale; twoD= new Point(x2, y2); } 26

Unit8: Perspective Rotation - OpenGL 8 7 6 5 original 4 transformed 3 2 theta (anticlockwise) 1 0 0 1 2 3 4 5 6 7 8 point3D – rotation about y-axis function rotateAboutY( angle ){ cos = Math.cos( -angle *Math.PI/180); sin = Math.sin ( -angle *Math.PI/180); clockwise angle x = x*cos - z*sin; z z = x*sin + z*cos; calcPerspective(); x } 27

Unit8: Perspective quad.as var im:BitmapData; var bdTransform:BitmapTransformer; var tl3, bl3, br3, tr3:point3D; quad.as – main methods constructor: quad(4 points) show( ) resetTransformations( ) rotateAboutY(angle) 28

Unit8: Perspective quad.as - constructor public function quad (topLeft, bottomLeft, bottomRight, topRight){ bdTransform=BitmapTransformer(512,512,10,10); //Initialise the quad's four x,y,z vertices and their copies } quad.as – show function function show() { this .graphics.clear(); //Use bdTransform to map rectangular //bitmap onto this quad bdTransform.mapBitmapData (im, tl3.twoD, tr3.twoD, br3.twoD, bl3.twoD, this ); } 29

Unit8: Perspective quad.as - resetTransformations function resetTransformations(): void { tl3.resetTransformation(); tr3.resetTransformation(); bl3.resetTransformation(); br3.resetTransformation(); } quad.as – rotateAboutY( ) public function rotateAboutY(angle:Number): void { tl3.rotateAboutY(angle); bl3.rotateAboutY(angle); br3.rotateAboutY(angle); tr3.rotateAboutY(angle); } 30

Unit8: Perspective simplePerspectiveMain.mxml //set vanishing point to centre of screen: vp = Point(application.width/2, application.height/2); //Define 3D position of 1st quad in pixels wrt centre of screen: tl = point3D(-200,-200,0,vp,fl); bl = point3D(-200,200,0,vp,fl); br = point3D(200,200,0,vp,fl); tr = point3D(200,-200,0,vp,fl); tmpQuad = quad(tl, bl, br, tr); Housekeeping code //load bitmap into quad: tmpQuad.im=imgLoader.bitmapsArray[0].bitmapData; //Add quad to collection so we can index it: quadCollection.addItemAt(tmpQuad,0); addChild(quadCollection[0]); quadCollection[0].show(); 31

Unit8: Perspective 3D Modelling & Animation Module F21MA How to start your project How to start your project • Form a team of 2 or 3 • Think of a theme • Look at: – Unit 2: Album2 – Unit 3: dragging – Unit 4: XYsecondOrderMotion – Unit 8: crowd – Unit 8: simplePerspective 32

Unit8: Perspective 3D Modelling & Animation Module F21MA End 33