Hochiminh city University of Technology
Faculty of Computer Science and Engineering
COMPUTER GRAPHICS
CHAPTER :
Geometric objects and
transformations
OUTLINE
 Vector
 Dot product
 Cross Product
 Scalars
 Points
 Affine Sums
 Parametric Form
 Line
 Plane
 Some Example
 Representation
 Frames in OpenGL
Faculty of Computer Science and Engineering - HCMUT
Slide 2
Vector
 Why vector important?
– Remove Hidden-face.
– Normal vector
– Three basic elements in geometry: scalar, point,
vector
Faculty of Computer Science and Engineering - HCMUT
Slide 3
Vector
 Physical definition: a vector is a quantity with two
attributes: 1)Direction; 2)Magnitude
 Examples include: 1)Force; 2)Velocity
 Vectors Lack Position: These vectors are identical
– Same length and magnitude
Faculty of Computer Science and Engineering - HCMUT
Slide 4
Vector
a = (2, 5, 6), b = (-2, 7, 1)
 Addition: a + b = (0, 12, 7)
 Scalar-vector multiplication: 6a = (12, 30, 39)
 Subtraction: a - b = a + (-b) = (4, -2, 5)
Faculty of Computer Science and Engineering - HCMUT
Slide 5
Vector
Faculty of Computer Science and Engineering - HCMUT
Slide 6
Vector
Magnitude:
w  w12  w22  ...  wn2
Unit vector:
a
ua 
a
Faculty of Computer Science and Engineering - HCMUT
Slide 7
Dot product
 Definition: The dot product d of two n-dimensional vectors
v = (v1, v2, ..., vn) and w = (w1, w2, ..., wn) is denoted as
vw and has the value:
n
d  v  w   vi wi
i 1
 Properties
– Symmetry: ab = ba
– Linearity: (a + c)b = ab + cb
– Homogeneity: (sa)b = s(ab)
– |b|2 = bb
Faculty of Computer Science and Engineering - HCMUT
Slide 8
Dot product
 The angle between two vectors
bc = |b||c| cos()
cos(θ )  u b  u c
Faculty of Computer Science and Engineering - HCMUT
Slide 9
Dot product
 The 2D “perp” vector
– Suppose a = (ax, ay), then a  = (-ay, ax) is the
counterclockwise perpendicular to a.
Faculty of Computer Science and Engineering - HCMUT
Slide 10
Dot product
 Orthogonal Projections and the Distance from a point to
a line
c = Kv + Mv ( K, M = ?)
cv = Kvv + Mvv 
 vc
 v  c  
v
c   2 v  
 v 
 v2 




cv
K
vv
distance 
c  v
M  
v v

v c
v
2
v 
v  c
v
Faculty of Computer Science and Engineering - HCMUT
Slide 11
Dot product
 Reflection
r = e – m, e = a - m  r = a - 2m
m
an
n
2
n  (a  un )u n
r = a - 2(a  un )un
Faculty of Computer Science and Engineering - HCMUT
Slide 12
Cross Product
 The cross product of two vector is a vector
 Only for 3-dimensinal vector
 Suppose a = (ax, ay, az) and b = (bx, by, bz), then the
cross product of a and b is
a  b = (aybz – azby)i + (azbx – axbz)j + (axby – aybx)k
i
a  b  ax
bx
j
ay
by
k
az
bz
|a  b| = |a||b|sin()
Faculty of Computer Science and Engineering - HCMUT
Slide 13
Scalars
 Scalars can be defined as members of sets which can be
combined by two operations (addition and multiplication)
obeying some fundamental axioms (associativity,
commutivity, inverses)
 Examples include the real and complex number systems
under the ordinary rules with which we are familiar
 Scalars alone have no geometric properties
Faculty of Computer Science and Engineering - HCMUT
Slide 14
Points
 Location in space
 Operations allowed between points and vectors
– Point-point subtraction yields a vector
– Equivalent to point-vector addition
v=P-Q
P=v+Q
Faculty of Computer Science and Engineering - HCMUT
Slide 15
Affine Sums
 Linear combination of m vector v1,v2,…,vm is vector
w = a1v1 + a2v2 + … + amvm
(a1, a2, … ,am are scalars)
 Affine combination if
a1+ a2+ … +am = 1
 Convex combination
a1+ a2+ … +am = 1 and
aj >=0, i=1,…,m
Faculty of Computer Science and Engineering - HCMUT
Slide 16
Parametric Form
 Implicit: describes a curve by a function F(x, y), provides a
relationship between the x and y cordinates: the point (x, y) lies
pm the curve if and only if F(x, y) = 0.
– F(x, y) = (y - Ay)(Bx - Ax) - (x - Ax)(By - Ay)
(line)
– F(x, y) = x2 + y2 – R2
(circle)
 Inside-outside function
– F(x, y) = 0, for all (x, y) on the curve
– F(x, y) > 0, for all (x, y) outside the curve
– F(x, y) < 0, for all (x, y) inside the curve
 Problem
– For some curves, can not rearrange y=g(x) from F(x, y), For
example:
2
2
y R x
Faculty of Computer Science and Engineering - HCMUT
Slide 17
Parametric Form
 Parametric form
– Ex 1: a straight line passes through A and B. Choose
a parametric form that visit A at t = 0, visit B at t = 1.
x(t) = Ax + (Bx - Ax)t
y(t) = Ay + (By - Ay)t
@t=1
B (Bx, By)
@t=0
A (Ax, Ay)
Faculty of Computer Science and Engineering - HCMUT
Slide 18
Parametric Form
 Parametric form
EX 2: Ellipse with radius W and H
x(t) = Wcos(t)
y(t)
t=/2 y
y(t) = Hsin(t)
H (x(t), y(t))H
với ( 0 t  2 )
W
t=
-c
c
x
2
t
-H
-W
W
x(t)

2
t
Faculty of Computer Science and Engineering - HCMUT
Slide 19
Parametric Form
 Draw parametric form curve
a)
t=T
b)
Pm
P2
t=0
P(t) = (x(t), y(t))
P1
//draw the curve (x(t), t(t)) using
//the array t[0], ..., t[n-1] of “sample-times”
glBegin(GL_LINE_STRIP);
for(int i=0;i<n;i++)
glVertex2f(x(t[i]), y(t[i]));
glEnd() ;
Faculty of Computer Science and Engineering - HCMUT
Slide 20
Parametric Form
 Superellipse
– Implicit form
n
n
 x  y
     1
W   H 
– Parametric form
x(t )  W cos(t ) cos 2 / n1 (t )
–
–
–
–
y (t )  H sin( t ) sin 2 / n1 (t )
n = 2m/(2n+1)
n < 1 inward
n > 1 outward
n = 1 square
Faculty of Computer Science and Engineering - HCMUT
Slide 21
Parametric Form
 Superhyperbola
– Parametric form
x (t )  W sec( t ) sec 2 / n1 (t )
y (t )  H tan( t ) tan 2 / n1 (t )
–
–
–
–
n = 2m/(2n+1)
n < 1 inward
n > 1 outward
n = 1 line
Faculty of Computer Science and Engineering - HCMUT
Slide 22
Parametric Form
 3D curves
P(t) = (x(t), y(t), z(t))
Helix
x(t) = cos(t)
y(t) = sin(t)
z(t) = bt
Toroidal spiral
x(t) = (asin(ct) + b)cos(t),
y(t) = (asin(ct) + b)sin(t),
z(t) = acos(ct)
Faculty of Computer Science and Engineering - HCMUT
Slide 23
Line
 Line, line segment, ray
Parametric form
L(t) = C + bt
Line segment, 0  t  1
Ray, 0  t  
Line, -  t  
Faculty of Computer Science and Engineering - HCMUT
Slide 24
Line
 Point-normal form: n(R - C) = 0
Conversion
Faculty of Computer Science and Engineering - HCMUT
Slide 25
Plane
 Parametric form:
P(s, t) = C + sa + tb
 Point-normal form:
n(R - C) = 0
n = ab
Faculty of Computer Science and Engineering - HCMUT
Slide 26
Plane
 Conversion
Faculty of Computer Science and Engineering - HCMUT
Slide 27
Some Examples
 Intersection of two line segment
AB(t) = A + bt ; CD(u) = C + du
Find t and u such as A + bt = C + du
bt = c + du với c = C - A
d  bt = d  c
 d  b  0.
d  c
t 
d b
b  c
u 
d b
 d  b = 0
Faculty of Computer Science and Engineering - HCMUT
Slide 28
Some Examples
 The Circle through 3 points
 Perpendicular bisector L(t )  1 ( A  B )  ( B  A)  t
2
 a = B - A; b = C - B; c = A - C;
 Perp. bisector AB: A + a/2 + at ; AC: A - c/2 + cu
1
bc 
1 bc
 at = b/2 + cu 
S

A

a

a 
t



2 a c
2
a c
Faculty of Computer Science and Engineering - HCMUT

Slide 29
Representation
 Linear Independence
– A set of vectors v1, v2, …, vn is linearly independent if
a1v1+a2v2+.. anvn=0 iff a1=a2=…=0
– If a set of vectors is linearly independent, we cannot
represent one in terms of the others
– If a set of vectors is linearly dependent, as least one
can be written in terms of the others
Faculty of Computer Science and Engineering - HCMUT
Slide 30
Representation
 Dimension
– In a vector space, the maximum number of linearly
independent vectors is fixed and is called the
dimension of the space
– In an n-dimensional space, any set of n linearly
independent vectors form a basis for the space
– Given a basis v1, v2,…., vn, any vector v can be
written as
v=a1v1+ a2v2 +….+anvn
where the {ai} are unique
Faculty of Computer Science and Engineering - HCMUT
Slide 31
Representation
 Coordinate Systems
– Until now we have been able to work with geometric
entities without using any frame of reference, such as
a coordinate system
– Need a frame of reference to relate points and objects
to our physical world.
• For example, where is a point? Can’t answer
without a reference system
• Local coordinates
• World coordinates
• Camera coordinates
Faculty of Computer Science and Engineering - HCMUT
Slide 32
Representation
 Coordinate Systems
– Consider a basis v1, v2,…., vn
– A vector is written v=a1v1+ a2v2 +….+anvn
– The list of scalars {a1, a2, …. an}is the representation of v
with respect to the given basis
– We can write the representation as a row or column array
of scalars
a=[a1 a2 ….
 a1 
a 
T
 2
an ] =  . 
a 
 n
 
Faculty of Computer Science and Engineering - HCMUT
Slide 33
Representation
Coordinate Systems
– v=2v1+3v2-4v3
– a=[2 3 –4]T
– Note that this representation is with respect to a
particular basis
– For example, in OpenGL we start by representing
vectors using the object basis but later the system
needs a representation in terms of the camera or eye
basis
Faculty of Computer Science and Engineering - HCMUT
Slide 34
Representation
 Coordinate Systems
– Which is correct?
v
– Both are because vectors have no fixed location
Faculty of Computer Science and Engineering - HCMUT
Slide 35
Representation
 Frames
– A coordinate system is insufficient to represent points
– If we work in an affine space we can add a single
point, the origin, to the basis vectors to form a frame
v2
P0
v1
v3
Faculty of Computer Science and Engineering - HCMUT
Slide 36
Representation
 Frames
– Frame determined by (P0, v1, v2, v3)
– Within this frame, every vector can be written as
v=a1v1+ a2v2 +….+anvn
– Every point can be written as
P = P0 + b1v1+ b2v2 +….+bnvn
Faculty of Computer Science and Engineering - HCMUT
Slide 37
Representation
 Confusing Points and Vector
Consider the point and the vector
P = P0 + b1v1+ b2v2 +….+bnvn
v=a1v1+ a2v2 +….+anvn
They appear to have the similar representations
p=[b1 b2 b3]
v=[a1 a2 a3]
v
which confuses the point with the vector
p
A vector has no position
v
Vector can be placed anywhere
point: fixed
Faculty of Computer Science and Engineering - HCMUT
Slide 38
Representation
 A Single Representation
If we define 0•P = 0 and 1•P =P then we can write
v=a1v1+ a2v2 +a3v3 = [a1 a2 a3 0 ] [v1 v2 v3 P0] T
P = P0 + b1v1+ b2v2 +b3v3= [b1 b2 b3 1 ] [v1 v2 v3 P0] T
Thus we obtain the four-dimensional homogeneous
coordinate representation
v = [a1 a2 a3 0 ] T
p = [b b b 1 ] T
1
2
3
Faculty of Computer Science and Engineering - HCMUT
Slide 39
Representation
 Homogeneous Coordinates
The homogeneous coordinates form for a three dimensional
point [x y z] is given as
p =[x’ y’ z’ w] T =[wx wy wz w] T
We return to a three dimensional point (for w0) by
xx’/w
yy’/w
zz’/w
If w=0, the representation is that of a vector
Note that homogeneous coordinates replaces points in three
dimensions by lines through the origin in four dimensions
For w=1, the representation of a point is [x y z 1]
Faculty of Computer Science and Engineering - HCMUT
Slide 40
Representation
 Homogeneous Coordinates
– Homogeneous coordinates are key to all computer
graphics systems
• All standard transformations (rotation, translation,
scaling) can be implemented with matrix
multiplications using 4 x 4 matrices
• Hardware pipeline works with 4 dimensional
representations
• For orthographic viewing, we can maintain w=0 for
vectors and w=1 for points
• For perspective we need a perspective division
Faculty of Computer Science and Engineering - HCMUT
Slide 41
Representation
 Change of Coordinate Systems
– Consider two representations of a the same vector
with respect to two different bases. The
representations are
a=[a1 a2 a3 ]
b=[b1 b2 b3]
where
v=a1v1+ a2v2 +a3v3 = [a1 a2 a3] [v1 v2 v3] T
=b u + b u +b u = [b b b ] [u u u ] T
1 1
2 2
3 3
1
2
3
1
2
3
Faculty of Computer Science and Engineering - HCMUT
Slide 42
Representation
 Change of Coordinate Systems
– Each of the basis vectors, u1,u2, u3, are vectors that can
be represented in terms of the first basis
v
u1 = g11v1+g12v2+g13v3
u2 = g21v1+g22v2+g23v3
u3 = g31v1+g32v2+g33v3
Faculty of Computer Science and Engineering - HCMUT
Slide 43
Representation
 Change of Coordinate Systems
The coefficients define a 3 x 3 matrix
 g g
g
M =   g 
 g  g 
g 
g  
g 33 
and the bases can be related by
a=MTb
Faculty of Computer Science and Engineering - HCMUT
Slide 44
Representation
 Change of Coordinate Systems
1
0
v1   ; v2   
0
1
u1  3v1
u2
v2
w
u2  2v2
1 0 

 3 0 T  3 0
T 1  3
M 
;M  
;M




1
0
2
0
2




0

2
1 0 
1 
3
 1  3 
1
a   ; b  Ta  
 



1 1 1
1
0

 

2
2
 
v1
Faculty of Computer Science and Engineering - HCMUT
u1
Slide 45
Representation
 Change of Coordinate Systems
u1  v1  v2
w
u2  v1  v2
 1 1 T 1  1
v2
M 
;
M

;

1 1  u2
u1

1
1




 1 1
v1

T 1  2
2
 1 1
M

1 1
1 1
1



T
2
2


 b M
a
 

 2 2


1 1 1 0


 
 
 2
2
Faculty of Computer Science and Engineering - HCMUT
Slide 46
Representation
 Change of Frames
– We can apply a similar process in homogeneous
coordinates to the representations of both points and
vectors
Consider two frames:
(P0, v1, v2, v3)
(Q0, u1, u2, u3)
v3
v2
u2
u1
Q0
P0
v1
u3
– Any point or vector can be represented in either frame
– We can represent Q0, u1, u2, u3 in terms of P0, v1, v2, v3
Faculty of Computer Science and Engineering - HCMUT
Slide 47
Representation
 Change of Frames
Extending what we did with change of bases
u1 = g11v1+g12v2+g13v3
u2 = g21v1+g22v2+g23v3
u3 = g31v1+g32v2+g33v3
Q0 = g41v1+g42v2+g43v3 +g44P0
defining a 4 x 4 matrix
 g g
g
g 


M=
 g  g 

 g  g 
g 

g  
g  

g  
Faculty of Computer Science and Engineering - HCMUT
Slide 48
Representation
 Change of Frames
Within the two frames any point or vector has a
representation of the same form
a=[a1 a2 a3 a4 ] in the first frame
b=[b1 b2 b3 b4 ] in the second frame
and
where a4  b4   for points and a4  b4   for vectors
a=MTb
The matrix M is 4 x 4 and specifies an affine
transformation in homogeneous coordinates
Faculty of Computer Science and Engineering - HCMUT
Slide 49
Frames in OpenGL
 Object or model coordinates
 World coordinates
 Eye (or camera) coordinates
 Clip coordinates
 Normalized device coordinates
 Window (or screen) coordinates
Faculty of Computer Science and Engineering - HCMUT
Slide 50
Transformations
 General Transformations
A transformation maps points to other points and/or
vectors to other vectors
v=T(u)
Q=T(P)
Faculty of Computer Science and Engineering - HCMUT
Slide 51
Transformations
 General Transformations
P = (Px, Py, 1); Q = (Qx, Qy, 1) (Q - image)
(Qx, Qy, 1) = T (Px, Py, 1)
(T – transformation)
Q = T(P).
a)
y
y
b)
Q
T
Q
P
P
x
z
0
x
Faculty of Computer Science and Engineering - HCMUT
Slide 52
Transformations
 General Transformations
a)
y
b)
y
after
after
before
before
x
x
Faculty of Computer Science and Engineering - HCMUT
Slide 53
Transformations
 Affine Transformations
Qx = m11Px +m12Py +m13
Qy = m21Px +m22Py +m23
 Qx   m11 m12
  
 Qy    m21 m22
1  0
0
  
T
m13  Px 
 
m23  Py 
1  1 
always (0, 0, 1)
Faculty of Computer Science and Engineering - HCMUT
Slide 54
Transformations
 Affine Transformations
– Line preserving
– Characteristic of many physically important
transformations
• Rigid body transformations: rotation,
translation
• Scaling, shear
– Importance in graphics is that we need only transform
endpoints of line segments and let implementation
draw line segment between the transformed endpoints
Faculty of Computer Science and Engineering - HCMUT
Slide 55
Transformations
 Pipeline Implementation
glBegin(GL_LINES);
glVertex3f(. . .);
glVertex3f(. . .);
glVertex3f(. . .);
glEnd();
P1, P2,...
CT
Q1, Q2,...
y P3
y
P2
z
P1
x
z
x
Faculty of Computer Science and Engineering - HCMUT
Slide 56
Transformations in 2D
 Translation
Qx = Px
+ m13
Qy =
Py + m23
y
 Qx   1 0 m13  Px 
  
 
 Qy    0 1 m23  Py 
 1   0 0 1  1 
  
 
y
1 0 2


0 1 1
0 0 1


1
x
x
2
Faculty of Computer Science and Engineering - HCMUT
Slide 57
Transformations in 2D
 Scaling
Qx = Sx Px
Qy = Sy Py
 Qx   S x
  
 Qy    0
1 0
  y
1.3 0 0 


 0 1.3 0 
 0

0
1


y
x
1.5 0 0 


 0 0.5 0 
 0

0
1


0  Px 
 
0  Py 
1  1 
0
Sy
0
uniform
x
y
Nonuniform
Faculty of Computer Science and Engineering - HCMUT
x
Slide 58
Transformations in 2D
 Scaling (Reflection)
y
  1 0 0


 0 1 0
 0 0 1


y
  1 0 0


 0 1 0
 0 0 1


x
y
x
  1 0 0


 0  1 0
0

0
1


Faculty of Computer Science and Engineering - HCMUT
x
Slide 59
Transformations in 2D
 Scaling (Reflection)
y
x
  1 0 0


 0 2 0
 0 0 1


Faculty of Computer Science and Engineering - HCMUT
Slide 60
Transformations in 2D
 Rotation
Qx = Px cos() – Py sin()
Qy = Px sin() + Py cos()
 cos( )  sin(  ) 0 


 sin(  ) cos( ) 0 
 0

0
1


 0.5  3 / 2 0 


0.5
0
 3/2


0
0
1


y
x
y
600
Faculty of Computer Science and Engineering - HCMUT
x
Slide 61
Transformations in 2D
 Rotation
y
Q

R

P
x
Qx  R cos(   )
Q y  R sin(    )
Qx  R cos  cos   R sin  sin   Px cos   Py sin 
Q y  R sin  cos   R cos  sin   Px sin   Py cos 
Faculty of Computer Science and Engineering - HCMUT
Slide 62
Transformations in 2D
 Shear
 1 h 0


 0 1 0
 0 0 1


y
x
 1 0 0


 g 1 0
 0 0 1


y
x
y
x
y
x
Faculty of Computer Science and Engineering - HCMUT
Slide 63
Transformations in 2D
 Inverses
a)
b)
T
y
P
T
y
Q
Q
P
T’
T’
0
x
z
x
P = T‘Q = M-1Q
1  m22  m12 
1


M 
det M   m21 m11 
det M = m11 m22 – m12 m21
Faculty of Computer Science and Engineering - HCMUT
Slide 64
Transformations in 2D
 Inverses
– Although we could compute inverse matrices by
general formulas, we can use simple geometric
observations
• Translation: T-1(dx, dy, dz) = T(-dx, -dy, -dz)
• Rotation: R -1() = R(-)
→Holds for any rotation matrix
→Note that since cos(-) = cos() and sin()=-sin() R -1() = R T()
• Scaling: S-1(sx, sy, sz) = S(1/sx, 1/sy, 1/sz)
Faculty of Computer Science and Engineering - HCMUT
Slide 65
Transformations in 2D
 Inverses
Scaling
 1

 Sx

1
M  0

 0


0
1
Sy
0

0


0

1


Shear
1  h 0


1
M   0 1 0
0 0 1


Rotation
 cos( ) sin(  ) 0 


1
M    sin(  ) cos( ) 0 
 0

0
1


Translation
 1 0  m13 


1
M   0 1  m23 
0 0

1


Faculty of Computer Science and Engineering - HCMUT
Slide 66
Transformations in 2D
 Concatenation
y
T1()
Q
T2()
P
W
T()
x
Faculty of Computer Science and Engineering - HCMUT
Slide 67
Transformations in 2D
 Concatenation
– We can form arbitrary affine transformation matrices
by multiplying together rotation, translation, and
scaling matrices
– Because the same transformation is applied to many
vertices, the cost of forming a matrix M=ABCD is
not significant compared to the cost of computing
Mp for many vertices p
Faculty of Computer Science and Engineering - HCMUT
Slide 68
Transformations in 2D
 Concatenation
– Note that matrix on the right is the first applied
– Mathematically, the following are equivalent
• W = T2 Q = T2 (T1 P) = (T2 T1 )P
y
T1()
Q
T2()
P
W
T()
x
Faculty of Computer Science and Engineering - HCMUT
Slide 69
Transformations in 2D
 Concatenation
- Move fixed point to origin
- Rotate
- Move fixed point back
- M = T(pf) R() T(-pf)
 1 0 Vx  cos( )  sin(  ) 0  1 0  Vx 




 0 1 Vy  sin(  ) cos( ) 0  0 1  Vy 
 0 0 1  0
0
1  0 0 1 


Q
Q’
V

P’

P
 cos( )  sin(  ) d x 


  sin(  ) cos( ) d y 
 0
0
1 

Faculty of Computer Science and Engineering - HCMUT
Slide 70
Transformations in 3D
 General Formula
 m11 m12

 m21 m22
M 
m
m32
 31
0
 0
m13
m23
m33
0
m14 

m24 
m34 

1 
 Qx 
 Px 
 
 
 Qy 
 Py 
Q   M  P 
 z 
 z 
 1
1
Faculty of Computer Science and Engineering - HCMUT
Slide 71
Transformations in 3D
 Translation
1

0
0

0
0 0 m14 

1 0 m24 
0 1 m34 

0 0 1 
 Scaling
 Sx

0
0

0
0
0
Sy
0
0
0
Sz
0
0

0
0

1
y
y
z
x
z
Faculty of Computer Science and Engineering - HCMUT
x
Slide 72
Transformations in 3D
 Shear
1

f
0

0
0 0 0

1 0 0
0 1 0

0 0 1
Q = (Px, fPx + Py, Pz )
 Rotation
 x-roll, y-roll, z-roll
y
 when angle = 900:
P’
Q’’
z
P’’
Q’
Q
z-roll: xy
x-roll: yz
P
x
y-roll: zx
Faculty of Computer Science and Engineering - HCMUT
Slide 73
Transformations in 3D
Rotation
1

0
Rx ( b )  
0

0
0
 c


c  s 0
 0
Ry ( b )  

s c 0
s


0 0 1
 0
0
a) object
y
z
0
b) Rotate about Ox
(- 700)
y
x z
x
0 s 0
c  s


1 0 0
s c
Rz ( b )  

0 c 0
0 0


0 0 1
0 0
0 0

0 0
1 0

0 1
c) Rotate about Oy d) Rotate aboute
(300)
Oz (- 900)
y
y
z
x z
Faculty of Computer Science and Engineering - HCMUT
x
Slide 74
Transformations in 3D
 Rotation about an Arbitrary Axis
y
u
b
Q
 u  x.
 Rotate about x axis with angle b.
 recover u.
P

z

x
 c  (1  c)ux2

 (1  c)ux u y  su z
 (1  c)u u  su
x z
y


0

Ru(b)=Ry(-)Rz()Rx(b)Rz(-)Ry()
(1  c)u y ux  su z
c  (1  c)u 2y
(1  c)u y uz  su x
(1  c)uz ux  su y
(1  c)uz u y  su x
c  (1  c)uz2
0
0
Faculty of Computer Science and Engineering - HCMUT
0

0
0

1 
Slide 75
Transformations in 3D
 Instancing
– In modeling, we often start with a simple object
centered at the origin, oriented with the axis, and at a
standard size
– We apply an instance transformation to its vertices to:
Scale, rotate, translate
Faculty of Computer Science and Engineering - HCMUT
Slide 76
Transformations in OpenGL
y
glBegin(GL_LINES);
glVertex2d(V[0].x, V[0].y);
glVertex2d(V[1].x, V[1].y);
glVertex2d(V[2].x, V[2].y);
...// others vertices
glEnd();
#2
25
#1
x
32
How to draw
the house #2
???
Draw the house
#1
Faculty of Computer Science and Engineering - HCMUT
Slide 77
Transformations in OpenGL
 How to draw the house #2: the hard way
– Q = transform2D(M, P);
glBegin(GL_LINES);
glVertex2d(transform2D(M, V[0]));
glVertex2d(transform2D(M, V[1]));
...............................
glEnd();
- How to find Q?
Faculty of Computer Science and Engineering - HCMUT
Slide 78
Transformations in OpenGL
 How to draw the house #2: the easy way
house();
// draw the house #1
translate2D(32, 25);
rotate2D(-30);
house();// draw the house #2
Faculty of Computer Science and Engineering - HCMUT
Slide 79
Transformations in OpenGL
Sy
V
CTM
Q
V
WV
S
S
Sx
Q
Faculty of Computer Science and Engineering - HCMUT
Slide 80
Transformations in OpenGL
 OpenGL has a model-view and a projection matrix in the
pipeline which are concatenated together to form the
CTM
 Can manipulate each by first setting the correct matrix
mode
Faculty of Computer Science and Engineering - HCMUT
Slide 81
Transformations in OpenGL
1
2
1
2/3
1
1
3
Faculty of Computer Science and Engineering - HCMUT
Slide 82
Transformations in OpenGL
1 0 3 2 / 3 0 0 2 / 3 0 3
M  0 1 1  0 1 0   0 1 1
0 0 1  0 0 1  0 0 1
A = (0, 0, 1)  A’ = MA = (3, 1, 1)
B = (1, 0, 1)  B’ = MB = (3+2/3, 1, 1)
C = (1, 1, 1)  C’ = MC = (3+2/3, 2, 1)
D = (0, 1, 1)  D’ = MD = (3, 2, 1)
Faculty of Computer Science and Engineering - HCMUT
Slide 83
Transformations in OpenGL
void DrawFigure1() {
glBegin(GL_POLYGON)
glVertex2f(…)// A, B, C, D
……………………………………………..
glEnd();
}
void DrawFigure2() {
glBegin(GL_POLYGON)
glVertex2f(…)// A’, B’, C’, D’
……………………………………………..
glEnd();
}
Faculty of Computer Science and Engineering - HCMUT
Slide 84
Transformations in OpenGL
3
1
1/2
1
2
1
2/3
1
1
3
Faculty of Computer Science and Engineering - HCMUT
Slide 85
Transformations in OpenGL
void DrawFigure1() {
glBegin(GL_POLYGON)
glVertex2f(…)// A, B, C, D
……………………………………………..
glEnd(); }
void DrawFigure2() {
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(3, 1, 0);
glScalef(2/3.0, 1, 1);
DrawFigure1();
}
Faculty of Computer Science and Engineering - HCMUT
Slide 86
Transformations in OpenGL
Sy
V
CTM
Q
V
WV
S
S
Sx
Q
Faculty of Computer Science and Engineering - HCMUT
Slide 87
Transformations in OpenGL
void DrawFigure3() {
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(1, 2, 0);
glRotatef(45, 0, 0, 1);
glScalef(1, 0.5, 1);
DrawFigure1();
}
Faculty of Computer Science and Engineering - HCMUT
Slide 88
Transformations in OpenGL
 The CTM can be altered either by loading a new CTM or
by postmutiplication
– Load an identity matrix: C I
– Load an arbitrary matrix: C M
• Load a translation matrix: CT
• Load a rotation matrix: C R
• Load a scaling matrix: CS
– Postmultiply by an arbitrary matrix: CCM
• Postmultiply by a translation matrix: CCT
• Postmultiply by a rotation matrix: CC R
• Postmultiply by a scaling matrix: CC S
Faculty of Computer Science and Engineering - HCMUT
Slide 89
Transformations in OpenGL
 Rotation about a Fixed Point
– Start with identity matrix: C  I
– Move fixed point to origin: C  CT
– Rotate: C  CR
– Move fixed point back: C  CT -1
– Result: C = TRT -1 which is backwards.
Faculty of Computer Science and Engineering - HCMUT
Slide 90
Transformations in OpenGL
 Rotation about a Fixed Point
– We want C = T -1 R T, so we must do the
operations in the following order
• C I
• C C T -1
• C CR
• C CT
– Each operation corresponds to one function call in the
program.
– Note that the last operation specified is the first
executed in the program
Faculty of Computer Science and Engineering - HCMUT
Slide 91
Transformations in OpenGL
 In OpenGL matrices are part of the state
 Multiple types
– Model-View (GL_MODELVIEW)
– Projection (GL_PROJECTION)
– Texture (GL_TEXTURE) (ignore for now)
– Color(GL_COLOR) (ignore for now)
 Single set of functions for manipulation
 Select which to manipulated by
– glMatrixMode(GL_MODELVIEW);
– glMatrixMode(GL_PROJECTION);
Faculty of Computer Science and Engineering - HCMUT
Slide 92
Transformations in OpenGL
 Load an identity matrix:
– glLoadIdentity()
 Rotation, Translation, Scaling
– glRotatef(theta, vx, vy, vz)
• theta in degrees, (vx, vy, vz) define axis of rotation
– glTranslatef(dx, dy, dz)
– glScalef( sx, sy, sz)
Faculty of Computer Science and Engineering - HCMUT
Slide 93
Transformations in OpenGL
 Rotation about z axis by 30 degrees with a fixed point of
(1.0, 2.0, 3.0)
– glMatrixMode(GL_MODELVIEW);
– glLoadIdentity();
– glTranslatef(1.0, 2.0, 3.0);
– glRotatef(30.0, 0.0, 0.0, 1.0);
– glTranslatef(-1.0, -2.0, -3.0);
 Remember that last matrix specified in the program is the
first applied
Faculty of Computer Science and Engineering - HCMUT
Slide 94
Transformations in OpenGL
 Can load and multiply by matrices defined in the
application program
– glLoadMatrixf(m)
– glMultMatrixf(m)
 The matrix m is a one dimension array of 16 elements
which are the components of the desired 4 x 4 matrix
stored by columns
 In glMultMatrixf, m multiplies the existing matrix on
the right
Faculty of Computer Science and Engineering - HCMUT
Slide 95
Transformations in OpenGL
1
2
1
2/3
1
1
3
Faculty of Computer Science and Engineering - HCMUT
Slide 96
Transformations in OpenGL
1
M  0
0
0 3 2 / 3 0
1 1  0
1
0 1  0
0
0 2 / 3 0 3
0   0
1 1
1  0
0 1
2 / 3
 0
M 
 0

 0
0 0 3

1 0 1

0 1 0

0 0 1
float m[16];
m[0] = 2/3.0; m[1] = 0.0; m[2] = 0.0; m[3] = 0.0;
m[4] = 0.0; m[5] = 1.0; m[6] = 0.0; m[7] = 0.0;
m[8] = 0.0; m[9] = 0.0; m[10] = 1.0; m[11] = 0.0;
m[12] = 3.0; m[13] = 1.0; m[14] = 0.0; m[15] = 1.0;
Faculty of Computer Science and Engineering - HCMUT
Slide 97
Transformations in OpenGL
void DrawFigure2() {
float m[16];
m[0] = 2/3.0; m[1] = 0.0; m[2] = 0.0; m[3] = 0.0;
m[4] = 0.0; m[5] = 1.0; m[6] = 0.0; m[7] = 0.0;
m[8] = 0.0; m[9] = 0.0; m[10] = 1.0; m[11] = 0.0;
m[12] = 3.0; m[13] = 1.0; m[14] = 0.0; m[15] = 1.0;
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glLoadMatrixf(m);
DrawFigure1();
}
Faculty of Computer Science and Engineering - HCMUT
Slide 98
Transformations in OpenGL
3
1
1/2
1
2
1
2/3
1
1
3
Faculty of Computer Science and Engineering - HCMUT
Slide 99
Transformations in OpenGL
1
M  0
0
0 3 2 / 3 0
1 1  0
1
0 1  0
0
0 2 / 3 0 3
0   0
1 1
1  0
0 1
1
0
M1  
0

0
0 0 3

1 0 1

0 1 0

0 0 1
float m1[16];
m1[0] = 1.0; m1[1] = 0.0; m1[2] = 0.0; m1[3] = 0.0;
m1[4] = 0.0; m1[5] = 1.0; m1[6] = 0.0; m1[7] = 0.0;
m1[8] = 0.0; m1[9] = 0.0; m1[10] = 1.0; m1[11] = 0.0;
m1[12] = 3.0; m1[13] = 1.0; m1[14] = 0.0; m1[15] = 1.0;
Faculty of Computer Science and Engineering - HCMUT Slide 100
Transformations in OpenGL
void DrawFigure2() {
float m1[16];
m1[0] = 1.0; m1[1] = 0.0; m1[2] = 0.0; m1[3] = 0.0;
………………………………………………………..
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glMultMatrixf(m1);
glScalef(2/3.0, 1, 1);
DrawFigure1();
}
Faculty of Computer Science and Engineering - HCMUT Slide 101
Transformations in OpenGL
1
M  0
0
0 3 2 / 3 0
1 1  0
1
0 1  0
0
0 2 / 3 0 3
0   0
1 1
1  0
0 1
2 / 3
 0
M2  
 0

 0
0 0 0

1 0 0

0 1 0

0 0 1
float m2[16];
m2[0] = 2.0/3; m2[1] = 0.0; m2[2] = 0.0; m2[3] = 0.0;
m2[4] = 0.0; m2[5] = 1.0; m2[6] = 0.0; m2[7] = 0.0;
m2[8] = 0.0; m2[9] = 0.0; m2[10] = 1.0; m2[11] = 0.0;
m2[12] = 0.0; m2[13] = 0.0; m2[14] = 0.0; m2[15] = 1.0;
Faculty of Computer Science and Engineering - HCMUT Slide 102
Transformations in OpenGL
void DrawFigure2() {
float m2[16];
m2[0] = 2.0/3; m2[1] = 0.0; m2[2] = 0.0; m2[3] = 0.0;
………………………………………………………..
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(3, 1, 0);
glMultMatrixf(m2);
DrawFigure1();
}
Faculty of Computer Science and Engineering - HCMUT Slide 103
Transformations in OpenGL
void DrawFigure2() {
float m1[16];
m1[0] = 1.0; m1[1] = 0.0; m1[2] = 0.0; m1[3] = 0.0;
…………………………………………………………
float m2[16];
m2[0] = 2.0/3; m2[1] = 0.0; m2[2] = 0.0; m2[3] = 0.0;
………………………………………………………..
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glMultMatrixf(m1);
glMultMatrixf(m2);
DrawFigure1();
}
Faculty of Computer Science and Engineering - HCMUT Slide 104
Transformations in OpenGL
 Reading Back Matrices
– Can also access matrices (and other parts of the state) by
query functions
• glGetIntegerv
• glGetFloatv
• glGetBooleanv
• glGetDoublev
• glIsEnabled
– For matrices, we use as
• double m[16];
• glGetFloatv(GL_MODELVIEW_MATRIX, m);
Faculty of Computer Science and Engineering - HCMUT Slide 105
Transformations in OpenGL
Tìm ma trận biến đổi hình bình hành thành hình chữ nhật
Faculty of Computer Science and Engineering - HCMUT Slide 106
Transformations in OpenGL
-
Tịnh tiến (M1)
Trượt theo trục y (M2)
Tỷ lệ (M3)
Tịnh tiến (M4)
Faculty of Computer Science and Engineering - HCMUT Slide 107
Transformations in OpenGL
1
0
M1  
0

0
0 0  1
1 0  1

0 1 0

0 0 1
5 / 2 0
 0 3/ 4
M3 
 0
0

0
 0
0 0

0 0

1 0

0 1
 1
  0.5
M2  
 0

 0
1
0
M4  
0

0
0 0 0
1 0 0

0 1 0

0 0 1
0 0  5

1 0 6

0 1 0

0 0 1
M = M4*M3*M2*M1
Faculty of Computer Science and Engineering - HCMUT Slide 108
Transformations in OpenGL
void DrawFigure2() {
float m[16], mtx[16];
m[0] = 1.0; m[1] = -0.5; m[2] = 0.0; m[3] = 0.0;
………………………………………………………..
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(…);
glScalef(…);
glMultMatrixf(m);
glTranslatef(…);
glGetFloatv(GL_MODELVIEW_MATRIX, mtx);
DrawFigure();
}
Faculty of Computer Science and Engineering - HCMUT Slide 109
Transformations in OpenGL
 Matrix stack
– In many situations we want to save transformation
matrices for use later
• Traversing hierarchical data structures (Chapter
10)
• Avoiding state changes when executing display
lists
– OpenGL maintains stacks for each type of matrix
Access present type (as set by glMatrixMode) by
• glPushMatrix()
• glPopMatrix()
Faculty of Computer Science and Engineering - HCMUT
Slide 110
Transformations in OpenGL
2
1
1
1
2
Faculty of Computer Science and Engineering - HCMUT
Slide 111
Transformations in OpenGL
void DrawFlower(){
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(2, 2, 0);
glRotatef(0, 0, 0, 1);
DrawFigure1();
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(2, 2, 0);
glRotatef(60, 0, 0, 1);
DrawFigure1();
………………………………………………………..
Faculty of Computer Science and Engineering - HCMUT
Slide 112
Transformations in OpenGL
void DrawFlower(){
{
for(int i = 0; i<= 6 ; i++)
{
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(2, 2, 0);
glRotatef(60*i, 0, 0, 1);
DrawFigure1();
}
}
Faculty of Computer Science and Engineering - HCMUT
Slide 113
Transformations in OpenGL
void DrawFlower(){
{
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(2, 2, 0);
for(int i = 0; i<= 6 ; i++)
{
glPushMatrix();
glRotatef(60*i, 0, 0, 1);
DrawFigure1();
glPopMatrix();
}
}
Faculty of Computer Science and Engineering - HCMUT
Slide 114
Transformations in OpenGL
 Matrix Stack
a)
b)
D
H
W
L
pushCT();
// so we can return here
translate2D(W, H);
// position for the first motif
for(row = 0; row < 3; row++){ // draw each row
pushCT();
for(col = 0 ; col < 3; col++){
motif();
translate2D(L, 0);} //move to the right
popCT();
// back to the start of this row
translate2D(0, D); }//move up to the next row
popCT(); //back to where we started
Faculty of Computer Science and Engineering - HCMUT
Slide 115
Building Models
 Simple Representation
– Define each polygon by the geometric locations of its
vertices
– Leads to OpenGL code such as
• glBegin(GL_POLYGON);
glVertex3f(x1, x1, x1);
glVertex3f(x6, x6, x6);
glVertex3f(x7, x7, x7);
• glEnd();
– Inefficient and unstructured
• Consider moving a vertex to a new location
• Must search for all occurrences
Faculty of Computer Science and Engineering - HCMUT
Slide 116
Building Models
 Geometry vs Topology
– Generally it is a good idea to look for data structures
that separate the geometry from the topology
• Geometry: locations of the vertices
• Topology: organization of the vertices and
edges
• Example: a polygon is an ordered list of
vertices with an edge connecting successive
pairs of vertices and the last to the first
• Topology holds even if geometry changes
Faculty of Computer Science and Engineering - HCMUT
Slide 117
Building Models
 Vertex Lists
– Put the geometry in an array
– Use pointers from the vertices into this array
– Introduce a polygon list
x 1 y 1 z1
v1
x 2 y 2 z2
P1
v7
x 3 y 3 z3
P2
v6
x 4 y 4 z4
P3
x5 y5 z5.
P4
v8
x 6 y 6 z6
P5
v5
v6
x 7 y 7 z7
x 8 y 8 z8
Faculty of Computer Science and Engineering - HCMUT
Slide 118
Building Models
 Modeling a Cube
GLfloat vertices[][3] = {{-1.0,-1.0,-1.0},{1.0,-1.0,-1.0},
{1.0,1.0,-1.0}, {-1.0,1.0,-1.0}, {-1.0,-1.0,1.0},
{1.0,-1.0,1.0}, {1.0,1.0,1.0}, {-1.0,1.0,1.0}};
GLfloat colors[][3] = {{0.0,0.0,0.0},{1.0,0.0,0.0},
{1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0},
{1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}};
Faculty of Computer Science and Engineering - HCMUT
Slide 119
Building Models
 Modeling a Cube
void polygon(int a, int b, int c, int d)
{
glBegin(GL_POLYGON);
glColor3fv(colors[a]);
glVertex3fv(vertices[a]);
glVertex3fv(vertices[b]);
glVertex3fv(vertices[c]);
glVertex3fv(vertices[d]);
glEnd();
}
Faculty of Computer Science and Engineering - HCMUT Slide 120
Building Models
 Modeling a Cube
void colorcube( )
{
polygon(0,3,2,1);
polygon(2,3,7,6);
polygon(0,4,7,3);
polygon(1,2,6,5);
polygon(4,5,6,7);
polygon(0,1,5,4);
}
5
6
2
1
7
4
0
3
Faculty of Computer Science and Engineering - HCMUT Slide 121
Building Models
 Modeling a Cube
– The weakness of our approach is that we are building
the model in the application and must do many
function calls to draw the cube
– Drawing a cube by its faces in the most straight
forward way requires
• 6 glBegin, 6 glEnd
• 6 glColor
• 24 glVertex
• More if we use texture and lighting
Faculty of Computer Science and Engineering - HCMUT Slide 122
Building Models
 Inward and Outward Facing polygons
– The order {v1, v6, v7} and {v6, v7,
v1} are equivalent in that the same
polygon will be rendered by
OpenGL but the order {v1, v7, v6}
is different
– The first two describe outwardly
facing polygons
– Use the right-hand rule = counterclockwise encirclement of outwardpointing normal
– OpenGL can treat inward and
outward facing polygons differently
Faculty of Computer Science and Engineering - HCMUT Slide 123
Further Reading
 “Interactive Computer Graphics: A Topdown
Approach Using OpenGL”, Edward Angel
– Chapter 4: Geometric Objects and Transformation
 “Đồ họa máy tính trong không gian hai chiều”, Trần
Giang Sơn
– Chương 4: Vector trong đồ họa máy tính
– Chương 5: Biến đổi hình
Faculty of Computer Science and Engineering - HCMUT Slide 124