# DirectX/10.0/Direct3D/Bump Mapping

This tutorial will cover how to perform bump mapping in DirectX 11 using HLSL and C++. The code in this tutorial is based on the code in the previous tutorials.
The proper terminology for the bump mapping technique we use is called normal mapping. The reason being is that we use a special texture called a normal map which is essentially a look up table for surface normals. Each pixel in this normal map indicates the light direction for the corresponding pixel on the texture color map.
For example take the following color map:
A normal map for the above texture would look like the following:
Using the normal map with the current light direction for each pixel would then produce the following bump mapped texture:
As you can see the effect is very realistic and the cost of producing it using bump mapping is far less expensive than rendering a high polygon surface to get the same result.
To create a normal map you usually need someone to produce a 3D model of the surface and then use a tool to convert that 3D model into a normal map. There are also certain tools that will work with 2D textures to produce a somewhat decent normal map but it is obviously not as accurate as the 3D model version would be.
The tools that create normal maps take the x, y, z coordinates and translate them to red, green, blue pixels with the intensity of each color indicating the angle of the normal they represent. The normal of our polygon surface is still calculated the same way as before.
However the two other normals we need to calculate require the vertex and texture coordinates for that polygon surface.
These two normals are called the tangent and binormal. The diagram below shows the direction of each normal:
The normal is still pointing straight out towards the viewer.
The tangent and binormal however run across the surface of the polygon with the tangent going along the x-axis and the binormal going along the y-axis. These two normals then directly translate to the tu and tv texture coordinates of the normal map with the texture U coordinate mapping to the tangent and the texture V coordinate mapping to the binormal.
We will need to do some precalculation to determine the binormal and tangent vector using the normal and texture coordinates. Also note that you should never do this inside the shader as it is fairly expensive with all the floating point math involved, I instead use a function in my C++ code that you will see to do this during the model loading. Also if you are looking to use this effect on a large number of high polygon models it may be best to precalculate these different normals and store them in your model format. Once we have precalculated the tangent and binormal we can use this equation to determine the bump normal at any pixel using the normal map:
Once we have the normal for that pixel we can then calculate against the light direction and multiply by the color value of the pixel from the color texture to get our final result.

## Framework

The frame work for this tutorial looks like the following. The only new class is the BumpMapShaderClass.
We will start the tutorial by looking at the bump map HLSL shader code:

## Bumpmap.vs

Both the VertexInputType and PixelInputType now have a tangent and binormal vector for bump map calculations.
Both the input tangent and binormal are calculated against the world matrix and then normalized the same as the input normal vector.

## Bumpmap.ps

The bump map shader requires two textures. The first texture in the array is the color texture. The second texture is the normal map.
Just like most light shaders the direction and color of the light is required for lighting calculations.
The pixel shader works as we described above with a couple additional lines of code. First we sample the pixel from the color texture and the normal map. We then multiply the normal map value by two and then subtract one to move it into the -1.0 to +1.0 float range. We have to do this because the sampled value that is presented to us in the 0.0 to +1.0 texture range which only covers half the range we need for bump map normal calculations. After that we then calculate the bump normal which uses the equation we described earlier. This bump normal is normalized and then used to determine the light intensity at this pixel by doing a dot product with the light direction. Once we have the light intensity at this pixel the bump mapping is now done. We use the light intensity with the light color and texture color to get the final pixel color.

## Bumpmapshaderclass.h

The BumpMapShaderClass is just a modified version of the shader classes from the previous tutorials.
The bump map shader will require a constant buffer to interface with the light direction and light color.

## Bumpmapshaderclass.cpp

The class constructor initializes the pointers to null.
The Initialize function will call the shader to load the bump map HLSL files.
Shutdown releases the shader effect.
The Render function sets the shader parameters first and then renders the model using the bump map shader.
InitializeShader sets up the bump map shader.
The polygon layout is now set to five elements to accommodate the tangent and binormal.
The bump map vertex shader is loaded here.
The bump map pixel shader is loaded here.
The layout now includes a tangent and binormal element which are setup the same as the normal element with the exception of the semantic name.
The light constant buffer is setup here.
The ShutdownShader function releases all the pointers that were setup in the InitializeShader function.
OutputShaderErrorMessage writes out errors to a text file if the HLSL shader file won't compile properly.
The SetShaderParameters function sets the shader parameters before rendering occurs.
The texture array is set here, it contains two textures. The first texture is the color texture and the second texture is the normal map.
The light buffer in the pixel shader is then set with the diffuse light color and light direction.
RenderShader draws the model using the bump map shader.

## Modelclass.h

The VertexType structure has been changed to now have a tangent and binormal vector.
The ModelType structure has also been changed to have a tangent and binormal vector.
The following two structures will be used for calculating the tangent and binormal.
We have three new functions for calculating the tangent and binormal vectors for the model.

## Modelclass.cpp

The Initialize function now takes in two texture filenames. The first texture filename is for the color texture. The second texture filename is for the normal map that will be used to create the bump effect.
After the model data has been loaded we now call the new CalculateModelVectors function to calculate the tangent and binormal. It also recalculates the normal vector.
The two textures for the model are loaded here. The first is the color texture and the second is the normal map.
The InitializeBuffers function has changed at this point where the vertex array is loaded with data from the ModelType array. The ModelType array now has tangent and binormal values for the model so they need to be copied into the vertex array which will then be copied into the vertex buffer.
LoadTextures now creates a vertex array and then loads the color texture and normal map into the two element texture array.
CalculateModelVectors generates the tangent and binormal for the model as well as a recalculated normal vector. To start it calculates how many faces (triangles) are in the model. Then for each of those triangles it gets the three vertices and uses that to calculate the tangent, binormal, and normal. After calculating those three normal vectors it then saves them back into the model structure.
The CalculateTangentBinormal function takes in three vertices and then calculates and returns the tangent and binormal of those three vertices.
The CalculateNormal function takes in the tangent and binormal and then does a cross product to give back the normal vector.

## Graphicsclass.h

The new BumpMapShaderClass header file is included here in the GraphicsClass header.
The new BumpMapShaderClass object is created here.

## Graphicsclass.cpp

We initialize the BumpMapShaderClass object to null in the class constructor.
The ModelClass object is initialized with the cube model, the stone01.dds color texture, and the bump01.dds normal map.
Here we create and initialize the BumpMapShaderClass object.
The light color is set to white and the light direction is set down the positive Z axis.
The new BumpMapShaderClass is released here in the Shutdown function.
Rotate the cube model each frame to show the effect.
Render the model using the bump map shader.

## Summary

With the bump map shader you can create very detailed scenes that look 3D with just two 2D textures.

## To Do Exercises

1. Recompile and run the program. You should see a bump mapped rotating cube. Press escape to quit.
2. Change the bump map effect from 2.5 to something smaller (like 1.0) and larger (like 5.0) in the shader to see the change in the bump depth.
3. Comment out the color = color * textureColor; line in the pixel shader to see just the bump lighting effect.
4. Move the camera and light position around to see the effect from different angles.