What are normal, tangent and binormal vectors and how are they used?

Question

I would like to find out the following information:

• What are they?
• Example usage in game development (the area they are used in)

About the following vector types:

• Normal
• Tangent
• Binormal

A simple game development centric explanation would suffice.

Answer 1

Generally speaking, a Normal vector represents the direction pointing directly "out" from a surface, meaning it is orthogonal (at 90 degree angles to) any vector which is coplanar with (in the case of a flat surface) or tangent to (in the case of a non-flat surface) the surface at a given point.

A Tangent vector is typically regarded as one vector that exists within the surface's plane (for a flat surface) or which lies tangent to a reference point on a curved surface (ie. if a flat plane were constructed with the same normal from the reference point, the tangent vector would be coplanar with that plane).

The concept of a Binormal vector is a bit more complex; in computer graphics, it generally refers to a Bitangent vector (reference here), which is effectively the "other" tangent vector for the surface, which is orthogonal to both the Normal vector and the chosen Tangent vector.

With regards to how they are computed, this varies depending on the complexity of the surface and how precise you want the normal to be (in some cases, such as with smooth shaders, it is more desirable to calculate a normal for an approximated surface, when the actual information for a surface is not present), but there are several generalized formulas given here.

In terms of where they occur, the answer is EVERYWHERE. Normal vectors are used to position cameras and objects in 3D space, to determine trajectories, reflections, and angles in physics calculations, to map skins and textures to 3D models, to determine aim trajectory offsets in AI programming, to give hints to shaders about how to light, shade, and color points on a surface relative to lights, the camera, and other objects, and so on. They are possibly one of the most useful pieces of information to have in a 3D environment, and they even come in extremely handy in 2D as well.

Tangents and binormal vectors are used to determine things like torque and angular velocity, deflections of light or physical objects, and so forth. They are generally used in combination with the normal vector to give an angular 3-dimensional frame of reference to more complicated collisions, physics calculations, light deflections, and so forth; they're the additional information needed to ensure that angular momentum is preserved along the correct system of axes.

Answer 2

Normal vectors are typically used for lighting calculations. It is a vector that is supposed to be perpendicular to the surface that is approximated by the vertices of a mesh. Normals are defined at each vertice position but can be calculated differently depending on how you want light to refect at that vertice or what you want to do with your light calculations in the shader.

Tangent and Binormal vectors are vectors that are perpendicular to each other and the normal vector which essentially describe the direction of the u,v texture coordinates with respect to the surface that you are trying to render. Typically they can be used alongside normal maps which allow you to create sub surface lighting detail to your model(bumpiness).

There are obviously other ways to utilize these vectors and I have just described the average use of them. For more technical information I would suggest you pick up a book on computer graphics or explore some articles on the internet. There is plenty of information out there about this.

Answer 3

The difference between the tangent and the binormal is less immediately clear on surfaces, but that shouldn't be too surprising - the binormal was originally defined not for surfaces but for curves, where the concept makes a lot more sense (and where it really lives as a 'normal' in that it's orthogonal to the direction of movement, thus the name). To be more specific, given a space curve of the form p = V(t) = (V_x(t), V_y(t), V_z(t)), then the tangent - which is a vector pointing in the direction of motion - is given by T_u = dp/dt = (dV_x/dt, dV_z/dt, dV_z/dt). (I'm using the subscript here to distinguish 'unnormalized' since I don't have my MathJax here.) Then the (instantaneous) speed along the curve is just s = |T_u|, the length of the tangent vector, and the 'normalized' tangent vector is simply T = T_u/s.

Then the normal vector to the curve is the derivative of the normalized tangent vector over time, N_u=dT/dt; the reason that the normalized tangent is used here is to keep the speed along the curve from skewing the normal vector - you can show that with this definition, we always have T.N_u = 0. Note that N_u isn't necessarily a unit vector, any more than T_u is; in fact, its magnitude k = |N_u| is the (instantaneous) curvature of the curve at the given point, and the point p+N_u is the center of the so-called osculating circle (at the given point). The normalized normal is then just N=N_u/k, and the bitangent B is the cross product B=TxN; since T and N are both unit vectors and they're orthogonal to each other, then B is also a unit vector, and (T, N, B) is an orthogonal frame.

Note that by this definition the 'binormal' to a curve is closer to what we think of as the normal to a surface (it's the normal to the 'local' plane of the curve), and the normal to a curve is closer to what we think of as the bitangent to a surface.

(This image, sadly, doesn't really do the concept justice, but it's the best I could find on the web and I can't readily build my own...)

Answer 4

I know this is old but i would like to add a little practical information. As stated by others but more specifically related to graphical programming.

1. A Normal aka (a surface normal) is orthogonal to a flat plane our triangles surface. (it sticks out from it)

2. A Tangent can be considered to be a normal that lies along or on that plane (its co-planar) typically this is chosen from a quad on a mesh, (so a side of two triangles that form a square), is typically applied to two triangles to be the tangent for two or all of the vertices of the quad depending on how precise it needs to be.

3. The Bi-tangent or called a bi-normal or called a co-tangent. A vector on plane may give the notion of direction however, a complete matrix is comprised of 3 unit length vectors to describe a orientation so this is that. The BiTangent is computed via the Cross Product as it has the property of being orthonormal or perpendicular (at 90 degrees) to both the normal and the tangent. (actually each of these are perpendicular to the others proper and so knowing any two gives the other with a cross product)

4. All these vectors, the normal, the tangent and the bi-tangent, are typically unit length to say they are normalized when used in graphical programming.

5. Care must be taken when performing a crossproduct on these vectors to ensure that the desired Winding Order is understood, be it if you are defining it or adhering to someone else's mesh or model winding order (their intent). To say Cross(A,B) is the opposite of Cross(B,A) thus the direction would opposite. (this can lead to, if placed into a matrix, to what amounts to a transposed matrix and or improperly defined matrix in the axis of the mistake)

6. The bi-tangent maybe calculated typically on the gpu or stored via pre-computation in the vertices data for a mesh or model.

Practical Relation to a 4x4 matrix.

Typically as you may be aware a commonly used right handed 4x4 matrix has 3 vectors denoting the forward the up and the right. These three unit length vectors together placed in a matrix equates to a complete orientation matrix. (For example the matrix may relate to these vectors like so, though this is not standardized as far as i know, m.Forward = normal, m.Up = tangent, m.Right = bi-tangent).

This forms a Orientation to say it forms a Orthogonal matrix were each vector is perpendicular to the others and one vector for each dimension x y z.

When another matrix typically a rotation matrix is applied to it (the surface being triangles in the graphical case), the orientation describing the surface will be ... rotated properly.

So then traversal across a triangle on screen in the 2d case.

x = x + 1;

Might translate so that we move across our surface in 3d directly equivalently. (Though simplified you can see that the premise of the below formula even if the matrix m is rotated will hold)

x = x + m.Right; 

Practical usage.

When complex rotations are applied to a surface that is for instance texture mapped if you have all three of these values you will always have it's forward its up and right no matter what orientation the surface is rotated into. The texture uv positions can be found from this or if you like its tangent and bi-tangent vectors on the surface of the triangles can be moved along from one of a triangles vertices. As easily in a 3 dimensional space as a 2d space. With this information you can map from 3d to 2d screen space or vice versa positionally when or if you need to for a variety of possible needs.

Concrete Application.

This is most often illustrated with the graphical technique of Normal mapping or Bump mapping which makes a flat surface appear to have depth which you can look up that term for more information.

Answer 5

As for the usage tangent and binormal (bitangent) are mostly used for normal (aka bump) mapping and related techniques. The tangent, bitangent, and normal define a rotation from tangent space (aligned with surface) to object space. When you calculate lighting, they are used to rotate a normal vector (sampled from texture map, and defined in tangent space) into object space (and then either camera or world space) for final lighting calculations. The tangents are usually calculated from the vertex normals and texture coordinates using the MikkTspace algorithm.