1/29/13  

1  

Computer Graphics

Transformations

Simple Transformations

1/29/13  

2  

Context

3D Coordinate Systems •  Right hand (or counterclockwise) coordinate system

•  Left hand coordinate system –  Not used in this class and –  Not in OpenGL

1/29/13  

3  

What is a Transformation? •  Maps point (x, y, z) in one coordinate system to point

(x', y’, z’) in another coordinate system

x' = m11x + m12y + m13z +m14

y' = m21x + m22y + m23z +m24

z’ = m31x + m32y + m33z +m34

Affine transformation

How are Transforms Represented? x' = m11x + m12y + m13z +m14

y' = m21x + m22y + m23z +m24

z’ = m31x + m32y + m33z +m34

x' y’ z’

m11 m12 m13 m21 m22 m23

m31 m32 m33

m14

m24 m34

= x y z

+

p' = M p + t

1/29/13  

4  

Homogeneous Coordinates •  Add an extra dimension

x' y' z' 1

=

x y z 1

p' = M p

m11 m12 m13 m14 m21 m22 m23 m24

m31 m32 m33 m34

0 0 0 1

In General …

x' y' z' w’

=

x y z w

p' = M p

m11 m12 m13 m14 m21 m22 m23 m24

m31 m32 m33 m34

m41 m42 m43 m44

Most of the time w = 1 and we can ignore it.

1/29/13  

5  

Homogeneous to Cartesian (2D) •  Simply divide by w:

w = 0?

Point at infinity

w is a scale factor

Homogeneous Visualization (2D) •  Divide by w to normalize (homogenize)

w = 1

w = 2

(0, 0, 1) = (0, 0, 2) = …

(7, 1, 1) = (14, 2, 2) = …

(4, 5, 1) = (8, 10, 2) = …

(x, y, w)

1/29/13  

6  

2D Transformations

x' y' 1

= x y 1

1 0 0

0 1 0

tx

ty

1

Translate(c,0)

x

y

p p'

c

T(tx,ty)

Note:  3rd  dimension  makes  it  possible  to  encode  transla;ons  in  the  matrix!  

•  OpenGL:    glTranslated(tx, ty, 0)    

Translate  (tx,  ty)  

⎟⎟⎠

⎞⎜⎜⎝

⎛

+

+=⎟⎟⎠

⎞⎜⎜⎝

⎛ʹ′

ʹ′

y

x

tytx

yx

1/29/13  

7  

Translation of Objects •  How to translate an object with multiple

vertices? •  Translate individual vertices

Scale (sx, sy)

x' y' 1

= x y 1

sx

0 0

0 sy

0

0 0 1 S(sx,sy)

•  OpenGL:    glScaled(sx, sy, 1)    

!x!y

"

#$$

%

&''=

sxxsyy

"

#

$$

%

&

'' ( )yx,

( )yx ʹ′ʹ′,

fixed point

1/29/13  

8  

Reflection vs. Scale •  Along X-axis

•  Along Y-axis

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

−=⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

−=⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛ʹ′

ʹ′

11100010001

1yx

yx

yx

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−

=⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−

=⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛ʹ′

ʹ′

11100010001

1yx

yx

yx

Rotation

x' y' 1

=

x y 1

cos θ sin θ

0

-sin θ cos θ

0

0 0 1

•  OpenGL:  glRotated(θ,  0,  0,  1)    

( )yx,( )yx ʹ′ʹ′,

θ

fixed  point  

x ' = xcosθ − ysinθy ' = xsinθ + ycosθ

R(θ)

1/29/13  

9  

Fixed Rotation Point •  Default rotation center is origin (0,0)

θ > 0: Rotate counterclockwise

θ < 0: Rotate clockwise

Rotation •  How to rotate an object with multiple vertices?

1/29/13  

10  

•  (x,y)  -­‐>  Rotate  about  the  origin  by  θ (x’,  y’)  •  How  to  compute  (x’,  y’)  ?  

•  x  =  r  cos  (θ)          y  =  r  sin  (θ)  

•  x’  =  r  cos  (φ  +  θ)          y’  =  r  sin  (φ  +  θ)  

Deriving the Rotation Matrix

Deriving the Rotation Matrix •  Use trigonometry identities    cos(θ  +φ)  =  cosθ  cos  φ  -­‐  sinθ  sin  φ      sin(θ  +φ)  =  sinθ  cos  φ  +  cosθ  sin  φ

•  Yields    x’  =  x  cosθ  –  y  sinθ      y’  =  y  cosθ  +  x  sinθ

1/29/13  

11  

Arbitrary Rotation Center

•  Where is the rotation center here?

Arbitrary Rotation Center •  To rotate about arbitrary point P = (xr, yr) by θ:

– Translate object by (-xr, -yr) so that P is at origin – Rotate the object by θ – Translate object back by (xr, yr)

•  In matrix form:

),()(),( rrrr yxTRyxT −−⋅⋅ θ

1/29/13  

12  

Arbitrary  Rota;on  Center  

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

−−

+−−

=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

−

−

⋅⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛ −

⋅⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

=

−−⋅⋅

100sin)cos1(cossinsin)cos1(sincos

1001001

1000cossin0sincos

1001001

),()(),(

θθθθ

θθθθ

θθ

θθ

θ

rr

rr

r

r

r

r

rrrr

xyyx

yx

yx

yxTRyxT

How are Transforms Combined?

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

(0,0)

(1,1) (2,2)

(0,0)

(5,3)

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

1/29/13  

13  

Non-Commutative Compositions Scale then Translate: p' = T ( S p ) = TS p

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

(0,0)

(1,1) (2,2)

(0,0)

(5,3)

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

(0,0)

(1,1) (4,2)

(3,1)

(8,4)

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

Non-Commutative Compositions

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

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

1/29/13  

14  

Hands-On Session •  2D Transformation Applet at

http://www.csc.villanova.edu/~mdamian/graphics/ applets/Transformations2D.html

or

http://www.wiley.com/legacy/products/subject/life/biological_anthropology/

0471205079_virtual_reconstruction/chapter5_trafo.html

•  Request handout from the instructor

3D Transformations

1/29/13  

15  

Translate (tx, ty, tz)

x' y' z' 1

=

x y z 1

1 0 0 0

0 1 0 0

0 0 1 0

tx

ty

tz

1

Translate(c,0,0)

x

y

p p'

c

T(tx,ty,tz)

Note:  4th  dimension  makes  it  possible  to  encode  transla;ons  in  the  matrix!  

•  OpenGL:    glTranslated(tx, ty, tz)    

Scale (sx, sy, sz) •  Isotropic (uniform)

scaling: sx = sy = sz

x' y' z' 1

=

x y z 1

sx

0 0 0

0 sy

0 0

0 0 sz

0

0 0 0 1

x

p

p'

qq'

y

S(sx,sy,sz)

•  OpenGL:    glScaled(sx, sy, sz)    

1/29/13  

16  

3D  Reflec;on  

•  About  the  xy-­‐plane:  

⎟⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜⎜

⎝

⎛

⎟⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜⎜

⎝

⎛

=

⎟⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜⎜

⎝

⎛

ʹ′

ʹ′

ʹ′

11zyx

zyx

z

y

x

Rotation •  About z axis

x' y' z' 1

=

x y z 1

cos θ sin θ

0 0

-sin θ cos θ

0 0

0 0 1 0

0 0 0 1

x

y

z

p

p'

θ

•  OpenGL:  glRotated(θ,  0,  0,  1)    

1/29/13  

17  

Rotation •  About x axis

x' y' z' 1

=

x y z 1

0 cos θ sin θ

0

0 -sin θ cos θ

0

0 0 0 1

x

y

zp

p'

θ

•  OpenGL:  glRotated(θ,  1,  0,  0)    

1 0 0 0

Rotation •  About y axis

x' y' z' 1

=

x y z 1

cos θ 0

-sin θ 0

sin θ 0

cos θ 0

0 1 0 0

0 0 0 1

x

y

z

p p' θ

•  OpenGL:  glRotated(θ,  0,  1,  0)    

1/29/13  

18  

Rotate(θ, r)

x

y

z

θ

r

x' y' z' 1

=

x y z 1

rxrx(1-c)+c ryrx(1-c)+rzs rzrx(1-c)-rys

0

0 0 0 1

rzrx(1-c)-rzs rzrx(1-c)+c rzrx(1-c)-rxs

0

rxrz(1-c)+rys ryrz(1-c)-rxs rzrz(1-c)+c

0

where c = cos θ & s = sin θ

Rotation •  About Arbitrary Axis

r = (rx,ry,rz)  

Rota;on  About  Arbitrary  Axis  •  Rotate  by  θ  about  the  axis  (rx, ry, rz).    •  Strategy:  

– Align  the  rota;on  axis  with  the  z  axis  (two  rota;ons)  – Rotate  by  θ    around  z    – Undo  the  two  alignment  rota;ons  

R  =  Rx(-­‐αx)  Ry(-­‐αy)  Rz(θ)  Ry(αy)  Rx(αx)  

•  Problem:  – Finding  αx,  αy

(rx, ry, rz)  

1/29/13  

19  

Computing the x-Rotation αx

§  Project unit vector (rx, ry, rz) onto plane x = 0

d = ry2 + rz

2,  cos  αx  =  rz / d,  sin  αx  =  ry / d

Rotating p into the xz-plane about the x-axis is equivalent to rotating p’ onto z-axis (by angle αx about x-axis)

(rx, ry, rz)  

x

y

z

αx  

d  1  

p  =    p’  

Computing the x-Rotation αx

•  Insert in the rotation matrix about x-axis:

•  Note that we do not even compute αx

⎟⎟⎟⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜⎜⎜⎜

⎝

⎛

−=

⎟⎟⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜⎜⎜

⎝

⎛

−=

1000

00

00

0001

1000

0cossin0

0sincos0

0001

)(

dr

dr

dr

dr

Rzy

yz

xx

xx

xx

αα

ααα

1/29/13  

20  

Compu;ng  the  y-­‐Rota;on  αy

§  Determine  the  rota;on  about  the  y-­‐axis:  

rx

αy d   1  

cos  αy  =    sin  αy  =    Ry  (αy)    =    

… and finally •  M = Rx(-αx) Ry(-αy) Rz(θ) Ry(αy) Rx(αx)

•  Once computed, M does the complex rotation

with a single matrix multiplication per vertex

•  OpenGL gives us a simple function that computes M for us: glRotatef( … );

1/29/13  

21  

Rotation about Arbitrary Axis

Hands-On Session •  Self-Training Tool for Learning 3D Geometrical Transformations (3gtd)

http://www3.uji.es/~ribelles/

•  Request handout from the instructor

1/29/13  

22  

glutWireTorus(inner, outer, sides, rings);

3D GLUT Primitives

glutWireCone(radius, height, slices, stacks);

GLUT Primitives

1/29/13  

23  

glutWireSphere(radius, slices, stacks);

GLUT Primitives

GLUT Primitives

glutWireTetrahedron()

glutWireOctahedron()

glutWireDodecahedron()

glutWireIcosahedron()

1/29/13  

24  

GLUT Primitives

glutWireTeapot(size);

Alternative calls are glutSolid...

OpenGL Transformations

1/29/13  

25  

Basic OpenGL Transformations •  Translation:

glTranslatef(tx, ty, tz) glTranslatef(tx, ty, 0) à for 2D

•  Rotation: glRotatef(angle, rx, ry, rz) glRotatef(angle, 0, 0, 1) à for 2D

•  Scaling: glScalef(sx, sy, sz) glScalef(sx, sy, 1) à for 2D

OpenGL Transformation Matrices

•  The CTM is a 4 x 4 matrix – Part of the OpenGL state

•  Operations:

Current Transformation Matrix (CTM)

1/29/13  

26  

Model-View and Projection Matrices

Direct Rotation/Translation/Scaling

1/29/13  

27  

Composed Transformation Example

•  Q: What kind of operation is this?

Order of Transformations (right to left)

1/29/13  

28  

The MODELVIEW Matrix •  glMatrixMode (GL_MODELVIEW);

– modelview mode tells OpenGL that we will be specifying geometric transformations. The command simply says that the current matrix operations will be applied on the MODELVIEW matrix.

– The other mode is the projection mode, which specifies the matrix that is used for projection transformations (i.e., how a scene is projected onto the screen)

Transforma;ons  Example  •  MODELVIEW  Matrix:  

– Before  a  point  is  drawn  on  the  display,  it  is  mul;plied  by  this  matrix  to  get  the  transformed  loca;on    

void DrawPoint() { glBegin( GL_POINTS ); glVertex2f( 1.0, 3.0 ); glEnd(); }

y

x

1 3 1

MV Point  loca;on    on  display:  

1/29/13  

29  

MODELVIEW  Matrix  void Display() { glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // MV = DrawPoint(); // point#1 glTranslatef(4.0, 2.0, 0,0 ); // MV = DrawPoint(); // point#2

y

x

y

x

MODELVIEW  Matrix   glRotatef(30.0, 0, 0, 1 ); // MV = DrawPoint(); // point#3 glScalef(2, 2, 1 ); // MV = DrawPoint(); // point#4 } // end Display

y

x

y

x

1/29/13  

30  

Consider  This!  •  Suppose  you  have  a  func;on  called  DrawSquare()  that    draws  a  

square  centered  at  the  origin  with  sides  1.      •  Write  an  OpenGL  code  fragment  that  draws  the  table  below.    The  

table  top  is  centered  at  (0,0)  and  has  dimensions  2  x  10.    The  table  legs  have  dimensions  2x4  and  they  aiach  to  the  underside  of  the  table  top  at  points  (-­‐4,-­‐1)  and  (4,-­‐1).    To  get  you  started,  two  lines  of  code  are  included  below.    Your  code  should  call  DrawSquare()  three  ;mes  to  draw  the  table  top  and  legs.    

y

x

glMatrixMode( GL_MODELVIEW ); glLoadIdentity();

Consider  This!  

x

glMatrixMode( GL_MODELVIEW ); glLoadIdentity();

1/29/13  

31  

glPushMatrix  and  glPopMatrix  •  Mo;va;ng  Example:    

void Display() {

glTranslatef( 8, 8, 0 ); // MV =

DrawRing(); // 16x4 DrawPlanet(); // 8x8

}

•  Use  DrawUnitCircle  to  implement  Display  

Mo;va;ng    gl(Push,Pop)Matrix  

void DrawRing() { // MV = glRotatef( 45, 0, 0, 1 ); glScalef( 8, 2, 1 ); // MV = DrawUnitCircle(); }

1/29/13  

32  

Mo;va;ng    gl(Push,Pop)Matrix  

void DrawPlanet() { // MV = glScalef( 4, 4, 1 ); // MV = DrawUnitCircle(); }

Using  gl(Push,Pop)Matrix   void DrawRing() { glPushMatrix(); glRotatef( 45, 0, 0, 1 ); glScalef( 8, 2, 1 ); DrawUnitCircle(); glPopMatrix(); } void DrawPlanet() { glPushMatrix(); glScalef( 4, 4, 1 ); DrawUnitCircle(); glPopMatrix(); }

void Display() { glTranslatef( 8, 8, 0 ); // MV = DrawRing(); DrawPlanet(); }

1/29/13  

33  

Prac;ce  gl(Push,Pop)Matrix  glLoadIdentity(); MV = I glPushMatrix(); MV = I glTranslatef( 1, 1, 0 ); MV = T(1,1) glScalef( 2, 2, 1 ); MV = T(1,1)S(2,2) glPushMatrix(); glTranslatef( 2, 2, 0 ); glPushMatrix(); glRotatef( 30, 0, 0, 1 ); glPopMatrix(); glPopMatrix(); glTranslatef( 3, 3, 0 ); glPopMatrix();

Hands-On Session •  OpenGL Transformation Applet at

http://www.csc.villanova.edu/~mdamian/graphics/ applets/OpenGLTransformations.html

•  Request handout from the instructor

1/29/13  

34  

Summary •  Transformations

– Translation (required direction vector) – Scaling (requires fixed point, scaling direction) – Rotation (requires fixed point, vector, angle)

•  Combining transformations – Order is important