Page 4: Quaternions

Quaternion Basics

Quaternions are usually not a topic discussed in an introductory graphics course - but they are an important topic that gets a lot of discussion in graphics more generally. We want to give you the basic idea for three reasons:

1. The basic idea isn’t that much different than Axis Angle, which you should understand as part of a graphics class. If you have this idea, Quaternions won’t seem so magical.
2. Internally, this is how THREE.js works. You can see this in the matrix transformations. THREE does a great job of hiding the fact that it always stores rotations as quaternions - it does the conversions as necessary.
3. Increasingly, Quaternions are the de facto preferred choice for representing rotation in graphics and other fields (like robotics).

Quaternions are 4-dimensional complex numbers. Technically, in computer graphics we deal with Unit Quaternions which are Quaternions (4 numbers) that have unit magnitude. Unit Quaternions can be used to represent rotations.

A Note About Quaternions: Quaternions are a cool piece of math. Really understanding the math of Quaternions isn’t really important for using them in Graphics. For graphics, it is almost good enough to say “they are 4 numbers that are used to represent rotations.” If you want to learn about the math of Quaternions, I recommend the Three Blue One Brown Video and/or its interactive webpage. But be warned: these will teach you about the math behind quaternions - it’s kindof under-the-hood stuff.

Quaternions have a reputation for being hard to understand because to really understand their math, you need to see them as 4-dimensional complex numbers. However, to use quaternions, it doesn’t matter- they are a way to represent rotations with 4 numbers. We just need to use special operations to combine them and apply them. Learning the math will help us understand how those special operations work. But that is beyond what we’ll discuss in class.

From Axis Angle to Quaternions

On the previous page, we saw how nice Axis Angle representations are for getting nice rotations. Unlike Euler Angles, Axis Angle representations require us to store 4 numbers to represent a rotation (3 for the axis, 1 for the angle).

The problem with Axis Angle representation is that there are some things we don’t know how to do with them. The biggest one: If we have two Axis Angle rotations, we don’t know how to compose them into a single Axis Angle rotation (if the axes are different - if the axes are the same, we can just add the angles). Also, figuring out how to “apply” the rotation to a point (either doing the transformation directly, or converting it to a matrix) is a lot of work.

Euler Angles have these same problems (but might be worse for both).

But with axis angles, there is a simple trick.

Suppose our axis angle representation is $ \theta, \mathbf{\hat{v}} $ so $ \theta $ is the angle and $ \mathbf{\hat{v}} $ is the unit vector of the axis (we can always normalize the axis to get a unit vector).

We’ll create a new set of 4 numbers (one scalar and a 3-vector):

$ \cos{\frac{\theta}{2}},\sin{\frac{\theta}{2}}\mathbf{\hat{v}} $

All we did was replace $\theta$ by $\cos{\frac{\theta}{2}}$ and scaled the vector ($\mathbf{\hat{v}}$) by $\sin{\frac{\theta}{2}}$.

Remembering some high school trigonometry, $\cos^2{\alpha}+\sin^2{\alpha}=1$ we can see that this new version of the 4 numbers is going to have magnitude one.

Now, you might wonder “of all the different things we could have done to the 4 numbers of axis angle, why would we ever scale by the sin of the half angle?” Sorry, but the answer is way beyond what we’ll study in an introductory graphics class.

But, if you do this non-obvious change, something special happens: we have encoded the rotation as a unit quaternion. A unit quaternion is, in one sense, just a set of 4 numbers that have magnitude one. So our scaling change does create one. And once we have a unit quaternion, there are all kinds of things we can do with them because they have a well-defined algebra. Understanding that algebra is the complex math. For now, trust that someone else has figured it out.

Now, if you want to learn how to use quaternions, you can look at a graphics book (such as section 3 of RTR4_Ch04.pdf (68.2mb) - this reading is optional) and see:

• Unit Quaternions can be multiplied together easily. This lets us compose rotations.
• If you have two Unit Quaternions you can interpolate between them using spherical linear interpolation (or slerp for short - yes, that is the term graphics people use).
• For almost everything you need to do with a rotation in computer graphics, there is an efficient and elegant way to do it with Unit Quaternions.
• The math behind Quaternions has to do with high-dimensional complex numbers, so it sounds really fancy. It is quite elegant.

So, for these reasons, THREE.js (and many other systems) use Unit Quaternions internally for representing rotations. Fortunately, in THREE, they hide the internals well, so you never have to see a Quaternion. You can work with Euler Angles or Axis Angle representations, and it will get converted back and forth as needed.

For class, you need to know:

• what a unit quaternion is; it’s OK to think of it as 4 numbers that have magnitude 1. The “a Quaternion is a 4-dimensional complex number” is optional (but cool).
• how we store an axis angle form in an unit quaternion
• that there are efficient ways to convert unit quaternion rotations to rotation matrices (you don’t need to know the methods, just that they exist)
• that there are ways to multiply quaternions (again, you just need to know they exist) and that this corresponds to composition
• that THREE.js uses unit quaternions internally
• that special methods exist for interpolating quaternions

Summary

Hopefully, you now have a sense of what a Quaternion is and why we use them.

So go on to Page  5  (Hierarchical Modeling in THREE) where we’ll talk more about doing transformations in THREE.

Next: Hierarchical Modeling in THREE