LearnOpenGL

Skeletal-Animation.html (39270B)

---

     <div id="content">
     <h1 id="content-title">Skeletal Animation</h1>
 <h1 id="content-url" style='display:none;'>Guest-Articles/2020/Skeletal-Animation</h1>
 <p>3D Animations can bring our games to life. Objects in 3D world like humans and &amp; 
 	animals feel more organic when they move their limbs to do certain things like walking, running &amp; attacking. 
 	This tutorial is about Skeletal animation which you all have been waiting for. We will first understand the concept thoroughly and then understand the data 
 	we need to animate a 3D model using Assimp. I'd recommend you to finish the <a href="https://learnopengl.com/Model-Loading/Assimp">Model Loading</a> chapter of this saga as this tutorial code continues from there. You can still understand the concept and implement it in your way. So let's get started.</p>
 	
 	
 	<h3>Interpolation</h3>
 <p>To understand how animation works at basic level we need to understand the concept of Interpolation. 
 	Interpolation can be defined as something happening over time. Like an enemy moving from point A to point B in time T i.e Translation happening over time . 
 	A gun turret smoothly rotates to face the target i.e Rotation happening over time and a tree is scaling up from size A to size B in time T i.e Scaling happening over time.</p>
 <p>A simple interpolation equation used for Translation and Scale looks like this..</p>
 <p style="text-align: center;"><strong>a = a * (1 - t) + b * t </strong></p>
 <p>It is known as as Linear Interpolation equation or Lerp. For Rotation we cannot use Vector. 
 		The reason for that is if we went ahead and tried to use the linear interpolation equation on a vector of X(Pitch),Y(Yaw) & Z(Roll), the interpolation won't be linear. 
 		You will encounter 
 		weird issues like The 
 		Gimbal Lock(See references section below to learn about it). To avoid this issue we use Quaternion for rotations. 
 		Quaternion provides something called The Spherical Interpolation or 
 		Slerp equation which gives the same result as Lerp but for two rotations A & B. 
 		I won't be able to explain how the equation works because its out of the scope for now. You can surely checkout references section below to 
 		understand The Quaternion. 
 </p>
 <h3>Components of An Animated Model : Skin, Bones and Keyframes</h3>
 <p>The whole process of an animation starts with the addition of the first component which is The Skin in a software like blender or Maya. 
 	Skin is nothing but meshes which add visual aspect to the model to tell the viewer how it looks like. 
 	But If you want to move any mesh then just like the real world, you need to add Bones. You can see the images below to understand how it looks in software like blender....</p>
 <p>&nbsp;</p>
 <img src="/img/guest/2020/skeletal_animation/skin.png" alt="skin" width="300" height="300"  class="clean"> <img src="/img/guest/2020/skeletal_animation/bones.png" alt="bones" width="300" height="300"class="clean"> <img src="/img/guest/2020/skeletal_animation/merged.png" alt="skin and bones" width="300" height="300"class="clean">
 <p>These bones are usually added in hierarchical fashion for characters like humans &amp; animals and the reason is pretty obvious. We want parent-child relationship among limbs. 
 	For example, If we move our right shoulder then our right bicep, forearm, hand and fingers should move as well. This is how the hierarchy looks like....</p>
 <p>&nbsp;</p>
   
   <p>
     <img src="/img/guest/2020/skeletal_animation/parent_child.png"  alt="" width="853" height="425"/></p>
   
 <p>In the above diagram if you grab the hip bone and move it, all limbs will be affected by its movement.</p>
 <p>At this point, we are ready to create KeyFrames for an animation. Keyframes are poses at different point of time in an animation. We will interpolate between 
 	these Keyframes to go from one pose to another pose smoothly in our code. Below you can see how poses are created for a simple 4 frame jump animation...</p>
   <p><img src="/img/guest/2020/skeletal_animation/poses.gif" width="300px" class="clean" alt=""/> <img src="/img/guest/2020/skeletal_animation/interpolating.gif" class="clean" width="300px" alt="Interpolation bw frames" hspace="20"/></p>
 <p>&nbsp;</p>
 <h3>How Assimp holds animation data</h3>
 <p>We are almost there to the code part but first we need to understand how assimp holds imported animation data. Look at the diagram below..</p>
   <p><img src="/img/guest/2020/skeletal_animation/assimp1.jpeg" alt="" width="710" height="800"/></p>
 <p>Just like in the <a href="https://learnopengl.com/Model-Loading/Assimp">Model Loading</a> chapter, we will start with the <code>aiScene</code> pointer 
 	which holds a pointer to the root node and look what do we have here, an array of Animations.
 	 This array of <code>aiAnimation</code> contains the general information like duration of an animation represented here as 
 	 <code>mDuration</code> and then we have a <code>mTicksPerSecond</code> variable, which controls how fast 
 	 we should interpolate between frames. If you remember from the last section that an animation has keyframes. 
 	 Similary, an <code>aiAnimation</code> contains an <code>aiNodeAnim</code> array called Channels. 
 	 This array of contains all bones and their keyframes which are going to be engaged in an animation.
 
 	 An <code>aiNodeAnim</code> contains name of the bone and you 
 	 will find 3 types of keys to interpolate between here, Translation,Rotation &amp; Scale.</p>
 
 <p>Alright, there's one last thing we need to understand and we are good to go for writing some code.</p>
 
 <p>&nbsp;</p>
 <h3>Influence of multiple bones on vertices</h3>
 <p>When we curl our forearm and we see our biceps muscle pop up. We can also say that forearm bone transformation is affecting vertices on our biceps. 
 	Similary, there could be multiple bones affecting a single vertex in a mesh. 
 	For characters like solid metal robots all forearm vertices will only be affected by forearm bone but for characters like humans, animals etc, there could be
 	 upto 4 bones which can affect a vertex.&nbsp; Let's see how assimp stores that information...</p>
 <p>&nbsp;</p>
   <p><img src="/img/guest/2020/skeletal_animation/assimp2.jpeg" alt="" width="760" height="860"/></p>
 <p>&nbsp;</p>
 <p>We start with the <code>aiScene</code> pointer again which contains an array of all aiMeshes. 
 	Each <code>aiMesh</code> object has an array of <code>aiBone</code> which contains the information like 
 	how much influence this <code>aiBone</code> will have on set of vertices on the mesh. 
 	aiBone contains the name of the bone, an array of <code>aiVertexWeight</code> which basically 
 	tells us how much influence this <code>aiBone</code> will have on what vertices on the mesh.  
 	Now we have one more member of <code>aiBone</code> which is offsetMatrix. It's a 4x4 matrix
 	used to transform vertices from model space to their bone space. 
 	 You can see this in action in images below....</p>
 	 
 		  <img src="/img/guest/2020/skeletal_animation/mesh_space.png" class="clean" alt="Mesh Space" style="width:50%">
 		  <img src="/img/guest/2020/skeletal_animation/bone_space.png" class="clean" alt="Bone Space" style="width:50%">
 	 <p>
 		 When vertices are in bone space they will be transformed relative to their bone
 		  as they are supposed to. You will soon see this in action
 		 in code.
 	 </p>
             
 <h3>Finally! Let's code.</h3>
 <p>Thank you for making it this far. We will start with directly looking at the end result which is our final vertex 
 	shader code. This will give us good sense what we need at the end.. </p>
             
 <pre><code>#version 430 core
 
 layout(location = 0) in vec3 pos;
 layout(location = 1) in vec3 norm;
 layout(location = 2) in vec2 tex;
 layout(location = 3) in ivec4 boneIds; 
 layout(location = 4) in vec4 weights;
 
 uniform mat4 projection;
 uniform mat4 view;
 uniform mat4 model;
 
 const int MAX_BONES = 100;
 const int MAX_BONE_INFLUENCE = 4;
 uniform mat4 finalBonesMatrices[MAX_BONES];
 
 out vec2 TexCoords;
 
 void main()
 {
     vec4 totalPosition = vec4(0.0f);
     for(int i = 0 ; i &lt; MAX_BONE_INFLUENCE ; i++)
     {
         if(boneIds[i] == -1) 
             continue;
         if(boneIds[i] &gt;= MAX_JOINTS) 
         {
             totalPosition = vec4(pos,1.0f);
             break;
         }
         vec4 localPosition = finalBoneMatrices[boneIds[i]] * vec4(pos,1.0f);
         totalPosition += localPosition * weights[i];
         vec3 localNormal = mat3(finalBoneMatrices[boneIds[i]]) * norm;
    }
 	
     mat4 viewModel = view * model;
     gl_Position =  projection * viewModel * totalPosition;
 	TexCoords = tex;
 }
 </code></pre>
             
 <p>
   Fragment shader remains the same from the <a href="https://learnopengl.com/Model-Loading/Model">model loading</a> chapter. 
 	Starting from the top you see two new attributes layout declaration. 
 	First <code>boneIds</code> and second is <code>weights</code>. we also have 
 	a uniform array <code>finalBonesMatrices</code> which stores transformations of all bones.
 	 &nbsp;&nbsp;<code>boneIds</code> contains indices which are used to read the <code>finalBonesMatrices</code>
 	 array and apply those transformation to <code>pos</code> vertex with their respective weights
 	 stored in <code> weights </code> array. This happens inside <code> for </code> loop above.
 	   Now let's add support in our <code>Mesh</code> class for bone weights first..
 </p>
             
 <pre><code>#define MAX_BONE_INFLUENCE 4
 
 struct Vertex {
     // position
     glm::vec3 Position;
     // normal
     glm::vec3 Normal;
     // texCoords
     glm::vec2 TexCoords;
     
     //bone indexes which will influence this vertex
     int m_BoneIDs[MAX_BONE_INFLUENCE];
 
     //weights from each bone
     float m_Weights[MAX_BONE_INFLUENCE];
 };
 </code></pre>
             
 <p>
   We have added two new attributes for the <code>Vertex</code>, just like we saw in our vertex shader. 
 	Now's let's load them in GPU buffers just like other attributes in our <code>Mesh::setupMesh </code> function...
             </p>
             
 <pre><code>class Mesh
 {
     ...
     
     void setupMesh()
     {
         ...
         
         // ids
         <function id='29'><function id='60'>glEnable</function>VertexAttribArray</function>(3);
         glVertexAttribIPointer(3, 4, GL_INT, sizeof(Vertex), 
                                (void*)offsetof(Vertex, m_BoneIDs));
 
         // weights
         <function id='29'><function id='60'>glEnable</function>VertexAttribArray</function>(4);
         <function id='30'>glVertexAttribPointer</function>(4, 4, GL_FLOAT, GL_FALSE, sizeof(Vertex), 
                               (void*)offsetof(Vertex, m_Weights));
         
         ...
     }
     ...
 }
 </code></pre>
 <p>Just like before, except now we have added 3 and 4 layout location ids for <code>boneIds</code> and <code>weights</code>. One imporant thing to notice here is how we are passing data for <code>boneIds</code>. We are using <code>glVertexAttribIPointer</code> and we passed GL_INT as third parameter.&nbsp;</p>
 <p>Now we can extract the bone-weight information from the assimp data structure. Let's make some changes in Model class...</p>
 
 <pre><code>struct BoneInfo
 {
     /*id is index in finalBoneMatrices*/
     int id;
 
     /*offset matrix transforms vertex from model space to bone space*/
     glm::mat4 offset;
 
 };
 </code></pre>
 
 <p> This <code> BoneInfo </code> will store our offset matrix and also a unique id which will 
 	be used as an index to store it in <code>finalBoneMatrices</code> array we saw earlier in our shader.
 Now we will add bone weight extraction support in <code>Model</code>... </p>
             
 <pre><code>class Model 
 {
 private:
     ...
     std::map&lt;string, BoneInfo&gt; m_BoneInfoMap; //
 	int m_BoneCounter = 0;
     
     ...
     void SetVertexBoneDataToDefault(Vertex&amp; vertex)
     {
         for (int i = 0; i &lt; MAX_BONE_WEIGHTS; i++)
         {
             vertex.m_BoneIDs[i] = -1;
             vertex.m_Weights[i] = 0.0f;
         }
     }
 
     Mesh processMesh(aiMesh* mesh, const aiScene* scene)
     {
         vector vertices;
         vector indices;
         vector textures;
 
         for (unsigned int i = 0; i &lt; mesh-&gt;mNumVertices; i++)
         {
             Vertex vertex;
             
             SetVertexBoneDataToDefault(vertex);
 
             vertex.Position = AssimpGLMHelpers::GetGLMVec(mesh-&gt;mVertices[i]);
             vertex.Normal = AssimpGLMHelpers::GetGLMVec(mesh-&gt;mNormals[i]);
 			
             if (mesh-&gt;mTextureCoords[0])
             {
                 glm::vec2 vec;
                 vec.x = mesh-&gt;mTextureCoords[0][i].x;
                 vec.y = mesh-&gt;mTextureCoords[0][i].y;
                 vertex.TexCoords = vec;
             }
             else
                 vertex.TexCoords = glm::vec2(0.0f, 0.0f);
 
             vertices.push_back(vertex);
         }
         ...
         ExtractBoneWeightForVertices(vertices,mesh,scene);
 
         return Mesh(vertices, indices, textures);
     }
 
     void SetVertexBoneData(Vertex&amp; vertex, int boneID, float weight)
     {
         for (int i = 0; i &lt; MAX_BONE_WEIGHTS; ++i)
         {
             if (vertex.m_BoneIDs[i] &lt; 0)
             {
                 vertex.m_Weights[i] = weight;
                 vertex.m_BoneIDs[i] = boneID;
                 break;
             }
         }
     }
 
     void ExtractBoneWeightForVertices(std::vector&amp; vertices, aiMesh* mesh, 
                                       const aiScene* scene)
     {
         for (int boneIndex = 0; boneIndex &lt; mesh-&gt;mNumBones; ++boneIndex)
         {
             int boneID = -1;
             std::string boneName = mesh-&gt;mBones[boneIndex]-&gt;mName.C_Str();
             if (m_BoneInfoMap.find(boneName) == m_BoneInfoMap.end())
             {
                 BoneInfo newBoneInfo;
                 newBoneInfo.id = m_BoneCounter;
                 newBoneInfo.offset = AssimpGLMHelpers::
                     ConvertMatrixToGLMFormat(mesh-&gt;mBones[boneIndex]-&gt;mOffsetMatrix);
                 m_BoneInfoMap[boneName] = newBoneInfo;
                 boneID = m_BoneCounter;
                 m_BoneCounter++;
             }
             else
             {
                 boneID = m_BoneInfoMap[boneName].id;
             }
             assert(boneID != -1);
             auto weights = mesh-&gt;mBones[boneIndex]-&gt;mWeights;
             int numWeights = mesh-&gt;mBones[boneIndex]-&gt;mNumWeights;
 
             for (int weightIndex = 0; weightIndex &lt; numWeights; ++weightIndex)
             {
                 int vertexId = weights[weightIndex].mVertexId;
                 float weight = weights[weightIndex].mWeight;
                 assert(vertexId &lt;= vertices.size());
                 SetVertexBoneData(vertices[vertexId], boneID, weight);
             }
         }
     }
     .......
 };
 </code></pre>
             
 <p>We start by declaring a map <code>m_BoneInfoMap</code> and a counter <code>m_BoneCounter</code> 
 	which will be incremented as soon as we read a new bone.
 	 we saw in the diagram earlier that each <code>aiMesh</code> contains all 
 	 aiBones which are associated with the <code>aiMesh</code>. 
 	 The whole process of the bone-weight extraction starts from the 
 	 <code> processMesh </code> 
 	function. For each loop iteration we are setting <code>m_BoneIDs</code> and <code>m_Weights</code> to 
 	their default values 
 	by calling function <code>SetVertexBoneDataToDefault</code>. 
 	Just before the <code>processMesh</code> function ends, we call the 
 	<code>ExtractBoneWeightData</code>. In the <code>ExtractBoneWeightData</code> we run 
 	a for loop for each <code>aiBone</code> and check if this bone already exists in the <code>m_BoneInfoMap</code>. 
 	If we couldn't find it then it's considered a new bone and we create new <code>BoneInfo</code> 
 	with an id and store its associated <code>mOffsetMatrix</code> to it. Then we store this new <code>BoneInfo</code>
 	 in <code>m_BoneInfoMap</code> and then we increment the <code>m_BoneCounter</code> counter to create 
 	 an id for next bone. In case we find the bone name in <code>m_BoneInfoMap</code> then 
 	 that means this bone affects vertices of mesh out of 
 	 its scope. So we take it's Id and proceed further to know which vertices it affects. </p>
 	 
 	 <p> One thing to notice that we are calling <code>AssimpGLMHelpers::ConvertMatrixToGLMFormat</code>. 
 	 Assimp store its matrix data in different format than GLM so this function just gives us our matrix in GLM format.
     </p>
 	<p>We have extracted the offsetMatrix for the bone and now we will simply iterate its <code>aiVertexWeight</code>array 
 		and extract all vertices indices which will be influenced by this bone along with their 
 		respective weights and call <code>SetVertexBoneData</code> to fill up <code>Vertex.boneIds</code> and <code>Vertex.weights</code> with extracted information. </p>
 		
 		<p>Phew! You deserve a coffee break at this point. </p>  
 
 <h3>Bone,Animation &amp; Animator classes</h3>
 <p>Here's high level view of classes..</p>
 
               <p><img src="/img/guest/2020/skeletal_animation/bird_eye_view.png" class="clean" alt="" width="700"/></p>
 
 <p>  Let us remind ourselves what we are trying to achieve. For each rendering frame we want to interpolate all bones in heirarchy smoothly and get their final transformations matrices which will be supplied to shader
 	uniform <code>finalBonesMatrices</code>.
 	Here's what each class does... 
 
 	<p><b>Bone</b> : A single bone which reads all keyframes data from <code>aiNodeAnim</code>. It will also interpolate between its keys i.e Translation,Scale & Rotation based on the current animation time. </p>
 	<p><b>AssimpNodeData</b> : This struct will help us to isolate our <code><b>Animation</b> from Assimp. </code> </p>
 	<p><b>Animation</b> : An asset which reads data from aiAnimation and create a heirarchical record of <code><b>Bone</b></code>s </p>
 	<p><b>Animator</b> : This will read the heirarchy of <code>AssimpNodeData</code>, 
 		Interpolate all bones in a recursive manner and then prepare final bone transformation matrices for us that we need.  
 	
 </p>
 
 <p>
    Here's the code for <code>Bone</code>...
 
    <pre><code>struct KeyPosition
 {
     glm::vec3 position;
     float timeStamp;
 };
 
 struct KeyRotation
 {
     glm::quat orientation;
     float timeStamp;
 };
 
 struct KeyScale
 {
     glm::vec3 scale;
     float timeStamp;
 };
 
 class Bone
 {
 private:
   std::vector&lt;KeyPosition&gt; m_Positions;
   std::vector&lt;KeyRotation&gt; m_Rotations;
   std::vector&lt;KeyScale&gt; m_Scales;
   int m_NumPositions;
   int m_NumRotations;
   int m_NumScalings;
 	
   glm::mat4 m_LocalTransform;
   std::string m_Name;
   int m_ID;
 public:
   /*reads keyframes from aiNodeAnim*/
   Bone(const std::string& name, int ID, const aiNodeAnim* channel)
     :
     m_Name(name),
     m_ID(ID),
     m_LocalTransform(1.0f)
     {
         m_NumPositions = channel->mNumPositionKeys;
 
         for (int positionIndex = 0; positionIndex &lt; m_NumPositions; ++positionIndex)
         {
             aiVector3D aiPosition = channel->mPositionKeys[positionIndex].mValue;
             float timeStamp = channel->mPositionKeys[positionIndex].mTime;
             KeyPosition data;
             data.position = AssimpGLMHelpers::GetGLMVec(aiPosition);
             data.timeStamp = timeStamp;
             m_Positions.push_back(data);
         }
 
         m_NumRotations = channel->mNumRotationKeys;
         for (int rotationIndex = 0; rotationIndex &lt; m_NumRotations; ++rotationIndex)
         {
             aiQuaternion aiOrientation = channel->mRotationKeys[rotationIndex].mValue;
             float timeStamp = channel->mRotationKeys[rotationIndex].mTime;
             KeyRotation data;
             data.orientation = AssimpGLMHelpers::GetGLMQuat(aiOrientation);
             data.timeStamp = timeStamp;
             m_Rotations.push_back(data);
         }
 
         m_NumScalings = channel->mNumScalingKeys;
         for (int keyIndex = 0; keyIndex &lt; m_NumScalings; ++keyIndex)
         {
             aiVector3D scale = channel->mScalingKeys[keyIndex].mValue;
             float timeStamp = channel->mScalingKeys[keyIndex].mTime;
             KeyScale data;
             data.scale = AssimpGLMHelpers::GetGLMVec(scale);
             data.timeStamp = timeStamp;
             m_Scales.push_back(data);
         }
     }
 	
     /* Interpolates b/w positions,rotations & scaling keys based on the curren time of the 
     animation and prepares the local transformation matrix by combining all keys tranformations */
     void Update(float animationTime)
     {
         glm::mat4 translation = InterpolatePosition(animationTime);
         glm::mat4 rotation = InterpolateRotation(animationTime);
         glm::mat4 scale = InterpolateScaling(animationTime);
         m_LocalTransform = translation * rotation * scale;
     }
 
     glm::mat4 GetLocalTransform() { return m_LocalTransform; }
     std::string GetBoneName() const { return m_Name; }
     int GetBoneID() { return m_ID; }
 	
     /* Gets the current index on mKeyPositions to interpolate to based on the current 
     animation time */
     int GetPositionIndex(float animationTime)
     {
         for (int index = 0; index &lt; m_NumPositions - 1; ++index)
         {
             if (animationTime &lt; m_Positions[index + 1].timeStamp)
                 return index;
         }
         assert(0);
     }
     
     /* Gets the current index on mKeyRotations to interpolate to based on the current 
     animation time */
     int GetRotationIndex(float animationTime)
     {
         for (int index = 0; index &lt; m_NumRotations - 1; ++index)
         {
             if (animationTime &lt; m_Rotations[index + 1].timeStamp)
                 return index;
         }
         assert(0);
     }
 
     /* Gets the current index on mKeyScalings to interpolate to based on the current 
     animation time */
     int GetScaleIndex(float animationTime)
     {
         for (int index = 0; index &lt; m_NumScalings - 1; ++index)
         {
             if (animationTime &lt; m_Scales[index + 1].timeStamp)
                 return index;
         }
         assert(0);
     }
 private:
 
     /* Gets normalized value for Lerp & Slerp*/
     float GetScaleFactor(float lastTimeStamp, float nextTimeStamp, float animationTime)
     {
         float scaleFactor = 0.0f;
         float midWayLength = animationTime - lastTimeStamp;
         float framesDiff = nextTimeStamp - lastTimeStamp;
         scaleFactor = midWayLength / framesDiff;
         return scaleFactor;
     }
 
     /* figures out which position keys to interpolate b/w and performs the interpolation 
     and returns the translation matrix */
     glm::mat4 InterpolatePosition(float animationTime)
     {
         if (1 == m_NumPositions)
             return <function id='55'>glm::translate</function>(glm::mat4(1.0f), m_Positions[0].position);
 
         int p0Index = GetPositionIndex(animationTime);
         int p1Index = p0Index + 1;
         float scaleFactor = GetScaleFactor(m_Positions[p0Index].timeStamp,
                             m_Positions[p1Index].timeStamp, animationTime);
         glm::vec3 finalPosition = glm::mix(m_Positions[p0Index].position, 
                                            m_Positions[p1Index].position
 			, scaleFactor);
         return <function id='55'>glm::translate</function>(glm::mat4(1.0f), finalPosition);
     }
 
     /* figures out which rotations keys to interpolate b/w and performs the interpolation 
     and returns the rotation matrix */
     glm::mat4 InterpolateRotation(float animationTime)
     {
         if (1 == m_NumRotations)
         {
             auto rotation = glm::normalize(m_Rotations[0].orientation);
             return glm::toMat4(rotation);
         }
 
         int p0Index = GetRotationIndex(animationTime);
         int p1Index = p0Index + 1;
         float scaleFactor = GetScaleFactor(m_Rotations[p0Index].timeStamp,
                             m_Rotations[p1Index].timeStamp, animationTime);
         glm::quat finalRotation = glm::slerp(m_Rotations[p0Index].orientation,
                                   m_Rotations[p1Index].orientation, scaleFactor);
         finalRotation = glm::normalize(finalRotation);
         return glm::toMat4(finalRotation);
     }
 
     /* figures out which scaling keys to interpolate b/w and performs the interpolation 
     and returns the scale matrix */
     glm::mat4 Bone::InterpolateScaling(float animationTime)
     {
         if (1 == m_NumScalings)
             return <function id='56'>glm::scale</function>(glm::mat4(1.0f), m_Scales[0].scale);
 
         int p0Index = GetScaleIndex(animationTime);
         int p1Index = p0Index + 1;
         float scaleFactor = GetScaleFactor(m_Scales[p0Index].timeStamp,
                             m_Scales[p1Index].timeStamp, animationTime);
         glm::vec3 finalScale = glm::mix(m_Scales[p0Index].scale, 
                                m_Scales[p1Index].scale, scaleFactor);
         return <function id='56'>glm::scale</function>(glm::mat4(1.0f), finalScale);
     }	
 };
 </code></pre>
   
    <p>
 
 	We start by creating 3 structs for our key types. Each struct holds a value and a time stamp. Timestamp tells us at what point of an animation we need to interpolate to its value. 
 	<code>Bone</code> has a constructor which reads from <code>aiNodeAnim</code> and stores keys and their timestamps to <code>mPositionKeys, mRotationKeys & mScalingKeys </code>. The main interpolation process 
 	starts from <code>Update(float animationTime)</code> which gets called every frame. This function calls respective interpolation functions for all key types and combines all final interpolation results
 	and store it to a 4x4 Matrix <code>m_LocalTransform</code>. The interpolations functions for translation & scale keys are similar but for rotation we are using <code>Slerp</code> to interpolate between quaternions.
 	Both <code>Lerp</code> & <code>Slerp</code> takes 3 arguments. First argument takes last key, second argument takes next key and third argument takes value of range 0-1,we call it scale factor here. 
 	Let's see how we calculate this scale factor in function <code>GetScaleFactor</code>...
 
      <p><img src="/img/guest/2020/skeletal_animation/scale_factor.png" alt="skin"/></p>
 
    <p>In code...</p>
 
 	<p><b> 	float midWayLength = animationTime - lastTimeStamp; </b></p>
 	<p><b> float framesDiff = nextTimeStamp - lastTimeStamp;</b></p>
 		<p><b> scaleFactor = midWayLength / framesDiff; </b></p>
 	<p></p>     
    </p>
   
     Let's move on to <code><b>Animation</b></code> class now...
   
 <pre><code>struct AssimpNodeData
 {
     glm::mat4 transformation;
     std::string name;
     int childrenCount;
     std::vector&lt;AssimpNodeData&gt; children;
 };
 
 class Animation
 {
 public:
     Animation() = default;
 
     Animation(const std::string& animationPath, Model* model)
     {
         Assimp::Importer importer;
         const aiScene* scene = importer.ReadFile(animationPath, aiProcess_Triangulate);
         assert(scene && scene->mRootNode);
         auto animation = scene->mAnimations[0];
         m_Duration = animation->mDuration;
         m_TicksPerSecond = animation->mTicksPerSecond;
         ReadHeirarchyData(m_RootNode, scene->mRootNode);
         ReadMissingBones(animation, *model);
     }
 
     ~Animation()
     {
     }
 
     Bone* FindBone(const std::string& name)
     {
         auto iter = std::find_if(m_Bones.begin(), m_Bones.end(),
             [&](const Bone& Bone)
             {
                 return Bone.GetBoneName() == name;
             }
         );
         if (iter == m_Bones.end()) return nullptr;
         else return &(*iter);
     }
 
 	
     inline float GetTicksPerSecond() { return m_TicksPerSecond; }
 
     inline float GetDuration() { return m_Duration;}
 
     inline const AssimpNodeData& GetRootNode() { return m_RootNode; }
 
     inline const std::map&lt;std::string,BoneInfo&gt;& GetBoneIDMap() 
     { 
         return m_BoneInfoMap;
     }
 
 private:
     void ReadMissingBones(const aiAnimation* animation, Model& model)
     {
         int size = animation->mNumChannels;
 
         auto& boneInfoMap = model.GetBoneInfoMap();//getting m_BoneInfoMap from Model class
         int& boneCount = model.GetBoneCount(); //getting the m_BoneCounter from Model class
 
         //reading channels(bones engaged in an animation and their keyframes)
         for (int i = 0; i &lt; size; i++)
         {
             auto channel = animation->mChannels[i];
             std::string boneName = channel->mNodeName.data;
 
             if (boneInfoMap.find(boneName) == boneInfoMap.end())
             {
                 boneInfoMap[boneName].id = boneCount;
                 boneCount++;
             }
             m_Bones.push_back(Bone(channel->mNodeName.data,
                               boneInfoMap[channel->mNodeName.data].id, channel));
 		}
 
         m_BoneInfoMap = boneInfoMap;
     }
 
     void ReadHeirarchyData(AssimpNodeData& dest, const aiNode* src)
     {
         assert(src);
 
         dest.name = src->mName.data;
         dest.transformation = AssimpGLMHelpers::ConvertMatrixToGLMFormat(src->mTransformation);
         dest.childrenCount = src->mNumChildren;
 
         for (int i = 0; i &lt; src->mNumChildren; i++)
         {
             AssimpNodeData newData;
             ReadHeirarchyData(newData, src->mChildren[i]);
             dest.children.push_back(newData);
         }
     }
     float m_Duration;
     int m_TicksPerSecond;
     std::vector&lt;Bone&gt; m_Bones;
     AssimpNodeData m_RootNode;
     std::map&lt;std::string, BoneInfo&gt; m_BoneInfoMap;
 };
 </code></pre>
 
   <p> Here, creation of an  <code>Animation</code> object starts with a constructor. It takes two arguments. First, path to the animation file & second parameter is the <code>Model</code> for this animation. 
 You will see later ahead why we need this <code>Model</code> reference here. We then create an <code>Assimp::Importer</code> to read the animation file, followed by an <code>assert</code> check which will throw
 an error if animation could not be found. Then we read general animation data like how long is this animation which is <code>mDuration</code> and the animation speed represented by <code>mTicksPerSecond</code>.
 We then call <code>ReadHeirarchyData</code> which replicates <code>aiNode</code> heirarchy of Assimp and creates heirarchy of <code>AssimpNodeData</code>. 
 </p>
 
 <p> Then we call a function called <code>ReadMissingBones</code>. I had to write this function because sometimes when I loaded FBX model separately, it had some bones missing and I found those missing bones in
 the animation file. This function reads the missing bones information and stores their information in <code>m_BoneInfoMap</code> of <code>Model</code> and saves a reference of <code>m_BoneInfoMap</code> locally in
 the m_BoneInfoMap.</p> 
 
 <p>And we have our animation ready. Now let's look at our final stage, The Animator class...</p>
 
 <pre><code>class Animator
 {	
 public:
     Animator::Animator(Animation* Animation)
     {
         m_CurrentTime = 0.0;
         m_CurrentAnimation = currentAnimation;
 
         m_FinalBoneMatrices.reserve(100);
 
         for (int i = 0; i &lt; 100; i++)
             m_FinalBoneMatrices.push_back(glm::mat4(1.0f));
     }
 	
     void Animator::UpdateAnimation(float dt)
     {
         m_DeltaTime = dt;
         if (m_CurrentAnimation)
         {
             m_CurrentTime += m_CurrentAnimation->GetTicksPerSecond() * dt;
             m_CurrentTime = fmod(m_CurrentTime, m_CurrentAnimation->GetDuration());
             CalculateBoneTransform(&m_CurrentAnimation->GetRootNode(), glm::mat4(1.0f));
         }
     }
 	
     void Animator::PlayAnimation(Animation* pAnimation)
     {
         m_CurrentAnimation = pAnimation;
         m_CurrentTime = 0.0f;
     }
 	
     void Animator::CalculateBoneTransform(const AssimpNodeData* node, glm::mat4 parentTransform)
     {
         std::string nodeName = node->name;
         glm::mat4 nodeTransform = node->transformation;
 	
         Bone* Bone = m_CurrentAnimation->FindBone(nodeName);
 	
         if (Bone)
         {
             Bone->Update(m_CurrentTime);
             nodeTransform = Bone->GetLocalTransform();
         }
 	
         glm::mat4 globalTransformation = parentTransform * nodeTransform;
 	
         auto boneInfoMap = m_CurrentAnimation->GetBoneIDMap();
         if (boneInfoMap.find(nodeName) != boneInfoMap.end())
         {
             int index = boneInfoMap[nodeName].id;
             glm::mat4 offset = boneInfoMap[nodeName].offset;
             m_FinalBoneMatrices[index] = globalTransformation * offset;
         }
 	
         for (int i = 0; i &lt; node->childrenCount; i++)
             CalculateBoneTransform(&node->children[i], globalTransformation);
     }
 	
     std::vector&lt;glm::mat4&gt; GetFinalBoneMatrices() 
     { 
         return m_FinalBoneMatrices;  
     }
 		
 private:
     std::vector&lt;glm::mat4&gt; m_FinalBoneMatrices;
     Animation* m_CurrentAnimation;
     float m_CurrentTime;
     float m_DeltaTime;	
 };
 </code></pre>
 
 <p>
 
 	<code>Animator</code> constructor takes an animation to play and
 	 then it proceeds to reset the animation time <code>m_CurrentTime</code> to 0. 
 	 It also initializes <code>m_FinalBoneMatrices</code> 
 	which is a <code>std::vector&lt;glm::mat4&gt;</code>. 
 	 The main point of attention here is <code>UpdateAnimation(float deltaTime)</code> function.
 	  It advances the <code>m_CurrentTime</code> with rate of 
 	<code>m_TicksPerSecond</code> and then calls the <code>CalculateBoneTransform</code> function.
 	 We will pass two arguments in the start, first is the <code>m_RootNode</code> of <code>m_CurrentAnimation</code>
 	and second is an identity matrix passed as <code>parentTransform</code> This function then check if <code>m_RootNode</code>s bone is engaged in this animation by finding it in <code>m_Bones</code> array of <code>Animation</code>. 
 	If bone is found then it calls <code>Bone.Update()</code> function which interpolates all bones and return local bone transform matrix to
 	 <code>nodeTransform</code>. 
 	 But this is local space matrix and will move bone around origin if passed in shaders. So we multiply this <code>nodeTransform</code> with <code>parentTransform</code> and 
 	 we store the result in <code>globalTransformation</code>. This would be enough but vertices are still in default model space. 
 	 we find offset matrix in <code>m_BoneInfoMap</code> and then multiply it 
 		with <code>globalTransfromMatrix</code>. 
 		We will also get the id index which will be used to write final transformation of this bone to m_FinalBoneMatrices. 
 	 </p>
 
 	 <p>
 		 Finally! we call <code>CalculateBoneTransform</code> for each child nodes of this node and pass <code>globalTransformation</code> as <code>parentTransform</code>. 
 		 We break this recursive loop when there will no children
 		 left to process further. 
 	 </p>
 
 </p>
 </p>
 
 <h3> Let's Animate</h3>
 
 <p>
 Fruit of our hardwork is finally here! Here's how we will play the animation in <code>main.cpp</code> ...
 </p>
 
 <pre><code>int main()
 {
     ...
 	
     Model ourModel(FileSystem::getPath("resources/objects/vampire/dancing_vampire.dae"));
     Animation danceAnimation(FileSystem::getPath(
             "resources/objects/vampire/dancing_vampire.dae"), &ourModel);
     Animator animator(&danceAnimation);
 
     // draw in wireframe
     //<function id='43'>glPolygonMode</function>(GL_FRONT_AND_BACK, GL_LINE);
 
     // render loop
     // -----------
     while (!<function id='14'>glfwWindowShouldClose</function>(window))
     {
         // per-frame time logic
         // --------------------
         float currentFrame = <function id='47'>glfwGetTime</function>();
         deltaTime = currentFrame - lastFrame;
         lastFrame = currentFrame;
 
         // input
         // -----
         processInput(window);
         animator.UpdateAnimation(deltaTime);
 		
         // render
         // ------
         <function id='13'><function id='10'>glClear</function>Color</function>(0.05f, 0.05f, 0.05f, 1.0f);
         <function id='10'>glClear</function>(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
         // don't forget to enable shader before setting uniforms
         ourShader.use();
 
         // view/projection transformations
         glm::mat4 projection = <function id='58'>glm::perspective</function>(<function id='63'>glm::radians</function>(camera.Zoom), 
             (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);
         glm::mat4 view = camera.GetViewMatrix();
         ourShader.setMat4("projection", projection);
         ourShader.setMat4("view", view);
 
         auto transforms = animator.GetFinalBoneMatrices();
         for (int i = 0; i &lt; transforms.size(); ++i)
             ourShader.setMat4("finalBonesTransformations[" + std::to_string(i) + "]", 
                               transforms[i]);
 
         // render the loaded model
         glm::mat4 model = glm::mat4(1.0f);
         model = <function id='55'>glm::translate</function>(model, glm::vec3(0.0f, -0.4f, 0.0f)); 
         model = <function id='56'>glm::scale</function>(model, glm::vec3(.5f, .5f, .5f));
         ourShader.setMat4("model", model);
         ourModel.Draw(ourShader);
 
         // glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
         // -------------------------------------------------------------------------------
         <function id='24'>glfwSwapBuffers</function>(window);
         <function id='23'>glfwPollEvents</function>();
     }
 
     // glfw: terminate, clearing all previously allocated GLFW resources.
     // ------------------------------------------------------------------
     <function id='25'>glfwTerminate</function>();
     return 0;
 }
 </code></pre>
     
 <p>
 
 	We start with loading our <code>Model</code> which will setup bone weight data for the shader and then create an <code>Animation</code> by giving it the path.
 	Then we create our <code>Animator</code> object by passing it the created <code>Animation</code>. In render loop we then update our <code>Animator</code>, take the 
 	final bone transformations and give it to shaders. Here's the output we all have been waiting for...
 
 </p>
 
 <img src="/img/guest/2020/skeletal_animation/output.gif" alt="output">
 
   <p> Download the model used <a href="/data/models/vampire.zip">here.</a> Note that animations
 and meshes are baked in single DAE(collada) file. You can find the full source code <a href="/code_viewer_gh.php?code=src/8.guest/2020/skeletal_animation/skeletal_animation.cpp" target="_blank">here</a>.
 	
 <h3>Further reading</h3>
     <ul>
 		<li><a href="http://www.songho.ca/math/quaternion/quaternion.html" target="_blank">
 			Quaternions</a>: An article by songho to understand quaternions in depth.</li>
 			<li><a href="http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html" target="_blank">
 				Skeletal Animation with Assimp</a>: An article by OGL Dev.</li>
 				<li><a href="https://youtu.be/f3Cr8Yx3GGA" target="_blank">
 					Skeletal Animation with Java</a>: A fantastic youtube playlist by Thin Matrix.</li>
 					<li><a href="https://www.gamasutra.com/view/feature/131686/rotating_objects_using_quaternions.php" target="_blank">
 						Why Quaternions should be used for Rotation</a>: An awesome gamasutra article.</li>
 			
     </ul>
 
 
 
 <author>
   <strong>Article by: </strong>Ankit Singh Kushwah<br/>
   <strong>Contact: </strong><a href="mailto:eklavyagames@gmail.com" target="_blank">e-mail</a>
 </author>       
 
     </div>