A tool for understanding 3D matrix transformations

When learning graphics programming, one of the first things you get thrown at you are matrix transformations. They are core to getting something displayed on your screen, but their importance and inner workings are now mostly hidden to people getting started with ready-made engines such as Unity and Unreal.

While there are countless resources out there that teach you these fundamentals, I was having a hard time finding a simple tool that lets you experiment with the concatenation of 3D matrix transformations. So I decided to make one myself, and share it here for others who are just getting started with wrapping their heads around these concepts.

The main confusion that drove my desire to have a tool to test matrix concatenations was the following: if matrix operations are executed right to left, then why aren’t operations relative to the ones right of them? I.e. if you rotate around the Y axis first and then around the X, why isn’t the rotation on the X axis happening in the newly defined coordinate system?

The answer is obvious when you stop to think about matrix transformations a bit more, but if you’re like me, the insight comes a lot easier when you have something tangible at hand. You will find that leftmost transformation always starts from the origin of the coordinate system, because the transformations are applied as T(R(S(p))).

Some more things to test:

• Why is TRS the only order which produces expected results? Experiment by dragging the transforms around.
• Observe how changing the order of rotations about the three axes changes the resulting rotation. What order of rotations results in the rotation you would expect?
• What exactly is a gimbal lock? Try setting up rotations about all 3 axes and setting the middle one to 90 degrees, and see what happens when you rotate about the two remaining axes.
• How can you rotate around a pivot point without requiring a complete “root transform” (i.e. a second game object in Unity) to rotate about?
• What does the combined transformation matrix look like? How does it change when the transformation order is changed?
• Have some fun with scaling: