Gallery Guides About Me

- Video Game Normal Mapping Guide -

Normal Mapping Masterclass


by Jarrod



This tutorial shows how to make your own normal map from scratch in Photoshop, only using the Nvidia normal map filter for "normalizing" our normal map. We will also cover normal mapping theory in more detail.


A normal map is a texture (or image), which records lighting information. Lighting in 3D using per-pixel lighting is calculated using two vectors:
  1. The light source.
  2. The "normal", which is basically a vector accompanying a polygon.

Therefore, we have two vectors, the normal and the direction of the lighting source. Using these two points we can calculate the angle of the polygon in relation to the lighting source, and thus the amount of light it should receive.

When you model a high-poly mesh, it looks nicer not only because the silhouette is more defined, but because the mesh itself contains more polygons and therefore more normals to calculate lighting. As a result, it looks more detailed. This is where normal mapping applies. Normal mapping, unlike the old bump mapping, adds normals to a model. Where before one polygon = one normal, now, with a normal map defining the normals, one polygon = theoretically as many normals as there are pixels in the normal map. This gives us low-poly game modelers the ability to define very detailed lighting on our models, with our need only to have enough polygons (tris) to define the silhouette.

Generally the correct usage of a normal map should be to hold the lighting detail, letting us focus on modeling a correct silhouette for the mesh to hide as many signs that it is low-poly as possible. What this will do is allow us to then trick the viewer into feeling the mesh theyre viewing is in fact a high-poly one. If they see the appropriate lighting detail that one would expect of a high polygon model, they will not question whether it is one or not, it is only the silhouette that then may give away the model's true polygon count.


Generating a normal map



  1. Image generated type 1 Here an artist may paint the normal map by hand as a grayscale heightmap. White representing the highest extrusion possible, black representing the lowest point of extrusion. Here various levels of gray then represent various levels of height. This map is then passed through a normal map filter, where this information is used to calculate lighting detail based on the raw extrusion information from the grayscale map. The most common image generated normal mapping applications are, Crazybump, and the Nvidia Photoshop normal mapping filter. Both have their uses, but Id recommend Crazybump for most instances.

  2. Image generated type 2 Here, as we will be exploring later, an artist can hand make a normal map, only using a normal map filter to normalize the map.

  3. 3D generated Here an artist will model a high or low polygon model, in an attempt to then generate a normal map from it, either for an unwrapped mesh or for a tileable texture.

Generally speaking, 3D generated normal maps tend to look the best, as they are generated straight from the geometry theyre made to imitate. However, it will be a skill that must be gained by the artist to judge when to take the time to do a 3D generated normal map or simply use an image generated one. It is harmful to ones workflow to rely too much on either. Sometimes an image generated normal map will look exactly the same as a 3D generated one, other times the difference will be glaringly obvious. Make the best use of your time, learn both techniques and remember to choose the appropriate tool for the job!


Preparing Your Model for Normal Mapping



As stated earlier, the silhouette is the key to maintaining the illusion of a highly detailed model. To be able to effectively trick the viewer you must not allow the silhouette to give it away, so here are some tips:

  1. As you model, rotate the mesh to view it from different angles, here youll want to look for any lumpiness or sharp edges/points that do not define the models true shape. Unless you poly budget is extremely tight, consider adding a cut or two to help smooth out the area. Remember, in this day and age of per-pixel lighting and shaders, fill rate is a greater performance enemy than a few extra polygons. Generally you can add a few extra polygons and get no decrease in rendering rate (within reason of course).

  2. Add trimming to almost everything! If your normal map is doing an excellent job of faking depth in your brick texture, why ruin it for the viewer/player by having that illusion dashed the second they get to the end of the wall and see it becomes harsh and flat. Trimming helps maintain this illusion by having the viewer feel that the brick has not abruptly ended.



With all of the methods for creating and using normal maps, it is imperative to truly understand them at a technical level, so let's take a closer look...

How a normal map works

A normal map is composed of 3 color channels -- usually in the RGB color space. Each of these channels in your standard 24 bit texture is then 8 bits (8x3=24). So, what does an 8 bit image give us? It allows us 256 levels of gray to use, per channel. Each channel is only a grayscale image made up of 256 levels, but when pulled together they then define a full color image. Here, you have something similar to a heightmap, except instead of extrusion, different values bring forth different intensities of that particular channel color. Full white in a channel produces 100% intensity of that channel's color. Black represents a 100% absence of that color, and values in between represent, naturally, the relative color intensities. This is important to know, because a normal map holds its information inside each channel.

Each color channel has its own purpose in a normal map. From the perspective of facing the normal map, your red channel holds the "left-to-right" information. The green channel holds the "up-down" information, while the blue channel holds the direct lighting information -- that is, the lighting of the normal map at an angle of zero. This latter point is why a normal map is almost always largely made of blue. Or alternatively you can think of the red channel as holding the horizontal lighting information and the green holding the vertical lighting information.

Enough theory! Let's see this information in action...

Quick Tutorial

You will need the Nvidia Photoshop Normal Map plugin for this tutorial. Get it Here
NOTE: Mac owners can try Nilo Marabese's "NMG" tool, available here.


  1. In photoshop (or any other image editor that gives advanced access to channels), go to file -> New. Set options as shown:


  2. Double click on your foreground color box to change it. Under the RGB color number change all three -- R, G and B -- to 128, to create a neutral gray color, as shown below:


  3. Fill your 256x256 image with the neutral gray.

  4. Now change your foreground color again, but set each RGB value to 174.

  5. Select your text tool, click on your image and type whatever you want, as long as it fits in the image. (See below.)


  6. Right-click on your text layer and duplicate it.

  7. Deactivate all layers except for your first text layer, double click on it to add a layer effect, select emboss and use the settings shown:


    Now click "OK"

  8. Add a new blank layer, and with both this new layer and the first text layer active ONLY, hit Ctrl+Shift+E (Mac, CMD+Shift+E). This will merge only the layers you have visible together, effectively rasterizing the layer effect we just created (If anyone knows an easier technique please share!)

  9. Now with only your second text layer visible/active (the one we made by duplicating the first text layer), go and apply emboss to it, just like the last one, except use the settings shown:


    Now click "OK".

  10. Now, once again, create a new blank layer, and with your new blank layer and your second text layer only, merge visible (Ctrl+Shift+E). Select the resulting layer by pressing Ctrl+A (to select all) and copy it by pressing Ctrl+C.

  11. Make all of your layers visible and select your main layer -- the one containing the 128 neutral gray. Now it's time to be introduced to the color channels. The layer tab is often, by default, next to the color channels tab; simply click on that tab to see the channels. Here, all of the RGB channels can be individually selected. For our purposes, click on the red channel to select it:


  12. With the red channel selected -- and I do mean only the red channel! -- press Ctrl+V to paste the layer we just copied into it. As mentioned above, the red channel is responsible for the left-right (horizontal) lighting information, hence we're pasting the text that has the left/right embossing on it into this layer. The shading that is left-right corresponds to how the lighting will be affected when used as a normal map.

  13. Under the channels tab, click on the "RGB" channel at the top, this will reselect all of your channels automatically. Next we're going to select the first text layer: the one that had the up-down emboss applied to it. Once again, hit Ctrl+A, then Ctrl+C.

  14. Select your main layer -- the one with the 128 neutral gray -- and go to the channels tab, but this time select only the green channel and hit Ctrl+V. Hit Ctrl+D to deselect the selection that is automatically created.

  15. Now click on the blue channel and ensure only the blue channel is selected. Hit D, then hit X. This will cause your foreground colors to go back to Default. Pressing X again will switch your foreground to white. Now fill in the blue channel with 100% white.

  16. Reselect the combined "RGB" channels again to make sure you have all channels selected, then switch to your layers tab. Throw away your text layers, keeping only your main layer. (You might want to save first!) Now your channels tab should look something like the screenshot below, and your image will start to look very similar to a normal map!


  17. Now, our normal map is not quite finished yet.

    A normal is a vector sticking out of a polygon, perpendicular to its surface. A normal map represents a bunch of unit vectors -- vectors whose dimensions add up to one (or "unity" in maths-speak) -- by mixing the different color channels together. So, say you have your lighting at an extreme angle, the normal map will be creating a normal which is in between the data it reads from the red channel and the green channel. This vector still needs to be a unit vector (i.e. add up to 1). Normalizing the normal map ensures the data from all of the channels does exactly this. (If you don't understand this then don't worry about the details, just always understand that any changes to a normal map's color will require the map to be re-normalized again to make each vector in the map a unit vector.)

    To complete our process, start the Nvidia photoshop filter mentioned earlier, Filters -> Nvidia Tools -> NormalMapFilter. Select the settings shown below. Notice they're set to "Normalize Only."


  18. You'll see your normal map change color slightly. Save your normal map to your format of choice. But remember! Avoid lossy formats when you're saving normal maps. Jpeg or any lossy compression will ruin the lighting data/information held in a normal map.

We're done! To see your work, load up your normal map into your favorite normal map preview utility. The screenshot below is from 3DS Max using a custom FX shader using a DX9 material:




Now, the reason for doing all of this is for us to explore how a normal map functions and therefore how best to edit one. You'll find that as you use normal maps more and more, you'll need the skill to edit them by hand. Failing to do so will limit you. Not to mention that understanding normal mapping in general will allow you to make better use of it.

I hope you find this tutorial helpful.

Jarrod.



(Last revision: 11-AUG-2008. STB.)


All Content Copyright Jarrod Christman - 2015