dr. ayman eldeib · 2/16/2020 1 hemn224: computer graphics & visualization transformation dr....

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


Translations

Translate individual

vertices

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


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 ),,(


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




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


Translate individual

vertices



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


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




× 2

ysy

xsx

y

x

⋅=′

⋅=′

Cont.Scaling

2/16/2020

6




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




Non-uniform scaling: different scalars per component

X × 2,

Y × 0.5

Cont.Scaling

2/16/2020

7


Fixed Point Scaling


Fixed Point Scaling Cont.

2/16/2020

8


=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x



=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Step 1:

Translate to the origin


2/16/2020

9


=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Step 2:

Scale the object



=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Step 3:

Translate the object back


2/16/2020

10


1. Translate to origin

2. Scale

3. Translate back

( ) pTSTp1−=′



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


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


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

θθ

θθ

θ



There are four ways to specify a 3D rotation

Simple cases: rotation about X, Y, Z axes


Rotation Cont.

3D

2/16/2020

12




There are four ways to specify a 3D

rotation

3D rotations – axis angle representation


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


Fixed Point Rotating

1. Translate to origin

2. Rotate

3. Translate back

( ) pTRTp1−=′

2/16/2020

13


Matrix Composition

Matrix multiplication does not commute

Transformation products may not be

commutative

BAAB ≠


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


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


Inverse Transformations

Translate Scale

Shear Rotate

2/16/2020

15


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


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


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


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.


2/16/2020

17


glMatrixMode (GL_MODELVIEW)

glLoadIdentity ( );

glRotationf (theta,0,0,1);

drawCube ( );

glTranslatef (a,b,c);

drawCube ( );

y

z

x



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


2/16/2020

18


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)


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);



In OpenGL, colors can also have a fourth component α (opacity)

Generally want α = 1.0 (opaque);

dr. ayman eldeib · 2/16/2020 1 hemn224: computer graphics & visualization transformation dr....

Documents