What is a vector? A vector is an n-tuple of numbers. It represents a displacement measured as a magnitude and a direction. Each element of a vector is usually expressed as a subscript, such as (V0, V1, V2, … VN). In the context of games, vectors usually have two, three, or four components.

For example, a three-dimensional vector measures displacement on three unique axes: x, y, and z. Elements of vectors are often subscripted with the axis they represent, rather than an index. (VX, VY, VZ) and (V0, V1, V2) are used interchangeably.

When visualizing vectors, they are often drawn as arrows. The position of the base of an arrow does not matter because vectors measure displacement, not a position. The end of the arrow follows the displacement of the arrow on each axis.

For example, all of the arrows in the following figure represent the same vector:

Figure 2.1: Vector (2, 5) drawn in multiple locations

Each arrow has the same length and points in the same direction, regardless of where it is positioned. In the next section, you will start to implement the vector structure that will be used throughout the rest of this book.

Vectors will be implemented as structures, not classes. The vector struct will contain an anonymous union that allows the vector's components to be accessed as an array or as individual elements.

To declare the vec3 structure and the function headers, create a new file, vec3.h. Declare the new vec3 structure in this file. The vec3 struct needs three constructors—a default constructor, one that takes each component as an element, and one that takes a pointer to a float array:

#ifndef _H_VEC3_
#define _H_VEC3_
struct vec3 {
    union {
        struct  {
            float x;
            float y;
            float z;
        };
        float v[3];
    };
    inline vec3() : x(0.0f), y(0.0f), z(0.0f) { }
    inline vec3(float _x, float _y, float _z) :
        x(_x), y(_y), z(_z) { }
    inline vec3(float *fv) :
        x(fv[0]), y(fv[1]), z(fv[2]) { }
};
#endif 

The anonymous union in the vec3 struct allows data to be accessed using .x, .y, and .z notation, or as a contiguous array using .v. Before moving on to implementing functions that work on the vec3 struct, you need to consider comparing floating point numbers and whether or not to use an epsilon value.

Epsilon

Comparing floating point numbers is difficult. Instead of comparing two floating point numbers directly, you need to compare them using an epsilon. An epsilon is an arbitrarily small positive number that is the minimum difference two numbers need to have to be considered different numbers. Declare an epsilon constant in vec3.h:

#define VEC3_EPSILON 0.000001f

Important note:

You can learn more about floating point comparison at https://bitbashing.io/comparing-floats.html

With the vec3 structure created and the vec3 epsilon defined, you are ready to start implementing some common vector operations. In the next section, you're going to start by learning and implementing several component-wise operations.

Several vector operations are just component-wise operations. A component-wise operation is one that you perform on each component of a vector or on like components of two vectors. Like components are components that have the same subscript. The component-wise operations that you will implement are as follows:

• Vector addition
• Vector subtraction
• Vector scaling
• Multiplying vectors
• Dot product

Let's look at each of these in more detail.

Vector addition

Adding two vectors together yields a third vector, which has the combined displacement of both input vectors. Vector addition is a component-wise operation; to perform it, you need to add like components.

To visualize the addition of two vectors, draw the base of the second vector at the tip of the first vector. Next, draw an arrow from the base of the first vector to the tip of the second vector. This arrow represents the vector that is the result of the addition:

Figure 2.2: Vector addition

To implement vector addition in code, add like components of the input vectors. Create a new file, vec3.cpp. This is where you will define functions related to the vec3 struct. Don't forget to include vec3.h. Overload the + operator to perform vector addition. Don't forget to add the function signature to vec3.h:

vec3 operator+(const vec3 &l, const vec3 &r) {
    return vec3(l.x + r.x, l.y + r.y, l.z + r.z);
}

When thinking about vector addition, remember that a vector represents a displacement. When adding two vectors, the result is the combined displacement of both input vectors.

Vector subtraction

As with adding vectors, subtracting vectors is also a component-wise operation. You can think of subtracting vectors as adding the negative of the second vector to the first vector. When visualized as an arrow, subtraction points from the tip of the second vector to the tip of the first one.

To visually subtract vectors, place both vectors so they share the same origin. Draw a vector from the tip of the second arrow to the tip of the first one. The resulting arrow is the subtraction result vector:

Figure 2.3: Vector subtraction

To implement vector subtraction, subtract like components. Implement the subtraction function by overloading the - operator in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 operator-(const vec3 &l, const vec3 &r) {
    return vec3(l.x - r.x, l.y - r.y, l.z - r.z);
}

The steps and logic are very similar to vector addition. It might help to think of vector subtraction as adding a negative vector.

Scaling vectors

When a vector is scaled, it only changes in magnitude, not direction. As with addition and subtraction, scaling is a component-wise operation. Unlike addition and subtraction, a vector is scaled by a scalar, not another vector.

Visually, a scaled vector points in the same direction as the original vector, but it has a different length. The following figure shows two vectors: (2, 1) and (2, 4). Both vectors share the same direction, but the magnitude of the second vector is longer:

Figure 2.4: Vector scaling

To implement vector scaling, multiply every component of the vector by the given scalar value.

Implement the scale function by overloading the * operator in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 operator*(const vec3 &v, float f) {
    return vec3(v.x * f, v.y * f, v.z * f);
}

Negating a vector can be done by scaling the vector by -1. When negating a vector, the vector maintains its magnitude but changes its direction.

Multiplying vectors

Vector multiplication can be considered a non-uniform scale. Instead of scaling every component of a vector by a scalar, to multiply two vectors, you scale every component of a vector by the like component of another vector.

You can implement vector multiplication by overloading the * operator in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 operator*(const vec3 &l, const vec3 &r) {
    return vec3(l.x * r.x, l.y * r.y, l.z * r.z);
}

The result generated by multiplying two vectors will have a different direction and magnitude.

Dot product

The dot product is used to measure how similar two vectors are. Given two vectors, the dot product returns a scalar value. The result of the dot product has the following properties:

• It is positive if the vectors point in the same direction.
• It is negative if the vectors point in opposite directions.
• It is 0 if the vectors are perpendicular.

If both input vectors have a unit length (you will learn about unit length vectors in the Normal vectors section of this chapter), the dot product will have a range of -1 to 1.

The dot product between two vectors, A and B, is equal to the length of A multiplied by the length of B multiplied by the cosine of the angle between the two vectors:

The easiest way to calculate the dot product is to sum the products of like components in the input vectors:

Implement the dot function in vec3.cpp. Don't forget to add the function definition to vec3.h:

float dot(const vec3 &l, const vec3 &r) {
    return l.x * r.x + l.y * r.y + l.z * r.z;
}

The dot product is one of the most used operations for video games. It's often used to check angles and in lighting calculations.

With the dot product, you have implemented the common component-wise operations of vectors. Next, you will learn about some of the non-component-wise operations that can be performed on vectors.

Not all vector operations are component-wise; some operations require more math. In this section, you are going to learn how to implement common vector operations that are not component-based. These operations are as follows:

• How to find the length of a vector
• What a normal vector is
• How to normalize a vector
• How to find the angle between two vectors
• How to project vectors and what rejection is
• How to reflect vectors
• What the cross product is and how to implement it

Let's take a look at each one in more detail.

Vector length

Vectors represent a direction and a magnitude; the magnitude of a vector is its length. The formula for finding the length of a vector comes from trigonometry. In the following figure, a two-dimensional vector is broken down into parallel and perpendicular components. Notice how this forms a right triangle, with the vector being the hypotenuse:

Figure 2.5: A vector broken down into parallel and perpendicular components

The length of the hypotenuse of a right triangle can be found with the Pythagorean theorem, A2 + B2 = C2. This function extends to three dimensions by simply adding a Z component—X2 + Y2 + Z2 = length2.

You may have noticed a pattern here; the squared length of a vector equals the sum of its components. This could be expressed as a dot product—Length2(A) = dot(A, A):

Important note:

Finding the length of a vector involves a square root operation, which should be avoided when possible. When checking the length of a vector, the check can be done in squared space to avoid the square root. For example, if you wanted to check if the length of vector A is less than 5, that could be expressed as (dot(A, A) < 5 * 5).

1. To implement the square length function, sum the result of squaring each component of the vector. Implement the lenSq function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

   float lenSq(const vec3& v) {
       return v.x * v.x + v.y * v.y + v.z * v.z;
   }

2. To implement the length function, take the square root of the result of the square length function. Take care not to call sqrtf with 0. Implement the lenSq function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

   float len(const vec3 &v) {
       float lenSq = v.x * v.x + v.y * v.y + v.z * v.z;
       if (lenSq < VEC3_EPSILON) {
           return 0.0f;
       }
       return sqrtf(lenSq);
   }

   Important note:

   You can find the distance between two vectors by taking the length of the difference between them. For example, float distance = len(vec1 - vec2).

Normalizing vectors

A vector with a length of 1 is called a normal vector (or unit vector). Generally, unit vectors are used to represent a direction without a magnitude. The dot product of two unit vectors will always fall in the -1 to 1 range.

Aside from the 0 vector, any vector can be normalized by scaling the vector by the inverse of its length:

1. Implement the normalize function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

   void normalize(vec3 &v) {
       float lenSq = v.x * v.x + v.y * v.y + v.z * v.z;
       if (lenSq < VEC3_EPSILON) { return; }
       float invLen = 1.0f / sqrtf(lenSq);    
       v.x *= invLen;
       v.y *= invLen;
       v.z *= invLen;
   }

2. Implement the normalized function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

   vec3 normalized(const vec3 &v) {
       float lenSq = v.x * v.x + v.y * v.y + v.z * v.z;
       if (lenSq < VEC3_EPSILON) { return v; }
       float invLen = 1.0f / sqrtf(lenSq);
       return vec3(
           v.x * invLen,
           v.y * invLen,
           v.z * invLen
       );
   }

The normalize function takes a reference to a vector and normalizes it in place. The normalized function, on the other hand, takes a constant reference and does not modify the input vector. Instead, it returns a new vector.

The angle between vectors

If two vectors are of unit length, the angle between them is the cosine of their dot product:

If the two vectors are not normalized, the dot product needs to be divided by the product of the length of both vectors:

To find the actual angle, not just the cosine of it, we need to take the inverse of the cosine on both sides, which is the arccosine function:

Implement the angle function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

float angle(const vec3 &l, const vec3 &r) {
    float sqMagL = l.x * l.x + l.y * l.y + l.z * l.z;
    float sqMagR = r.x * r.x + r.y * r.y + r.z * r.z;
    if (sqMagL<VEC3_EPSILON || sqMagR<VEC3_EPSILON) {
        return 0.0f;
    }
    float dot = l.x * r.x + l.y * r.y + l.z * r.z;
    float len = sqrtf(sqMagL) * sqrtf(sqMagR);
    return acosf(dot / len);
}

Important note:

The acosf function returns angles in radians. To convert radians to degrees, multiply by 57.2958f. To convert degrees to radians, multiply by 0.0174533f.

Vector projection and rejection

Projecting vector A onto vector B yields a new vector that has the length of A in the direction of B. A good way to visualize vector projection is to imagine that vector A is casting a shadow onto vector B, as shown:

Figure 2.6: Vector A casting a shadow onto vector B

To calculate the projection of A onto B (projB A), vector A must be broken down into parallel and perpendicular components with respect to vector B. The parallel component is the length of A in the direction of B—this is the projection. The perpendicular component is the parallel component subtracted from A—this is the rejection:

Figure 2.7: Vector projection and rejection showing parallel and perpendicular vectors

If the vector that is being projected onto (in this example, vector B) is a normal vector, then finding the length of A in the direction of B is a simple dot product between A and B. However, if neither input vector is normalized, the dot product needs to be divided by the length of vector B (the vector being projected onto).

Now that the parallel component of A with respect to B is known, vector B can be scaled by this component. Again, if B wasn't of unit length, the result will need to be divided by the length of vector B.

Rejection is the opposite of projection. To find the rejection of A onto B, subtract the projection of A onto B from vector A:

1. Implement the project function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

   vec3 project(const vec3 &a, const vec3 &b) {
       float magBSq = len(b);
       if (magBSq < VEC3_EPSILON) {
           return vec3();
       }
       float scale = dot(a, b) / magBSq;
       return b * scale;
   }

2. Implement the reject function in vec3.cpp. Don't forget to declare this function in vec3.h:

   vec3 reject(const vec3 &a, const vec3 &b) {
       vec3 projection = project(a, b);
       return a - projection;
   }

Vector projection and rejection are generally used for gameplay programming. It is important that they are implemented in a robust vector library.

Vector reflection

Vector reflection can mean one of two things: a mirror-like reflection or a bounce-like reflection. The following figure shows the different types of reflections:

Figure 2.8: A comparison of the mirror and bounce reflections

The bounce reflection is more useful and intuitive than the mirror reflection. To make a bounce projection work, project vector A onto vector B. This will yield a vector that points in the opposite direction to the reflection. Negate this projection and subtract it twice from vector A. The following figure demonstrates this:

Figure 2.9: Visualizing a bounce reflection

Implement the reflect function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 reflect(const vec3 &a, const vec3 &b) {
    float magBSq = len(b);
    if (magBSq < VEC3_EPSILON) {
        return vec3();
    }
    float scale = dot(a, b) / magBSq;
    vec3 proj2 = b * (scale * 2);
    return a - proj2;
}

Vector reflection is useful for physics and AI. We won't need to use reflection for animation, but it's good to have the function implemented in case it is needed.

Cross product

When given two input vectors, the cross product returns a third vector that is perpendicular to both input vectors. The length of the cross product equals the area of the parallelogram formed by the two vectors.

The following figure demonstrates what the cross product looks like visually. The input vectors don't have to be 90 degrees apart, but it's easier to visualize them this way:

Figure 2.10: Visualizing the cross product

Finding the cross product involves some matrix math, which will be covered in more depth in the next chapter. For now, you need to create a 3x3 matrix, with the top row being the result vector. The second and third rows should be filled in with the input vectors. The value of each component of the result vector is the minor of that element in the matrix.

What exactly is the minor of an element in a 3x3 matrix? It's the determinant of a smaller, 2x2 sub-matrix. Assuming you want to find the value of the first component, ignore the first row and column, which yields a smaller 2x2 sub-matrix. The following figure shows the smaller sub-matrix for each component:

Figure 2.11: The submatrix for each component

To find the determinant of a 2x2 matrix, you need to cross multiply. Multiply the top-left and bottom-right elements, then subtract the product of the top-right and bottom-left elements. The following figure shows this for each element of the resulting vector:

Figure 2.12: The determinant of each component in the result vector

Implement the cross product in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 cross(const vec3 &l, const vec3 &r) {
    return vec3(
        l.y * r.z - l.z * r.y,
        l.z * r.x - l.x * r.z,
        l.x * r.y - l.y * r.x
    );
}

The dot product has a relationship to the cosine of the angle between two vectors and the cross product has a relationship to the sine of the angle between the two vectors. The length of the cross product between the two vectors is the product of both vectors, lengths, scaled by the sine of the angle between them:

In the next section, you will learn how to interpolate between vectors using three different techniques.

Two vectors can be interpolated linearly by scaling the difference between the two vectors and adding the result back to the original vector. This linear interpolation is often abbreviated to lerp. The amount to lerp by is a normalized value between 0 and 1; this normalized value is often represented by the letter t. The following figure shows lerp between two vectors with several values for t:

Figure 2.13: Linear interpolation

When t = 0, the interpolated vector is the same as the starting vector. When t = 1, the interpolated vector is the same as the end vector.

Implement the lerp function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 lerp(const vec3 &s, const vec3 &e, float t) {
    return vec3(
        s.x + (e.x - s.x) * t,
        s.y + (e.y - s.y) * t,
        s.z + (e.z - s.z) * t
    );
}

Linearly interpolating between two vectors will always take the shortest path from one vector to another. Sometimes, the shortest path isn't the best path; you may need to interpolate between two vectors along the shortest arc, instead. Interpolating on the shortest arc is called a spherical linear interpolation (slerp). The following figure shows the difference between the slerp and lerp processes for several values of t:

Figure 2.14: Comparing slerp and lerp

To implement slerp, find the angle between the two input vectors. Assuming the angle is known, the formula for slerp is as follows

Implement the slerp function in vec3.cpp. Don't forget to add the function declaration to vec3.h. Take care of when the value of t is close to 0, as slerp will yield unexpected results. When the value of t is close to 0, fall back on lerp or normalized lerp (nlerp) (which will be covered next):

vec3 slerp(const vec3 &s, const vec3 &e, float t) {
    if (t < 0.01f) {
        return lerp(s, e, t);
    }
    vec3 from = normalized(s);
    vec3 to = normalized(e);
    float theta = angle(from, to);
    float sin_theta = sinf(theta);
    float a = sinf((1.0f - t) * theta) / sin_theta;
    float b = sinf(t * theta) / sin_theta;
    return from * a + to * b;
}

The last interpolation method to cover is nlerp. nlerp approximates slerp. Unlike slerp, nlerp is not constant in velocity. nlerp is much faster than slerp and easier to implement; just normalize the result of lerp. The following figure compares lerp, slerp, and nlerp, where t = 0.25:

Figure 2.15: Comparing lerp, slerp, and nlerp

Implement the nlerp function in vec3.cpp. Don't forget to add the function declaration to vec3.h:

vec3 nlerp(const vec3 &s, const vec3 &e, float t) {
    vec3 linear(
        s.x + (e.x - s.x) * t,
        s.y + (e.y - s.y) * t,
        s.z + (e.z - s.z) * t
    );
    return normalized(linear);
}

Generally, nlerp is a better choice than slerp. It's a very close approximation and much cheaper to calculate. The only time it makes sense to use slerp instead is if constant interpolation velocity is required. Throughout this book, you will be using lerp and nlerp to interpolate between vectors.

In the next section, you will learn how to use an epsilon value to compare vectors for equality and inequality.

The last operation that needs to be implemented is vector comparison. Comparison is a component-wise operation; each element must be compared using an epsilon. Another way to measure whether two vectors are the same is to subtract them. If they were equal, subtracting them would yield a vector with no length.

Overload the == and != operators in vec3.cpp. Don't forget to add the function declarations to vec3.h:

bool operator==(const vec3 &l, const vec3 &r) {
    vec3 diff(l - r);
    return lenSq(diff) < VEC3_EPSILON;
}
bool operator!=(const vec3 &l, const vec3 &r) {
    return !(l == r);
}

Important note:

Finding the right epsilon value to use for comparison operations is difficult. In this chapter, you declared 0.000001f as the epsilon. This value is the result of some trial and error. To learn more about comparing floating point values, check out https://bitbashing.io/comparing-floats.html.

In the next section, you will implement vectors with two and four components. These vectors will only be used as a convenient way to store data; they won't actually need any math operations implemented on them.

At some point later on in this book, you will need to utilize two- and four-component vectors as well. The two- and four-component vectors don't need any mathematical functions defined as they will be used exclusively as containers used to pass data to the GPU.

Unlike the three-component vector you have implemented, the two- and four-component vectors need to exist as both integer and floating point vectors. To avoid duplicating code, both structures will be implemented using a template:

1. Create a new file, vec2.h, and add the definition of the vec2 struct. All the vec2 constructors are inline; there is no need for a cpp file. The TVec2 struct is templated and typedef is used to declare vec2 and ivec2:

   template<typename T>
   struct TVec2 {
       union {
           struct {
               T x;
               T y;
           };
           T v[2];
       };
       inline TVec2() : x(T(0)), y(T(0)) { }
       inline TVec2(T _x, T _y) :
           x(_x), y(_y) { }
       inline TVec2(T* fv) :
           x(fv[0]), y(fv[1]) { }
   };
   typedef TVec2<float> vec2;
   typedef TVec2<int> ivec2;

2. Similarly, create a vec4.h file, which will hold the vec4 structure:

   template<typename T>
   struct TVec4 {
       union {
           struct {
               T x;
               T y;
               T z;
               T w;
           };
           T v[4];
       };
       inline TVec4<T>(): x((T)0),y((T)0),z((T)0),w((T)0){}
       inline TVec4<T>(T _x, T _y, T _z, T _w) :
           x(_x), y(_y), z(_z), w(_w) { }
       inline TVec4<T>(T* fv) :
           x(fv[0]), y(fv[ ]), z(fv[2]), w(fv[3]) { }
   };
   typedef TVec4<float> vec4;
   typedef TVec4<int> ivec4;
   typedef TVec4<unsigned int> uivec4;

The declaration of the vec2, ivec2, vec4, and ivec4 structs are all very similar to the declaration of the vec3 struct. All these structures can be accessed using component subscripts or as a pointer to a linear array of memory. They all have similar constructors, as well.

In this chapter, you have learned the vector math required to create a robust animation system. Animation is a math-heavy topic; the skills you have learned in this chapter are required to complete the rest of this book. You implemented all the common vector operations for three-component vectors. The vec2 and vec4 structures don't have a full implementation like vec3, but they are only used to send data to the GPU.

In the next chapter, you will continue to learn more about game-related math by learning about matrices.