I'm trying to get a normal map working in WebGL. I'm still struggling with linear algebra and graphics theory so I've been experimenting and reading through tutorials to try to get it right. Basically I've got a sphere and a directional light. Unfortunately it obviously does not quite work if you go here and click the button it switches on the normal map which isn't quite right...

https://googledrive.com/host/0B-5oLVOzxNXQS0JqZjkzWHBRMVU/planet_earth_wdeploy.html

Shortly after putting this together I realized that I need to apply a matrix made up of normal, tangent and bi-tangent vectors to my calculations in order to fix it. I found these articles and they seem to contradict one another...

http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/#Normal_textures

http://voxelent.com/html/beginners-guide/1727_10/ch10_NormalMap.html

The first says I need to calculate both tangent and bi-tangent attributes BEFORE I send them to the vertex shader. The second says it's OK to compute the bi-tangent vector based on a cross product of the normal and tangent vectors.

The guy in this stackoverflow article also says that I need to calculate both and pass them to the vertex shader...

http://stackoverflow.com/questions/5255806/how-to-calculate-tangent-and-binormal

So who is right?

The TBN matrix consists of an orthonormal basis between the the tangent, bi-tangent and the normal.
You COULD pass in all three to the shader, however it's unnecesarry as you can calculate the bi-tangent as the cross-product from the tangent and normal (orthonormal basis is really the clue here). Therefore it is enough to send in normal and tangent to the shader, and let the shader calculate the bi-tangent.

So in conclusion, both are right.

Here's the reference I used when implementing normal maps: http://ogldev.atspace.co.uk/www/tutorial26/tutorial26.html