Skip to main content

2D and 3D Transformations in Computer Graphics

Introduction​

Transformations play a crucial role in computer graphics, allowing us to manipulate objects in two-dimensional (2D) and three-dimensional (3D) spaces. These operations form the foundation of many graphical applications, from simple image editing to complex virtual reality simulations.

In this guide, we'll explore the concepts of 2D and 3D transformations, their applications, and practical implementations. Whether you're a beginner looking to understand the basics or an advanced student seeking to deepen your knowledge, this resource aims to provide comprehensive information tailored to your needs.

2D Transformations​

2D transformations modify objects on a plane, affecting their position, orientation, and size. These transformations include translation, rotation, scaling, and shearing.

Translation​

Translation involves moving an object from one position to another without changing its orientation or size.

Formula​

  • In 2D, the translation of a point ((x, y)) by a vector ((t_x, t_y)) is given by:

    [ x' = x + t_x ] [ y' = y + t_y ]

Example (in GLSL):​

vec2 translate(vec2 position, vec2 offset) {
    return position + offset;
}

Rotation​

Rotation transforms an object around a fixed point (often the origin) by a certain angle.

Formula​

  • A point ((x, y)) rotated by an angle (\theta) around the origin is given by:

    [ x' = x \cdot \cos(\theta) - y \cdot \sin(\theta) ] [ y' = x \cdot \sin(\theta) + y \cdot \cos(\theta) ]

Example (in GLSL):​

vec2 rotate(vec2 position, float angle) {
    float cosTheta = cos(angle);
    float sinTheta = sin(angle);
    return vec2(
        position.x * cosTheta - position.y * sinTheta,
        position.x * sinTheta + position.y * cosTheta
    );
}

Scaling​

Scaling alters the size of an object, either expanding or shrinking it, without changing its shape.

Formula​

  • Scaling a point ((x, y)) by scale factors (s_x) and (s_y) is given by:

    [ x' = x \cdot s_x ] [ y' = y \cdot s_y ]

Example (in GLSL):​

vec2 scale(vec2 position, vec2 scaleFactors) {
    return position * scaleFactors;
}

Shearing​

Shearing distorts an object by shifting its coordinates in one direction, creating a skewed effect.

Formula​

  • Shearing along the x-axis and y-axis for a point ((x, y)) is given by:

    [ x' = x + sh_x \cdot y ] [ y' = y + sh_y \cdot x ]

3D Transformations​

In 3D graphics, transformations extend into the z-axis, affecting objects in a three-dimensional space. These transformations include translation, rotation, scaling, and more complex operations like projection.

3D Translation​

In 3D, translation moves an object by a vector ((t_x, t_y, t_z)).

Formula​

  • The translation of a point ((x, y, z)) by ((t_x, t_y, t_z)) is given by:

    [ x' = x + t_x ] [ y' = y + t_y ] [ z' = z + t_z ]

Example (in GLSL):​

vec3 translate3D(vec3 position, vec3 offset) {
    return position + offset;
}

3D Rotation​

3D rotation can occur around any of the three axes (x, y, z).

Rotation about the X-axis:​

[ y' = y \cdot \cos(\theta) - z \cdot \sin(\theta) ] [ z' = y \cdot \sin(\theta) + z \cdot \cos(\theta) ]

Rotation about the Y-axis:​

[ x' = x \cdot \cos(\theta) + z \cdot \sin(\theta) ] [ z' = -x \cdot \sin(\theta) + z \cdot \cos(\theta) ]

Rotation about the Z-axis:​

[ x' = x \cdot \cos(\theta) - y \cdot \sin(\theta) ] [ y' = x \cdot \sin(\theta) + y \cdot \cos(\theta) ]

Example (in GLSL):​

vec3 rotateX(vec3 position, float angle) {
    float cosTheta = cos(angle);
    float sinTheta = sin(angle);
    return vec3(
        position.x,
        position.y * cosTheta - position.z * sinTheta,
        position.y * sinTheta + position.z * cosTheta
    );
}

3D Scaling​

Scaling in 3D changes the size of an object along all three axes.

Formula​

  • Scaling a point ((x, y, z)) by factors ((s_x, s_y, s_z)):

    [ x' = x \cdot s_x ] [ y' = y \cdot s_y ] [ z' = z \cdot s_z ]

Example (in GLSL):​

vec3 scale3D(vec3 position, vec3 scaleFactors) {
    return position * scaleFactors;
}

Matrices for Transformations​

In both 2D and 3D, transformations are often represented using matrices. By using matrix multiplication, we can combine multiple transformations efficiently.

2D Transformation Matrix​

A general 2D transformation matrix is:

\[
\begin{bmatrix}
s_x \cdot \cos(\theta) & -\sin(\theta) & t_x \\
\sin(\theta) & s_y \cdot \cos(\theta) & t_y \\
0 & 0 & 1
\end{bmatrix}
\]

### 3D Transformation Matrix
For 3D transformations, the matrix is expanded:

\[
\begin{bmatrix}
s_x \cdot \cos(\theta_y) & -\sin(\theta_z) & t_x \\
\sin(\theta_x) & s_y \cdot \cos(\theta_z) & t_y \\
\sin(\theta_z) & 0 & s_z \cdot \cos(\theta_x) \\
0 & 0 & 1
\end{bmatrix}
\]

Applications​

Transformations are used in various fields such as:

  • Computer Graphics: Rendering 3D models, game engines, and animations.
  • Robotics: Simulating motion and object manipulation.
  • Augmented Reality: Mapping virtual objects into real-world environments.
  • Data Visualization: Rotating and scaling data plots for better visualization.

By understanding 2D and 3D transformations, developers can create rich visual experiences and optimize the performance of their graphics applications.