# Normal map, tangent space TBN Matrix generation

This topic is 543 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

hi all,

i have been trying to understand how to build the TBN matrix for normal mapping to change the space from tangent space to local/world space using TBN matrix,

i have been to countless opengl sites but all i can see is the follow a standard formula described in similar fashion as to this link

which is the same formula pointed to by this book:  Mathematics for 3D Game Programming and Computer Graphics

which is more or less the same formula as described in learnopengl.com tutorial for normal mapping: https://learnopengl.com/#!Advanced-Lighting/Normal-Mapping

The formula in question is: Q  P0 = (u  u0)T + (v  v0)B,

or on some other site expressed as:

E1=ΔU1T+ΔV1B
E2=ΔU2T+ΔV2B

or

What i want to understand is HOW is that formula formulated and the reason/explanation behind it,

i want to understand why the formula looks that way.
All i see from these sites or even in youtube tutorials starts from that formula and derived the TBN Matrix from the above formula.

I want to understand why the derivation of TBN matrix started from that formula and why. What is that formula and how was it formed.

Is there anything math/calculus/linear algebra related things i need to understand on why that formula existed.

(I'm sorry for asking questions like this, unlike other people i'd like to know the reason behind things and not just take whatever i read and follow with it.
i want to learn  )

Please do enlighten my innocent mind,

##### Share on other sites

Not sure if it helps, but you could check this one:

##### Share on other sites
1 hour ago, cozzie said:

Not sure if it helps, but you could check this one:

THanks for replying but unfortunately its far from the question i asked
the one you posted is using DirectX and uses DirectX builtin function to compute tangent in a D3D Mesh.

What i was asking is related to the math behind it.

Try this.

##### Share on other sites
28 minutes ago, _Silence_ said:

Try this.

same thing, the article jumps directly to using the formula without explaining why the formula is like that.

deltaPos1 = deltaUV1.x * T + deltaUV1.y * B

deltaPos2 = deltaUV2.x * T + deltaUV2.y * B

and as you can see from the formula on the article you shared and the ones on my original post, it is the same one.

Edited by cebugdev

##### Share on other sites

Hi there

Really appreciate your desire to learn the proof instead of the application only. But sometimes people don't ask question like this might not because they only take whatever they read, there is a possibly that the "proof" is too obvious so no one asks.

Back to the equation: Q − P0 = (u − u0)T + (v − v0)B

First, let’s make sure we understand what the equation means. One point to note is u and v are not vectors, neither their differences (Δu, Δv) are. According to your last post in the Maths thread “I understand we need to get two vectors that is why the difference of U and V vectors are computed to form a vector, but i dont understand why it needs to be dot products to T and added to difference of V vectors and dot product to B.”, it seems you mistook the notation, so let’s commonly agree no dot product happens here like you mentioned.

Next, let’s ask ourselves a question, what is a normal map? It is a texture containing normals in tangent space, (I assume you understand what space and basis are) which is local to the surface of a triangle. And what is a triangle in its local space? A plane lying on the x-plane! To ease your life, let's call it a 2D triangle. (Triangle on itself is always planer, so not really meaningful to say it is 2D, but maybe you can understand it easier in this way) So this gives you some hints why the equation only has 2 elements on the right hand side instead of 3. What if we mark the 3 pairs of texture coordinates of a triangle’s vertices on the normal map? We will get a 2D triangle. And it is the same triangle but just with different scale! For a 2D triangle, you can express any point inside it by using the x-axis and y-axis (or z-axis depends on your coordinate system) unit vector only. Remember the normal map is in tangent space? So in this case, the x-axis, y-axis are the tangent and bitangent. (But be careful we do not narrow it to a 2D space problem, it is still in 3D space but with the one of the basis, normal, naively pointing upward, which is the up-vector)

Finally, the source of this equation to me is more like an intuitive deduction than a proof. If we are going to express it verbally, it should sounds something like “the vector from vertex 0 of this triangle to an arbitrary point Q in the triangle CAN BE REPRESENTED BY the combination of tangent and bitangent with the respective scale of delta u and delta v.” Why do we not need a scale of normal? Because if you are already standing on a vertex of a triangle, to go to another vertex, you do not need to fly you just walk on the plane.

Now hopefully you understand the equation above, so the mathematically deduction of tangent and bitangent is left to your practice. Let’s get back here and discuss if you face any difficulties.

(This website actually explained it quite well on the maths behind. Iterate on it rather than reading many sources at one time might help you more. https://learnopengl.com/#!Advanced-Lighting/Normal-Mapping)

##### Share on other sites

@norrischiu Thank you for that detailed explnation,

ive got a question, the Tangent (T) and bi-Tangent(B) vectors in the equation are expressed in object/local/model space and not tangent space correct?

##### Share on other sites

@cebugdev Hi again. I assume you are still talking about this equation Q − P0 = (u − u0)T + (v − v0)B. Just as what you might have known when approximating lighting with phong reflection model, the equation is valid as long as they are all in the same space. But typically this equation is used in the model space, as you need to construct a tangent-to-model/world TBN matrix for normal mapping, and you most likely have the necessary variables ready in model space.

• ### What is your GameDev Story?

In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

• 15
• 9
• 11
• 9
• 9
• ### Forum Statistics

• Total Topics
634136
• Total Posts
3015755
×