1 of 55

��Chapter IV�Spaces and Transforms

All class materials including this PowerPoint file are available at

https://github.com/medialab-ku/openGLESbook

Introduction to Computer Graphics with OpenGL ES (J. Han)

2 of 55

Rotation

4-2

Rotating a 2D vector, (x, y), by θ can be represented as matrix multiplication.

An example

R(θ)

Introduction to Computer Graphics with OpenGL ES (J. Han)

3 of 55

Rotation (cont’d)

4-3

By default, the rotation is counter-clockwise.
The matrix for the clockwise rotation by θ is obtained by inserting -θ into the 2D rotation matrix.

Note that rotation by -θ is equivalent to rotation by 2π-θ.

Introduction to Computer Graphics with OpenGL ES (J. Han)

4 of 55

Scaling

4-4

Scaling a 2D vector, (x, y), is defined with two scaling factors, s_x and s_y, so that (x', y') = (s_xx, s_yy). It can also be represented as matrix multiplication.

When a polygon is scaled, all of its vertices are taken as vectors and scaled by the same matrix.

If all scaling factors are identical, the scaling is called uniform. Otherwise, non-uniform scaling.

1

2

½

(s_x, s_y) = (2, 2)

(s_x, s_y) = (2, ½)

(x, y)

Introduction to Computer Graphics with OpenGL ES (J. Han)

5 of 55

Translation and Homogeneous Coordinates

4-5

Unlike scaling and rotation, translation is represented as vector addition.

Fortunately, we can describe translation as matrix multiplication if we use the homogeneous coordinates.

Homogeneous coordinates for the point to be translated: (x,y) 🡪 (x,y,1)
Translation matrix

Matrix-point multiplication

(x, y)

(d_x, d_y)

(x+d_x, y+d_y)

Introduction to Computer Graphics with OpenGL ES (J. Han)

6 of 55

Homogeneous Coordinates

4-6

Given a 2D point, (x, y), its homogeneous coordinates are not necessarily (x, y, 1) but (wx, wy, w) with any non-zero w.
For example, the Cartesian coordinates (2,3) can be converted into multiple homogeneous coordinates, (2,3,1), (4,6,2), (6,9,3), etc. The line connecting (2, 3, 1) and the origin represents infinitely many points in homogeneous coordinates.

Suppose that we are given the homogeneous coordinates, (X, Y, w). By dividing every coordinate by w, we obtain (X/w, Y/w, 1). This corresponds to projecting a point on the line onto the plane, w = 1. We then take the first two components, (X/w, Y/w), as the Cartesian coordinates. For example, (4,6,2) 🡪 (2,3,1) 🡪 (2,3) and (6,9,3) 🡪 (2,3,1) 🡪 (2,3).

Introduction to Computer Graphics with OpenGL ES (J. Han)

7 of 55

Homogeneous Coordinates (cont’d)

4-7

For handling the homogeneous coordinates, the 2×2 matrices for scaling and rotation need to be altered.

Note that all of scaling, rotation and translation are represented in 3×3 matrices, and they transform vectors/points through multiplication.

Introduction to Computer Graphics with OpenGL ES (J. Han)

8 of 55

Transform Composition

4-8

An object may go through multiple transforms.

As all transforms are represented in 3×3 matrices, they can be concatenated into a single matrix.

This becomes possible thanks to homogeneous coordinates.

Introduction to Computer Graphics with OpenGL ES (J. Han)

9 of 55

Transform Composition (cont’d)

4-9

Matrix multiplication is not commutative.
Rotation (R) followed by translation (T) vs. T followed by R

Compare the result with the previous page’s.

Introduction to Computer Graphics with OpenGL ES (J. Han)

10 of 55

Transform Composition (cont’d)

4-10

So far, rotation and scaling are “about the origin.” Now consider rotation about an arbitrary point, which is not the origin, e.g., rotation of (5,2) about (3,2).

Rotating a point at (x,y) about an arbitrary point, (a,b)

Translating (x,y) by (-a,-b)
Rotating the translated point about the origin
Back-translating the rotated point by (a,b)

Introduction to Computer Graphics with OpenGL ES (J. Han)

11 of 55

Transform Composition (cont’d)

4-11

Rotation of (5,2) about (3,2)

Introduction to Computer Graphics with OpenGL ES (J. Han)

12 of 55

Affine Transform

4-12

Affine transform

Linear transform

Scaling (S),
Rotation (R),
and many others including reflection and shearing.

Translation (T)

No matter how many affine matrices are given, they can be combined into a matrix.

When a series of affine transforms is concatenated to make a single 3×3 matrix, the third row is always (0 0 1).

Introduction to Computer Graphics with OpenGL ES (J. Han)

13 of 55

Affine Transform (cont’d)

4-13

Ignoring the third row of an affine matrix, we often denote the remaining 2×3 elements by [L|t], where L is a 2×2 matrix and t is a 2D column vector.

L represents a ‘combined’ linear transform, which does not include any terms from the input translations.
In contrast, t represents a ‘combined’ translation, which may contain the input linear-transform terms.

Introduction to Computer Graphics with OpenGL ES (J. Han)

14 of 55

Affine Transform (cont’d)

4-14

🡨 [L|t]

Introduction to Computer Graphics with OpenGL ES (J. Han)

15 of 55

Affine Transform (cont’d)

4-15

Conceptual decomposition of [L|t]

L is applied first.
The linear-transformed object is translated by t.

Regardless of how many affine matrices are combined, we obtain a single matrix [L|t]. The way [L|t] transforms a point, p, is Lp+t.

🡨 [L|t]

Introduction to Computer Graphics with OpenGL ES (J. Han)

16 of 55

Affine Transform (cont’d)

4-16

🡨 [L|t]

Introduction to Computer Graphics with OpenGL ES (J. Han)

17 of 55

3D Scaling

4-17

3D scaling

Introduction to Computer Graphics with OpenGL ES (J. Han)

18 of 55

3D Rotation

4-18

Unlike 2D rotation which requires a center of rotation, 3D rotation requires an axis of rotation.
Let’s consider 3D rotations about x-axis (R_x), y-axis (R_y) and z-axis (R_z)
First of all, R_z.

(x,y,z)

(x',y',z')

Introduction to Computer Graphics with OpenGL ES (J. Han)

19 of 55

3D Rotation (cont’d)

4-19

Observation for R_x.

Obviously, x'=x.
When the thumb of the right hand is aligned with the rotation axis, the other fingers curl from the y-axis to the z-axis.
Returning to R_z, observe the fingers curl from the x-axis to the y-axis.
Shifting from R_z to R_x, the x-axis is replaced with the y-axis, and the y-axis is replaced with the z-axis.
By making such replacements, the matrix for R_x is obtained.

y'

y

z

y

z'

z

R_xR_z

rotation axis

x 🡨z

curling start

y 🡨x

curling end

z 🡨y

Introduction to Computer Graphics with OpenGL ES (J. Han)

20 of 55

3D Rotation (cont’d)

4-20

In the same manner, we can define the matrix for R_y.

Introduction to Computer Graphics with OpenGL ES (J. Han)

21 of 55

3D Rotation (cont’d)

4-21

Recall that in 2D rotations, positive angle is for CCW and negative is for CW.
For 3D rotation about an axis, imagine that the axis points toward your eye.

If the rotation is CCW, the rotation angle is positive.
If the rotation is CW, its matrix is defined with the negated rotation angle.

A better exposition

Align your thumb with the rotation axis.
If the rotation is along the curling direction of the remaining four fingers, the rotation angle is positive. Otherwise, negative.

Note that rotation by -θ is equivalent to rotation by 2π-θ.

Introduction to Computer Graphics with OpenGL ES (J. Han)

22 of 55

3D Translation

4-22

Matrix-point multiplication

The 3×3 matrices developed for 3D scaling and rotation are extended to 4×4 matrices. See the scaling example.

Introduction to Computer Graphics with OpenGL ES (J. Han)

23 of 55

3D Affine Transform

4-23

The discussions we made on 2D affine transform apply to 3D one.

Introduction to Computer Graphics with OpenGL ES (J. Han)

24 of 55

3D Affine Transform (cont’d)

4-24

Matrix multiplication is not commutative. Consider the reverse order of the rotation and translation.

Compare the result with the previous page’s.
When the matrices for 3D scaling, rotation and translation are concatenated to make a 4×4 matrix, the fourth row is always (0 0 0 1).

Introduction to Computer Graphics with OpenGL ES (J. Han)

25 of 55

3D Affine Transform (cont’d)

4-25

Ignoring the fourth row of an affine matrix, we often denote the remaining 3×4 elements by [L|t], where L is a 3×3 matrix that represents a ‘combined’ linear transform, and t is a 3D column vector that represents a ‘combined’ translation.

Regardless of how affine matrices are combined, we obtain a single matrix [L|t]. It is conceptually decomposed into two steps: L is applied first and then the linear-transformed object is translated by t.

[L|t]

Introduction to Computer Graphics with OpenGL ES (J. Han)

26 of 55

3D Affine Transform (cont’d)

4-26

Introduction to Computer Graphics with OpenGL ES (J. Han)

27 of 55

Object Space vs. World Space

4-27

The coordinate system where an object is defined is named object space.
Consider designing a 3D scene with two objects, sphere and teapot. The scene is defined in a single coordinate system, called world space.
For each object, its object space is initially identical to the world space. The object is then transformed into the world space via its own world transform.

For the teapot’s world transform, see “3D affine transform” page.

world transform for sphere

Introduction to Computer Graphics with OpenGL ES (J. Han)

28 of 55

Object Space vs. World Space – Unity Example

4-28

Unity uses the left-hand system whereas OpenGL ES uses the right-hand system. This results in many subtle differences including the rotation angle. For now, never mind. This issue will be discussed in Chapter 5.

[L|t] 🡪

Introduction to Computer Graphics with OpenGL ES (J. Han)

29 of 55

Rotation and Object-space Basis

4-29

R

Once modeling an object is done, the object remains fixed within its object space (OS). Therefore, an object can be thought of as being stuck to its OS.
Consider the following rotation about the y-axis, R.

The basis of the world space (WS) is {e₁, e₂, e₃}, which denotes the standard basis.
The OS basis is typically represented in {u, v, n}.
Both {e₁, e₂, e₃} and {u, v, n} are orthonormal.
Initially they are identical but become different due to R.

The teapot’s orientation defined by R can be described by the ‘rotated’ basis of its OS, {u, v, n}.

Introduction to Computer Graphics with OpenGL ES (J. Han)

30 of 55

Rotation and Object-space Basis (cont’d)

4-30

u

v

n

Introduction to Computer Graphics with OpenGL ES (J. Han)

31 of 55

Rotation and Object-space Basis (cont’d)

4-31

A ‘square’ matrix with orthonormal columns and rows is called orthogonal.

A matrix Q is orthogonal iff Q^TQ = I, i.e., iff Q^T = Q^-1.

If Q is orthogonal, so is Q^T. (Proof: Q^-1Q= I = Q^TQ🡪 Q^T(Q^T)^T= I.)
If Q is an orthogonal matrix, it is either rotation (if det(Q) = 1) or reflection (if det(Q) = -1).

=

1

...

0

...

0

1

0

...

0

1

...

n

q

1

q

2

q

0

...

1

0

...

0

T

1

q

T

2

q

T

n

q

reflection along with xy-plane

Introduction to Computer Graphics with OpenGL ES (J. Han)

32 of 55

Rotation and Object-space Basis (cont’d)

4-32

The observation we have made holds in general rotations.

Introduction to Computer Graphics with OpenGL ES (J. Han)

33 of 55

Inverses of Translation and Scaling

4-33

Inverse translation

Inverse transform in inverse matrix

Inverse scaling

(x, y, z)

(d_x, d_y, d_z)

(x+d_x, y+d_y, z+d_z)

(-d_x, -d_y, -d_z)

Introduction to Computer Graphics with OpenGL ES (J. Han)

34 of 55

Inverse Rotation

4-34

Given a rotation matrix R, its columns (u, v and n) make up an orthonormal basis, i.e., u·v = v·n = n·u = 0 and u·u = v·v = n·n = 1.
Let’s multiply R’s transpose (R^T) with R:

This says that R^-1=R^T, i.e., the inverse of a rotation matrix is its transpose.
Because u, v and n form the columns of R, they form the rows of R^-1.
R^TR = I 🡪 R^TRR^T = IR^T 🡪 R^TRR^T = R^T 🡪 R^TRR^T = R^TI 🡪 RR^T = I

Introduction to Computer Graphics with OpenGL ES (J. Han)

35 of 55

Inverse Rotation (cont’d)

4-35

Recall that u, v and n form the “columns” of R. As R^-1=R^T, u, v and n form the “rows” of R^-1.

Introduction to Computer Graphics with OpenGL ES (J. Han)

36 of 55

Basis Change

4-36

(0,2,3)

Consider the yellow vector, (0,2,3). Its WS coordinates are changed by rotation, but its OS coordinates remain unchanged.

R transforms the OS vector, (0,2,3), into a WS vector, (w_x, w_y, w_z). Simply, we say that R transforms from OS to WS.
R^-1 transforms the WS vector, (w_x, w_y, w_z), into the OS vector, (0,2,3). Simply, we say that R^-1 transforms from WS to OS．

Note that R defines not only the teapot's orientation but also the OS orientation with respect to the WS basis. Two bases are related by a rotation!!

(w_x, w_y, w_z) vs. (0, 2, 3)

WS OS

Introduction to Computer Graphics with OpenGL ES (J. Han)

37 of 55

Basis Change (cont’d)

4-37

Suppose that you are given a new basis, {u, v, n}, which is different from the WS basis, {e₁, e₂, e₃}, and a WS vector w.
The coordinates of w with respect to {u, v, n} are computed by applying the matrix, whose rows are u, v and n. This is an example of the so-called basis change, which refers to changing the coordinates of a vector between bases.

The basis change will be extended to space change.

w

Introduction to Computer Graphics with OpenGL ES (J. Han)

38 of 55

Basis Change – Transform Composition Example

4-38

s_a= 2 & s_b= 1

Previously, we discussed “2D rotation about an arbitrary point.”
Now, consider scaling a vector, p, along two orthonormal vectors, a and b, neither of which is identical to the standard basis vector, e₁ or e₂. The scaling factors along a and b are denoted by s_a and s_b, respectively.
The scaling matrix is a combination of three 2×2 matrices.

(1) Transform p into the basis {a, b}.

(2) Scale with s_a and s_b.

(3) The inverse of (1).

Introduction to Computer Graphics with OpenGL ES (J. Han)

39 of 55

Euler Transforms

4-39

When we ‘successively’ rotate an object about the principal axes, the object acquires an arbitrary orientation. This ‘method’ of determining an object’s orientation is called Euler transform. The rotation angles are called the Euler angles, which are often denoted as (θ₁,θ₂,θ₃) or (θ_x,θ_y,θ_z).

Concatenating the matrices produces a single ‘rotation’ matrix that defines an arbitrary orientation.

Euler transforms are presented in Chapter 11 of the textbook.

Introduction to Computer Graphics with OpenGL ES (J. Han)

40 of 55

Euler Transforms (cont’d)

4-40

The rotation axes are not necessarily taken in the order of x, y and z. Shown below is the order of y, x and z. Observe that the teapot has a different orientation from the previous one.

Introduction to Computer Graphics with OpenGL ES (J. Han)

41 of 55

Euler Transforms (cont’d)

4-41

Introduction to Computer Graphics with OpenGL ES (J. Han)

42 of 55

Euler Transforms (cont’d)

4-42

Introduction to Computer Graphics with OpenGL ES (J. Han)

43 of 55

Euler Transforms (cont’d)

4-43

Introduction to Computer Graphics with OpenGL ES (J. Han)

44 of 55

Rotation about an Arbitrary Axis

4-44

Introduction to Computer Graphics with OpenGL ES (J. Han)

45 of 55

Rotation about an Arbitrary Axis (cont’d)

4-45

u

v

n

u

v

n

Introduction to Computer Graphics with OpenGL ES (J. Han)

46 of 55

Rotation about an Arbitrary Axis (cont’d)

4-46

Introduction to Computer Graphics with OpenGL ES (J. Han)

47 of 55

Rotation about an Arbitrary Axis (cont’d)

4-47

Step 3: Rotation about the z-axis.

Step 4 is the inverse of Step 2. Similarly, Step 5 is the inverse of Step 1.

Introduction to Computer Graphics with OpenGL ES (J. Han)

48 of 55

Rotation about an Arbitrary Axis (cont’d)

4-48

Introduction to Computer Graphics with OpenGL ES (J. Han)

49 of 55

Rigid Motion

4-49

Consider a combination of rotations and translations only, e.g., no scaling.

When the combined matrix applies to an object, the orientation and position of the object are changed, but its shape is not.
In this sense, it is named rigid-body motion or simply rigid motion.

No matter how many rotations and translations are combined, the 4^th row of the combined remains (0 0 0 1). Ignoring it, we denote the remaining 3×4 elements by [R|t], where R is a 3×3 rotation matrix and t is a 3D translation vector.

R defines the orientation of the object. (Again, orientation is informally taken as a synonym of rotation.)
t defines the position of the object.
[R|t] defines the pose (orientation + position) of the object, and therefore we describe an object’s pose as [R|t].

R

t

Introduction to Computer Graphics with OpenGL ES (J. Han)

50 of 55

Rigid Motion (cont’d)

4-50

TR

Introduction to Computer Graphics with OpenGL ES (J. Han)

51 of 55

Pose and Space Change

4-51

Let’s return to our world-transform example, where the translation vector of T is denoted as t.

Whereas R defines the teapot’s orientation, T defines its position. They are combined into [R|t], which defines the teapot’s pose. (As rotation is applied before translation, {u, v, n} and t are simply assembled into [R|t].)

Note that [R|t] is not only the pose of the teapot but also that of its OS with respect to the WS. Two spaces are related by a rigid motion!!

(10,2,0)

WS

OS

[R|t] =

t

Introduction to Computer Graphics with OpenGL ES (J. Han)

52 of 55

Pose and Space Change (cont’d)

4-52

(0,2,3) in OS

(10,2,0) in WS

WS

OS

t

WS = OS

[R|t] transforms the red dot from (0,2,3) to (10,2,0). It’s within the WS.
Even after the world transform, however, the red dot’s coordinates, (0,2,3), are fixed within the teapot’s OS. See the last figure.
Observations (made in the last figure)

[R|t] transforms the OS point, (0,2,3), to the WS point, (10,2,0).
We simply say “[R|t] transforms from OS to WS.”
A point is given different coordinates in distinct spaces, and [R|t] makes a space change, which is a change of both basis and origin.

[R|t]

in OS

in WS

Introduction to Computer Graphics with OpenGL ES (J. Han)

53 of 55

Pose and Space Change (cont’d)

4-53

The discussions we have made hold in general. Shown below is an example of rotating about an arbitrary axis, which is followed by a translation.

[R|t] is the pose of OS wrt WS.
[R|t] transforms from OS to WS.

WS

OS

t

[R|t] =

[R|t]

Introduction to Computer Graphics with OpenGL ES (J. Han)

54 of 55

Pose and Space Change (cont’d)

4-54

WS

OS

t

[R|t] =

OS

WS

OS

(0,2,3) in OS

(10,2,0) in WS

Introduction to Computer Graphics with OpenGL ES (J. Han)

55 of 55

Pose and Space Change (cont’d)

4-55

[R|t] =

WS

OS

t

Introduction to Computer Graphics with OpenGL ES (J. Han)