02/10/09 Lecture 4 1

Computer Graphics

Computer Graphics

Lecture 3

Transformations

02/10/09 Lecture 4 2

Computer Graphics From the last lecture...

– Once the models are prepared, we need to place them in the environment

– Objects are defined in their own local coordinate system

– We need to translate, rotate and scale them

02/10/09 Lecture 4 3

Computer Graphics

Transformations.• Translation.

– P=T + P

• Scale– P=S P

• Rotation– P=R P

• We would like all transformations to be multiplications so we can concatenate them

• express points in homogenous coordinates.

y

x

y

x.

cossin

sincos

02/10/09 Lecture 4 4

Computer Graphics

Homogeneous coordinates

• Add an extra coordinate, W, to a point.– P(x,y,W).

• Two sets of homogeneous coordinates represent the same point if they are a multiple of each other.

– (2,5,3) and (4,10,6) represent the same point.

• At least one component must be non-zero (0,0,0) is not defined.

• If W 0 , divide by it to get Cartesian coordinates of point (x/W,y/W,1).

• If W=0, point is said to be at infinity.

02/10/09 Lecture 4 5

Computer Graphics

Translations in homogenised coordinates

• Transformation matrices for 2D translation are now 3x3.

1

.

100

10

01

1

y

x

d

d

y

x

y

x

11

y

x

dyy

dxx

02/10/09 Lecture 4 6

Computer Graphics

Concatenation.

• We perform 2 translations on the same point:

),(),(),(

:expect weSo

),(),(),(

),(

),(

21212211

21212211

22

11

yyxxyxyx

yyxxyxyx

yx

yx

ddddTddTddT

PddddTPddTddTP

PddTP

PddTP

02/10/09 Lecture 4 7

Computer Graphics

Concatenation.

?

100

10

01

.

100

10

01

: is ),(),(product matrix The

2

2

1

1

2211

y

x

y

x

yxyx

d

d

d

d

ddTddT

Matrix product is variously referred to as compounding, concatenation, or composition

02/10/09 Lecture 4 8

Computer Graphics

Concatenation.

Matrix product is variously referred to as compounding, concatenation, or composition.

100

10

01

100

10

01

.

100

10

01

: is ),(),(product matrix The

21

21

2

2

1

1

2211

yy

xx

y

x

y

x

yxyx

dd

dd

d

d

d

d

ddTddT

02/10/09 Lecture 4 9

Computer Graphics

Properties of translations.

),(),(T 4.

),(),(),(),( 3.

),(),(),( 2.

)0,0( 1.

1-yxyx

yxyxyxyx

yyxxyxyx

ssTss

ssTttTttTssT

tstsTttTssT

IT

Note : 3. translation matrices are commutative.

02/10/09 Lecture 4 10

Computer Graphics

Homogeneous form of scale.

y

xyx s

sssS

0

0),(

Recall the (x,y) form of Scale :

100

00

00

),( y

x

yx s

s

ssS

In homogeneous coordinates :

02/10/09 Lecture 4 11

Computer Graphics

Concatenation of scales.

!multiply easy to -matrix in the elements diagonalOnly

100

0ss0

00ss

100

0s0

00s

.

100

0s0

00s

: is ),(),(product matrix The

y2y1

x2x1

y2

x2

y1

x1

2211

yxyx ssSssS

02/10/09 Lecture 4 12

Computer Graphics

Homogeneous form of rotation.

1

.

100

0cossin

0sincos

1

y

x

y

x

)()(

: i.e ,orthogonal are matricesRotation

).()(

matrices,rotation For

1

1

TRR

RR

02/10/09 Lecture 4 13

Computer Graphics

Orthogonality of rotation matrices.

100

0cossin

0sincos

)( ,

100

0cossin

0sincos

)(

TRR

100

0cossin

0sincos

100

0cossin

0sincos

)(

R

02/10/09 Lecture 4 14

Computer Graphics

Other properties of rotation.

careful more be toneed ,rotations 3DFor

same theis

rotation of axis thebecauseonly is But this

)()()()(

and

)()()(

)0(

RRRR

RRR

IR

02/10/09 Lecture 4 15

Computer GraphicsHow are transforms combined?

(0,0)

(1,1)(2,2)

(0,0)

(5,3)

(3,1)Scale(2,2) Translate(3,1)

TS =2

0

0

2

0

0

1

0

0

1

3

1

2

0

0

2

3

1=

Scale then Translate

Use matrix multiplication: p' = T ( S p ) = TS p

Caution: matrix multiplication is NOT commutative!

0 0 1 0 0 1 0 0 1

02/10/09 Lecture 4 16

Computer GraphicsNon-commutative Composition

Scale then Translate: p' = T ( S p ) = TS p

Translate then Scale: p' = S ( T p ) = ST p

(0,0)

(1,1)(4,2)

(3,1)

(8,4)

(6,2)

(0,0)

(1,1)(2,2)

(0,0)

(5,3)

(3,1)Scale(2,2) Translate(3,1)

Translate(3,1) Scale(2,2)

02/10/09 Lecture 4 17

Computer Graphics

TS =2

0

0

0

2

0

0

0

1

1

0

0

0

1

0

3

1

1

ST =2

0

0

2

0

0

1

0

0

1

3

1

Non-commutative Composition

Scale then Translate: p' = T ( S p ) = TS p

2

0

0

0

2

0

3

1

1

2

0

0

2

6

2

=

=

Translate then Scale: p' = S ( T p ) = ST p

0 0 1 0 0 1 0 0 1

02/10/09 Lecture 4 18

Computer GraphicsHow are transforms combined?

(0,0)

(1,1)(0,sqrt(2))

(0,0)

(3,sqrt(2))

(3,0)

Rotate 45 deg Translate(3,0)

Rotate then Translate

Caution: matrix multiplication is NOT commutative!

Translate then Rotate

(0,0)

(1,1)

(0,0) (3,0)

Rotate 45 degTranslate(3,0) (3/sqrt(2),3/sqrt(2))

02/10/09 Lecture 4 19

Computer Graphics

TR =0

1

0

-1

0

0

0

0

1

1

0

0

0

1

0

3

1

1

RT =1

0

0

1

3

1

Non-commutative Composition

Rotate then Translate: p' = T ( R p ) = TR p

0

0

0

-1

0

0

3

1

1

0

1

0

-1

0

0

-1

3

1=

=Translate then Rotate: p' = R ( T p ) = RT p

0 0 1

0

1

0

-1

0

0

0

0

1

0

1

0

-1

0

0

0

0

1

0

1

0

-1

0

0

0

0

1

0

1

0

-1

0

0

0

0

1

0

1

0

-1

0

0

0

0

1

02/10/09 Lecture 4 20

Computer Graphics

Types of transformations.

• Rotation and translation– Angles and distances are preserved– Unit cube is always unit cube– Rigid-Body transformations.

• Rotation, translation and scale.– Angles & distances not preserved.– But parallel lines are.

02/10/09 Lecture 4 21

Computer Graphics

Transformations of coordinate systems.

• Have been discussing transformations as transforming points.

• Always need to think the transformation in the world coordinate system

• Useful to think of them as a change in coordinate system.

• Model objects in a local coordinate system, and transform into the world system.

02/10/09 Lecture 4 22

Computer Graphics

Transformations of coordinate systems - Example

• Concatenate local transformation matrices from left to right

• Can obtain the local – world transformation matrix

• p’,p’’,p’’’ are the world coordinates of p after each transformation

02/10/09 Lecture 4 23

Computer GraphicsTransformations of coordinate systems - example

• pn is the world coordinate of point p after n transformations

02/10/09 Lecture 4 24

Computer Graphics

Quiz

• I sat in the car, and realized the side mirror is 0.4m on my right and 0.3m in my front

• I started my car and drove 5m forward, turned 30 degrees to right, moved 5m forward again, and turned 45 degrees to the right, and stopped

• What is the position of the side mirror now, relative to where I was sitting in the beginning?

02/10/09 Lecture 4 25

Computer Graphics

Solution

• The side mirror position is locally (0,4,0.3)

• The matrix of first driving forward 5m is

100

510

001

1T

02/10/09 Lecture 4 26

Computer Graphics

Solution

• The matrix to turn to the right 30 and 45 degrees (rotating -30 and -45 degrees around the origin) are

lyrespective ,

100

02

1

2

1

02

1

2

1

,

100

02

3

2

1

02

1

2

3

21

RR

02/10/09 Lecture 4 27

Computer Graphics

Solution

The local-to-global transformation matrix at the last configuration of the car is

The final position of the side mirror can be computed by TR1TR2 p which is around (2.89331, 9.0214)

100

02

1

2

1

02

1

2

1

100

510

001

100

02

3

2

1

02

1

2

3

100

510

001

21TRTR

02/10/09 Lecture 4 28

Computer GraphicsThis is convenient for character animation / robotics

• In robotics / animation, we often want to know what is the current 3D location of the end effectors (like the hand)

• Can concatenate matrices from the origin of the body towards the end effecter

02/10/09 Lecture 4 29

Computer Graphics

Transformations of coordinate systems.

1

)()(

)()(

ji

)(

:shown that be alsocan It

:onsubstitutiby obtain we

and

i systemin point a toj systemin point a converts that transform theas M Define

system coordinatein point a as Define

jiij

kjjiki

kkj

j

jji

i

i

MM

MMM

PMP

PMP

iP

02/10/09 Lecture 4 30

Computer Graphics

3D Transformations.

• Use homogeneous coordinates, just as in 2D case.• Transformations are now 4x4 matrices.• We will use a right-handed (world) coordinate

system - ( z out of page ).

z (out of page)

y

x

02/10/09 Lecture 4 31

Computer Graphics

Translation in 3D.

1000

100

010

001

),,(z

y

x

zyx d

d

d

dddT

Simple extension to the 3D case:

02/10/09 Lecture 4 32

Computer Graphics

Scale in 3D.

1000

000

000

000

),,(z

y

x

zyx s

s

s

sssS

Simple extension to the 3D case:

02/10/09 Lecture 4 33

Computer Graphics

Rotation in 3D

• Need to specify which axis the rotation is about.• z-axis rotation is the same as the 2D case.

1000

0100

00cossin

00sincos

)(

zR

02/10/09 Lecture 4 34

Computer Graphics

Rotating About the x-axis Rx()

11000

0θcosθsin0

0θsinθcos0

0001

1

z

y

x

z

y

x

02/10/09 Lecture 4 35

Computer GraphicsRotating About the y-axis Ry()

11000

0θcos0θsin

0010

0θsin0θcos

1

z

y

x

z

y

x

02/10/09 Lecture 4 36

Computer GraphicsRotation About the z-axis Rz()

11000

0100

00θcosθsin

00θsinθcos

1

z

y

x

z

y

x

02/10/09 Lecture 4 37

Computer Graphics

Rotation in 3D

• For rotation about the x and y axes:

1000

0cos0sin

0010

0sin0cos

)( ,

1000

0cossin0

0sincos0

0001

)(

yx RR

02/10/09 Lecture 4 38

Computer GraphicsRotation about an arbitrary axis

• About (ux, uy, uz), a unit vector on an arbitrary axis

x'

y'

z'

1

=

x

y

z

1

uxux(1-c)+c

uyux(1-c)+uzs

uzux(1-c)-uys

0

0

0

0

1

uzux(1-c)-uzs

uzux(1-c)+c

uyuz(1-c)+uxs

0

uxuz(1-c)+uys

uyuz(1-c)-uxs

uzuz(1-c)+c

0

where c = cos θ & s = sin θ

Rotate(k, θ)

x

y

z

θ

u

02/10/09 Lecture 4 39

Computer Graphics

Transform Left-Right, Right-Left

1000

0100

0010

0001

RLLR MM

Transforms between world coordinates and viewing coordinates. That is: between a right-handed set and a left-handed set.

02/10/09 Lecture 4 40

Computer Graphics Shearing

1000

0100

001

0001

a

1000

0100

0010

001 a

02/10/09 Lecture 4 41

Computer Graphics

Calculating the world coordinates of all vertices

• For each object, there is a local-to-global transformation matrix

• So we apply the transformations to all the vertices of each object

• We now know the world coordinates of all the points in the scene

02/10/09 Lecture 4 42

Computer Graphics Normal Vectors • We also need to know the direction of the normal

vectors in the world coordinate system• This is going to be used at the shading operation • We only want to rotate the normal vector• Do not want to translate it

02/10/09 Lecture 4 43

Computer Graphics Normal Vectors - (2)

• We need to set elements of the translation part to zero

1000

0

0

0

1000111111

111111

111111

111111

111111

111111

rrr

rrr

rrr

trrr

trrr

trrr

z

y

x

02/10/09 Lecture 4 44

Computer Graphics Viewing

• Now we have the world coordinates of all the vertices

• Now we want to convert the scene so that it appears in front of the camera

02/10/09 Lecture 4 45

Computer Graphics View Transformation

We want to know the positions in the camera coordinate system

We can compute the camera-to-world transformation matrix using the orientation and translation of the camera from the origin of the world coordinate system

Mc→w

02/10/09 Lecture 4 46

Computer Graphics View Transformation

We want to know the positions in the camera coordinate system

vw = Mc→w vc

vc = Mc → w vw

= Mw→c vw

-1

Point in theworld coordinate

Point in thecamera coordinate

Camera-to-world transformation

02/10/09 Lecture 4 47

Computer Graphics

Summary.

• Using homogeneous transformation, translation, rotation and scaling can all be represented by multiplication of a 4x4 matrix

• Multiplication from left-to-right can be considered as the transformation of the coordinate system

• Need to multiply the camera matrix from the left at the end

• Reading: Foley et al. Chapter 5, Appendix 2 sections A1 to A5 for revision and further background (Chapter 5)