���Chapter XI

Euler Transforms and Quaternions

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)

Keyframe Animation in 2D

11-2

• In the traditional hand-drawn cartoon animation, the senior key artist would draw the keyframes, and the junior artist would fill the in-between frames.
• For a 30-fps computer animation, for example, much fewer than 30 frames are defined per second. They are the keyframes. In real-time computer animation, the in-between frames are automatically filled at run time.
• The key data are assigned to the keyframes, and they are interpolated to generate the in-between frames.
• In the example, the box center positions (p₀ and p₁) and orientation angles (θ₀ and θ₁) are linearly interpolated.

​

p₀ = (2,4)

p₁ = (5,8)

θ₀ = 0^o

θ₁ = -90^o

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

Keyframe Animation in 2D (cont’d)

11-3

• When p₀ = (2,4), p₁ = (5,8), θ₀ = 0^o and θ₁ = -90^o, we can depict the linear-interpolation graphs.

​

​

​

​

​

​

• The in-between frames are obtained by sampling the graphs.

​

​

​

time t

x

time t

y

time t

​

θ

2

5

4

8

- 90^o

1

1

1

p₀ = (2,4)

p₁ = (5,8)

θ₀ = 0^o

θ₁ = -90^o

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

Keyframe Animation in 3D

11-4

• The same sampling method is used for 3D keyframe animation, where the orientation graphs represent the Euler angles.

​

​

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

Keyframe Animation in 3D (cont’d)

11-5

• Six keyframes

​

​

​

​

​

• Keyframe animation

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

Keyframe Animation in 3D (cont’d)

11-6

• Smoother animation may often be obtained using a higher-order interpolation.

​

​

​

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

A Problem of Euler Angles

11-7

• Euler angles are not always correctly interpolated and so are not suitable for keyframe animation.

​

​

​

​

​

​

​

​

​

​

​

​

• The alternative is using quaternions.

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

Quaternion

11-8

• A quaternion is an extended complex number.

​

​

​

​

​

​

​

​

​

​

• Conjugate

​

• It is easy to show that (pq)*=q*p*.
• Magnitude: If the magnitude of a quaternion is 1, it’s called a unit quaternion.

​

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

2D Rotation through Complex Numbers

11-9

• Recall 2D rotation

​

​

​

​

​

​

​

• Let us represent (x,y) by a complex number x+yi, and denote it by p.
• Given the rotation angle θ, let us consider a unit-length complex number, cosθ+sinθi. We denote it by q. Then, we have the following:

​

​

• Surprisingly, the real and imaginary parts of pq represent the rotated coordinates.

​

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

3D Rotation through Quaternions

11-10

• As extended complex numbers, quaternions can be used to describe 3D rotation.
• Consider rotating a 3D vector, p, about an axis, u, by θ. Represent both “the vector to be rotated” and “the rotation” in quaternions.
• Define a quaternion p using p.

​

​

• Define a unit quaternion q using

u and θ. The axis u is divided by its

length to make a unit vector u. Then,

​

​

• Compute qpq*. Then, its imaginary

part represents the rotated vector.

• See the textbook for proof.

​

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

3D Rotation through Quaternions (cont’d)

11-11

• Sir William Rowan Hamilton

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Here as he walked by on the 16th of October 1843 Sir William Rowan Hamilton in a flash of genius discovered the fundamental formula for quaternion multiplication

i² = j² = k² = ijk = −1

& cut it on a stone of this bridge.

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

Quaternion Interpolation

11-12

• The set of all possible quaternions makes up a 4D unit sphere. Consider two unit quaternions, q and r. Let ϕ denote the angle between q and r.

​

​

​

​

​

​

​

• The interpolated quaternion must lie on the shortest arc connecting q and r. It is defined using parameter t in the range of [0,1]:

​

​

• This is called spherical linear interpolation (slerp).
• See the textbook for proof.

​

​

​

​

​

​

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

Quaternion and Rotation Matrix

11-13

• All transforms we have learned so far are represented in matrices so that multiple transforms can be concatenated to a single matrix. How about quaternions? Fortunately, any quaternion can be converted to a rotation matrix.
• Before presenting that, let’s make an important observation.

​

• Let q denote “rotation about u by θ,” i.e., .
• Let s denote “rotation about u by 2π+θ.” Obviously, q = s.

​

​

​

​

• The above shows that s = -q.
• It is found that q = -q, i.e., (q_x, q_y, q_z, q_w) = (-q_x, -q_y, -q_z, -q_w).

​

​

​

​

​

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

Quaternion and Rotation Matrix (cont’d)

11-14

• A quaternion q representing a rotation can be converted into a matrix form. If q = (q_x,q_y,q_z,q_w), the rotation matrix is defined as follows:

​

​

​

• See the textbook for proof.
• Conversely, given a rotation matrix, we can compute its quaternion. It requires us to extract {q_x,q_y,q_z,q_w} given the above matrix.
• Compute the sum of all diagonal elements.

​

• So, we obtain q_w (one positive, the other negative; d and -d).
• Subtract m₁₂ from m₂₁ of the above matrix.

​

• As we know q_w, we can compute q_z. Similarly, we can compute q_x and q_y.
• Two quaternions are obtained, (a, b, c, d) and (-a, -b, -c, -d), which are proven to be identical.

​

​

​

​

​

​

​

​

​

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

Quaternion and Rotation Matrix (cont’d)

11-15

• Revisited example, where M₀, M₁ and M_t represent rotation matrices.

🡪 M₀ 🡪 q

🡪 M₁ 🡪 r

🡨

M_t

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

Summary

11-16

• Summary
• An arbitrary 3D rotation is represented in a quaternion.
• Quaternions are correctly interpolated through slerp whereas the Euler angles are not.
• A quaternion can be converted into a rotation matrix and vice versa.

​

• Given quaternions for the keyframes,
• slerp them for the in-between frames, and
• convert each interpolated quaternion into a rotation matrix such that it can be combined with other transform matrices.

​

​

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

Rotation about an Arbitrary Axis (revisited)

11-17

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

Saved

11-18

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

3D Rotation through Quaternions (cont’d)

11-19

• Let p' denote qpq*. It represents the rotated vector p'. Consider rotating p' by another quaternion r. The combined rotation is represented as rq.

​

​

​

​

• “Rotation about u by θ” (denoted as q) is identical to “rotation about –u by –θ” (denoted as r).

​

​

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