Quaternions· Visually
Home / Part C / 10

Blending two orientations: slerp

Lesson 10 · Interactive

We have two orientations and want something in between: a camera gliding from one view to another, or an animation between two keyframes. With quaternions, "in between" has a clean answer: slerp.

10.1Turning part of the way

We have orientation A and orientation B. From lesson 2 we know that B is one turn away from A, about one axis. Slerp, spherical linear interpolation, does a fraction t of that turn: t = 0 gives A, t = 1 gives B, t = 0.5 gives exactly halfway.

A simple case first. Let A be "no turn" and B be a turn of 80° about z. From lesson 4:

\[A = [1,\ 0,\ 0,\ 0] \qquad B = [\cos 40°,\ 0,\ 0,\ \sin 40°]\]

Halfway should be 40° about z, and a quarter of the way 20° about z. So we just scale the angle by t:

\[\operatorname{slerp}(A, B, t) = \big[\cos(t\cdot 40°),\ 0,\ 0,\ \sin(t\cdot 40°)\big]\]

The 40° is half of the turn between A and B. We call this half angle Ω.

Visual 1 of 3 · The simplest case: arc against straight line
Try it: below, A and B are two points on the circle. Slerp walks along the arc (purple). The simple blend walks along the straight line and is then pushed out to the circle (grey ring). Make the turn of B large and compare the two angles at t = 0.25.

The general case. For any A and B we do the same thing, but we don’t know the axis in advance. The formula below finds the same result directly from the eight numbers of A and B. Put the simple case into it and you get exactly the line above.

\[\operatorname{slerp}(A, B, t) = \frac{\sin\big((1-t)\Omega\big)}{\sin\Omega}\,A + \frac{\sin(t\,\Omega)}{\sin\Omega}\,B, \qquad \cos\Omega = A\cdot B\]

A · B is the 4D dot product: w·w + x·x + y·y + z·z.

Visual 2 of 3 · Any two orientations
Try it: press Play A → B. With slerp, the purple dots on the path of the tip are evenly spaced, and the chart is a straight line. The grey dots are the simple blend: they are close together at the ends and far apart in the middle. Switch the method to "simple blend" to move the object that way. Press New A and B for a big turn to make it clearer.

So the conclusion is: slerp turns at a constant speed. The simple blend, (1 − t)·A + t·B and then normalise, reaches the same two ends, but it is slow near the ends and fast in the middle.

10.2Two details for code

  • Take the short way. If \(A\cdot B\) is negative, flip B to −B first. Remember from lesson 4: −B is the same orientation, but it is on the near side, so slerp turns less than 180°.
  • Almost equal? If \(A\cdot B\) is close to 1, sin Ω is close to 0 and we would divide by almost zero. Then the simple blend plus normalise is just as good.

10.3Where slerp is used

  • Animation. A character’s joint is stored at a few keyframes. Slerp fills in every frame between them at a steady speed.
  • Cameras. To glide from one view to another, slerp from the old orientation to the new one while t goes from 0 to 1.
  • Smooth following. Each frame, move a small fraction toward a target. The motion starts fast and settles softly:
\[q \leftarrow \operatorname{slerp}\big(q,\ q_{target},\ 0.1\big)\]

Every step we go 10% of the remaining way toward the target.

Visual 3 of 3 · Smooth following
Try it: press New target and watch. Then change the fraction: small is soft and slow, large is quick.

In devices with a gyroscope, the last one is also how the drift from lesson 9 is fixed. The orientation from the turn rates is pulled, a few percent per step, toward a slow reference that does not drift. Engineers call this a complementary filter.

✓Check yourself

A · B = −0.9. What do you do before slerp?

Flip B to −B. Then A · B = 0.9 and slerp takes the short way.

What does slerp(A, B, 0.5) give when A and B are 90° apart about z?

The orientation exactly halfway: 45° about z from A.

+Sources and further reading

Next: A small quaternion library in C.