4ICT10 Computer Graphics and Virtual Reality

1
4ICT10 Computer Graphics and Virtual Reality

• 14. Transformations
• Dr Ann McNamara

2
3D Transformations

• 4 x 4 Homogeneous co-ordinates

3
Translation

• Translation only applies to points, never
  translate vectors
• Remember points have homogeneous co-ordinate w
  1

translate along y
4
Scale
We would also like to scale points thus we need
a homogeneous transformation for consistency
5
Scale

• all vectors are scaled from the origin

Original
scale all axes
scale Y axis
offset from origin
distance from origin also scales
6
Rotation
7
Rotation

• 2D rotation of q about origin
• 3D homogeneous rotations
• Note
• If M-1 MT then M is orthonormal. All
  orthonormal matrices are rotations about the
  origin.

8
Rotation

• Rotations are anti-clockwise about the origin

rotation of 45o about the Z axis
offset from origin rotation
9
Shear

• We shear along an axis according to another axis
• Shearing along X axis preserves y and z values
• Shearing along Y axis preserves x and z values
• Shearing along Z axis preserves x and y values
• Point are stretched along the shear axis in
  proportion to the distance of the point along
  another axis
• Example shearing along X according to Y

10
Shear
original
shear along x (by y)
shear along x (by z)
11
Transformation Tutorial
12
4ICT10 Computer Graphics and Virtual Reality

• Transformations and OpenGL
• Dr Ann McNamara

13
Composing a Scene
14
Self Symmetry
15
Different Vantage Points
16
Animation
17
Outline

• OpenGL transformation pipeline
• Modeling transformation
• Translate
• Rotate
• Scale
• Composition of transformations
• Matrix stack
• Applications

18
Transformations and OpenGL
Vertex Geometry Pipeline
MODELVIEW matrix
PROJECTION matrix
perspective division
viewport transformation
original vertex
final window coordinates
normalised device coordinates (foreshortened)
2d projection of vertex onto viewing plane
vertex in the eye coordinate space
19
Transformations

• We can think of graphics transformation as
• The process that is analogous to take a
  photograph with a camera.
• Changing the representation of a vertex from one
  coordinate system to another.

20
Synthetic Camera Model
21
Transformations and Camera Analogy

• Viewing transformation
• Positioning and aiming camera in the world.
• Modeling transformation
• Positioning and moving the model.
• Projection transformation
• Adjusting the lens of the camera.
• Viewport transformation
• Enlarging or reducing the physical photograph.

22
Transformations and Coordinate Systems

• Viewing transformation
• specifying camera (camera coordinates).
• Modeling transformation
• specifying geometry (world coordinates).
• Projection transformation
• projection (window coordinates).
• Viewport transformation
• mapping to screen (screen coordinates).

23
Transformations in OpenGL

• Transformations are specified by matrix
  operations. Desired transformation can be
  obtained by a sequence of simple transformations
  that can be concatenated together.
• Transformation matrix is usually represented by
  4x4 matrix (homogeneous coordinates).
• Provides matrix stacks for each type of supported
  matrix to store matrices.

24
Transformation Matrices

• Model-viewing matrix
• Projection matrix
• Texture matrix

In this class, we just focus on the modeling
transformation or model-view matrix
25
OpenGL Transformation Pipeline
26
Programming Transformations

• In OpenGL, the transformation matrices are part
  of the state, they must be defined prior to any
  vertices to which they are to apply.
• In modeling, we often have objects specified in
  their own coordinate systems and must use
  transformations to bring the objects into the
  scene.
• OpenGL provides matrix stacks for each type of
  supported matrix (model-view, projection,
  texture) to store matrices.

27
Steps in Programming

• Prior to rendering, view, locate, and orient
• Eye/camera position
• 3D geometry
• Manage the matrices
• Including matrix stack
• Composite transformations

28
Current Transformation Matrix

• Current Transformation Matrix (CTM)
• The matrix that is applied to any vertex that is
  defined subsequent to its setting.
• If change the CTM, we change the state of the
  system.
• CTM is a 4 x 4 matrix that can be altered by a
  set of functions.

29
Current Transformation Matrix
The CTM can be set/reset/modify (by
post-multiplication) by a matrix Ex C lt M
// set to matrix M C lt CT
// post-multiply by T C lt CS
// post-multiply by S C lt CR
// post-multiply by R
30
Current Transformation Matrix

• Each transformation actually creates a new matrix
  that multiplies the CTM the result, which
  becomes the new CTM.
• CTM contains the cumulative product of
  multiplying transformation matrices.

Ex If C lt M C lt CT C lt CR C lt
CS Then C M T R S
31
Ways to Specify Transformations

• In OpenGL, we usually have two styles of
  specifying transformations
• Specify matrices ( glLoadMatrix, glMultMatrix )
• Specify operations ( glRotate, glTranslate )

32
Specifying Matrix

• Specify current matrix mode
• Modify current matrix
• Load current matrix
• Multiple current matrix

33
Specifying Matrix (1)

• Specify current matrix mode

glMatrixMode (mode) Specified what
transformation matrix is modified. mode
GL_MODELVIEW GL_PROJECTION
34
Specifying Matrix (2)

• Modify current matrix

glLoadMatrixfd ( Type m ) Set the 16 values
of current matrix to those specified by m.
Note m is the 1D array of 16 elements arranged
by the columns of the desired matrix
35
Specifying Matrix (3)

• Modify current matrix

glLoadIdentity ( void ) Set the currently
modifiable matrix to the 4x4 identity matrix.
36
Specifying Matrix (4)

• Modify current matrix

glMultMatrixfd ( Type m ) Multiple the matrix
specified by the 16 values pointed by m by the
current matrix, and stores the result as current
matrix.
Note m is the 1D array of 16 elements arranged
by the columns of the desired matrix
37
Specifying Operations

• Three OpenGL operation routines for modeling
  transformations
• Translation
• Scale
• Rotation

38
Recall

• Three elementary 3D transformations

Translation
Scale
39
Recall
Rotation
Rotation
Rotation
40
Specifying Operations (1)

• Translation

glTranslate fd (TYPE x, TYPE y, TYPE z)
Multiplies the current matrix by a matrix that
translates an object by the given x, y, z.
41
Specifying Operations (2)

• Scale

glScale fd (TYPE x, TYPE y, TYPE z)
Multiplies the current matrix by a matrix that
scales an object by the given x, y, z.
42
Specifying Operations (3)

• Rotate

glRotate fd (TPE angle, TYPE x, TYPE y, TYPE
z) Multiplies the current matrix by a matrix
that rotates an object in a counterclockwise
direction about the ray from origin through the
point by the given x, y, z. The angle parameter
specifies the angle of rotation in degree.
43
Example

• Lets examine an example
• Rotation about an arbitrary point

Question Rotate a object for a 45.0-degree about
the line through the origin and the point (1.0,
2.0, 3.0) with a fixed point of (4.0, 5.0, 6.0).
44
Rotation About an Arbitrary Point

• Translate object through vector V.
• T(-4.0, -5.0, -6.0)
• Rotate about the origin through angle q.
• R(45.0)
• Translate back through vector V
• T(4.0, 5.0, 6.0)

M T(V ) R(q ) T(-V )
45
OpenGL Implementation

• glMatrixMode (GL_MODEVIEW)
• glLoadIdentity ()
• glTranslatef (4.0, 5.0, 6.0)
• glRotatef (45.0, 1.0, 2.0, 3.0)
• glTranslatef (-40.0, -5.0, -6.0)

46
Transformation Composition
47
Order of Transformations

• The transformation matrices appear in reverse
  order to that in which the transformations are
  applied.
• In OpenGL, the transformation specified most
  recently is the one applied first.

48
Order of Transformations

• In each step
• C lt I
• C lt CT(4.0, 5.0, 6.0)
• C lt CR(45, 1.0, 2.0, 3.0)
• C lt CT(-4.0, -5.0, -6.0)
• Finally
• C T(4.0, 5.0, 6.0) CR(45, 1.0, 2.0, 3.0)
  CT(-4.0, -5.0, -6.0)

49
Matrix Multiplication is Not Commutative
First rotate, then translate gt
First translate, then rotate gt
50
Composition of Transformations

• We can compose an overall transformation by
  applying several transformations in succession.
• Any composition of affine transformations is
  still affine.
• When homogeneous coordinates are used, affine
  transformations are composed by simple matrix
  multiplication.

51
Problem

• Draw the car body.
• Translate to right front and draw wheel.
• Return back to car body.
• Translate to left front and draw wheel.
• Return back to car body.
• ..

Always remember where you are!
52
Matrix Stacks

• OpenGL uses matrix stacks mechanism to manage
  transformation hierarchy.
• OpenGL provides matrix stacks for each type of
  supported matrix to store matrices.
• Model-view matrix stack
• Projection matrix stack
• Texture matrix stack

53
Matrix Stacks

• Current matrix is always the topmost matrix of
  the stack
• We manipulate the current matrix is that we
  actually manipulate the topmost matrix.
• We can control the current matrix by using push
  and pop operations.

Pushing
Popping
Top
Bottom
54
Manipulating Matrix Stacks (1)

• Remember where you are

glPushMatrix ( void ) Pushes all matrices in the
current stack down one level. The topmost matrix
is copied, so its contents are duplicated in both
the top and second-from-the top matrix.
Note current stack is determined by
glMatrixModel()
55
Manipulating Matrix Stacks (2)

• Go back to where you were

glPopMatrix ( void ) Pops the top matrix off the
stack, destroying the contents of the popped
matrix. What was the second-from-the top matrix
becomes the top matrix.
Note current stack is determined by
glMatrixModel()
56
Manipulating Matrix Stacks (3)

• The depth of matrix stacks are implementation-depe
  ndent.
• The Modelview matrix stack is guaranteed to be at
  least 32 matrices deep.
• The Projection matrix stack is guaranteed to be
  at least 2 matrices deep.

glGetIntegerv ( Glenum pname, Glint parms
) Pname GL_MAX_MODELVIEW_STACK_DEPTH GL_MAX_PROJE
CTION_STACK_DEPTH
57
Lets Examine Some Examples

• Question 1
• Draw a simple solar system with a planet and a
  sun.
• Sun rotates around its own axis (Y axis)
• The planet rotates around its own axis (Y axis)
• The planet also rotates on its orbit around the
  sun.

58
Example-1

• Sun
• Locates at the origin and rotates around its own
  axis (Y axis)
• M Ry (q)

Planet 1. Rotates around its own axis. M1 Ry
(q) 2. Translate to its orbit. M2
T (x, y, z) 3. Rotates around Sun.
M3 Ry (q) M
M3 M2 M1
59
OpenGL Implementation
void main (int argc, char argv) glutInit
( argc, argv ) glutInitDisplayMode
(GLUT_DOUBLE GLUT_RGB) glutInitWindowSize
(500, 500) glutCreateWindow ("Composite
Modeling Transformation") init ()
glutDisplayFunc (display) glutReshapeFunc
(reshape) glutKeyboardFunc (keyboard)
glutMainLoop ()
60
OpenGL Implementation
void init (void) glViewport(0, 0, 500,
500) glMatrixMode(GL_PROJECTION)
glLoadIdentity() gluPerspective(60.0, 1,
1.0, 20.0) glMatrixMode(GL_MODELVIEW)
glLoadIdentity() glTranslatef (0.0, 0.0,
-5.0) //
viewing transform glClearColor(0.0, 0.0, 0.0,
0.0) glShadeModel (GL_FLAT)
61
OpenGL Implementation
void display(void) glClear(GL_COLOR_BUFFER_B
IT) glColor3f (1.0, 1.0, 1.0)
glPushMatrix() // draw sun
glPushMatrix() glRotatef ((GLfloat) ang2,
0.0, 1.0, 0.0) glRotatef (90.0, 1.0,
0.0, 0.0) // rotate
it upright glutWireSphere(1.0, 20, 16)
// glut routine
glPopMatrix()
62
OpenGL Implementation (con.)
// draw smaller planet glRotatef ((GLfloat)
ang1, 0.0, 1.0, 0.0) glTranslatef (2.0, 0.0,
0.0) glRotatef ((GLfloat) ang3, 0.0, 1.0,
0.0) glRotatef (90.0, 1.0, 0.0, 0.0)
// rotate it upright
glutWireSphere(0.2, 10, 8)
// glut routine
glPopMatrix() glutSwapBuffers()
63
Result
64
Lets Examine Some Examples

• Question 2
• Draw a simple articulated robot arm with
  three segments.
• The arms should be connected with pivot
  points as the shoulder, elbow, or other joints.
  (the three segments have same length, saying 2
  units)

Pivot points
65
Example-2

• Red segment
• 1. Translates unit 1 to its pivot point. M1 T
  (1, 0, 0)
• 2. Rotates around its pivot point.
• M2 Ro (q)
• 3. Translates 1 unit back to origin. M3 T
  (-1, 0, 0)
• M M3 M2 M1

66
OpenGL Implementation
void display(void) glClear(GL_COLOR_BUFFER_B
IT) glPushMatrix() // draw shoulder
(red) glTranslatef (-1.0, 0.0, 0.0)
glRotatef (shoulder, 0.0, 0.0, 1.0)
glTranslatef (1.0, 0.0, 0.0)
glPushMatrix() glScalef (2.0, 0.4, 0.1)
glColor3f (1.0, 0.0, 0.0) glutSolidCube (1)

// glut routine glPopMatrix()
67
Example-2

• Green segment
• 1. Translates unit 1 to its pivot point. M1 T
  (1, 0, 0)
• 2. Rotates around its pivot point.
• M2 Ro (q)
• 3. Translates 1 unit to the edge of the Red
  segment.
• M3 T (1, 0, 0)
• M M3 M2 M1

68
OpenGL Implementation
void display(void) // draw elbow
glTranslatef (1.0, 0.0, 0.0) glRotatef
(elbow, 0.0, 0.0, 1.0) glTranslatef (1.0,
0.0, 0.0) glPushMatrix() glScalef (2.0,
0.4, 0.1) glColor3f (0.0, 1.0, 0.0)
glutSolidCube(1)
// glut routine glPopMatrix()
69
Example-2

• Yellow segment
• 1. Translates unit 1 to its pivot point. M1 T
  (1, 0, 0)
• 2. Rotates around its pivot point.
• M2 Ro (q)
• 3. Translates 1 unit to the edge of the Green
  segment.
• M3 T (1, 0, 0)
• M M3 M2 M1

70
Result
71
Change Something

• If we push the current matrix before doing
  the transformations for each segment, and pop it
  out after drawing, what the result looks like?

// draw shoulder (red) glPushMatrix()
glTranslatef (-1.0, 0.0, 0.0) glRotatef
(shoulder, 0.0, 0.0, 1.0) glTranslatef (1.0,
0.0, 0.0) DrawShoulder.. glPopMatrix()
72
What it Looks Like
73
Remember

• Always keep tracking your current position.
  Remember where you are, and go back to where you
  were.
• Matrix multiplication is not commutative, the
  transformation order is very important.
• In OpenGL, the transformation specified most
  recently is the one applied first.

74
Lab

• Draw a simple 3D airplane model using the
  modeling transformations lectured in the classes.
• The goal of this assignment is to show how
  to composite modeling transformations to draw
  translated and rotated hierarchical models.
• Submission
• Show me a screen capture of the output,
  and source code.
• Deadline 9th January 2003

75
Transformations and OpenGL
Vertex Geometry Pipeline
MODELVIEW matrix
PROJECTION matrix
perspective division
viewport transformation
original vertex
final window coordinates
normalised device coordinates (foreshortened)
2d projection of vertex onto viewing plane
vertex in the eye coordinate space
76
4ICT10 Computer Graphics and Virtual Reality

• Hierarchical Transformations
• Dr Ann McNamara

77
Hierarchical Transformations

• For geometries with an implicit hierarchy we wish
  to associate local frames with sub-objects in the
  assembly.
• Parent-child frames are related via a
  transformation.
• Transformation linkage is described by a tree
• Each node has its own local co-ordinate system.

78
Hierarchical Transformations
R
R
R
T
Hierarchical transformation allow independent
control over sub-parts of an assembly
79
translate base
rotate joint1
rotate joint2
complex hierarchical transformation
80
OpenGL Implementation
glMatrixMode(GL_MODELVIEW) glLoadIdentity() glTr
anslatef(bx, by, bz) create_base() glTranslat
ef(0, j1y, 0) glRotatef(joint1_orientation)
create_joint1() glTranslatef(0, uay, 0)
create_upperarm() glTranslatef(0,
j2y) glRotatef(joint2_orientation)
create_joint2() glTranslatef(0, lay, 0)
create_lowerarm() glTranslatef(0, py,
0) glRotatef(pointer_orientation)
create_pointer()
81
Hierarchical Transformations

• The previous example had simple one-to-one
  parent-child linkages.
• In general there may be many child frames derived
  from a single parent frame.
• we need some mechanism to remember the parent
  frame and return to it when creating new
  children.
• OpenGL provide a matrix stack for just this
  purpose
• glPushMatrix() saves the CTM
• glPopMatrix() returns to the last saved CTM

82
Hierarchical Transformations
Each finger is a child of the parent (wrist) ?
independent control over the orientation of the
fingers relative to the wrist
83
Hierarchical Transformations
84
glMatrixMode(GL_MODELVIEW) glLoadIdentity() glTr
anslatef(bx, by, bz) create_base() glTranslat
ef(0, jy, 0) glRotatef(joint1_orientation)
create_joint1() glTranslatef(0, ay, 0)
create_upperarm() glTranslatef(0,
wy) glRotatef(wrist_orientation)
create_wrist() glPushMatrix() // save frame
glTranslatef(-xf, fy0, 0) glRotatef(lowerfinge
r1_orientation) glTranslatef(0, fy1, 0)
create_lowerfinger1() glTranslatef(0, fy2,
0) glRotatef(upperfinger1_orientation)
create_fingerjoint1() glTranslatef(0, fy3,
0) create_upperfinger1() glPopMatrix() //
restore frame glPushMatrix() // do finger
2... glPopMatrix() glPushMatrix() // do
finger 3... glPopMatrix()
Finger1
85
4ICT10 Computer Graphics and Virtual Reality

• OpenGl GLU
• Dr Ann McNamara

86
OpenGL Objects GLU

• GLU provides functionality for the creation of
  quadric surfaces
• spheres, cones, cylinders, disks
• A quadric surface is defined by the following
  implicit equation

use to initialise a quadric
GLUquadricObj gluNewQuadric(void) gluDeleteQuadr
ic(GLYquadricObj obj)
delete when finished
87
OpenGL Objects GLU Spheres
void gluSphere(GLUquadricObj obj, double radius,
int slices, int stacks)
gluSphere(obj, 1.0, 5, 5)
gluSphere(obj, 1.0, 10, 10)
gluSphere(obj, 1.0, 20, 20)
88
Other GLU Quadrics
void gluCylinder(GLUquadricObj obj, double
base_radius, double top_radius, double height,
int slices, int stacks)
gluCylinder(obj, 1.0, 1.0, 2.0, 20, 8)
gluCylinder(obj, 1.0, 1.0, 2.0, 8, 8)
gluCylinder(obj, 1.0, 0.3, 2.0, 20, 8)
89
Other GLU Quadrics
void gluDisk(GLUquadricObj obj, double
inner_radius, double outer_radius, int slices,
int rings)
gluCylinder(obj, 1.0, 0.0, 2.0, 20, 8)
gluDisk(obj, 0.0, 2.0, 10, 3)
gluDisk(obj, 0.5, 2.0, 10, 3)
90
OpenGL Objects GLUT
void glutSolidTorus(double inner_radius, double
outer_radius, int nsides, int rings)
glutWireTeapot(1.0)
glutWireTorus(0.3, 1.5, 20, 20)
size
glutSolidTorus(0.3, 1.5, 20, 20)
glutSolidTeapot(1.0)
glutSolidDodecahedron()