Combining Transformations for Animation

Introduction

Welcome back to 3D Worlds and Matrix Transformations! Having completed four foundational lessons, we've mastered individual transformations and can now render true 3D objects with realistic perspective projection. Our colorful cube spins gracefully in 3D space, but real-world animations often require much more complexity: objects that simultaneously rotate around their own axes while orbiting other points, scaling up and down rhythmically, or performing intricate dance-like movements through space. In this fifth lesson, we'll explore transformation composition : the art of combining multiple transformation matrices to create sophisticated, multi-layered animations. We'll take our spinning cube and transform it into a complex animated system that performs self-rotation, orbital motion, and rhythmic scaling all at the same time. By understanding how different transformations work together and why their order matters critically, we'll unlock the ability to create rich, engaging 3D animations that captivate viewers with their complexity and fluidity.

Understanding Transformation Composition

While single transformations like rotation or translation create basic animations, real-world objects rarely move in such simple patterns. Consider a planet in our solar system: it rotates around its own axis while simultaneously orbiting the sun, and its distance from the sun might vary, creating an elliptical path. Each of these motions represents a different transformation that must work together harmoniously. Transformation composition allows us to combine multiple transformation matrices into a single, unified transformation that captures all these complex behaviors. Rather than applying transformations sequentially in separate rendering passes, we mathematically combine them on the CPU before sending the result to the GPU as a single model matrix. This approach is both computationally efficient and conceptually powerful: we can think about each type of motion independently (self-rotation, orbital motion, scaling), while the mathematics automatically handles their complex interactions. The key insight is that matrix multiplication allows us to "layer" transformations, creating sophisticated animations from simple building blocks.

Matrix Multiplication and Order

A \cdot B \cdot C

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

C++

// Self-rotation around a diagonal axis
glm::mat4 selfRot = glm::rotate(glm::mat4(1.0f), currentTime * 2.0f, glm::vec3(1, 1, 0));

// Self-rotation around a diagonal axis
glm::mat4 selfRot = glm::rotate(glm::mat4(1.0f), currentTime * 2.0f, glm::vec3(1, 1, 0));

C++

// Pulsing scale effect along Z-axis using sine wave
glm::mat4 scale = glm::scale(glm::mat4(1.0f), glm::vec3(1.0f, 1.0f, 0.5f + 0.3f * sin(currentTime * 3.0f)));

// Pulsing scale effect along Z-axis using sine wave
glm::mat4 scale = glm::scale(glm::mat4(1.0f), glm::vec3(1.0f, 1.0f, 0.5f + 0.3f * sin(currentTime * 3.0f)));

C++

// Move cube away from origin to establish orbital radius
glm::mat4 toOrbit = glm::translate(glm::mat4(1.0f), glm::vec3(2.5f, 0, 0));

// Move cube away from origin to establish orbital radius
glm::mat4 toOrbit = glm::translate(glm::mat4(1.0f), glm::vec3(2.5f, 0, 0));

C++

// Orbital rotation around the Y-axis
glm::mat4 orbitRot = glm::rotate(glm::mat4(1.0f), currentTime * 0.8f, glm::vec3(0, 1, 0));

// Orbital rotation around the Y-axis
glm::mat4 orbitRot = glm::rotate(glm::mat4(1.0f), currentTime * 0.8f, glm::vec3(0, 1, 0));

C++

// Transformation order: Orbit * Translate * Scale * SelfRotation
glm::mat4 model = orbitRot * toOrbit * scale * selfRot;

// Transformation order: Orbit * Translate * Scale * SelfRotation
glm::mat4 model = orbitRot * toOrbit * scale * selfRot;

C++

// Different time frequencies for varied animation speeds
glm::mat4 selfRot = glm::rotate(glm::mat4(1.0f), currentTime * 2.0f, glm::vec3(1, 1, 0));
glm::mat4 scale = glm::scale(glm::mat4(1.0f), glm::vec3(1.0f, 1.0f, 0.5f + 0.3f * sin(currentTime * 3.0f)));
glm::mat4 orbitRot = glm::rotate(glm::mat4(1.0f), currentTime * 0.8f, glm::vec3(0, 1, 0));

// Different time frequencies for varied animation speeds
glm::mat4 selfRot = glm::rotate(glm::mat4(1.0f), currentTime * 2.0f, glm::vec3(1, 1, 0));
glm::mat4 scale = glm::scale(glm::mat4(1.0f), glm::vec3(1.0f, 1.0f, 0.5f + 0.3f * sin(currentTime * 3.0f)));
glm::mat4 orbitRot = glm::rotate(glm::mat4(1.0f), currentTime * 0.8f, glm::vec3(0, 1, 0));

C++

// Self-rotation around a diagonal axis
glm::mat4 selfRot = glm::rotate(glm::mat4(1.0f), currentTime * 2.0f, glm::vec3(1, 1, 0));

C++

// Pulsing scale effect along Z-axis using sine wave
glm::mat4 scale = glm::scale(glm::mat4(1.0f), glm::vec3(1.0f, 1.0f, 0.5f + 0.3f * sin(currentTime * 3.0f)));

C++

// Move cube away from origin to establish orbital radius
glm::mat4 toOrbit = glm::translate(glm::mat4(1.0f), glm::vec3(2.5f, 0, 0));

C++

// Orbital rotation around the Y-axis
glm::mat4 orbitRot = glm::rotate(glm::mat4(1.0f), currentTime * 0.8f, glm::vec3(0, 1, 0));

C++

// Transformation order: Orbit * Translate * Scale * SelfRotation
glm::mat4 model = orbitRot * toOrbit * scale * selfRot;

C++

// Different time frequencies for varied animation speeds
glm::mat4 selfRot = glm::rotate(glm::mat4(1.0f), currentTime * 2.0f, glm::vec3(1, 1, 0));
glm::mat4 scale = glm::scale(glm::mat4(1.0f), glm::vec3(1.0f, 1.0f, 0.5f + 0.3f * sin(currentTime * 3.0f)));
glm::mat4 orbitRot = glm::rotate(glm::mat4(1.0f), currentTime * 0.8f, glm::vec3(0, 1, 0));

Introduction

Understanding Transformation Composition

Matrix Multiplication and Order

Join the 1M+ learners on CodeSignal

Self-Rotation Transformations

Scaling Transformations

Translation for Orbital Motion

Orbital Rotation

Combining All Transformations

Timing and Animation Coordination

Conclusion and Next Steps