I will assume that you are familiar with some basic vector math and 3D coordinate systems. I will also use the left handed coordinate system (OpenGL uses the right handed system) throughout this document. For the pixel and vertex shaders I will assume that you understand the syntax of DirectX shaders. Many people seem to find assembly shaders quite intimidating. The main point of this article is to help you understand the concepts and not provide code. The code is provided only to assist you in understanding the concepts.
In this article I will cover what tangent space is and how to convert a point between world space and tangent space. The main reason I wrote this article was so that a person new to pixel shaders will be able to quickly understand a fairly important concept and make his own implementations.
That being said, lets get started...
As far as the name goes, tangent space is also known as texture space in some cases.
Our 3D world can be split up in to many different coordinate systems. You already should be familiar with some of these – world space, object space, camera space. If you aren’t I think you are jumping the gun and would strongly recommend you go back to these topics first.
Tangent space is just another such coordinate system, with it’s own origin. This is the coordinate system in which the texture coordinates for a face are specified. The tangent space system will most likely vary for any two faces.
In this coordinate system visualize the X axis pointing in the direction in which the U value increases and the Y axis in the direction in which V value increases. In most texturing only U and V change across a face tangent space can be thought of a 2D coordinate system aligned to the plane of a face.
So what about the Z axis in tangent space?
The u and v values can be used to define a 2D space, but to do calculations in a 3D world we need a Z axis as well. The Z axis can be though of as the face normal, always perpendicular to the face itself.
For now we will call this n (for normal). The value of n will always stay constant at 0 across a face.
Figure 1: Tangent space axis for a face in a plane
Take a look at Figure 1. It will help you visualize the tangent space coordinate system. It shows a quad made up of four vertices and two faces assumed to have a simple texture unwrap applied to it.
Figure 2 shows the tangent space axis for a face on a cube defined by the vertices 1, 2, 3. Once again we assume that this cube has a very simple texture unwrap applied to it.
In the bottom left you will also see the axis for the world space coordinate system marked by x,y,z.
The u, v, n axis represent the direction in which u, v, n values increase across the face, just as the x, y, z values represent the direction in which the x, y, z values increase in the world space coordinate system.
Figure 2: Tangent space axis for a face in a box
Let us take another example. In Figure 2 we try to visualize the tangent space for a top face of a box.
Kiran Sudhakara 
19 Sep 2008 at 1:29 am PST

Step 2: Calculate the T vector
T = E21.xyz / E21.u This formula does not seem correct. Wouldn't this just scale the edge? 


David Larsson 
Responce to Kiran's comment:
I think the formula is supposed to be more like this(could be wrong though): NE21 = Normalize(E21) NE31 = Normalize(E31) T = (NE21.xyz / E21.u) + (NE31.xyz / E31.u) 


Kiran Sudhakara 
Unfortunately I believe this is wrong aswell. Consider a simple case where E21.uv is 1,0 (so E21.xyz is already the tangent!), and E31.uv is an angled vector across the UV space.



ShihKai Lai 
http://www.terathon.com/code/tangent.html
http://www.blacksmithstudios.dk/projects/downloads/tangent_matri x_derivation.php These 2 website have good explanations about tangent space. Does any body know, if 2 vertex of a triangle have the same UV, then should I ignore that triangle, or ask art to change the UV? The determinant will become 0 in this case... 


Julian Hainsworth 
No two vertices should have the exact same UVCoords, if this is a problem with your meshes you should see your artist


