CG OpenGL vectors geometric & transformations-course 5

Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室

National Taiwan Normal University

Vectors & Geometric Transformations

Chen Jing-Fung (2006/11/17) Assistant Research Fellow,

Digital Media Center, National Taiwan Normal University

Ch5: Computer Graphics with OpenGL 3th, Hearn Baker

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

2

3D Graphics

• Goal – Using mathematical method produce 2D images

which is described 3D • Problems

– Modeling (environment) • Construct a scene • Hierarchical description of a complex object (several

parts composed) -> simpler parts

– Rendering • Described how objects move around in an animation

sequence? • Simply to view objects from another angle



3

Coordinate Systems

• Coordinate systems are fundamental in computer graphics – Describe the locations of points in space

• Project from one coordinate system to another – Easier to understand and implement



4

One coordinate system

• Scalars (α), Point (P) & Vector (V)

x

y

x

y

P1: (x1, y1)

P2: (x2, y2)

V1=[x1, y1]

V2=[x2, y2] V=P2-P1=[x2- x1, y2-y1]=[vxy] vx vy

a

b

a+b

α V=[αvij] Where is a-b & ab ??

Scalars (α)



5

Two vectors in one coordinate system

• Scalar product or dot product – V1.V2=|V1| |V2| cos Θ

• Commutative V1.V2= V2.V1

• Associative V1.(V2+V3)= V1.V2+V1.V3

• Vector product or cross product – V1xV2=u|V1| |V2| sin Θ

• Anti-commutative V1xV2= -V2xV1

• No associative V1x(V2xV3) ≠ (V1xV2)xV3

• Associative V1x(V2+V3)= (V1xV2)+(V1xV3)

V1

V2

Θ

V1

V2 V1xV2

Θ u: unit vector

1 2 1 1 1

2 2 2

x y z

x y z

x y z

v v v

v v v

u u u

V V



6

Two coordinate systems

• The point is represented by two different coordinate systems – Maybe only one coordinate system can

represent the point by the easier way

(4, 6)

(u, v)

x

y

u

v



7

Transformations (1)

• Transformation functions between two Coordinate systems (rendering)

(4, 6)

(u, v)

x

y

u

v

u=x-3 v=y-4

x=u+3 y=v+4



8

Transformations (2)

• In the same coordinate system to modify an object’s shape

(4, 6)

x

y

(2, 3)

x

y

x’=x-2 y’=y-3

x=x’+2 y=y’+3



9

2D affine transformations

• Affine transformation – Linear projected function

'

'

xx xy x

yx yy y

x a x a y t

y a x a y t

'

'

xx xy x

yx yy y

a a tx x

a a ty y

or

linear

x

x

x y x

y

x y



10

Composition of affine transforms

• Simple transformations – Translation

– Scaling

– Rotation

– Shear

– Reflection



11

2D Translation

• Translation equation – Translation is a rigid-body transformation that

moves objects without deformation. – Delete the original polygon

• To cover the background color (& save it in different array)

x

y P’3

' 1 0

' 0 1

x

y

tx x

ty y

' P P T y

x

yt

xt



12

2D Scaling

• Scaling equation

– Uniform scaling: sx=sy – Differential scaling: sx≠sy

' P S P

0' 0

0' 0

x

y

sx x

sy y

x

y

sx>1, sy< 1

x

y

sxx

syy



13

2D Rotation (1)

• Single point rotation – Pivot-point = origin

' cos * sin *

' sin * cos *

x x y

y x y

' cos( ), ' sin( )x r y r

(x’,y’)

(x,y) cos( ), sin( )x r y r

r



14

2D Rotation (2) • Rotation equation

– Now, graphics packages all follow the standard

column-vector convention • OpenGL, Java, Matlab …

– Trans. and rotations are rigid-body transformations that move object without deformation

• Each point on object is rotation through the same angle • Must be defined the direction of the rotated angle

' ( ) P R P' cos sin 0

' sin cos 0

x x

y y

Rotation point is also called pivot point



15

Y-axis Shear

• Shear along y axis (what is x-axis shear?)

1 0' 0

1' 0y

x x

shy y

x

y

x

y



16

Y axis Reflection

• What is the reflection of x-axis?

' 1 0 0

' 0 1 0

x x

y y

x

y

x

y



17

Basic transformations

• General form: – Translation (shift): M1=identity matrix

– Rotation or scaling: M2=translation term (R(Θ)) or scaling fixed pixel (S(s*))

• The efficient approach – To produce a sequence of transformations with

these equation • Scale -> rotate(Θ) -> translate (linear)

• The final coordinate positions are obtained directly from initial coordinates

'

2 1 P M P M



18

Homogeneous coordinate

• General transformation equations: – x’ = axx + axy + tx

y’ = ayx + ayy + ty

• A standard technique is used to expand the matrix 2D (x,y) -> 3D(x,y,z) – Homogenous coordinates: (xh, yh, h) – Homogenous parameter: h

• ‘h’ means the number of points in z-axis – Simply to set h=1

'

'

1 0 0 1 1

xx xy x

yx yy y

x a a t x

y a a t y

h*x

h*y

2D



19

Basic Matrix3x3

• Translation matrix

• Scaling matrix

• Rotation matrix

1 0

0 1

0 0 1

x

y

t

t

'

*( )t P T P

'

*( )s P S P

0 0

0 0

0 0 1

x

y

s

s

'

*( )t P P T

cos sin 0

sin cos 0

0 0 1

' ( ) P R P



20

Arbitrary point’s rotation (1)

• Single point rotation – Pivot-point (xr,yr) ! = original point

• How to find solution – !! Coordinate transformation

' ( )cos ( )sin

' ( )sin ( )cos

r r r

r r r

x x x x y y

y y x x y y

' cos( ), ' sin( )u r v r

(u’,v’)

(u,v) cos( ), sin( )u r v r

r

r

r

u x x

v y y

' '

' '

r

r

u x x

v y y

(xr,yr)

1. translate

2. rotate



21

Arbitrary point’s rotation (2)

• General 2D point rotation (or scaling) – (xr, yr) & (xr, yr) ≠Origin

• Translate origin coordinate -> the point position

• Rotate (or scaling) the object about the coordinate origin

• Translate the point returned to its original position

( , )r rx yT

( )R

( , )r rx y T

( , )x yor s sS



22

Pivot-point rotation composite matrix

1 0 cos sin 0 1 0

0 1 sin cos 0 0 1

0 0 1 0 0 1 0 0 0

c c

c c

X X

Y Y

cos sin (1 cos ) sin

sin cos (1 cos ) sin

0 0 1

c c

c c

x y

y x

( , ) ( ) ( , ) ( , , )c c c c c cx y x y x y T R T R

( , )r rx yT

( )R ( , )r rx y T

' ( )cos ( )sin

' ( )sin ( )cos

r r r

r r r

x x x x y y

y y x x y y



23

Scaling an Object not at the Origin

• What case happens? – Apply the scaling transformation to an

object not at the origin?

• Based on the rotating about a point composition, what should you do to resize an object about its own center?

( , ) ( , ) ( , ) ( , , , )c c x y c c c c x yx y s s x y x y s s T S T S



24

Back to Rotation About a Pt • R (rotation matrix) and p (Pivot-point)

describe how to rotate – Translation Origin to the position:

– Rotation:

– Translate back:

• The composite transformation involves the rotation matrix.

x x p

( ) x Rx R x p Rx Rp

x x p Rx Rp p

( , ) ( ) ( , )nc nc nc ncx y x y T R T



25

Matrix concatenation properties

• What is matrix concatenation? – Multiplication of matrices is associative

• Premultiplying (left-to-right) = ?? Postmultiplying (right-to-left)

– Transformation products not be commutative

3 2 1 3 2 1 3 2 1( ) ( ) M M M M M M M M M

2 1 1 2 M M M M



26

3D transformations

• Homogeneous coordinates – 4x4 matrices

• Specification of translation, rotation, scaling and other matrices in OpenGL – glTranslate(), glRotate(), glScale(),

glMultMatrix()

'

'

'

1 0 0 0 1 1

x

y

z

x a d g t x

y b e h t y

z c f u t z



27

3D translation & scaling

• 3D Translation

• 3D Scaling

' 1 0 0

' 0 1 0

' 0 0 1

1 0 0 0 1 1

x

y

z

x t x

y t y

z t z

' 0 0 0

' 0 0 0

' 0 0 0

1 0 0 0 1 1

x

y

z

x s x

y s y

z s z



28

3D z-Axis Rotation

• 2D extend along z-axis – (2D->3D)

y axis

z axis x axis

'

'

'

cos sin 0

sin cos 0

0 0 1

X X

YY

ZZ

counterclockwise

' ( )z P R P

y-axis & x-axis?

'

'

'

cos sin 0 0

sin cos 0 0

0 0 1 0

0 0 0 1 11

X X

YY

ZZ



29

3D Rotation of arbitrary axis

y

z x

y

z x

y

z x

y

z x

y

z x

P1

P2

P’1

P’2

Initial position P1 translate to the Origin

P’1 P”2

P’2 rotate onto z-axis

P’1 P”2

Rotation the Object around z-axis Rotate the axis to its

Original Orientation

P’1

P’2

y

z x

P1

P2

Translate the rotation axis to its Original position

Step 1 Step 2

Step 3 Step 4 Step 5

1( ) R T R T1 1( ) ( ) ( ) ( ) ( )x y z y x R R R R R R



30

Problems with Rotation Matrices

• Specifying a rotation really only requires 3 numbers in three Cartesian coordinates – 2 numbers to show a unit vector – Third number to show the rotation angle

• Rotation matrix has a large amount of redundancy – Orthonormal constraints reduce degrees of

freedom back down to 3 – Keeping a matrix orthonormal is difficult when

transformations are combined



31

Alternative Representations

• Specify the axis and the angle (OpenGL method) – Hard to compose multiple rotations

• Specify the axis, scaled by the angle – Only 3 numbers, but hard to compose

• Euler angles: – First, how much to rotate about X – Second, how much to rotate about Y – Final, how much to rotate about Z

• Hard to think about, and hard to compose

• Quaternions



32

Quaternions

• 4-vector related to axis and angle, unit magnitude – Rotation about axis (x,y,z) by angles θ:

• Easy to compose

• Easy to find rotation matrix

' cos sin 0 0

' sin cos 0 0

' 0 0 1 0

1 0 0 0 1 1

x x

y y

z z



33

Transformation in OpenGL

• Transformation pipeline & matrices – Current Transformation Matrix (CTM)

– CTM operations

– CTM in OpenGL

– OpenGL matrices



34

Transformation pipeline & matrices

• OpenGL matrices have three types – Model-View (GL_MODEL_VIEW) – Projection (GL_PROJECTION) – Texture (GL_TEXTURE) (ignore for now)

vertex Modelview

matrix

Projection Matrix

modelview

modelview

projection

object eye



35

Current Transformation Matrix (CTM)

• CTM is a 4x4 homogeneous coordinate matrix – It can be altered by a set of function

– It is defined in the user program

– and loaded into a transformation unit

P

C

P’=CP

Current matrix

CTM vertices vertices



36

CTM operations

• CTM can be altered by loading new matrix or by postmultiply matrix – Load form

• identity matrix: C←I

• an arbitrary matrix: C←M

• translation matrix: C←T …

– Postmultiply form • an arbitrary matrix: C←CM

• a translation matrix: C←CT

• a rotation matrix: C←CR …

glLoadIdentity();

T: glTranslatef(dx, dy, dz); R: glRotatef(angle, vx, vy, vz); S: glScalef(sx, sy, sz);

glMultMatrixf( );

User input matrix

P

C P’=CP

Current matrix

CTM vertices vertices



37

Example by point rotation

• Rotation with an arbitrary point – Order of transformations in OpenGL

(one step = one function call) • Loading an identity matrix: C←I

• Translation Origin to the position: C← CT

• Rotation: C← CR

• Translate back: C← CT-1

– Result: C= TRT-1

Initial



38

CTM in OpenGL

• In OpenGL, CTM has the model-view matrix and the projection matrix

– Manipulate those matrices by concatenation and start from first setting matrix

Modelview matrix

vertices vertices Projection

matrix

CTM

glMatrixMode routine Geometric transformations



39

OpenGL matrices (1)

• Current matrix

• Arbitrary matrix – Load 16-elements array

• A suffix code: f or d • The elements must be specified in column order

– First list 4-elements in first-column – … – Finally the fourth column

– Stack & store the Matrix

glMatrixMode (GL_MODELVIEW|GL_PROJECTION)

glLoadMatrix* (elems);

glPushMatrix ();

glPopMatrix ();



40

OpenGL matrices (2)

• Multiple by two arbitrary matrices C<-M2M1

• Access matrices by query functions

glLoadIdentity();

glMultMatrixf(elemsM2);

glMultMatrixf(elemsM1);

glGetIntegerv

glGetFloatv

glGetBooleanv

glGetdoublev

glIsEnabled…



41

Summery

• Rotation related with axis and the origin – Use the same trick as in 2D:

• Translate origin to the position

• Rotate

• translate back again

• Rotation is not commutative – Rotation order matters

– Experiment to convince by yourself



42

Transformation trick

• Rotation and Translation are the rigid-body transformations – Do not change lengths, sizes or angles,

so a body does not deform

• Scale, shear… extend naturally transformation from 2D to 3D



43

Triangle’s rotation at arbitrary point

• vertices tri = {{50.0, 25.0}, {150.0, 40.0}, {100.0, 100.0}}; //set object’s vertices

• Centpt; //find center point to describe the triangle

• glLoadIdentity(); • glTranslatef(); //translate the center point • glRotatef(angle, vx,vy,vz); //rotate the center

point, axis=(vx,vy,vz), angle: user define • glTranslatef(); //translate return



44

Middle project

• Make some visual components by yourself – more than three object’s from HW1 & HW2

• Practice each one composition (rotation, scaling, translate, shear and reflection)

– Note: original & new

• Practice combining two or three compositions

• Team work (2~3)



45

Reference

• http://www.cs.wisc.edu/~schenney/

• http://graphics.csie.ntu.edu.tw/~robin/courses/3dcg06/

• http://www.cse.psu.edu/~cg418/

• http://groups.csail.mit.edu/graphics/classes/6.837

http://www.cs.wisc.edu/~schenney/

http://graphics.csie.ntu.edu.tw/~robin/courses/3dcg06/

http://graphics.csie.ntu.edu.tw/~robin/courses/3dcg06/

http://www.cse.psu.edu/~cg418/

http://groups.csail.mit.edu/graphics/classes/6.837

http://groups.csail.mit.edu/graphics/classes/6.837



46

Inverse matrix

• Identify matrix (Inxn) – MM-1=I,

– Inverse matrix (M-1 )

3 3

1 0 0

0 1 0

0 0 1

x

I

1

1 0

0 1

0 0 1

x

y

t

t

T

1 0

0 1

0 0 1

x

y

t

t

T

cos sin 0

sin cos 0

0 0 1

R 1

cos sin 0

sin cos 0

0 0 1

T

R R

1 I

MM



47

2D Reflection

• Transformation matrix

x

y

x

y

x

y Reflection line y=0 Reflection line x=0 Reflection line y=-x

1 0 0

0 1 0

0 0 1

1 0 0

0 1 0

0 0 1

0 1 0

1 0 0

0 0 1

Design

CG OpenGL vectors geometric & transformations-course 5