6

Understanding
Vector and Matrix

Welcome to Chapter 6! In the previous chapter, we added a simple UI with elements to show the status of the program and timings for some of the functions, plus some simple controls to change the behavior of the program.

In this chapter, we will explore both the mathematical elements and the computer data types vector and matrix. We start with a review of the basic properties of each type and the operations between the same data types, as well as operations between vectors and matrices. The focus here is on the execution of these operations using the OpenGL Mathematics (GLM) library, as the library does all the operations we need with simple function calls.

At the end of the chapter, a practical exercise on matrix and vector operations follows: we will add a freely rotating and freely moving camera to the virtual world, both in the OpenGL and Vulkan renderer, allowing us to view objects from every angle.

In this chapter, we will cover the...

Technical requirements

For this chapter, you will need the following:

• The OpenGL and Vulkan renderer code from Chapter 5
• Basic mathematical understanding of vectors and matrices

A review of the vector and its operations

A vector is the most important element of any 3D renderer. Vectors are used to store the position, color, and texture coordinates for all vertices of all triangles we draw. In addition, we use vectors to define static camera parameters.

A vector can be seen as a mathematical object with two independent properties:

• A direction, from the start point to the end point
• A length, or magnitude

Let us recap some basics about vectors.

Representations of vectors

The usual representation is a simple arrow, starting somewhere in the coordinate system. All the vectors in Figure 6.1 represent the same vector, as they all have the same directions and lengths, even if they do not share the same start and end points:

Figure 6.1: Graphical representations of a 2D vector

For a better visualization, think of every vector starting at the origin of the coordinate system. The origin is the point in the coordinate...

A review of the matrix and its operations

A matrix is used for operations that require storing more than three or four values, as in a vector, such as a rotation of a vector or a perspective change for all objects in a scene.

The matrix data type consists of rows and columns, creating a 2D collection of elements. All elements of the matrix must have the same data type.

Let’s start with the mathematical representation to get an understanding of what a matrix is.

Matrix representation

A matrix is written as a grid of elements, and the elements are identified by the indices for the row (first index) and the column (second index) of their position. The dimensions of a matrix are given as rows x columns, so a 2 x 3 matrix has 2 rows and 3 columns.

These two matrices, A and B, have the dimensions 2 x 2 and 3 x 3:

Null matrix and identity matrix

As with vectors, matrices also have two types with special meanings:

• The identity matrix is one of the most...

Adding a camera to the renderer

To start with a free view in the renderer, we need these two additional variables:

• Azimuth: To store the view angle around the camera location in the virtual world, also known as yaw
• Elevation: For the up/down view of the camera, also called pitch

To visualize the two variables, let us use Figure 6.3:

Figure 6.3: Elevation and azimuth of an object

The azimuth is the clockwise rotation around an imaginary vertical line pointing upward from the center of our coordinate system, and the elevation is the angle of the height of the object, as seen from the center of the coordinate system.

These two new variables go into the OGLRenderData struct of the OGLRenderData.h file in the opengl folder:

  float rdViewAzimuth = 320.0f;
  float rdViewElevation = -15.0f;

The initialization values are hand-picked to have the textured box placed in the middle of the screen when running the program...

Adding camera movement

A moving camera will enable us to “walk” through the virtual world, watching the objects from every angle. By using the usual W-A-S-D key pattern, we will be able to move forward and back, and left and right. We will also add the ability to move the camera up and down.

To signal the desired motion to the camera, we will check whether the movement keys are pressed, and adjust the Camera object depending on the keys that are pressed.

Using new variables to change the camera position

Start the implementation by adding these three variables to the OGLRenderData struct in the OGLRenderData.h file in the opengl folder:

  int rdMoveForward = 0;
  int rdMoveRight = 0;
  int rdMoveUp = 0;

These three integer variables will store the directions of the camera movement. We don’t need more variables; for rdMoveForward, we can use 1 to specify forward movement, -1 for backward movement, and 0 to have no movement...

Summary

In this chapter, we checked some of the basic operations of vectors and matrices, plus the GLM functions used to get the results. Using GLM makes all the operations available for us, without having to implement each of them manually. This overview should also have given you some insights into how these data types are used in later chapters.

In addition to the basic operations, we also added a free view within the scene and, eventually, a free-moving camera object. The camera will become handy in the later chapters, as it enables us to get a perfect view of the character models on changes in the skinning method, animation details, or the results of the inverse kinematics.

In the next chapter, a couple more GLM operations are introduced, as we look at quaternions and spline curves. While quaternions help us to overcome some limitations of geometrical operations, splines will enable us to generate smooth curved lines out of a group of four points, without having to specify...

Practical sessions

Here are some ideas for more code to add to the examples:

• Try to create the 3D crate box by yourself and add the remaining five sides to the Model class in the 01_opengl_view and 03_vulkan_view examples. This requires quite some imagination to get all the vertex positions, triangle outside faces, and texture coordinates right. Or you can use 3D tools such as Blender to create a cube and transfer the data to the Model class.
• Add the view and projection matrices to the user interface. This will give some more insights into how the changes in the position, view, or field-of-view parameters are reflected in the matrices.

Additional resources

• The GLM website: https://glm.g-truc.net/0.9.9
• Wolfram Alpha matrix inverse calculator: https://www.wolframalpha.com/calculators/matrix-inverse-calculator