Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
In this article, I'll explain what a normal map is and why normal mapping is an important and useful technique for any 3D game developer. I'll also share some examples and a few great tools for generating them.
What Is a Normal Map?
A 2D texture map is an image added to a 3D model that provides a higher level of detail, wrapping around whatever 3D art you have to apply or modify certain attributes like color, transparency, shininess, reflection, and higher detail.
One of the most valuable maps for a 3D artist is the normal map. Rather than having a color range of black to white, like a bump map uses, normal maps consist of red, green, and blue. These RGB values translates to x, y, and z coordinates, allowing a 2D image to represent depth. This way, a 3D application is able to fake lighting details based on the color associated with the 3D coordinate.
Here's an example of what a normal map looks like as a 2D image, without being applied to a 3D model:
Why Use a Normal Map?
When creating 3D art assets for video games, you have what is called a "Poly Limit" or "Poly Budget", which essentially restrict how complex your 3D models can be.
Poly budgets are required to keep your 3D game at a relatively small file size; complex 3D models can take up a huge amount of space. Normal maps allow you to keep your file size within your budget, while still being able to have assets that look like complex 3D models with the kind of detail you want.
For example, this asset's 3D model is a very simple cube, but by adding the normal map from above, it looks like a much more complex shape:
The bolts and the words "Normal Maps" don't appear to be simply painted on to a flat surface.
Normal maps are used to obtain a type of detail you would normally have a hard time doing in a basic 3D application (Maya, 3Ds Max, Cinema 4D). There are many types of programs that create normal maps, but all of them provide higher detail.
Normal maps are affected by the lighting of the scene, so it is easy to carve in detail where you need it. This can be used to apply wrinkles to a face or to add bolts and scratches on a metal object, as in the example above.
High-Poly to Low-Poly
High-polygon (that is, highly complex) 3D models typically have lots of detail, but can consume a lot of memory. What artists tend to do is use low-polygon models and apply normals to enhance the detail; this allows the file size to stay relatively small.
High-poly models can actually be converted to a normal map, which can be used for the low-poly version. This happens a lot when gaming companies make highly detailed characters and wish to conserve as much detail as possible.
In this example, you'll see the process of converting a hi-poly model to a low-poly model with a normal map. As you go through the images, note the number of polygons in each image.
Using normal maps can save you a lot of time, depending on the type of project you are working on. In the example with the box, all I did was generate a 2D normal map and slap it onto the box. If I were to create each object for that same project, it would take longer.
Also, with more 3D objects in the scene, it would take up more memory. Now, for more organic stuff like characters I can't say it would highly reduce the time spent, but for hard-surfaced objects it really helps. You also have more flexibility to try new things when you're spending less time on assets.
If you see a game with high detail, I can almost guarantee they are using a Normal Map.
Earlier, I mentioned how there are many texture maps used when creating 3D assets, with the most valuable being the color map and the normal map. Since people are constantly wanting things that look better and better they end up requiring more detail. This may not apply to games that are more cartoony and use techniques like cel shading, but you can bet that AAA title games are using these.
How Do I Create a Normal Map?
There are several tools you can use to make or generate a normal map:
CrazyBump generates normal maps from photos, height maps (which are grayscale), or even other normal maps. With CrazyBump you can actually adjust your normals to show more or less detail from the reference image.
xNormal generates normal maps from a high-poly and low-poly 3D model. This is really great when you want to start in a 3D sculpting application like Zbrush, but still want your model to be within your poly budget.
I used xNormal to generate the normal map for the 3D character above.
nDo2 is a Photoshop plugin that lets you generate normals using selections and other features. It includes the same functionality as CrazyBump, with the added flexibility of Photoshop's tools.
I used nDo2 to make the box with the bolts.
Photoshop can be used to manually paint a normal map using different color channels (R,G,B).
This technique is very difficult to do from scratch, so artists generally only use Photoshop for touching up a map generated by another program. If there are random artefacts when generating your normals you may use Photoshop to manually edit the problems.
Here is why I don't use Photoshop to paint normals:
Thanks for reading this post on normal mapping! I hope you learned a lot and had fun doing so.