2IV60 Computer graphics

set 4:3D transformations and

hierarchical modeling
Jack van Wijk
TU/e
 From 2D to 3D
• Much +/- the same:
– Translation, scaling
– Homogeneous vectors: one extra coordinate
– Matrices: 4x4
• Rotation more complex
 3D Translation 1
Translate over vector (tx, ty, tz ): y

x’=x+ tx, y’=y+ ty , z’=z+ tz P+T

T
or
P
P' = P + T, met
x
 x'   x  tx 
     
P' =  y '  , P =  y  en T =  t y 
z
 z'  z t 
     z
H&B 9-1:304-305
 3D Translation 2
In 4D homogeneous coordinates: y

P' = MP, or T P+T

 x'   1 0 0 t x  x  P
     x
 y'   0 1 0 t y  y 
 z'  =  0 0 1 t z  z 
    
 1  0 0 1  1 
z
   0
H&B 9-1:304-305
 3D Rotation 1
Rotate over angle a around z - as :
x' = x cosa − y sin a
y ' = x sin a + y cosa z
y
z' = z P’
Or a
P' = R z (a )P, with P
 cosa − sin a 0 0 x
 
 sin a cosa 0 0
R z (a ) = 
0 0 1 0
 
 0 1 
 0 0 H&B 9-2:305-313
 3D Rotation 2

z y z y z y

x x x

Rotation around axis:

- Counterclockwise, viewed from rotation axis

H&B 9-2:305-313
 3D Rotation 3

z→x z x→ y
z y y z y
x→ y y→z
y→z z→x
x x x

Rotation around axes:

Cyclic permutation coordinate axes
x→y→z→x
H&B 9-2:305-313
 3D Rotatie 4
Rotate over angle a around z - as : Rotate over angle a around x - as :
x' = x cosa − y sin a y ' = y cosa − z sin a
z→x
y ' = x sin a + y cosa z ' = y sin a + z cosa
z' = z
x→ y x' = x
Or y→z Or
P' = R z (a )P, with P' = R x (a )P, with
 cosa − sin a 0 0 1 0 0 0
   
 sin a cosa 0 0  0 cosa − sin a 0
R z (a ) =  R x (a ) = 
0 0 1 0 0 sin a cosa 0
   
 0 1  0 1 
 0 0  0 0

H&B 9-2:305-313
3D Rotation around arbitrary axis 1
Rotation around axis, parallel to coordinate axis, through point Q.
For example. the z - as. Similar as 2D rotation :
1. Translate over -Q;
2. Rotate around z - axis;
2
3 z
3. Translate back over Q.
Or : P’ y
P' = T(Q)R z (a )T( −Q)P a

1 Q P
x

H&B 9-2:305-313
3D Rotation around arbitrary axis 2
Rotation around axis through two points P1 and P1 .
More complex:
1. Translate such that axis goes through origin;
2. Rotate…
3. Translate back again.
y P2

P1

z x

H&B 9-2:305-313
3D Rotation around arbitrary axis 3
y P2 y y
P2'

P1 P1' P1'
x x z x
z z ''
P
2

Initial 1. translate axis 2. rotate axis

y y y P2
P2'

P1' P1' P1
z x x
''
P
2 z z x
3. rotate around 4. rotate back 5. translate back
z-axis
3D Rotation around arbitrary axis 3
y P2 y y
P2'

P1 T(−P1) '
R
P' P
1
1

x x z x
z z ''
P
2

Initial 1. translate axis 2. rotate axis

y y y P2
P2'
Rz(a)
'
R−1 T(P1)
P1 P' P1
1
z x x
''
P
2 z z x
3. rotate around 4. rotate back 5. translate back
z-axis
3D Rotation around arbitrary axis 3
M = T(P1) R−1Rz(a) RT(−P1)
y P2 y ' y
P2

P1 T(−P1) '
R
P' P
1
1

x x z x
z z ''
P
2

Initial 1. translate axis 2. rotate axis

y y y P2
P2'
Rz(a)
'
R−1 T(P1)
P1 P' P1
1
z x x
''
P
2 z z x
3. rotate around 4. rotate back 5. translate back
z-axis
3D Rotation around arbitrary axis 4
Difficult step: R

y y
P2'
2. rotate axis
'
P P1'
1

x z x
z P''
2

Find rotation such that rotation axis aligns with z-axis.

Two options:
1. Step by step by step (see H&B, 309-312)
2. Direct derivation of matrix H&B 9-2:305-313
3D Rotation around arbitrary axis 5
1. Construct orthonormal axis frame u, v, w;

2. Invent rotation matrix R, such that:

u is mapped to z-axis; y
u
v is mapped to y-axis; v
w is mapped to x-axis. w
x
z

H&B 9-2:305-313
3D Rotation around arbitrary axis 6
Construct orthonormal axis frame u, v, w:

u = (P2−P1) / |P2−P1|
v = u  (1,0,0) / | u  (1,0,0) | y
w=vu u
v
(If u = (a, 0, 0), then use (0, 1, 0)) w
x
This frame is orthonormal: z
Unit length axes: u.u = v.v = w.w = 1
All axes perpendicular: u.v = v.w = w.u = 0
H&B 9-2:305-313
3D Rotation around arbitrary axis 7
Generic rotation matrix :
y
 r11 r12 r13 0 u
  v
 r21 r22 r23 0
R = w
r r r33 0 x
 31 32 
 0 1 
 0 0 z
Fill in R such that
 ux   0  vx   0   wx   1 
           
u y   0  vy  1  wy   0 
R  =  , R  =  , and R  =  
uz 1 vz 0 wz 0
           
 1  1  1  1  1  1
           
H&B 9-2:305-313
 3D Rotation around arbitrary axis 8
Fill R, such that
 ux   0   vx   0   wx   1 
           
uy  0  vy   1   wy   0 
R  =  , R  =  , and R  =  
u 1 v 0 w 0
 z    z    z  
 1  1  1  1  1  1
            y
u
Solution :
v
 wx wy wz 0 w
  x
 vx vy vz 0
R =
0
z
ux uy uz
 
0 1 
 0 0
Done! But how to find R−1 ? H&B 9-2:305-313
 Inverse of rotation matrix 1
Each rotation matrix is an orthonormal matrix M:

 ux vx wx 
 
M = (u v w ) =  u y vy wy  y
u  u
 z vz wz  v
w
The frame u, v, w is orthonormal: x
Unit length axes: u.u = v.v = w.w = 1 z
All axes perpendicular: u.v = v.w = w.u = 0.

Requested: M-1 such that M-1M = I H&B 9-2:305-313

 Inverse of rotation matrix 2
Requested: M-1 such that M-1M = I
Solution:
 uT   u x uy uz 
   
−1
M = M = v  =  vx
T
 T
vy vz 
 T   
 w  wx wy wz 
  
In words:
The inverse of a rotation matrix is the transpose.
(For a rotation around the origin).
H&B 9-2:305-313
 Inverse of rotation matrix 3
Requested: M-1 such that M-1M = I
Solution: M-1 = M-T
Check:

 uT   u  u u  v u  w  1 0 0
     
M M =  v (u v w ) =  v  u v  v v  w  =  0 1 0  = I
T T
 T  w  u w  v w  w  0 0 1
w     
 

H&B 9-2:305-313
 3D Rotation with quaternions
Quaternions:
• Extension of complex numbers
• Four components
• Scalar value + 3D vector: q=(s,v)
• Special calculation rules
• Compact description of rotations
• To be used if many complex rotations have
to be done (esp. animation)

H&B 9-2:313-317
 3D scaling
Scale with factors sx, sy,sz :
x’= sx x, y’= sy y, z’= sz z
or
P' = SP , or
 x'   s x 0 0 0  x 
    
 y'   0 sy 0 0  y 
 z'  =  0 0 sz 0  z 
    
1  0 1  1 
   0 0
H&B 9-3:317-319
 More 3D transformations
+/- same as in 2D:

• Matrix concatenation by multiplication

• Reflection
• Shearing
• Transformations between coordinate systems

H&B 9-4, 9-5, 9-6:319-324

 Affine transformations 1
Generic name for these transformations:
affine transformations
x' = a xx x + a xy y + a xz z + bx
y ' = a yx x + a yy y + a yz z + b y
z ' = a zx x + a zy y + a zz z + bz

H&B 9-7:324
 Affine transformations 2
Properties:
1. Transformed coordinates x’,y’ and z’ are linearly
dependent on original coordinates x, y en z.
2. Parameters aij en bk are constant and determine type
of transformation;
3. Examples: translation, rotation, scaling, reflection
4. Parallel lines remain parallel
5. Only translation, rotation reflection: angles and
lengths are maintained
H&B 9-7:324
 Hierarchical modeling 1
ComplexObject::= Composition of Objects
Object::= SimpleObject or ComplexObject
puppet

head torso arms legs

left arm right arm

upper arm lower arm hand

H&B 11:383-391
 Hierarchical modeling 2
Hierarchical model: tree structure …

puppet

head torso arms legs

left arm right arm

upper arm lower arm hand

H&B 11:383-391
 Hierarchical modeling 3
Hierarchical model: tree structure or
directed, acyclic graph
puppet

head torso arms legs

left arm right arm

upper arm lower arm hand

H&B 11:383-391
 Hierarchical modeling 4
Scene graph:
Leaf: primitive object
geometric object, possibly parametrised
Composite node: instruction for composition (usually union)
Leafs, nodes and/or edges: transformations + other data

Implementation: data (read model, generic engine) or

code (translate into statements & calls).

H&B 11:383-391
 Hierarchical modeling 5
Local coordinates: coordinates of node

world world coordinates

train coordinates
train wheel coordinates

wheel
H&B 11:383-391
 Hierarchical modeling 6
Implementation: Many variations possible.
DrawWorld
DrawTrain(P1, S1);
wereld DrawTrain(P2, S2);

DrawTrain(P, S);
trein Translate(P); Scale(S);
DrawChimney(); …
DrawWheel(W1); DrawWheel(W2); DrawWheel(W3);
Scale(1/S); Translate(-P);

DrawWheel(W);
wiel Translate(W); DrawCircle(radius); Translate(-W);

H&B 11:383-391
 Hierarchical modeling 7
Use structure of model to structure implementation:
- Hierarchy (use classes, procedures and functions);
- Regularity (use loops);
- Variation (use conditions).
How many lines of code you need for this picture?

H&B 11:383-391
 Hierarchical modeling 7
DrawTwoGrids
DrawGrid;
Translate(7,0);
DrawGrid;

DrawGrid
for i := 1 to 5 do
for j := 1 to 5 do
How many lines of code you DrawCell(i, j, (i+j) mod 2 = 0);
need for this picture?
DrawCell(x, y, use_red)
SetColor(dark_grey);
Mwah, 10-20 should do DrawRect(x+0.2,y, 0.7, 0.7);
if use_red then SetColor(red)
else SetColor(light_grey);
Aim for as clean as possible, DrawRect(x, y+0.2, 0.7, 0.7);
not as compact as possible
H&B 11:383-391
 Next…
• We know how to transform objects
• Next step: Viewing objects