Geometric Geometric Transformations Transformations Ceng 477 Introduction to Computer Graphics Fall 2007 Computer Engineering METU
Geometric Geometric TransformationsTransformations
Ceng 477 Introduction to Computer GraphicsFall 2007
Computer EngineeringMETU
2D Geometric 2D Geometric TransformationsTransformations
Basic Geometric Transformations
● Geometric transformations are used to transform the objects and the camera in a scene (for animation or modelling) and are also used to transform World Coordinates to View Coordinates
● Given the shape, transform all the points of the shape? Transform the points and/or vectors describing it.
● For example: Polygon: corner points Circle, Ellipse: center point(s), point at angle 0
● Some transformations preserves some of the attributes like sizes, angles, ratios of the shape.
Translation
● Simply move the object to a relative position.
TPP
PTP
+=
y'x'
=tt
=yx
=
t+y=y't+x=x'
y
x
yx
'
' ⎥⎦
⎤⎢⎣
⎡⎥⎦
⎤⎢⎣
⎡⎥⎦
⎤⎢⎣
⎡
T
P
P'
Rotation
● A rotation is defined by a rotation axis and a rotation angle.
● For 2D rotation, the parameters are rotation angle (θ) and the rotation point (xr ,yr ).
● We reposition the object in a circular path arround the rotation point (pivot point)
θ
xr
yr
Rotation
● When (xr ,yr )=(0,0) we have
r P
P'
θφθφθφθφθφθφ
cossinsincos)sin(sinsincoscos)cos(
rrryrrrx
+=+=′−=+=′
φφ
sincos
ryrx
==The original coordinates are:
θθθθ
cossinsincos
yxyyxx
+=′−=′Substituting them in the
first equation we get:
In the matrix form we have:
where
PRP ⋅=′
⎥⎦
⎤⎢⎣
⎡ −=
θθθθ
cossinsincos
R
Rotation
● Rotation around an arbitrary point (xr ,yr )
● This equations can be written as matrix operations (we will see when we discuss homogeneous coordinates).
r
P
P'
θθθθ
cos)(sin)(sin)(cos)(
rrr
rrr
yyxxyyyyxxxx
−+−+=′−−−+=′
(xr ,yr )
Scaling
● Change the size of an object. Input: scaling factors (sx ,sy )
PSP
S
' ⋅
⎥⎦
⎤⎢⎣
⎡
=
ss
=
ys=y'xs=x'
y
x
yx
00
PP'
non-uniform vs.uniform scaling
Homogenous Coordinates● All transformations can be represented by matrix
operations.
● Translation is additive, rotation and scaling is multiplicative (+ additive if you rotate around an arbitrary point or scale around a fixed point); making the operations complicated.
● Adding another dimension to transformations make translation also representable by multiplication. Cartesian coordinates vs homogenous coordinates.
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
hyhxh
=hyx
=Phy=y
hx=x h
hhh
● Many points in homogenous coordinates can represent the same point in Cartesian coordinates.
● In homogenous coordinates, all transformations can be written as matrix multiplications.
Transformations in Homogenous C.
● Translation
● Rotation
● Scaling
( )
( ) Pt,tT=P
tt
=t,tT
yx'
y
x
yx
⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
1001001
( )
( ) PθR=P
θθθθ
=θR
' ⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −
1000cossin0sincos
( )
( ) Ps,sS=P
ss
=s,sS
yx
y
x
yx
⋅′
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
1000000
Composite Transformations
● Application of a sequence of transformations to a point:
PMPMMP 12
⋅=⋅⋅=′
Composite Transformations
● First: composition of similar type transformations
● If we apply to successive translations to a point:
( ) ( ) ( )yyxxyy
xx
y
x
y
x
yxyx t+t,t+tT=tttt
=tt
tt
=t,tTt,tT 212121
21
1
1
2
2
1122
1001001
1001001
1001001
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡++
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅
PTT
PTTP
⋅⋅=
⋅⋅=′
)},(),({
}),({),(
1122
1122
yxyx
yxyx
tttt
tttt
( ) ( ) ( )yyxxyy
xx
y
x
y
x
yxyx ss,ss=ssss
=ss
ss
=s,ss,s 212121
21
1
1
2
2
1122
1000000
1000000
1000000
⋅⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅
⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅ SSS
Composite Transformations
( ) ( )
( )φ+θ=φ+θφ+θφ+θφ+θ
=φθ+φθφθ+φθφθφθφθφθ
=θθθθ
=φθ
R
RR
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−
−−−
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −⋅
1000)cos()sin(0)sin()cos(
1000coscossinsinsincoscossin0cossinsincossinsincoscos
1000cossin0sincos
1000cossin0sincos
ϕϕϕϕ
Rotation around a pivot point– Translate the object so that the
pivot point moves to the origin
– Rotate around origin
– Translate the object so that the pivot point is back to its original position
( ) ( ) ( )
( )( )
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−−
−−
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−−
⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
−−⋅⋅
100sincos1cossinsincos1sincos
1001001
1000cossin0sincos
1001001
θxθyθθθy+θxθθ
=yx
θθθθ
yx
=y,xθy,x
rr
rr
r
r
r
r
rrrr TRT
( )rr y,x −−T
( )θR
( )rr y,xT
Scaling with respect to a fixed point
– Translate to origin
– Scale
– Translate back
( ) ( ) ( )
( )( )
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−−
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−−
⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
−−⋅⋅
1001010
1001001
1000000
1001001
yfy
xfx
f
f
y
x
f
f
ffyxff
syssxs
=yx
ss
yx
=y,xs,sy,x TST
( )ff y,x −−T
( )yx s,sS
( )ff y,xT
Order of matrix compositions
● Matrix composition is not commutative. So, be careful when applying a sequence of transformations.
pivot same pivot
Other Transformations
● Reflection
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
−
100
010
001
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−
100
010
001
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
−
−
100
010
001
● Shear: Deform the shape like shifted slices.
(1,1)(3,1)
(2,1)
x ' x shx y y ' y
1 shx 00 1 00 0 1
(0,1)
Transformations Between the Coordinate Systems
● Between different systems: Polar coordinates to cartesian coordinates
● Between two cartesian coordinate systems. For example, relative coordinates or window to viewport transformation.
● How to transform from x,y to x',y' ?
● Superimpose x',y' to x,y
● Transformation:
– Translate so that (x0 ,y0 ) moves to (0,0) of x,y
– Rotate x' axis onto x axis
xx
y
y'
x'
x0
y0
( ) ( )00, yxTθR −−⋅−
xx
y
y'x'
● Alternate method for rotation: Specify a vector V for positive y' axis:
xx
y
y'
x'
V( )yx v,v==
y'
VVv
:direction in ther unit vecto
( ) ( )yxxy u,u=v,v=x'
−uv o90 clockwise rotate direction, in ther unit vecto
● Elements of any rotation matrix can be expressed as elements of a set of orthogonal unit vectors:
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
10000
10000
yx
xy
yx
yx
vvvv
=vvuu
=R
xx
yy'
x'
P
0P
| |0
0
PPPPv
−−=
● Example:
xx'
yy'
P
0P
( ) ( )
| |( ) ( )
( )
( ) ( )
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
−
−−
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
−
−⋅
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡ −
−−⋅
−
⎟⎠⎞
⎜⎝⎛
−−
111
1.220.6
1.610.8111
121
443 100
20.80.6
10.60.8
100
110
201
100
00.80.6
00.60.812,
0.60.8,
0.6,0.82.52
2.51.5
21.51.5,2
3.5,32,1
220
0
=T
==,=
=,=+
==
==
M
TvuRM
=uPPPPv
PP
0
TM T
Let triangle T be defined asthree column vectors:
Affine Transformations
● Coordinate transformations of the form:
● Translation, rotation, scaling, reflection, shear. Any affine transformation can be expressed as the combination of these.
● Rotation, translation, reflection: preserve angles, lengths, parallel lines
yyyyx
xxyxx
b+ya+xa=y'
b+ya+xa=x'
3 DIMENSIONAL3 DIMENSIONAL TRANSFORMATIONSTRANSFORMATIONS
3D Transformations
● x,y,z coordinates. Usual notation: Right handed coordinate system
● Analogous to 2D we have 4 dimensions in homogenous coordinates.
● Basic transformations:
– Translation
– Rotation
– Scaling
x
y
z
z
x
y
y
z
x
Translation
● move the object to a relative position.
z
y
x
z
y
x
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
⋅
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
=
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
′′′
11000100010001
1zyx
ttt
zyx
z
y
x
PTP ⋅=′
P
P′
Rotation
● Rotation arround the coordinate axes
x axis y axis z axis
z
x
y
z
x
y
z
x
y
z
x
y
z
x
y
z
x
y
Counterclockwise when looking along the positive half towards origin
Rotation around coordinate axes
● Arround x
● Arround y
● Arround z
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡−
=
10000cossin00sincos00001
)(θθθθ
θxR PRP ⋅=′ )(θx
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡ −
=
1000010000cossin00sincos
)(θθθθ
θzR PRP ⋅=′ )(θz
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
−=
10000cos0sin00100sin0cos
)(θθ
θθ
θyR PRP ⋅=′ )(θy
Rotation Arround a Parallel Axis
● Rotating the object around a line parallel to one of the axes: Translate to axis, rotate, translate back.
z
y
x
z
y
x
z
y
xz
y
x
Translate Rotate Translate back
PTRTP ⋅−−⋅⋅=′ ),,0()(),,0( ppxpp zyzy θ
Figure from the textbook
Rotation Around an Arbitrary Axis
● Translate the object so that the rotation axis passes though the origin
● Rotate the object so that the rotation axis is aligned with one of the coordinate axes
● Make the specified rotation
● Reverse the axis rotation
● Translate back
z
y
x
Rotation Around an Arbitrary Axis
Rotation Around an Arbitrary Axis
),,( 12121212 zzyyxx −−−=−= PPV),,( cba==
VVuu is the unit vector along V:
First step: Translate P1 to origin:
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
−−−
=
1000100010001
1
1
1
zyx
T
Next step: Align u with the z axiswe need two rotations: rotate around x axis to get uonto the xz plane, rotate around y axis to get u aligned with z axis.
Rotation Around an Arbitrary Axis
z
x
u
Align u with the z axis 1) rotate around x axis to get u into the xz plane, 2) rotate around y axis to get u aligned with the z axis
y
α
z
xu
y
βz
x
uu'
αuz
y
Dot product and Cross Product
● v dot u = vx * ux + vy * uy + vz * uz. That equals also to |v|*|u|*cos(a) if a is the angle between v and u vectors. Dot product is zero if vectors are perpendicular.
v x u is a vector that is perpendicular to both vectors you multiply. Its length is |v|*|u|*sin(a), that is an area of parallelogram built on them. If v and u are parallel then the product is the null vector.
Rotation Around an Arbitrary Axis
z
x
uu'
α
Align u with the z axis 1) rotate around x axis to get u into the xz plane, 2) rotate around y axis to get u aligned with the z axis
uz
We need cosine and sine of α for rotation
),,0( cb=′u
22 cos cbddc
z
z +==′⋅′
=uuuuα
bxzxz uuuuuu =′=×′ αsin
αsindb =
db
dc
== αα sin cos
⎥⎥⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢⎢⎢
⎣
⎡−
=
1000
00
000001
)(
dc
db
db
dc
x αRProjection of u onyz plane
Rotation Around an Arbitrary Axis
z
x
u
u''= (a,0,d)
Align u with the z axis 1) rotate around x axis to get u into the xz plane,2) rotate around y axis to get u aligned with the z axis
duuuu
z
z =⋅′′⋅′′
=βcos
)(sin ayzyz −⋅=′′=×′′ uuuuuu β
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡ −
=
−==
100000001000
)(
sin cos
da
adad
y β
ββ
R
),,()()()()()(),,()( 111111 zyxzyx xyzyx −−−⋅⋅⋅⋅−⋅−⋅= TRRRRRTR αβθβαθ
β
Rotation, ... Alternative MethodAny rotation around origin can be represented by 3 orthogonal unit vectors:
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
=
1000000
333231
232221
131211
rrrrrrrrr
R
Define a new coordinate system with the given rotation axis u using:
),,( zyx uuu ′′′
This matrix can be thought of asrotating the unit r1* , r2* , and r3* vectorsonto x, y, and z axes.
So, to align a given rotation axis u onto the z axis,we can define an (orthogonal) coordinate system and form this R matrix
zyx
x
xy
z
uuuuuuuu
uu
′×′=′
××
=′
=′
Rotation, ... Alternative Method
⎥⎥⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢⎢⎢
⎣
⎡
−
⋅−⋅−
=
⋅−⋅−=×−=′×′=′
−=+
−=
××
=××
=′
==′
10000
00
0
)/,/,(),,()/,/,0(
)/,/,0(),,0()0,0,1(),,(),,(
22
cbadb
dc
dca
dbad
dcadbadcbadbdc
dbdccbbccba
cba
zyx
xx
xy
z
R
uuuuuuu
uuu
uu
Check if this is equal to
)()( αβ xy RR ⋅
Scaling
● Change the coordinates of the object by scaling factors.
x 'y 'z '1
sx 0 0 00 s y 0 00 0 sz 00 0 0 1
xyz1
z
y
x
z
y
xPSP ⋅=′
P
P′
Scaling with respect to a Fixed Point
● Translate to origin, scale, translate back
z
y
x
z
y x
z
y
xz
y
x
Translate Scale Translate back
PTSTP ⋅−−−⋅⋅=′ ),,(),,( ffffff zyxzyx
Scaling with respect to a Fixed Point
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
−−−
=−−−⋅⋅=
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
−−−
⋅
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
=
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
⋅
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
=−−−⋅⋅
1000)1(00)1(00)1(00
),,(),,(
100000
0000
1000100010001
1000100010001
1000000000000
1000100010001
),,(),,(
zfz
yfy
xfx
ffffff
fzz
fyy
fxx
f
f
f
f
f
f
z
y
x
f
f
f
ffffff
szssyssxs
zyxzyx
zssyssxss
zyx
zyx
ss
s
zyx
zyxzyx
TST
TST
Reflection
● Reflection over planes, lines or points
1 0 0 00 1 0 00 0 1 00 0 0 1
z
y
x
z
y
x
z
y
x
1 0 0 00 1 0 00 0 1 00 0 0 1
1 0 0 00 1 0 00 0 1 00 0 0 1
z
y
x
1 0 0 00 1 0 00 0 1 00 0 0 1
Shear
● Deform the shape depending on another dimension
SH z
1 0 a 00 1 b 00 0 1 00 0 0 1
x and y value depends on z value of the shape
SH x
1 0 0 0a 1 0 0b 0 1 00 0 0 1
y and z value depends on x value of the shape
OpenGL Geometric-Transformation Functions
● In the core OpenGL library,
– a separate function is available for each basic transformation (translate, rotate, scale)
– all transformations are specified in 3D
● Parameters
– Translation: translation amount in x, y, z axes
– Rotation: angle, orientation of the rotation axis that passes through the origin
– Scaling: scaling factors for three coordinates
Basic OpenGL Transformations
● glTranslate* (tx, ty, tz);
– For 2D applications set tz = 0
● glRotate* (theta, vx, vy, vz);
– theta in degrees
– The rotation axis is defined by the vector (vx,vy,vz), i.e., P0 = (0,0,0) P1 = (vx,vy,vz)
● glScale* (sx, sy, sz);
– Use negative values to get reflection transformation
OpenGL Matrix Operations
● glMatrixMode (GL_MODELVIEW);
– modelview mode to tell OpenGL that we will be specifying geometric transformations. The command simply says that the current matrix operations will be applied on the 4 by 4 modelview matrix.
– the other mode is the projection mode, which specifies the matrix that is used of projection transformations (i.e., how a scene is projected onto the screen)
– There are also color and texture modes that we will discuss later
OpenGL Matrix Operations
● Once you are in the modelview mode, a call to a transformation routine generates a matrix that is multiplied by the current matrix for that mode
● Whatever object defined is multiplied with the current matrix
● The contents of the current matrix can also be manipulated explicitly
– glLoadIdentity();
– glLoadMatrix* (elements16);
where elements16 is a single subscripted array that specifies a matrix in column-major order
OpenGL Matrix Operations
● Example:
for (int k=0; k<16;k++)
elements16[k]=(float)k;
glLoadMatrixf(elements16);
will produce the matrix
⎥⎥⎥⎥
⎦
⎤
⎢⎢⎢⎢
⎣
⎡
=
0.150.110.70.30.140.100.60.20.130.90.50.10.120.80.40.0
M
OpenGL Matrix composition
● glMultMatrix* (otherElements16)
– The current matrix is postmultiplied with the matrix specified in otherElements16
what does this imply?
MMM ′⋅= currcurr
In a sequence of transformation commands, the lastone specified in the code will be the first transformation to be applied.
OpenGL Matrix Stacks
● OpenGL maintains a matrix stack for all the four matrix modes
● When we apply geometric transformations using OpenGL functions, the 4 by 4 matrix at the top of the matrix stack is modified
● The top is also called the current matrix
● If we want to create multiple transformation sequences and save the composition results we can make use of the OpenGL matrix stack
OpenGL Matrix Stacks
● Initially, there is only the identity matrix in the stack
● To find out how many matrices are currently in the stack:– glGetIntegerv(GL_MODELVIEW_STACK_DEPTH,numMats)
● glPushMatrix ();
– The current matrix is copied and stored in the second stack position
● glPopMatrix ();
– Destroys the matrix at the top and the second matrix in the stack becomes the current matrix