How Normal Mapping Works | C++ 3D Game Tutorial Series #28

An explanation and implementation of normal mapping to add surface detail and depth to 3D meshes in C++.

[IMPORTANT]: NEW VERSION (2025) of C++ 3D Game Tutorial Series available here: youtube.com/watch?v=XeLyqELshHM&list=PLv8DnRaQOs5-ST_VDqgbbM… This video is part of the previous series. Videos from that version feature an exclamation point icon in the top-right corner of their thumbnails, which should help distinguish them from the new ones. SUPPORT ON PATREON: patreon.com/pardcode DISCORD SERVER: discord.gg/RymBzwKPyZ DESCRIPTION: When we create 3D scenes, we use meshes composed by triangles and, to increase the realism of these objects, we can apply some kind of lighting and textures over their surfaces But that's not enough. If we enlighten the surface of a plane with a bricks texture over it, this will appear immediately flat, and all the bumpy and little depth details of the bricks surface will not be considered. So... How can we solve this issue? What is the rendering technique that allows us to do so? Today in this 28th tutorial we will see How Normal Mapping Works! SOME NOTES: In the video, the Y-Axis of the tangent space(so the cross product between normal and tangent) is expressed as Binormal, but in reality its correct name is Bitangent. More info about the differences between Binormal and Bitangent at the links below: math.stackexchange.com/questions/3491798/difference-between-… mathworld.wolfram.com/BinormalVector.html ASSETS and TEMPLATES (Bricks textures, cross.txt and TemplateApp files): github.com/PardCode/CPP-3D-Game-Tutorial-Series/tree/AssetsA… ENTIRE TUTORIAL SERIES: youtube.com/playlist?list=PLv8DnRaQOs5-ST_VDqgbbMRtzMtpK36Hy DIRECTX SDK JUN 2010 : microsoft.com/en-us/download/confirmation.aspx?id=6812 I hope you'll enjoy this tutorial! ---------------------------------------------------------------------------- PATREON PAGE: patreon.com/pardcode WEB PAGE: pardcode.com C++ 3D GAME TUTORIAL SERIES PAGE: pardcode.com/cpp-3d-game-tutorial-series TWITTER PAGE: twitter.com/PardCode FACEBOOK PAGE: facebook.com/PardCode Chapters: 0:00 Intro - Info about series at www.pardcode.com 0:46 What is Normal Mapping? 1:59 Normal Map 4:07 Tangent Space 5:29 What is TBN Matrix? 5:53 Computing of Tangent and Bitangent Vectors 9:43 Steps to implement Normal Mapping 10:44 Reorienting Tangent and Bitangent 12:09 Last Steps for Normal Mapping Implementation 13:22 Implementation 45:53 Final Result 46:59 End