The TBN matrix explained

When doing a shader like Bump mapping, parallax mapping, and the like, we need to do some computations (dot product, ray-tracing) with a texture containing the normals at every texel. The problem is that those normal are stored in what is called surface-local space, or tangent-space, where X,Y,Z axis correspond respectively to the Tangent, the Binormal, and the Normal of the pixel. So we will need to find a way to convert the light position and the eye position into tangent-space too.

The normal is usually contained in the 3d mesh itself, but the tangent usually isn't, it is normally computed by the game engine. I will not cover in detail here how to generate the tangent at every vertex (maybe for an other time), I assume your engine can provide it. The binormal vector can be computed by doing the cross product between the Tangent and the Normal.

We can construct the TBN matrix with those 3 vectors:

Where T is the Tangent vector

           B is the Binormal vector

           N is the Normal vector

           O is the vertex in object-space

As you can see, multiplying the vertex by the TBN matrix is equivalent to the dot product of O with T,B and N. It is important that T, B and N are normalized, and that T, B, N and O have the same origin.

The conversion of O in object-space to S in tangent-space can be visualized as the projection of O onto the vector T, B, and N. Here is an example of 2D projection so you can understand visually what it means:

As you can see, when we project a vector U onto a vector V, we can express the vector U by a fraction of the vector V, that fraction is the dot product. When doing this with each axis of an Euclidean sub-space we can express a vector relative to that sub-space.