Visualising Quaternions

Something I’ve just found on reddit: I thought it was really cool to see and that some of you could find it interesting too. :smile:
Original post here.

Hey /r/gamdev!

Long time lurker first time poster here.

I often found myself working with quaternions and unable to really understand them. What rotation is (0.7, 0, 0.7, 0) really? And what happens if w is increased? So I created a website to do just that: Visualizing quaternions and converting them to euler angles (and back).

You can enter your own values in the text fields or drag the sliders on the right. I plan to also include a calculator (chaining multiple rotations, calculating rotation matrices, …) as well as an explanation for quaternions that uses the visualization from the first page for explaining (so that you can play around with it, change values and see how the axis of rotation reacts to it). What do you think about that?

This is my first website, so be sure to tell me about any issues that arise! It should work on mobile as well (uses WebGL), but please tell me if it doesn’t.

I hope you like it!
by /u/Ponzel


I will never understand those things…

Heres a good video on understanding imaginary numbers per se, which would be a good first step I suppose :smile:

Here is a video that helped me understand the magic of quaternions:

“Understanding” is an exaggeration of course. But I at least started to understand the concept :smile:

There are several things in life that I find incredibly useful but don’t bother to understand. Magnets is one of those things. Quaternions is another. :smile:

Doesn’t detract from their usefulness even slightly.

To me, better to know what a quaternion will and won’t do than to understand what those magic values mean.

the way i understand it

x,y,z is the axis of rotation
w is the amounth

And this is why it’s best not to try to understand them because you are describing an angle+axis and not a quaternion.

Those are magic values.

Oh man, I never thought about you all here finding this!
My reddit name is /u/Ponzel, I’m the creator of the site.

Man, this place looks a lot different from when I last visited it about one and half years ago. Congrats on the change! (Maybe some of you remember me - I suspect not, but hey, you never know :slight_smile: )

Anyways, it’s nice to see you all here doing well and I’m so happy that you found this site and think it’s good. If you have any questions, ask away.



Welcome back.

To be clear, I didn’t mean to detract from the coolness.

I think sometimes people spend too much time trying to understand what’s inside a quaternion and then fail to learn even how to use them properly. Best to know how to employ them well, first, and swing back to possible understanding in your leisure time.

It seems very unlikely that a person will ever look at a quaternion’s values and go “Oh! I know where my rotation has gone wrong!” Matrixes, yes. Quaternions, no.

I’ve understood until the part when the man wrote the thing on the bridge, but i watched the video until the end for the british accent.

Yes, quaternion is different then angle+axis, but it is very similar as well. Quaternion’s x,y,z is the axis you rotate around. An axis can be represented by any vector, not only normalized one, and that is the case here.

eg if you make a quaternion

q.fromAngleAxis(angle=0.35f, new Vector3f(1, 1, 1));

you can get the axis simply by:

Vector3f axis = new Vector3f(q.getX(), q.getY(), q.getZ());
//axis = (0.10052138, 0.10052138, 0.10052138)

optionally you can normalize the axis

// axis = (0.57735026, 0.57735026, 0.57735026)

This way you will get the same vector no matter by what angle you rotate

Yes, that’s right. I think of quaternions the same way The_Leo described it.
I always imagine it like that: Take an object which is not rotated. Now you can put an axis through its center of mass, the axis points to any random direction. Now rotate the object around this random axis of rotation by a value in [0…TWO_PI]. Simplest way to look at it.
The thing with those imaginary numbers is a good hint too. It’s mainly for the people who are inside math and like proofs and math concepts and such.

And that is precisely what an angle+axis is.

The first three values of a quaternion are the scaled axis but it’s probably best not to analyze them much more than that. The idea of the “imaginary numbers” is important because that’s what’s used to project it onto the 4 dimension unit sphere.

And too many people read both of your descriptions and think “angle axis”… and then try to do stuff with those values… like manipulate them directly. You cannot. Once you make a quaternion the values are all directly intertwined and changing any of them on its own no longer makes any sense. Like, you want to change ‘w’ and now the quaternion is invalid because the rotation was also part of x,y,z.

Oh yes, I know that pitfall. But isn’t that the same with normalized vectors? You change one value and now the length is no longer equal to 1.

Yes, but you can renormalize a vector… and a vector of non-unit length is still a vector.

If you change the ‘w’ of a quaternion without the other components you are in a no-mans land. It is no longer a quaternion and you can no longer get back to where you were to figure out the proper valid quaternion.

To me, if one wants to understand what a quaternion represents then the best, least ambiguous way, is to turn it into a 3x3 rotation matrix. Then each column is an axis vector and you can trivially visualize what that means just by looking at it.

Okay, that’s interesting. And you are sure that there is no “renormalization” for quaternions out there?

Anyways, I mostly use ‘fromAngleAxis’ and ‘mult’ and sometimes ‘inverse’. That’s all I need from those little monsters. Ehm no, I forgot ‘slerp’ (another great advantage of 'em). But never directly manipulated quaternion values - except from my ancient math lib I made with Qt and C++ - that was the last time I went so deep into the rabbit hole, and it was mainly copying formulas from the web and from the lectures.

You can renormalize it but then it won’r represent just a tweak to rotation… it’s a completely different quaternion.

I love them. They are unambiguous in a sea of ambiguous representations. And basically still the fastest way to concatenate rotations, multiply positions, etc… Matrixes are nice but they will go out of whack after lots of rotations. Quaternions don’t really do this. At worst you’d have to renormalize.

Yepp, remember the old days when I had to do these “corrections on matrices” myself. I still like matrices though, because I almost immediately can see scale, position and rotation when looking at them. But the mathematical beauty of quaternion beats that of course.

Fortunately, getting the matrix from a quat just to look at it is easy. :slight_smile: