Objectives
 Understand how transformations work in 2D and 3D
 Understand the concept of homogenous coordinate system
 Understand scene graphs and hierarchical composition of transformations
 Get familiar with transformations in OpenGL and DirectX

Transformations
 Transformations change 2D or 3D points and vectors, or change coordinate systems.


An object transformation alters the coordinates of each point on the object according to the same rule, leaving the underlying coordinate system fixed.
A coordinate transformation defines a new coordinate system in terms of the old one, then represents all of the object’s points in this new system.
 Object transformations are easier to understand, so we will do them first.

Transformations (2)
 A (2D or 3D) transformation T ( ) alters each point P into a new point Q using a specific formula or algorithm: Q = T ( P ).

Transformations (3)
 An arbitrary point P in the plane is mapped to
Q .
 Q is the image of P under the mapping T .
 We transform an object by transforming each of its points, using the same function T () for each point.
 The image of line L under T , for instance, consists of the images of all the individual points of L.

Transformations (4)
 Most mappings of interest are continuous, so the image of a straight line is still a connected curve of some shape, although it’s not necessarily a straight line.
 Affine transformations, however, do preserve lines: the image under T of a straight line is also a straight line.

Geometric Effects of Affine
Transformations
 Combinations of four elementary transformations:
(a) a translation, (b) a scaling, (c) a rotation, and (d) a shear (all shown below).

2D Translations
Point P defined as P ( x , y ), translate to Point P

( x

, y

) a distance d x parallel to x axis, d y parallel to y axis.
x
  x
 d x y
  y
 d y
Define the column vec tors
P


 x y

 , P
 

 x y

 
 , T


 d d y x


Now
P
 
P

T
P
P’

2D Scaling from the origin
Point P defined as P ( x , y ),
Perform a scale (stretch) to Point P

( x

, y

) by a factor s x along the x axis, and s y along the y axis.
x
  s x
.
x , y
  s y
.
y
P’
Define the matrix
S


 s x
0
0 s y


P
Now
P
 
S

P or

 x y

 



 s x
0
0 s y

 .

 x y



2D Rotation about the origin y r r
P’(x’,y’)

P(x,y)
Recall the right-hand rule!
x

2D Rotation about the origin y x
  y
  r .
cos(
 r .
sin(

 
)
 
)

 r .
cos

.
cos
 r .
cos

.
sin

 r .
sin
 r .
sin

.
sin


.
cos

P’(x’,y’) r

 r x y
P(x,y) x y

 r .
cos
 r .
sin
 x

2D Rotation about the origin.
x
  y
  r .
cos(
 r .
sin(

 
)
 
)

 r .
cos

.
cos
 r .
cos

.
sin

 r .
sin

.
sin

 r .
sin

.
cos

Substituting for r : x y

 r .
cos
 r .
sin

Given us : x
  y
  x .
cos
 x .
sin


 y .
sin
 y .
cos

After all, these are just
High-schools formulas!

2D Rotation about the origin.
x
  y
  x .
cos
 x .
sin


 y .
sin
 y .
cos

Rewriting in matrix form gives us :

 x y

 



 cos sin


 sin
 cos


 .

 x y


Define the matrix R


 cos sin


 sin cos

 
 , P
 
R

P

Shear: Off Diagonal Elements


1
0 a
1



 x y



 
 x y ay




1 0 b 1



 x y




 bx x
 y



Example 1 y
( 0 , 1 )
S
T ( x , y )



0 .
1
4
( 1 , 1 )



0 .
4 x x

0
1

 y



 x y

 x
( 0 , 0 ) ( 1 , 0 )

Example 1 y
( 0 , 1 )
( 1 , 1 )
T ( x , y )



0 .
4 x x
 y


S x
( 0 , 0 ) ( 1 , 0 )

Example 1 y
( 0 , 1 )
T(S)
( 1 , 1 .
4 )
T ( x , y )



0 .
4 x x
 y


( 1 , 0 .
4 ) x
( 0 , 0 )

Example 2 y
( 0 , 1 )
S
T ( x , y )
( 1 , 1 )



1
0
0 .
1
6



 
 x 0 .
6 y y



 x y

 x
( 0 , 0 ) ( 1 , 0 )

Example 2 y
( 0 , 1 )
( 1 , 1 )
S
( 0 , 0 ) ( 1 , 0 )
T ( x , y )

 
 x 0 .
6 y y

 x

Example 2 y
T ( x , y )

 
 x 0 .
6 y y


( 0 , 1 )
( 0 .
6 , 1 )
( 1 .
6 , 1 )
T(S)
( 0 , 0 ) ( 1 , 0 ) x

Summary
Shear in x:
Sh x



1
0
Shear in y:
Sh y



1 b a
1



 x y



 
 x y ay


0
1



 x y




 bx x
 y



Sample Points: unit inverses


1
0


1 b a
1




1 a





1
0


0
1





1 b





1
0



Geometric View of Shear in x
(
 a , 1 )
( 1 , 0 )
( 0 , 1 ) ( 1 , 1 )
( 1 , 0 )

Another Geometric View of
Shear in x y y x x
24 x

Another Geometric View of
Shear in x y
25 x

Geometric View of Shear in y
( 0 , 1 )
( 0 , 0 )
( 0 , 1 )
( 0 , 0 )
( 1
( 1 , 0 )
, 1 )
( 1 ,
 b )

y
Another Geometric View of
Shear in y y h x h
27 x

Another Geometric View of
Shear in y y x
28

Transformations





Translation.
 P

=T + P
Scale
 P

=S

P
Rotation
 P

=R

P
Shear
 P

=H

P
We would like all transformations to be multiplications so we can concatenate them
 express points in homogenous coordinates.

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 allowed.
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.
 P(x,y,0) can be interpreted as the vector v (x, y)
 Both points and vectors are represented by the same set of underlying objects



Homogeneous coordinates
If we represent (x,y,W) in 3-space, all triples representing the same point describe a line passing through the origin.
If we homogenize the point, we get a point of form (x,y,1)
 homogenised points form a plane at W=1.
W
P
W=1 plane
X
Y

Translations in homogenised coordinates
 Transformation matrices for 2D translation are now 3x3.



 x y
1









1


0
0
0
1
0 d x d
1 y




.



 x y
1




1 x


 y
 
1 x y

 d x d y

Concatenation
 We perform 2 translations on the same point:
P
 
P
 
P

T ( d x 1
, d y 1
)
P

T ( d x 2
, d y 2
)
P
 
P

T ( d x 1
, d y 1
)

T ( d x 2
, d y 2
)

P

T ( d x 1
 d x 2
, d y 1
 d y 2
)
So we expect :
T ( d x 1
, d y 1
)

T ( d x 2
, d y 2
)

T ( d x 1
 d x 2
, d y 1
 d y 2
)

Concatenation.
The matrix product T ( d x 1
, d y 1
)

T ( d x 2
, d y 2
) is :


1


0
0
0
1
0 d d
1 x 1 y 1




.




1
0
0
0
1
0 d d
1 x 2 y 2







1


0
0
0
1
0 d x 1 d y 1


1 d x 2 d y 2




Matrix product is variously referred to as compounding, concatenation, or composition.
This single matrix is called the Coordinate Transformation Matrix or
CTM.

Homogeneous form of scale
Recall the (x,y) form of Scale :
S ( s x
, s y
)



 s x
0
0 s y



In homogeneous coordinates :
S ( s x
, s y
)




 s x
0
0
0 s y
0
0
0
1





Concatenation of scales.



The matrix product S ( s x 1
, s y 1
)

S ( s x 2
, s y 2
) is :

 s
0
0 x1 s
0
0 y1
0
0
1





.




 s
0
0 x2 s
0
0 y2
0
0
1










 s x1
0
0
 s x2
0 s y1
 s y2
0
0
0
1





Only diagonal elements in the matrix easy to multiply !

Homogeneous form of rotation



 x
 y
1









 cos sin
0


 sin
 cos

0
0
0
1




.



 x y
1




For rotation matrices,
R

1
(

)

R (
 
).
Rotation matrices are orthogonal , i.e
:
R

1
(

)

R
T
(

)

Composition of Transformations


Suppose we want to rotate around an arbitrary point P
Idea: Compose simple transformations
1. Translate P to origin
The order is very important!
2. Rotate around origin
3. Translate origin back to P

Order!

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 ).
y x
Note:
Convenient to think of display as
Being left-handed !!
( z into the screen ) z (out of page)

More on Homogeneous
Coordinates




To: if the object is a vector, add a 0 as the 4 th coordinate; if it is a point, add a 1.
From:
 If the 4 th coordinate is zero, then simply remove it.
 If it is not, then divide the other coordinate by it and remove it.
OpenGL uses 4D homogeneous coordinates for all its vertices.


If you send it a 3-tuple in the form ( x , y , z ), it converts it immediately to ( x , y , z , 1).
If you send it a 2D point ( x , y ), it first appends a 0 for the zcomponent and then a 1, to form ( x , y , 0, 1).
All computations are done within OpenGL in 4D homogeneous coordinates.

Combinations
 Linear combinations of vectors and points:





The difference of 2 points is a vector: the fourth component is 1 – 1 = 0
The sum of a point and a vector is a point: the fourth component is 1 + 0 = 1
The sum of 2 vectors is a vector: 0 + 0 = 0
A vector multiplied by a scalar is still a vector
Linear combinations of vectors are vectors

Translation in 3D
Simple extension to the 3D case:
T ( d x
, d y
, d z
)


1

 0


0
0
0
1
0
0
0
0
1
0 d d y d
1 x z





•In OpenGL: glMatrixMode(GL_ModelView);
•In DirectX: glTranslatef(dx, dy, dz); device.Transform.World = Matrix.Translation(dx, dy, dz)

Scale in 3D
Simple extension to the 3D case:
S ( s x
, s y
, s z
)





 s
0
0
0 x
0 s y
0
0
0
0 s z
0
0
0
0
1





In OpenGL: glMatrixMode(GL_ModelView); glScalef(Sx, Sy, Sz);
In DirectX: device.Transform.World = Matrix.Scaling(Sx, Sy,
Sz)

Rotation in 3D
 Need to specify which axis the rotation is about.
 z-axis rotation is the same as the 2D case.
R z
(

)



 cos

 sin
0
0


 sin
 cos
0
0

0
0
1
0
0
0
0
1





•In OpenGL: glMatrixMode(GL_ModelView);
•In DirectX: glRotatef(theta, 0.0f, 0.0f, 1.0f); device.Transform.World = Matrix.RotationZ(theta)

Rotation in 3D
 For rotation about the x and y axes:
R x
(

)







1
0
0
0
0 cos
 sin

0
0
 sin
 cos

0
0
1



0

0


, R y
(

)







 cos
0 sin
0


0
1
0
0 sin

0 cos

0
0

0


0


1 
•In OpenGL: glMatrixMode(GL_ModelView); glRotatef(theta, 1.0f, 0.0f, 0.0f);
•In DirectX:
//gRotatef(theta,0.0f,1.0f,0.0f) (about y) device.Transform.World = Matrix.RotationZ(theta);
//Matrix.RotationY(theta) (about y)

Transformations of coordinate systems
• Alternate view: when we apply a transformation, we’re not changing the coordinates of a point within a coordinate system. Instead, we’re changing the coordinate system itself
• All the transformations are performed relative to the current coordinate frame origin and axes ; OpenGL post-multiplies each new transformation matrix

Successive Transformations
Define P
( i ) as a point in coordinate system i
Define M i
 j as the transform that converts a point in system j to a point in system i
P
( i ) 
M i
 j

P
( j ) and P
( j ) 
M j
 k

P
( k ) we obtain by substituti
M i
 k

M i
 j

M j
 k on :
It can also be shown that
M j
 i

M i

1
 j
:
C3
C1
C2
M2 b3
(a3,b3) a3
Given P (a3,b3) in C3
What is P’s coordinates in
C1?
1) Get P’s coordinates in C2
P_c2 = M2 x P
M1
2) Get P_c2’s coordinates in C1
P_c1 = M1 x P_c2
P_c1 = M1 x M2 x P the answer!!




Successive Transformations (2)
The sequence translate 1.5 0 0 cube translate 8.5 0 0 cube will draw two cubes with x centres 1.5 and 10.0 respectively.
We could create the same image with the sequence save state translate 1.5 0 0 cube restore state save state translate 10.0 0 0 cube restore state
Here both cubes have an absolute translation and the order in which the two cubes are drawn does not matter.

Hierarchical composition using Push and Pop


 glPushMatrix ();


Save the state.
Push a copy of the CTM onto the stack.
 The CTM itself is unchanged.
glPopMatrix () ;


Restore the state, as it was at the last Push.
Overwrite the CTM with the matrix at the top of the stack.
glLoadIdentity ();
 Overwrite the CTM with the identity matrix.

Scene graphs



3D scenes are often stored in a directed acyclic graph (DAG) called a scene graph



Open Scene Graph (used in the Cave)
Sun ’s Java3D™
VRML
Common scene graph format:


 objects (cubes, spheres, cones, ...)
 stored as leaf nodes attributes (color, texture map, etc.), and transformations are also nodes in a scene graph
Very helpful in designing complex objects
 Allows us to know when to push and when to pop


Allows to know when to use display lists/index buffers
Allows us to animate different parts of a complex object

5. To get final scene
Scene graphs
ROBOT
4. Transform subgroups
3. To make sub-groups
2. We transform them upper body lower body stanchion base head trunk arm
1. Leaves of tree are standard size object primitives

Hierarchical transformation and scene graphs
Example: g1 o1 m1 m2 g2 g : group nodes m : matrices of transform nodes o : object nodes o2 m3 m4
- for o1, CT = m1
- for o2, CT = m2* m3
- for o3, CT = m2* m4* m5 o3
- for a vertex v in o3, position in the world (root) coordinate system is:
CT.v = (m2*m4*m5)v

Transformations in OpenGL:
Summary
Important:
• OpenGL maintains a number of matrices: ModelView, Projection, and Texture.
• We switch between them with the glMatrixMode() routine
• The most recent call to glMatrixMode() selects OpenGL’s current transformation
(CT) matrix
• Transformations are applied by post-multiplying CT by the desired transformation:
CT = CT · M

Practice session
 Use glRotate and Matrix.RotationAxis to rotate around any line
 Use scence graphs and hierarchical composition of transformations to build a nice
3D car and nice 3D airplane