Show HN: Visualizing the math that powers 3D character animation (diegomacario.github.io)
It's crazy to think that quaternions, an abstract mathematical tool discovered by William Rowan Hamilton in 1843, would be so perfectly suited to solve hard problems in the world of 3D character animation more than a hundred years later. The story of how he discovered quaternions is also beautiful. Here's an excerpt from Wikipedia:
"Hamilton was looking for ways of extending complex numbers (which can be viewed as points on a 2-dimensional Argand diagram) to higher spatial dimensions. In working with four dimensions, rather than three, he created quaternion algebra. According to Hamilton, on 16 October he was out walking along the Royal Canal in Dublin with his wife when the solution in the form of the equation
i2 = j2 = k2 = ijk = −1
occurred to him; Hamilton then carved this equation using his penknife into the side of the nearby Broom Bridge (which Hamilton called Brougham Bridge)."
There's a plaque that commemorates that moment on Broom Bridge now.
If you have any questions about this project, I would love to answer them, but I recommend reading the README first, which should explain everything:
https://github.com/diegomacario/Animation-Magic/blob/main/RE...
Thank you!
54 comments
[ 3.8 ms ] story [ 53.1 ms ] threadI do applaud the wanting to improve performance elsewhere, but still gets a big shake of my head in disappointment that dev is allowed to get to a place where it only works in one browser at first until some amount of work after release to fix to work in other browsers. My sincere hope that you do get it to work universally, realize what was done that made it one-sided to begin with, and avoid those things in any future projects.
I understand the "let's do this for the lulz and see what happens/learns/etc", but once you feel like it is "good enough" that you post it to the public (for let's face it, publicity/showing off/self-promotion), you HAVE to expect that some people might think it isn't good enough and here's some ideas to make it better.
That's not to say that what was posted is shite. It's just with a bit more...it could be even more.
https://marctenbosch.com/quaternions/
It is called "Let's remove Quaternions from every 3D Engine". The author suggests replacing quaternions with rotors and geometric algebra. In 3D, the formulas are essentially the same, but framed differently. It makes some "surprising" properties more intuitive and is extensible to any number of dimensions. The last part is especially relevant to the author as he is developing "Miegakure", a 4D game (i.e. the game world has 4 spatial dimensions).
Although I disagree with how the author describes quaternions as black boxes. The two questions he asks:
- Why does i2=j2=k2=−1 and ij=k? - Why do we take a vector and upgrade it to an "imaginary" vector in order to transform it, like q(xi+yj+zk)q∗?
Are clearly explained in these interactive videos created by Grant Sanderson and Ben Eater: https://eater.net/quaternions
After I watched those videos, quaternions stopped being so opaque to me. I recommend them :-)
GA breaks down quaternions (and their generalization to arbitrary dimensions) into smaller pieces that are much more obvious.
It takes hundreds of years to invent quaternions from scratch, but it takes 10 minutes to invent quaternions from GA.
if you already understand quaternions, then they're apparently excellent; everyone who understands quaternions recommends them.
I don't understand quaternions. I do not understand videos which attempt to explain them. I've seen them all a dozen times each.
I'm far from good at math but the GA article linked above has this comparision of quaternion code vs rotor (GA) code
https://marctenbosch.com/quaternions/code.htm
The basis of G3 is 1,x,y,z,xy,xz,yz,xyz. Quaternions only have 1,xy,xz,yz. Quaternion multiplications are closed; xyyz = xz, xyxz = -yz, xzyz = -xy. xyxy=-1. If your compiler is smart enough to figure out that x,y,z,xyz are always zero, you can save the extraneous operations.
And if anything, I don't think the engine is the problem. He already shipped 4D toys, which I suspect is a way to monetize the devtools he made for Miegakure (nothing wrong with that). And even before that, the 4D was fine.
But while it is nice having good 4D, turning it into an entertaining game with good graphics, good puzzle design, a story that doesn't suck (even a simple one), etc... is hard. And we are not talking about a FPS or 2D platformer here, there are no game design books about making games like Miegakure, and there are many, many things that can go wrong. And to be honest, I hope for the best, but I don't expect much.
One big difficulty I see is that not only the designers have to understand 4D to make interesting worlds/puzzles, but the game has to teach that to players too, with the right difficulty curve.
I completely agree with the sentiment that the algebraic mumbo jumbo often used to introduce quaternions is not very satisfying. Fortunately, as quantum computing becomes a mainstream topic, more people will have to learn about "Rotations on the Bloch sphere" [0] -- and then quaternions and rotations actually make sense.
[0] https://en.wikipedia.org/wiki/Bloch_sphere#Rotations_about_a...
There's also a button in the controls that allows you to open the README. Thank you!
For example I don't see a link between a given graph and one particular joint.
The README says each joint has (3 + 4 + 3) values but I only see graphs with 4 curves.
Ideas:
* allow to select a particular joint to only view the graphs related to that joint
* add titles to each graph
* allow to pause the animation, change the speed
In the "Implementation Details" section at the bottom of the README I actually explain why I only display 4 curves instead of 10, and you can change the speed of the animation and pause it using the "Playback Speed" slider. If you set it to 0, the animation will pause.
Thanks for your suggestions about being able to select joints and displaying titles. I hope to improve things in the future!
But hear me out as to why:
Surely - the amount of spatial kinematic maths that has been built around how we 'perceive' natural movement within a scene by object has been immense...
---
I have an idea. (this is just off the cuff and what caused me to have goose-bumps immediately when I saw this):
Actually -- I am going to email you... rather than post publicly.
May you please update your profile with an email... or post a way to contact you here
- All the little curves that I'm plotting show the local orientation of each joint.
- To obtain the world orientation of a particular joint, it's necessary to combine the transform matrices of all its parent joints until you reach the root of the hierarchy.
For example, to get the world transform of a wrist joint, you need to combine the local transforms of the wrist, elbow, shoulder, neck, etc. joints.
Animation curves are stored in local space in glTF files, and those are the curves that I'm displaying.
I hope this explains things.
Sample all the curves you see on the graphs to get the orientation of each joint... ```
When the curves are "sampled", does that mean in a 60 fps animation, there are 60 timestep values t={t1, t2, ... t60} sampled from a uniform distributions, and evaluated at x(t), y(t), z(t), and w(t), and then those values are stepped through sequentially? If that is the case, why not just set t={1/60, 2/60, ... 1}?
Or does "sampling" here just mean function is evaluated at an appropriate t value, and not refering to statistical sampling?
I agree that it's definitely an abuse of terminology.
"In signal processing, sampling is the reduction of a continuous-time signal to a discrete-time signal... A sample is a value of the signal at a point in time and/or space; this definition differs from the usage in statistics, which refers to a set of such values."
So it's a sample in the sense a set of (x, y, z, w) values from discrete timesteps represents a continuous timestep, but doesn't require specifying and using random variables to determine those timesteps.
If everything goes to plan, you are sampling at 1/60, 2/60, etc.
But if the previous frame took a bit longer to render, you might be at a different time. What you want is the value for all of those curves at whatever time it is, not at some fixed time.
AFAIK many games are using 3x4 bone matrices instead of 4x4. These matrices don't need projection component anyway i.e. 3x4 is enough.
This saves some bandwidth updating the constant buffer with them, also takes slightly less math instructions in the vertex shader.