Page 7-4: Quaternions

Page 7-4: Quaternions

Box 1: Quaternions

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. I want to give you the basic idea for two 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 documentation. THREE does a great job of hiding the fact that it always stores rotations as quaternions - it does the conversions as necessary.

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.

Box 2: From Axis Angle to Quaternions

On the last 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 so is the angle and 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):

All we did was replace by and scaled the vector () by .

Remembering some high school trigonometry, 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.

Now, if you want to learn how to use quaternions, you can look at a graphics book (such as Chapter 4.3 of Real Time Rendering RTR4_Ch04.pdf) and see:

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.

Summary: Quaternions

Hopefully, you now have a sense of what a Quaternion is and why we use them. Sadly, this is probably all we are going to discuss in class about Quaternions.

So go on to the next page where we'll talk more about doing transformations in THREE.