GameDev: Creating A Custom Transform UI

Creating a custom transform UI using OpenGL/C++ for my game engine.

For the longest time the only way to transform a model in my editor was via a window with sliders for the rotation and scale and buttons that nudged the position slightly. At some point I also added keyboard shortcuts so it was possible to nudge the values with the keyboard. However, neither of these methods was convenient or intuative to use. Therefore I finally decided it was time to implement a proper transform UI so models can be transformed via dragging and dropping like you would expect in Blender or other modelling programs/game engines.

Translation

The first transformation I worked on was translation, because I figured it’s the easiest of the three. I started with three lines in the directions of the coordinate axes and big points at the end of the lines. The points are what the user interacts with to translate the model. When the mouse is pressed, I calculate the screen space position of these points and check whether the click was on/near them. If it was, the model can be transformed on that axis by moving the mouse, until the mouse is released, which confirms the transformation. At first I just used the delta mouse movement and converted it directly to the distance that the model should be moved by. But that felt quite bad, because the delta mouse movement doesn’t take the projection into account and therefore the mouse movement didn’t line up with the model movement…