Coordinate transformations

For description of 3D space we will use cartesian coordinate system, where points are uniquely determined by their three cartesian coordinates (x, y,z). There are also other systems: cylindrical and spherical.

It is convenient to represent affine coordinate transformations in the form of matrices. They are used by major 3D APIs such as OpenGl. To transform coordinates in 3D space, we have to use a 4x4 matrix and stretched 4d vector with fourth coordinate d=1, i.e. v(x,y,z,1).

You can add a transformation to another by multiplying their matrices. This way you can get any transformation using:

translation
scalling
rotation

You can use the transformation matrix in 2D graphics also. Just remove third column and third row from matrix for 3D graphics.

There is Java source code related with this article (MatrixFloat and LinearAlgebra classes).

compute transformed coordinates

So how to compute transformed coordinates? Just multiply transformation matrix and vector that represent a point. As result you will get vector with transformed coordinates.

But you can write vector as column, i.e 1x4 matrix, or as row, i.e. 4x1 matrix.

The first case is called column-major order or notation. Accordingly, the matrix is called the column-major matrix. To compute the transformed coordinates, we use a matrix as the first cofactor and a vector as the second cofactor.

v' = M * v =

|m_x0 m_x1 m_x2 m_x3|
|m_y0 m_y1 m_y2 m_y3|
|m_z0 m_z1 m_z2 m_z3|
|m_d0 m_d1 m_d2 m_d3|

|x|
|y|
|z|
|d|

{
  x' =  m_x0*x + m_x1*y + m_x2*z + m_x3*d
  y' =  m_y0*x + m_y1*y + m_y2*z + m_y3*d
  z' =  m_z0*x + m_z1*y + m_z2*z + m_z3*d  
  d' = ...	
}

The second case is called row-major order or notation. Accordingly, the matrix is called the row-major matrix. To compute the transformed coordinates, we use a vector as the first cofactor and a matrix as the second cofactor. In other words we multiply in reverse order compared to column-major notation.

Use transpose to convert your column-major matrix to row-major matrix and vice versa.

For example, OpenGL documentation uses column-major notation, but in code uses row-major notation, that confuse programmers.

In this article a column-major notation is used.

matrix composition

As mention above, you can accumulate transformation matrices in one matrix using multiplication.

Let's we want accumulate two transformations translation then rotation. Denote their matrices as T and R.

column-major order

// translate
v' = T * v
// rotate
v'' = R * v'
  or
v'' = R * (T * v) = (R * T) * v

row-major order

// translate
v' = v * T
// rotate
v'' = v' * R
  or
v'' =  (v * T) * R = v * (T * R)

As you can see, when column-major order is used, we need to multiply matrices in reverse order instead of what we want. For example, suppose you want to implement pivot around a point. And you are using api like OpenGL or html canvas. Then in the code you have to add the matrices from step 3, step 2 and finally step 1.

// rotate canvas around center
// by 90 degree (snippet)
ctx.save();
ctx.translate(img.width/2, img.height / 2); // step 3
ctx.rotate(Math.PI / 2); // step 2
ctx.translate(-img.width/2, -img.height / 2); // step 1
ctx.drawImage(img,0,0);  
ctx.restore();

identity matrix

The identity matrix is the identity transformation matrix, i.e. new coordinates are equal to old ones. It is used for the initial transformation.

    | 1 0 0 0|
I=  | 0 1 0 0|
    | 0 0 1 0|
    | 0 0 0 1|

translation matrix

Suppose we want to translate point (x, y, z) on values a_x, a_y, a_z along each axis. Then new coordinates can be computed as

x' = x + a_x
y' = y + a_y
z' = z + a_z

So matrix will be

|1 0 0 a_x|
|0 1 0 a_y|
|0 0 1 a_z|
|0 0 0 1 |

scaling matrix

Suppose we want to scale shape on s_x, s_y and s_z values along each axis. Then new coordinates can be computed as

x' = s_x*x
y' = s_y*y
z' = s_z*z

So matrix will be

|s_x 0 0 0|
|0 s_y 0 0|
|0 0 s_z 0|
|0 0 0 1 |

There is special case when s = -1, that represent reflection across axis. For example, if s_x = -1, than shape to be mirrowed at the yz coordinate plane in x direction.

scale about arbitrary center

Suppose we want to scale shape on s_x, s_y and s_z values along each axis. And let p(x,y,z) is center of scaling.

To get the transformation matrix you need perform following steps:

translate the center to the origin, i.e. translate on -p_x, -p_y, -p_z values
scale on s_x, s_y and s_z values
reverse step 1, i.e. translate on p_x, p_y, p_z values

rotation matrix

Suppose we want to rotate the point (x, y, z) around the z-axis by an angle α. Then the new coordinates can be calculated as

x' = x*cos(α) - y*sin(α)
y' = x*sin(α) + y*cos(α)
z' = z

So matrix will be

|cos(α) -sin(α) 0 0|
|sin(α)  cos(α) 0 0|
| 0       0     1 0|
| 0       0     0 1|

Similarly the rotation matrices around x-axis and y-axis.

     around x-axis         around y-axis    
| 1   0      0      0|    |cos(α)  0  sin(α) 0|
| 0 cos(α) -sin(α)  0|,   |  0     1   0     0|
| 0 sin(α)  cos(α)  0|    |-sin(α) 0  cos(α) 0|
| 0   0      0      1|    |  0     0   0     1|

The sign - of sin() corresponds to the right-hand coordinate system.

rotation around an arbitrary axis

Suppose we have vector υ with normalized coordinates (υ_x, υ_y, υ_z) and we want rotate point around this vector by an angle α.

To get the transformation matrix we will perform following steps:

rotate the given axis and the point such that the axis lies in one of the coordinate planes (xy, yz or zx)
rotate the given axis and the point such that the axis is aligned with one of the two coordinate axes for that particular coordinate plane (x, y or z)
use basic rotation matrix to rotate the point depending on the coordinate axis with which the rotation axis is aligned
reverse rotate the axis-point pair such that it attains the final configuration as that was in step 2
reverse rotate the axis-point pair which was done in step 1

If you will perform steps by hands on paper, as result you will have a matrix

|t*υ_x²+cos(α)        t*υ_x*υ_y-sin(α)*υ_z    t*υ_x*υ_z+sin(α)*υ_y   0|
|t*υ_x*υ_y+sin(α)*υ_z    t*y²+cos(α)         t*υ_y*υ_z-sin(α)*υ_x   0|
|t*υ_x*υ_z-sin(α)*υ_y    t*υ_y*υ_z+sin(α)*υ_x    t*υ_z²+cos(α)       0|
|    0                  0                      0            1|
where t = 1 - cos(α)

rotation around arbitrary point

Suppose we want rotate some point around pivot point p with coordinates (p_x, p_y, p_z).

To get the transformation matrix you need perform following steps:

translate the pivot point to the origin, i.e. translate on -p_x, -p_y, -p_z values
use basic rotation matrix to rotate the point by an angle α
reverse step 1, i.e. translate on +p_x, +p_y, +p_z values

rotate around center

There is a special case of rotation around arbitrary point, when you rotate whole canvas on 90 degree around center. After rotation you can wish that top left corner of rotated image was at point (0,0).

Let the canvas be sized (w, h). After rotation, the size will be (h, w).

translate on -w/2, -h/2 values
rotate on 90°
translate on +w/2, +h/2 values (reverse step 1)
translate on (h-w)/2, (w-h)/2 align rotated image to point (0,0)

shear matrices

It is also called as deformation.

Suppose we want shear shape along x-axis and other axis on sh_x, sh_y, sh_z amounts. Then matrix will be look like this

| 1   sh_y   sh_z  0|
|sh_x   1    sh_z  0|
|sh_x  sh_y   1    0|
| 0   0     0    1|

You also can specify shear as an angle α. In this case matrix will be look like this

shear along x-axis
| 1 ctg(α) 0  0|
| 0   1    0  0|
| 0   0    1  0|
| 0   0    0  1|

projection matrices

The projection matrix is used to project all points from the bounded volume onto a plane.

There are two types of projection: perspective and orthogonal. In perspective projection far objects look smaller, and nearby objects larger.

One way to bound volume is to use six planes:

r - the right plane
l - the left plane
t - the top plane
b - the bottom plane
f - the far plane
n - the near plane to which we will project

perspective projection
| 2*n/(r-l)  0          (r+l)/(r-l)    0          |
|   0       2*n/(t-b)   (t+b)/(t-b)    0          |
|   0       0           (f+n)/(n-f)   -2*f*n/(f-n)|
|   0       0          -1             0           |

orthogonal projection
| 2/(r-l)   0          0         (r+l)/(r-l)|
|   0      2/(t-b)     0         (t+b)/(t-b)| 
|   0       0        -2*f/(f-n)  (f+n)/(f-n)|
|   0       0          0             1      |

Other way to bound volume is to use near/far planes and vertical field of view:

n - the near plane to which we will project
f - the far plane
ar - the ratio between the width and the height of the rectangular area which will be the target of projection
α - vertical field of view (FOVy on image), the vertical angle of the camera through which we are looking at the world

In this case, the matrix will look like this

perspective projection
| 1/(ar*tan(α/2))  0             0                 0     |
|   0            1/tan(α/2)      0                 0     |
|   0              0        (-n-f)/(n-f)     -2*f*n/(n-f)|
|   0              0             1                 0     |

Web frontend

Web backend

JVM

JS

Programming

Mobiles

Graphics

Others

Math

Coordinate transformations

compute transformed coordinates

matrix composition

column-major order

row-major order

identity matrix

translation matrix

scaling matrix

scale about arbitrary center

rotation matrix

rotation around an arbitrary axis

rotation around arbitrary point

rotate around center

shear matrices

projection matrices