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

Unit8: Perspective 1

Unit8: Perspective

Mike Chantler, 3/10/2008 3D Modelling & Animation Module F21MA

Unit contents

• Perspective
• Motion in three dimensions
• Perspective distortion of images
• Manipulating multiple images in 3D

Unit8: Perspective 2

Perspective

Perspective

• The foreshortening effect of

perspective projection is an important depth cue

perspective projection

• rthographic projection

Unit8: Perspective 3

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

• rthographic projection

Unit8: Perspective 4

Perspective Projection

f

Coordinate system

f +x +y +z

Unit8: Perspective 5

Coordinate system

+x +y +z

Adopt right-hand coordinate system with origin at centre of screen. (same as Peters)

• bject

Image/screen

Coordinate system

+x +y +z

Optical axis of camera = z-axis Hence vanishing point is at centre of screen

camera

Unit8: Perspective 6

Plan view

+x +z

camera

screen

Front (image) view

+x +y +z into screen screen

vanishing point

Unit8: Perspective 7

Perspective calculation by similar triangles

+x +z

camera

screen

Consider single point

+x +z

camera

screen p = (xpos, ypos, zpos) wrt vanishing point

Unit8: Perspective 8

Consider single point

+x +z

camera

screen

Consider single point

zpos xpos + f f x

scale=f/(f+zpos) xp=scale*xpos yp=scale*ypos

Unit8: Perspective 9

Front (image) view

+x +y

screen

vanishing point

scale

Code

3D Modelling & Animation Module F21MA

Unit8: Perspective 10

Perspective for Display Objects

x y

Have to move towards vp and shrink

3D coordinates wrt vp

x y

p = (xpos, ypos, zpos) wrt vanishing point

Unit8: Perspective 11

3D coordinates

p = (xpos, ypos, zpos) wrt vanishing point

x y

(vpX, vpY)

Move ball closer to vp

scale = fl/(fl+zpos) ball.x=vpX+xpos*scale ball.y=vpY+ypos*scale

x y

Unit8: Perspective 12

Scale ball appropriately

ball.scaleX=scale ball.scaleY=scale

x y

Peters: ch15/Perspective1.as

• Up-arrow key

increases z

• Down-arrow key

reduces z

Unit8: Perspective 13

Motion in three dimensions

Extend ball to use (xpos, ypos, zpos)

x y

xpos ypos (zpos into screen)

Unit8: Perspective 14

Modifications to xyBall Component

public function advance( ):void { //Calculate velocity vx += ax; vy += ay; vz+=az; //Calculate position xpos += vx; ypos += vy; zpos+=vz;

Modifications to xyBall Component

//Handle bounce conditions if (zpos>back) {zpos=back; vz *= -1*bounceFactor;} else if(zpos<0) {zpos = 0; vz *= -1*bounceFactor;} //xpos, ypos similar to x, y before but note vpX, vpY shift

Unit8: Perspective 15

Z-sorting

Z-sorting (hidden layer removal)

Foreground

• bject “ontop” of

background

• bject

Unit8: Perspective 16

Use “setChildIndex( )”

setChildIndex(man1, 1); setChildIndex(man2, 0); setChildIndex(dsplayObject, level);

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); }

Unit8: Perspective 17

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

Unit8: Perspective 18

Perspective distortion of images

3D Modelling & Animation Module F21MA

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

Unit8: Perspective 19

Perspective operation BitmapTransformer class

From: http://www.flashandmath.com/advanced/menu3d

Unit8: Perspective 20

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, br:Point, bl:Point, displayObject ):void

tl tr bl br

Unit8: Perspective 21

Creating Transformation ‘bt’

tl tr bl br

//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); bt

Apply Transformation ‘bt’

bt.mapBitmapData (input, tl, tr, br, bl, displayObject); bt

tl tr bl br

(BitmapData)

Unit8: Perspective 22

Perspective operation

bt See unit8, BitmapTransformer

• No. quads=1

Perspective operation

bt See unit8, BitmapTransformer

• No. quads=5

Unit8: Perspective 23

Manipulating multiple images in 3D

3D Modelling & Animation Module F21MA

Manipulating images in 3D

Unit8: Perspective 24

Represent as quads in 3D

Each quad requires four (x, y, z) points

Perform perspective calc. on each point as before

+x +z

camera

screen p = (x, y, z) wrt vanishing point

Unit8: Perspective 25

Perspective calculations as before

+x

camera

vanishing point

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;

Unit8: Perspective 26

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); }

Unit8: Perspective 27

Rotation - OpenGL

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

• riginal

transformed

theta (anticlockwise)

point3D – rotation about y-axis

function rotateAboutY(angle){ cos = Math.cos(-angle*Math.PI/180); sin = Math.sin (-angle*Math.PI/180); x = x*cos - z*sin; z = x*sin + z*cos; calcPerspective(); }

x z clockwise angle

Unit8: Perspective 28

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)

Unit8: Perspective 29

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); }

Unit8: Perspective 30

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); }

Unit8: Perspective 31

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

• f 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();

Unit8: Perspective 32

How to start your project

3D Modelling & Animation Module F21MA

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

Unit8: Perspective 33

End

3D Modelling & Animation Module F21MA