# 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)

• 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