3D Objects and
Transformations
Context
ModelingCoordinates
ModelingTransformation
WorldCoordinates
OpenGL:Modeling a Colored Cube
Modeling a Colored Cube
• A rotating cube with the colors of the color cube attached
Describe the cube by its vectors
x
y
z
Draw one cube side as a polygon
• Order of vertices is important!
Inward and outward pointing faces
• Definition used by OpenGL:– Face is outward facing if vertices are traversed counter‐clockwise
– Right‐hand rule:
Data structures for object representation
• Each vertex is stored exactly once• Rest of structure represents cube topology
Drawing the cube
/* or GL_POLYGON */
Bilinear interpolation of colors
Interpolation for all three primary colorsindependently
Hands‐on Session / Homework
• The ‘Cube’ program: Compile, Run & Play – Modify vertex colors to produce uniform face color
– Hit the space bar to see the cube rotate
– Disable hidden surface removal
• Homework: Make sure you understand each and every line of code in this program & the related internal workings of OpenGL. If not:
• Go through all lecture slides
• Read the relevant sections in the red book
• Search the Web
• If all else fails: ask the instructor
3D Transformations
3D Transformations
• Introduce 3D transformations:– Position (translation)– Size (scaling)– Orientation (rotation)– Shapes (shear)
• Previously developed in 2D (x,y)
• Now, extend to 3D or (x,y,z) case
• Extend transform matrices to 3D
• Enable transformation of points by matrix multiplication
3D Coordinate Systems
• Right hand coordinate system
• Left hand coordinate system– Not used in this class and– Not in OpenGL
Point Representation
• Previously, point in 2D as column matrix:
• Now, extending to 3D, add z‐component:
Transforms in 3D
• 2D: 3x3 matrix multiplication
• 3D: 4x4 matrix multiplication
• Recall: transform object Ξ transform each vertex
• General form:
Recall: 2D Translation
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛++
=⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛′′
11100
10
01
1y
x
y
x
ty
tx
y
x
t
t
y
x
⎟⎟⎠
⎞⎜⎜⎝
⎛++
=⎟⎟⎠
⎞⎜⎜⎝
⎛′′
y
x
ty
tx
y
x
Homogeneous Coordinates
3D Translation
• Now, 3D:
• OpenGL:
• glTranslated(tx, ty, tz)
d = (tx, ty, tz)
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
+
+
+
=
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
111
'
'
'
z
y
x
tz
ty
tx
z
y
x
z
y
x
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
+
+
+
=
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
z
y
x
tz
ty
tx
z
y
x
'
'
'
Homogeneous Coordinates
Recall: 2D Rotation
( )( )⎥⎦
⎤⎢⎣
⎡++
=′⎥⎦
⎤⎢⎣
⎡=
θφθφ
φφ
sin
cos
sin
cos
r
r
r
rvv
original
rota
ted
( )⎩⎨⎧
+=′−=′
⇒+θφθφθφθφ
θφcossinsincos
sinsincoscos expand
rry
rrx
θθθθ
θφ
cossin
sincos
sin
cos
yxy
yxx
ry
rx
+=′−=′
⇒==
but
Rotating in 3D
• Cannot do mindless conversion like before
• Why?–Rotate about what axis?–3D rotation: about a defined axis–Different transform matrix for:
• Rotation about x‐axis• Rotation about y‐axis• Rotation about z‐axis
• Which way is positive rotation ?– Look in negative direction ( into the axis )– Positive rotation is counterclockwise (ccw)
Rotating in 3D
3D Rotation
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛ −
=
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
′′′
11000
0100
00cossin
00sincos
1
z
y
x
z
y
x
θθθθ
• 2D rotation about origin:
• 3D rotation about z:
⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎟⎠
⎞⎜⎜⎝
⎛ −=
⎟⎟⎠
⎞⎜⎜⎝
⎛
y
x
y
x
θθ
θθ
cossin
sincos
'
'
3D Rotation
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛ −
=
1000
0100
00cossin
00sincos
θθ
θθ
zR
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
=xR
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
=yR
3D Rotation Exercise
• Example: – Rotate P = (3,1,4) by 30 degrees about the y‐axis
Hands‐on Session
• Start the 3D transformation applet by clicking on the ‘hands‐on’ link next to this week’s lecture.
• Complete the first two parts (Part 1 and Part 2).
Recall: 2D Rotation about Fixed Point
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−−+−−
=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−−
⋅⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛ −⋅⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
−−⋅⋅
100
sin)cos1(cossin
sin)cos1(sincos
100
10
01
100
0cossin
0sincos
100
10
01
),()(),(
θθθθθθθθ
θθθθ
θ
rr
rr
r
r
r
r
rrrr
xy
yx
y
x
y
x
yxTRyxT
3D Rotation about Fixed Point
Want:
Same Procedure: ),,()(),,( rrrrrr zyxTRzyxT −−−⋅⋅ θ
),,( rrrf zyxp =
3D Rotation about Arbitrary Axis
General:
3D rotation requires fixed point pf , vector v, and angle θ.
3D Rotation about Arbitrary Axis
(fixed point)
Subcase: Fixed point at Origin
• Rotate by θ about the axis (rx, ry, rz). • Strategy:
– Align the rotation axis with the z axis (two rotations)– Rotate by θ around z– Undo the two alignment rotations
R = Rx(‐αx) Ry(‐αy) Rz(θ) Ry(αy) Rx(αx)
• Problem:– Finding αx, αy
(rx, ry, rz)
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
(rx, ry, rz)
x
y
z
αx
d1
Computing the x‐Rotation αx
• Insert this in the matrix for rotation about x‐axis:
• Note that we do not even compute αx
⎟⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜⎜
⎝
⎛
−=
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
−=
1000
00
00
0001
1000
0cossin0
0sincos0
0001
)(
d
r
d
rd
r
d
r
Rzy
yz
xx
xx
xx
αα
ααα
Computing the y‐Rotation αy
Determine the rotation about the y‐axis:
rx
αyd 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( … );
Hands‐on Session
• Restart the 3D transformation applet
• Complete Part 3
Recall: 2D Scaling
( )yx,
( )yx ′′,
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛′′
11100
00
00
1
ys
xs
y
x
s
s
y
x
y
x
y
x
⎟⎟⎠
⎞⎜⎜⎝
⎛=⎟⎟
⎠
⎞⎜⎜⎝
⎛⎟⎟⎠
⎞⎜⎜⎝
⎛=⎟⎟
⎠
⎞⎜⎜⎝
⎛′′
ys
xs
y
x
s
s
y
x
y
x
y
x
0
0
Homogeneous Coordinates
fixed point
3D Scaling
• Now, 3D:
• OpenGL: glScaled(sx, sy, sz)
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜⎜
⎝
⎛
111
'
'
'
zs
ys
xs
z
y
x
z
y
x
z
y
x
fixed point
Recall: 2D Reflection
• Along X‐axis
• Along Y‐axis
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛′′
11100
010
001
1
y
x
y
x
y
x
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛′′
11100
010
001
1
y
x
y
x
y
x
3D Reflection
• About the xy‐plane:
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
′′′
11
z
y
x
z
y
x
Recall: 2D Shearing
• Along X‐axis
• Along Y‐axis
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛ +=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛′′
11100
010
01
1
y
dyx
y
xd
y
x
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛+=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛′′
11100
01
001
1
dxy
x
y
x
dy
x
3D Shearing
• All transformations can be made from sequences of rotations, translations, and scalings.
• Shearing is of such importance, that it is often seen as a basis type – “Pull the top to the right and the bottom to the left”:
3D Shearing
• Along the x‐axis:
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜⎜
⎝
⎛
′′′
11
z
y
x
z
y
x
Composing Transformations
• Applying several transforms in succession to form one overall transformation
• q = CBAp
• For a single point: q = (C(B(Ap)))
• This always multiplies a column vector with a square matrix
Composing Transformations
• For many points: M = CBA qi = Mpi
• Efficient execution in pipeline!
3D Transformations in OpenGL
3D Transforms
• glMatrixMode(GL_MODELVIEW);
• Scale: glScalef(sx,sy,sz)
• Translate: glTranslatef(tx,ty,tz)
• Rotate: glRotatef(angle,vx,vy,vz)
(vx,vy,vz) automatically normalized
glLoadIdentity(); glPushMatrix();
glTranslatef (‐5.0, 0.0, 0.0); glRotatef (5.0, 0.0, 0.0, 1.0); glScalef (1.0, 1.0, 1.0); drawBox(2.0, 0.4, 1.0);
glPopMatrix();
• Example:
3D Transforms
• OpenGL– Creates matrices for each transform – Multiplies matrices together to form one combined matrix
– The combined geometry transform matrix is called MODELVIEW
OpenGL Transformation Matrices
• The CTM is a 4 x 4 matrix– Part of the OpenGL state
• Operations:
Current Transformation Matrix (CTM)
Composed Transformation Example
• Q: What kind of operation is this?
Order of Transformations (right to left)
Summary
• 3D Object representation– Union of polygons– Arrays of vertices and vertex indices
• 3D Transformations– Translation (required direction vector)– Scaling (requires fixed point, scaling direction)– Rotation (requires fixed point, vector, angle)– Shearing (requires fixed point, direction)
• Combining transformations– Order is important