2/16/2020 1 HEMN224: Computer Graphics & Visualization Transformation Dr. Ayman Eldeib Spring 2020 Healthcare Engineering & Management (HEM) Computer Graphics Transformation Transformation Transformation is a fundamental corner stone of computer graphics and is a central to OpenGL as well as most other graphics systems.(2D and 3D Transformation) Given an object, transformation is to change the object’s Position (translation) Size (scaling) Orientation (rotation) Shapes (shear)
18
Embed
Dr. Ayman Eldeib · 2/16/2020 1 HEMN224: Computer Graphics & Visualization Transformation Dr. Ayman Eldeib Spring 2020 Healthcare Engineering & Management (HEM) Computer Graphics
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
2/16/2020
1
HEMN224: Computer Graphics &
Visualization
Transformation
Dr. Ayman Eldeib
Spring 2020
Healthcare Engineering & Management (HEM)
Computer Graphics Transformation
Transformation
Transformation is a fundamental corner stone of computer
graphics and is a central to OpenGL as well as most other
graphics systems.(2D and 3D Transformation)
Given an object, transformation is to change the object’s
Position (translation)
Size (scaling)
Orientation (rotation)
Shapes (shear)
2/16/2020
2
Computer Graphics Transformation
Translations
Translate individual
vertices
We can translate or move points to a new position by
adding offsets to their coordinates
Computer Graphics Transformation
We can translate or move points to a new position by
adding offsets to their coordinates
Translate individual vertices
y
x
tyy
txx
+=′
+=′
+
=
y
x
t
t
y
x
y
x
'
'
=
1100
10
01
1
'
'
y
x
t
t
y
x
y
x
2D
Cont.Translations
2/16/2020
3
Computer Graphics Transformation
Homogeneous Coordinates
Homogeneous coordinates: representing coordinates in 2 dimensions with a 3-vector and coordinates in 3 dimensions with a 4-vector
(Note that typically w = 1 in object coordinates)
=
w
z
y
x
zyx ),,(
Computer Graphics Transformation
Homogeneous coordinates seem unintuitive, but they make graphics operations much easier
Our transformation matrices are now 4x4 for 3D
1 0 0
0 1 0
0 0 1
0 0 0 1
x
y
z
T
T
T
=
T
Translation matrix
P'P T=
Homogeneous Coordinates
2/16/2020
4
Computer Graphics Transformation
We can translate or move points to a new position by
adding offsets to their coordinates
Translate individual vertices
=
11000
100
010
001
1
'
'
'
z
y
x
t
t
t
z
y
x
z
y
x
3D
z
y
x
tzz
tyy
txx
+=
+=′
+=′
'
+
=
z
y
x
t
t
t
z
y
x
z
y
x
'
'
'
P'P T=
Cont.Translations
Computer Graphics Transformation
Translate individual
vertices
We can translate or move points to a new position by
adding offsets to their coordinates
To transform an object multiply each vertex by the same
matrix
A square translation can be done as follows:
]PPPP[]'P'P'P'[P 43214321 T=
Cont.Translations
2/16/2020
5
Computer Graphics Transformation
Scaling
Scaling a coordinate means multiplying each of its
components by a scalar
Uniform scaling means this scalar is the same for all
components
× 2
Computer Graphics Transformation
Scaling a coordinate means multiplying each of its
components by a scalar
× 2
ysy
xsx
y
x
⋅=′
⋅=′
Cont.Scaling
2/16/2020
6
Computer Graphics Transformation
Scaling a coordinate means multiplying each of its
components by a scalar
ysy
xsx
y
x
⋅=′
⋅=′
=
′
′
y
x
s
s
y
x
y
x
0
0
=
′
′
1100
00
00
1
y
x
s
s
y
x
y
x2D
3D
P
11000
000
000
000
1
P' Sz
y
x
s
s
s
z
y
x
z
y
x
=
=
′
′
′
=
Scaling matrix
Cont.Scaling
Computer Graphics Transformation
Scaling a coordinate means multiplying each of its
components by a scalar
Non-uniform scaling: different scalars per component
X × 2,
Y × 0.5
Cont.Scaling
2/16/2020
7
Computer Graphics Transformation
Fixed Point Scaling
Computer Graphics Transformation
Fixed Point Scaling Cont.
2/16/2020
8
Computer Graphics Transformation
=
′
′
1100
00
00
1
y
x
s
s
y
x
y
x
Fixed Point Scaling Cont.
Computer Graphics Transformation
=
′
′
1100
00
00
1
y
x
s
s
y
x
y
x
Step 1:
Translate to the origin
Fixed Point Scaling Cont.
2/16/2020
9
Computer Graphics Transformation
=
′
′
1100
00
00
1
y
x
s
s
y
x
y
x
Step 2:
Scale the object
Fixed Point Scaling Cont.
Computer Graphics Transformation
=
′
′
1100
00
00
1
y
x
s
s
y
x
y
x
Step 3:
Translate the object back
Fixed Point Scaling Cont.
2/16/2020
10
Computer Graphics Transformation
1. Translate to origin
2. Scale
3. Translate back
( ) pTSTp1−=′
Fixed Point Scaling Cont.
Computer Graphics Transformation
Rotation
θ
(x, y)
(x’, y’) x’ = x cos(θ) - y sin(θ)
y’ = x sin(θ) + y cos(θ)
( ) ( )
( ) ( )
θθ
θ−θ=
y
x
y
x
cossin
sincos
'
'
2D
2/16/2020
11
Computer Graphics Transformation
3-D is more complicated
Need to specify an axis of rotation
There are four ways to specify a 3D rotation
Simple cases: rotation about X, Y, Z axes
3-D rotation matrix look like
Rotation about the X-axis
θθ
θ−θ
=
z
y
x
z
y
x
100
0)cos()sin(
0)sin()cos(
'
'
'
Rotation about the Y-axis Rotation about the Z-axis
θθ−
θθ
=
z
y
x
z
y
x
)cos(0)sin(
010
)sin(0)cos(
'
'
'
θθ
θ−θ=
z
y
x
z
y
x
)cos()sin(0
)sin()cos(0
001
'
'
'
Rotation Cont.
3D
Computer Graphics Transformation
Rotation about the X-axis Rotation about the Y-axis Rotation about the Z-axis
−=
11000
0cossin0
0sincos0
0001
)(z
y
x
Rx θθ
θθθ
−=
11000
0cos0sin
0010
0sin0cos
)(z
y
x
R y θθ
θθ
θ
−
=
11000
0100
00cossin
00sincos
)(z
y
x
Rz
θθ
θθ
θ
3-D is more complicated
Need to specify an axis of rotation
There are four ways to specify a 3D rotation
Simple cases: rotation about X, Y, Z axes
3-D rotation matrix look like
Rotation Cont.
3D
2/16/2020
12
Computer Graphics Transformation
3-D is more complicated
Need to specify an axis of rotation
There are four ways to specify a 3D
rotation
3D rotations – axis angle representation
3-D rotation matrix look like
y
z
x
a
θ
Rotate a point about an arbitrary axis a = (x,y,z) going through the origin
Note: the axis a should be of unit length
2
2
2
1 0 0 0
( , ) cos 0 1 0 (1 cos ) sin 0
0 0 1 0
x xy xz z y
R a xy y yz z x
xz yz z y x
θ θ θ θ
−
= + − + − −
Rotation Cont.
3D
Computer Graphics Transformation
Fixed Point Rotating
1. Translate to origin
2. Rotate
3. Translate back
( ) pTRTp1−=′
2/16/2020
13
Computer Graphics Transformation
Matrix Composition
Matrix multiplication does not commute
Transformation products may not be
commutative
BAAB ≠
Computer Graphics Transformation
Shearing
Y coordinates are unaffected, but x coordinates are
translated linearly with y, i.e.
y’ = y x’ = x + y * h
=
1100
010
01
1
'
'
y
xh
y
x
2/16/2020
14
Computer Graphics Transformation
X coordinates are unaffected, but y coordinates are
translated linearly with y, i.e.
x’ = x y’ = y + x * g
=
1100
01
001
1
'
'
y
x
gy
x
Cont.Shearing
Computer Graphics Transformation
Inverse Transformations
Translate Scale
Shear Rotate
2/16/2020
15
Computer Graphics Transformation
OpenGL: Modeling Transformations
OpenGL provides several commands for performing modeling transforms:
glTranslate{fd}(x, y, z)
• Creates a matrix T that transforms an object by translating (moving)
it by the specified x, y, and z values
glRotate{fd}(angle, x, y, z)
• Creates a matrix R that transforms an object by rotating it
counterclockwise angle degrees about the vector {x, y, z}
glScale{fd}(x, y, z)
• Creates a matrix S that scales an object by the specified factors in
the x, y, and z directions
Computer Graphics Transformation
OpenGL: Matrix Manipulation
Each of these post multiplies the current matrix
E.g., if current matrix is C, then C=CS
The current matrix is either the modelview matrix or the
projection matrix (also a texture matrix, won’t discuss for now)
Set these with glMatrixMode(), e.g.:
glMatrixMode(GL_MODELVIEW);
glMatrixMode(GL_PROJECTION);
– WARNING: common mistake ahead!
• Be sure that you are in GL_MODELVIEW mode before making
modeling or viewing calls!
• Ugly mistake because it can appear to work, at least for a while…
2/16/2020
16
Computer Graphics Transformation
More matrix manipulation calls
To replace the current matrix with an identity matrix:
glLoadIdentity()
Postmultiply the current matrix with an arbitrary matrix:
glMultMatrix{fd}(float/double m[16])
Copy the current matrix and push it onto a stack:
glPushMatrix()
Discard the current matrix and replace it with whatever’s on top
of the stack:
glPopMatrix()
Note that there are matrix stacks for both modelview and
projection modes
Cont.OpenGL: Matrix Manipulation
Computer Graphics Transformation
glMatrixMode (GL_MODELVIEW)
glLoadIdentity ( );
glMultMatrtixf (m2);
glMultMatrixf (m1);
12 MMM ⋅=
OpenGL uses post multiplication when multiplying matrices thus, transformations are applied in the inverse
order. The last one specified is the first one applied.
Cont.OpenGL: Matrix Manipulation
2/16/2020
17
Computer Graphics Transformation
glMatrixMode (GL_MODELVIEW)
glLoadIdentity ( );
glRotationf (theta,0,0,1);
drawCube ( );
glTranslatef (a,b,c);
drawCube ( );
y
z
x
Cont.OpenGL: Matrix Manipulation
Computer Graphics Transformation
glTranslatef(a1,b1,c1);
glPushMatrix ( );
glRotatef(theta1,a2,b2,c2);
glScale(a3,b3,c3);
glPopMatrix ( );
glTranslatef(a4,b4,c4);
1T
21RT
4TT
1
321 SRT
Cont.OpenGL: Matrix Manipulation
2/16/2020
18
Computer Graphics Transformation
OpenGL: Transformation Hierarchies
glPushMatrix();
glPushMatrix();
glPopMatrix();
glPopMatrix();
// translate to shoulder position
// rotate by shoulder joint
// draw shoulder (circle and rectangle)
// translate to elbow position
// rotate by elbow joing
// draw elbow (circle and rectangle)
Computer Graphics Transformation
OpenGL: Specifying Color
Can specify other properties such as color
To produce a single aqua-colored triangle:
glColor3f(0.1, 0.5, 1.0);
glVertex3fv(v0);
glVertex3fv(v1);
glVertex3fv(v2);
To produce a Gouraud-shaded triangle:
glColor3f(1, 0, 0); glVertex3fv(v0);
glColor3f(0, 1, 0); glVertex3fv(v1);
glColor3f(0, 0, 1); glVertex3fv(v2);
In OpenGL, colors can also have a fourth component α (opacity)