Basic 3D Math: Vectors

3D Graphics is all about Vectors, Matrices and Trigonometry – so you need at least a Basic understanding of how to accomplish basic tasks with this things. I will try to show you some Basic operations you need while programming OpenGL. As i am not a mathematican i will probably often explain things without the correct mathematical words.

Part 1: Vectors

A Vector is a mathematical entity which consists of two or more real numbers – as a programmer, imagine the vector as an array of floats. Let’s take a look on how a vector looks like:

vec{v} = [matrix{1}{4}{5 6 7 1}]

Here the vector “v” has 4 components: 5, 6, 7 and 1. In 3D Graphics you will use 3 or 4 component vectors most of the time:

  • 3 Component vectors for positions and directions
  • 4 Component vectors for performing transformations using matrices (more on that later)

As stated above, vectors can be used to represent positions and directions. Below you see a cartesian coordinate system with a vectors:

The Vector v1 with the components [2,7,2] represents the direction (go 2x, 7y and 2z from the origin) and a location (i am at 2x,7y,2z). In the above picture it’s a special case that the directional and positional vector is the same because we start at the origin. Imagine another positional vector with the components [4,0,4]: To get to [2,7,2] you need a directional vector with [-2,7-2].

Positional Vectors are mostly used for the positions of vertices, directional vectors for light calculations (just to name two of the many usages)

As with most other mathematical entities you can perform various operations on vectors:

  • Multiply with a scalar
  • Add and Subtract another vector
  • Multiply with another Vector
    • There are two ways to multiply a vector with another vector: One that yields another vector (“Cross Product”) and one that yields a scalar (“Dot Product”)

Multiplication with a Scalar

The multiplication of a vector with a scalar is a simple operation: Just multiply each component with a real number:

3 * [matrix{1}{3}{4 5 6}] = [matrix{1}{3}{12 15 18}]

Geometrically, this can be seen as a scaling of the Vector:

On the Left, the Vector A has a value of [3,4]. On the right it has been multiplied with the scalar value of 1.5 – now the vector has the value of [4.5,6]

Add and Subtract another Vector

Assume you have two Vectors:

vec{v1} = [matrix{1}{2}{2 5}] and vec{v2} = [matrix{1}{2}{5 2}] – these two vectors are shown below:

If you add these two vectors together, you simply do a component wise addition of the elements:

vec{v3} = [matrix{1}{2}{2+5 5+2}] = [matrix{1}{2}{7 7}]

Geometrically this can be seen as the moving of V2 so that it’s tail is positioned at the head of V1:

The same applies to subtraction – just in reverse order. Assume vec{v3}=[matrix{1}{2}{7 7}] and vec{V2}=[matrix{1}{2}{5 2}]. When subtracting V2 from V3 we create vec{v1}=[matrix{1}{4}{2 5}]. Subtraction is simply a component wise subtraction of each element in V2 from V3. Take a look at the visualization:

As you can see, if we position V2 in Reverse order on the head of V3, we get V1.

Multiplication with another Vector – The “Dot Product”

As stated above there are two ways to multiply a vector with another one – the first one we will cover is the “Dot Product” which can be used to get the angle between two vectors. Imagine the following situation:

  • You have two vectors in space (2D or 3D) and need to know the angle between those two for Lighting calculation

The Formula to calculate the angle α is formally:

alpha = arccos({V1 . V2}/{delim{vert}V1{vert} delim{vert}V2{vert}})

But what does that all mean?

{V1 . V2} is the actual Dot Product which is calculated by simply multiplying each component of V1 with the corresponding component of V2 – in our example:

(2*7)+(5*1)=14+5=19

delim{vert}V1{vert} and delim{vert}V2{vert} denote the length of the Vector which is calculated with:

delim{vert}V1{vert}=sqrt(2^2 + 5^2)=5,385 and delim{vert}V2{vert}=sqrt(7 ^2 + 1^2)=7,071

This is actually Pythagoras law if you haven’t noticed :-) So now we have everything in place to perform the actual calculation:

alpha = arccos(19/{5,385*7,071})=1.048467256741792

Doesn’t seem like an angle, didn’t it? The result is in Radians but we are used to angles in Degrees. So we have to perform a last calculation to get Degrees:

alpha = 1.048 (180/pi) = 60.045 Degrees

This all applies to 3D Vectors as well, i’ve just used 2D as it’s more easily to get it at the first. Sorry for being gotten a little bit Mathematical this time, but it was necessary.

Multiplication with Another Vector – The “Cross Product”

The second way of multiplying Vectors is the cross Product which is only useful in 3D Space. It’s result ist another vector which is perpendicular to the plane defined by two other Vectors. First of all – what’s a Plane? Take a look at the following picture:

The Vectors V1 and V2 define a Orientation in Space (the Vectors are Directional ones, not positional ones – their tail is at the origin and their value shows the direction). The Plane itself has no size, it’s just an abstract thing.

Now let’s take a look on how to cross product looks like visually:

So why is V3 so big? Because normally the vector yielded from a Cross Product operation ist normalized – what that means is shown later :-)

V1 x V2 = (matrix{3}{1}{V1_y*V2_z-V1_z*V2_y V1_z*V2_x-V1_x*V2_z V1_x*V2_y-V1_y*V2_x})

which looks actually more complex than it is in reality:

(matrix{3}{1}{0 0 4}) x (matrix{3}{1}{4 0 0}) = (matrix{3}{1}{0*0-4*0 4*4-0*0 0*0-0*4}) = (matrix{3}{1}{{0} {16} {0}})

So we have a gotten a new Vector: vec{v3}=matrix{1}{3}{0 16 0} which is really perpendicular to our plane defined by V1 and V2. In almost all situations you will “normalize” your yielded vector – normalization means that each component of the vector is divided by the length of the vector – the result is a vector of length 1:

First of all we need to calculate the length of the vector (shown above in the section about the Dot Product)  – in this case the vector has a length of 16. Now we divide every component of the vector by 16 and get a new one:

vec{v3} = matrix{1}{3}{0 1 0}

Formally, the process of normalizing a vector looks like:

vec{v}{prime} = [matrix{1}{3}{{v_x/delim{vert}{v}{vert}} {v_y/delim{vert}{v}{vert}} {v_z/delim{vert}{v}{vert}}}]