GraphicsBlast

Dot Product

In a single sentence, the dot product, also known as the scalar product, tells you how "similar" the direction of two vectors is.

It behaves kind of like a cosine function. If the two vectors point in exactly the same direction, the dot product of the vectors will be one. If there is a 90 degree angle between them, it will return zero. If they point in exactly the opposite directions, it will return minus one.

They are used a huge amount in 3D graphics for lighting. Usually you would take the dot product of the normal vector of a triangle, and the direction towards a light source. If the dot product returns a value of one, then the light must be shining directly onto the triangle, so its lighting value should be "full strength". As the dot product approaches zero, it means the light is approaching being perfectly side-on to the triangle. At zero, the triangle therefore should not be illuminated at all. Therefore we just scale the lighting intensity by the dot product value! Values below a dot product of zero therefore indicate that the light source is behind the triangle, and therefore it should not be illuminated at all. Don't scale your lighting by negative values though!

You can explore with the visualisation below to gain an intuition for this relationship:

This example canvas could not be displayed!
Vector 1 angle:
Vector 2 angle:
Angle Difference: °
Dot product:

The dot product has much more uses beyond lighting though, but this is a major use for them in computer graphics. It is important to note that this only applies if the two vectors are normalised too. They have other useful properties when not normalised, but for graphics calculations this is normally how you will use them. You can use the

When the input vectors are not normalised, the result of the dot product is effectively multiplied by the magnitudes of each vector. So if a vector has a magnitude of two, the dot product would be as above, but the final value will be also doubled.

To calculate the dot product, all you need to do is multiply each component of the first coordinate by each component of the second coordinate, and then add all these values together. Hmmm, does that sound familiar? That's right, it's actually just a matrix multiplication! But you need to transpose one of the coordinates to make it a valid multiplication! Transpose just means "flip" the matrix around it's diagonal line. So a 3x1 matrix becomes a 1x3 matrix.

As the GPU is extremely optimised for matrix multiplications, that means they're very fast to compute there as well. Far easier than calculating the angle difference between the two input vectors and then calculating the cosine of that angle anyway.