Vectors in Computer Graphics


A vector is an entity that has magnitude and direction. A vector is composed of components. Each of these components represents a displacement along an axis. For example, a vector represented as (2,3,1) represents a displacement from the origin of two units along the x-axis; three units along the y-axis; one unit along the z-axis.

Vectors can be added and subtracted among themselves. Vectors can be multiplied and divived by a scalar. However, unlike real number multiplication, vectors can not be multiplied among themselves. Instead, two special type of vector multiplication exists called: Dot Product and Cross Product.

In this section, you will learn the most common vector operations used in computer graphics. You will learn how vectors are added and subtracted, how they are multiplied by scalars, how to calculate the dot and cross product, magnitude and norm.


A vector is composed of N number of components. The number of components determines the dimension of the vector. A three-dimensional vector contains three components defining a displacement along the x, y and z axis. Mathematically, a three-dimensional vector is defined as:

Graphically, a two-dimension vector u having a displacement of 4 units along the x-axis and 3 units along the y-axis is represented as follows:



In vector addition, each vector component are individually added to the corresponding component in the second vector. Vector addition is represented mathematically as:

For example, adding two three-dimensional vectors is done as follows:

Graphically, vector addition is represented as follows:


In vector subtraction, the components of the vectors are subtracted from each other. Vector subtraction is represented mathematically as:

For example, subtracting two three-dimensional vectors is done as follows:

Scalar multiplication/division

Geometrically, multiplying a vector with a scalar streches the length of a vector. Dividing a vector by a scalar has the opposite effect. To multiply a vector by a scalar, simply multiply each component by the scalar. Note that multiplying a vector by a positive scalar only affects its magnitude. However, multiplying it by a negative scalar affects its magnitude and reverses its direction. Scalar multiplication is represented mathematically as:

For example, scaling a vector by 3 is done as follows:

Graphically, vector scalar multiplication is represented as follows:

Vector Product

Unlike real numbers, vectors do not have a single multiplication operation. They have two distinct type of product operations; the dot product and cross product. The _dot product_produces a scalar and is mainly use to determine the angle between vectors. Thecross product produces a vector perpendicular to the multiplicand and multiplier vectors.

Dot Product

The Dot Product is a vector operation that calculates the angle between two vectors. The dot product is calculated in two different ways.

Version 1

In the above equation, information about the angle between the vectors is missing. However, the result from this equation can tell us the direction of each vector. For example, if the dot product is equal to 1, it means that both vectors have the same direction. If the dot product is 0, it means that both vectors are perpendicular on each other. Finally, if the dot product is -1, it means that both vectors are heading in opposite directions.

Version 2

If we are interested in finding the angle between two vectors, the dot-product equation below can be used.

Cross Product

Two vectors produces a plane. A cross product operation produces a vector that is perpendicular to both vectors. The cross product of two vectors is calculated as follows:

It is important to remember that a cross product can only be calculated with vectors in three-dimensions. If vectors reside in two-dimensional space, and the cross product is required, the vectors must be converted to three-dimensional vectors.

Magnitude of a vector

A vector magnitude represents the length of a vector. The length of a vector is calculated as follows:

For example, the magnitude of vector u is done as follows:

Graphically, a vector's magnitude is the hypothenuse of the triangle formed in the image below:

Unit vector

A very useful concept in computer graphics is what is known as a unit vector. A unit vector is a vector with length of 1 unit. The process of convertion a non-unit vector to a unit vector is called Normalization. To normalize a vector, each component is divided by the length of the vector. Mathematically this is represented as:

The normalization of vector u is done as follows:

Hope this helps.

Harold Serrano

Computer Graphics Enthusiast. Currently developing a 3D Game Engine.