computer graphics - villanova computer sciencemdamian/past/graphicssp13/notes/... · computer...
TRANSCRIPT
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