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

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.

-
You are asking too many questions. It's best you just read on how vectors work. From scratch. Also patch up your trigonometry along the way. – Sidar Mar 20 '13 at 14:35
I figured this may be much to ask, but on the other hand it would is nice to have this information together under one question. That is also the reason I specifically asked for simple explanations. – J2V Mar 21 '13 at 7:59

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.

-
Damn I should have added a picture :p – RobCurr Mar 20 '13 at 15:14
Thank you for the thorough explanation! Marked as answer. – J2V Mar 21 '13 at 8:05
It might help to read this article on why the square-patch assumption is invalid and why everything everyone says about tangents and bitangents is pretty much bogus. It outlines the proper math one should use, but sadly I'm not competent enough to author a correct answer with it. – Lars Viklund Mar 21 '13 at 9:15

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.

-
+1 - Next time, though; add a picture. – Pieter Geerkens Mar 20 '13 at 22:42

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) = (Vx(t), Vy(t), Vz(t)), then the tangent - which is a vector pointing in the direction of motion - is given by Tu = dp/dt = (dVx/dt, dVz/dt, dVz/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 = |Tu|, the length of the tangent vector, and the 'normalized' tangent vector is simply T = Tu/s.

Then the normal vector to the curve is the derivative of the normalized tangent vector over time, Nu=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.Nu = 0. Note that Nu isn't necessarily a unit vector, any more than Tu is; in fact, its magnitude k = |Nu| is the (instantaneous) curvature of the curve at the given point, and the point p+Nu is the center of the so-called osculating circle (at the given point). The normalized normal is then just N=Nu/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...)

-