Using ImGui to Visualize Bone Transformations

ImGui is an immediate mode graphical user interface (GUI) library that’s primarily used for debugging, prototyping, and in-game development. One of its strengths is its simplicity and efficiency, allowing developers to quickly create user interfaces without worrying about the intricacies of traditional GUI paradigms.

When visualizing bone transformations, typically in the context of skeletal animation, it’s common to display a 3D model’s bone hierarchy and transformations (such as translation, rotation, and scale). Using ImGui in this context can make it easier to debug and visualize how bones in a character’s skeleton are transformed over time, which is essential for real-time animation debugging and development.

Here’s how you can go about using ImGui to visualize bone transformations.

Step-by-Step Guide for Visualizing Bone Transformations with ImGui

1. Set Up the ImGui Environment

Before anything else, ensure you have ImGui properly set up in your project. You will need the ImGui library along with a rendering backend (such as OpenGL, DirectX, or Vulkan) and a platform backend (like GLFW or SDL).

For this tutorial, assume you already have ImGui integrated into your project.

2. Define the Bone Structure

To visualize bone transformations, you need to define your bone structure. In a skeletal animation system, each bone typically has a Transform that consists of a position, rotation, and scale. Here’s an example of a basic Bone structure:

cpp
CopyEdit
struct Bone {
    std::string name;
    glm::mat4 transform;  // 4x4 matrix for bone transformation
    glm::vec3 position;
    glm::quat rotation;
    glm::vec3 scale;
    std::vector<Bone*> children;

    Bone(const std::string& name)
        : name(name), transform(1.0f), position(0.0f), rotation(1.0f, 0.0f, 0.0f, 0.0f), scale(1.0f) {}
};

In this setup, position and scale are glm::vec3 types, and rotation is represented by a quaternion (glm::quat) for smooth rotations. children holds a list of bones that are child nodes to the current bone (in case of hierarchical bone structures).

3. Create a Function to Visualize Bone Data

You will need to create a function that uses ImGui to display the current bone’s data and allows you to modify transformations such as translation, rotation, and scale.

cpp
CopyEdit
void RenderBoneImGui(Bone* bone) {
    ImGui::PushID(bone->name.c_str());  // Push a unique ID for the current bone

    // Display the name of the bone
    ImGui::Text("Bone: %s", bone->name.c_str());

    // Show position controls
    ImGui::Text("Position");
    ImGui::DragFloat3("Position", &bone->position.x, 0.1f, -100.0f, 100.0f);

    // Show rotation controls (as Euler angles for simplicity)
    ImGui::Text("Rotation (Euler)");
    ImGui::DragFloat3("Rotation", &bone->rotation.eulerAngles().x, 0.5f, -360.0f, 360.0f);

    // Show scale controls
    ImGui::Text("Scale");
    ImGui::DragFloat3("Scale", &bone->scale.x, 0.1f, 0.1f, 10.0f);

    ImGui::PopID();

    // Render children recursively
    for (Bone* child : bone->children) {
        RenderBoneImGui(child);
    }
}

• ImGui::DragFloat3 is used to create sliders that allow the user to modify the values for position, rotation (Euler angles), and scale interactively.

• The rotation is shown as Euler angles, but you could also use quaternions directly or use a DragFloat4 for quaternion manipulation.

• The function RenderBoneImGui also recursively renders any child bones, which is important for visualizing the entire hierarchy.

4. Handling Bone Transformations

Each time you update the position, rotation, or scale of a bone, you need to update its transformation matrix. This matrix should incorporate the bone’s local transformation (position, rotation, and scale) and the transformations of its parent (in the case of hierarchical bones).

You can use the following helper function to recompute the bone’s global transformation matrix:

cpp
CopyEdit
void UpdateBoneTransform(Bone* bone) {
    // Start with the identity matrix
    bone->transform = glm::mat4(1.0f);

    // Apply scale, rotation, and position
    bone->transform = glm::translate(bone->transform, bone->position);
    bone->transform *= glm::mat4_cast(bone->rotation);  // Convert quaternion to matrix
    bone->transform = glm::scale(bone->transform, bone->scale);

    // If the bone has a parent, apply the parent's transformation (hierarchical)
    if (bone->parent != nullptr) {
        bone->transform = bone->parent->transform * bone->transform;
    }

    // Recurse into child bones
    for (Bone* child : bone->children) {
        UpdateBoneTransform(child);
    }
}

Here, we first apply the scale, rotation, and translation to the bone’s transformation matrix. If the bone has a parent, we concatenate the parent’s transformation matrix with the current bone’s local transformation to get the global transformation. This is critical for hierarchical transformations.

5. Rendering the Bone Hierarchy

ImGui doesn’t directly support 3D rendering, so you’ll need to combine ImGui with your existing 3D rendering pipeline to visualize the bone hierarchy. For example, you can use your favorite rendering engine (like OpenGL or DirectX) to draw the bones as lines or small spheres representing the joints.

To render bones in a 3D space:

• Use the bone->transform matrix to position and orient objects (like spheres or lines) representing bones.

• Update the camera position and projection based on user input or animation.

cpp
CopyEdit
// Example using OpenGL to render a sphere at the bone's position
void RenderBoneIn3D(const Bone* bone) {
    glm::mat4 model = bone->transform;
    
    // Set the model matrix for rendering (this may differ depending on your engine)
    SetModelMatrix(model);
    RenderSphereAtPosition(bone->position);  // Function to render a sphere at bone's position

    // Recursively render child bones
    for (const Bone* child : bone->children) {
        RenderBoneIn3D(child);
    }
}

This way, ImGui can be used for the user interface aspect (displaying and modifying bone transformations), while the 3D rendering system handles the actual visualization of bones in space.

6. Putting It All Together

To visualize bone transformations in your application:

1. Update your ImGui UI: Create a window and call RenderBoneImGui(bone) to show the interface for each bone.

2. Update bone transformations: After modifying bone properties (position, rotation, scale), call UpdateBoneTransform(bone) to recalculate the bone’s global transformation.

3. Render bones in 3D: Use your existing rendering pipeline to visualize the bones in 3D, either as spheres or lines.

Example of ImGui Window Rendering

cpp
CopyEdit
void RenderBoneTransformWindow(Bone* rootBone) {
    ImGui::Begin("Bone Transformations");

    // Render the root bone and all its children
    RenderBoneImGui(rootBone);

    ImGui::End();
}

Conclusion

Using ImGui to visualize bone transformations provides a simple and interactive way to inspect and modify the skeletal structure of a model. The key steps include rendering UI controls for position, rotation, and scale, updating bone transforms, and integrating the 3D rendering system to visualize the bones. By combining ImGui’s immediate mode interface with your 3D rendering engine, you can create an intuitive debugging tool for animation and bone manipulation.