10

About Poses, Frames, and Clips

Welcome to Chapter 10! In the previous chapter, we introduced the model skeleton and the process of vertex skinning on the CPU and GPU. We also explored vertex skinning using dual quaternions as an alternative to linear interpolation to achieve better volume retention.

In this chapter, we will discuss the main topic of the book: game character animations. The steps taken in the previous chapters and the code we created were just the prerequisites for creating the animations in this chapter.

We start with a general definition of the terms used for various parts of the animations in the rest of the book. Next, we will examine how the animation data is stored in the glTF file format, how to extract the data, and how the glTF model will be altered during the animations.

At the end of the chapter, we will use the knowledge we have gained to create C++ classes for the animations and integrate these new classes into the renderers and the user...

Technical requirements

To follow along in this chapter, you will need the OpenGL and Vulkan renderer code from Chapter 9.

Before we start examining the animations in the glTF file format, let’s take a quick look at the parts of the animations, their names, and how they relate to each other.

A brief overview of animations

Today’s game character animations are completely different from the 2D animations from cartoons created about 100 years ago, such as the famous cartoons by Walt Disney in the 1930s. But there are still a lot of similarities between modern computer animations and the hand-drawn animations of the past.

glTF animations are based on key poses. Every animation has at least a starting and an ending key pose, and most animations also have many key poses at specific points in time. If the starting and the ending key poses are the same, or similar, the animation can be played in a continuous loop. But if these two key poses are too different, another animation must follow at the end, or the direction of the animation must be reversed.

To fill the time between the key poses, intermediate frames are calculated. While intermediate frames had to be drawn by hand in the past, the calculations in modern 3D animations are done by interpolating the vertex...

Pouring the knowledge into C++ classes

We will split the code for the animations into two separate classes to follow the structure of the glTF file format. In a glTF file, the animation clips and the animation channels are stored in different elements because one animation clip uses data from multiple animation channels.

The first class, named GltfAnimationChannel, will contain the data of a glTF animation channel. We will store all data of a single channels entry and the corresponding samplers entry in this class: the time points from the input buffer, the new data for the target node from the output buffer, the interpolation type from the sampler, plus the target path and the target node from the channel definition.

The second class, GltfAnimationClip, manages the animation clips and uses the GltfAnimationChannel class to store the animation channel data per clip.

Storing the channel data in a class

We start the animation channel class, GltfAnimationChannel, with the...

Summary

In this chapter, we finally arrived at the point where we were able to animate our loaded glTF model in the renderers we started in Chapter 2 and Chapter 3.

First, we got a broad overview of the different elements of animations and the model poses. Then, we analyzed the animation elements of the glTF file format, the sub-element channels and samplers, and the relations of these elements to the other parts of the glTF model, such as the joints and nodes.

Finally, we created two new C++ classes for managing the glTF channels and the animation clips and included these classes in the renderer. We also added new UI elements to the application, allowing fine-grained control of various parameters of the animations.

In the next chapter, we will dive deeper into the realms of game character animations. We will explore different forms of animation blending, such as the blending between the binding pose as a “still pose”, where the model does not move, and the full...

Practical sessions

Try out the following ideas to enhance the code for the animation playback:

• Add a class to append multiple animation clips to a longer animation track. You could join the running and jumping clips to create the illusion of a long-running glTF model by playing jump animation clips between a couple of running animation clips.
• Add the ability to control the looping of an animation, such as not only switching the loop on and off, but also controlling the number of loops to play in a row. The animation should stop after the last loop has finished.
• Add a UI control and the logic to play the clips backward. For many clips, this will result in quite interesting behavior of the model, but animations such as sitting and leaning will become more meaningful. The model will stand up from a sitting position and lean back to the upright position.

Additional resources

• The official glTF tutorial: https://github.com/KhronosGroup/glTF-Tutorials/tree/master/gltfTutorial
• The tinygltf loader: https://github.com/syoyo/tinygltf