SketchpunkLabs | WebGL2 : 090 : Normal Bump Mapping @SketchpunkLabs | Uploaded June 2018 | Updated October 2024, 6 days ago.
Today we explore three different methods in which we can use a normal texture to apply special lighting and depth to our 3d models. First we start with how to compute the normal, tangent and bitangent (binormal) that we need to create a TBN 3x3 Matrix that allows use to move things around between world space and tangent space. Then we take a step further and replace the matrix with a quaternion, which we no longer need to keep all the tbn data in buffers. Lastly we look at how to compute tangent space using a snippet of GLSL code in the fragment shader that allows use to bypass the need to even compute the tangent and bitangent for a mesh.

======================================================
Links of Interest

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

code.google.com/archive/p/kri/wikis/Quaternions.wiki

opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/#normal-textures

github.com/mattatz/ShibuyaCrowd/blob/master/source/shaders/common/quaternion.glsl

code.google.com/archive/p/kri/wikis/Quaternions.wiki

gist.github.com/BeRo1985/5042cc79e55012a2c724aecf880c8be9

thetenthplanet.de/archives/1180

pocket.gl/normal-maps

planetpixelemporium.com/planets.html


======================================================
GitHub :: github.com/sketchpunk/FunWithWebGL2
Patreon :: patreon.com/sketchpunk
Twitter :: twitter.com/SketchpunkLabs
Tumblr :: sketchpunklabs.tumblr.com
Trello :: trello.com/b/zcTUPpFy/fun-with-webgl-20