CREATING AND USING NORMAL MAPS - A Tutorial Introduction In the last 10 years or so we ve seen lots of video games released that use low poly count models for the game play and then tell the story using pre-rendered cinematic sequences. The characters in the cinematics always look really nice with lots of detail and realism, but as soon as the game play starts again, the model is back to being low poly and very chunky looking. Wouldn t it be cool if you could make your 1500 poly real-time model look like your 2 million poly cinematic (software rendered) model? That is the main goal of using normal maps. The idea is that you take all of the detail from the high poly model and put it in a normal map. Then you apply the normal map to the low res model just like you would add a texture map. Now you have a low res model that looks a lot like the high res one. It s not perfect, but it s a pretty good trick that makes low res models look A LOT better than they have before. The aim of this tutorial is to introduce you to creating normal maps and help you understand the principles involved. Because normal mapping is a bit technical in its approach, I want to explain it in such a way as to allow game artists without a lot of technical background to understand the technique and be able to use it. Before we continue, I would recommend that you download Polybump Previewer from the Crytek web site here. It s a real-time demo that does a good job of showing off the power of normal maps. Note: I ve learned most of this stuff on my own through research on the Internet and by using trial and error. I m an artist myself, not a programmer. If you find any information in this tutorial that is just plain wrong or needs some correction or editing, please let me know. I m no expert and I m still learning. If you have more information for me (or better information!) please let me know. I d love to hear from you. Also, if there s something in here that I haven t explained very clearl y, tell me and I ll try to provide more details. How Lighting Works Before talking about normal maps specifically, it s important that I give a general overview of the process of lighting a 3d model so you can have a good foundation for understanding what the normal maps are doing. This is a very simple explaination. If you want to learn more, just follow the links in the text. So how does lighting work? How do we tell how dark or bright to make each point on the screen so that the object looks like it s being lit by the lights in the scene? First it s important to know the direction that each point on the surface is facing. The direction that a point on the surface is facing is called a normal. You can imagine a normal as a line extending from the surface point. The line is perpendicular to the surface. Next we need to know where the light is in our scene. We create a line from the point on the surface to the position of the light. This line is called the light vector. (Vector is a fancy math term for line.) So now we have two vectors coming out of our surface point, the light vector and the normal. If we measure the angle between the two lines then we know how to light the point. If the angle is small (the two vectors are pointing in a similar direction) then we know that the surface point needs to be bright because it s looking almost straight at the light. If the angle is large then we know that the point needs to be dark because it is facing away from the light (assuming there s just one light).
That s pretty much all there is to it. (Of course there are all kinds of other cool stuff you can do like specular and reflection, but we ll get into that in another tutorial.) The core mathematical formula for lighting looks like this: brightness = N dot L N is the direction that the surface is facing (the surface normal) and L is the line that we draw from the surface point to the light source (the light vector). Dot is the way we measure the angle between the two lines. It s a dot product of the two vectors. Enter the Normal Map So how does this apply to real-time models? Up until just recently, most real-time video game models have been lit using per-vertex Gouraud shading (pronounced Guh-row). That s a big fancy title that basically means that only the vertices were lit with the N dot L formula (only the corners of the polygons) and then all the pixels on the polygons in between got their lighting by interpolation. So if my polygon had one dark vertex and one bright vertex, the pixels in between would just be a linear gradient from light to dark. It s a short cut that allows the graphics hardware to do a lot less calculations because it s only doing the N dot L thing at a few points instead of all of them. Then it makes a quick estimate of how the surface in between the verts should be lit. This method works pretty well, but it doesn t look as realistic as doing the lighting calculation at every pixel. The image above illustrates the problem with Gouraud shading. This low-poly sphere is lit per-vertex using Gouraud shading. It's obvious that the linear interpolation isn't good enough to make the lighting look convincing. Sometimes you get the lighting you want with Gouraud shading, but sometimes you get some strange artifacts that don t look good at all. If the triangles in your model are large your lighting will look really poor. You can only put detail in your model using more polygons so you re limited by the number of polygons the game engine can push. What s the solution to these problems? Per-pixel lighting! Starting with the GeForce2 graphics card, graphics hardware now has the ability to calculate the N dot L lighting formula at every pixel instead of at every vertex. This eliminates the problems caused by Gouraud shading and opens up the door to some really cool possibilities.
This low-poly sphere is lit per-pixel. Even though it's still a low poly sphere, it's shading is nice and smooth because the lighting calcualtions are done for every pixel. Per-pixel lighting uses an RBG texture to encode the data needed to create surface normals in a regular texture map. This texture containing surface normal data is called a normal map. The red, green, and blue channels of the normal map represent the X, Y, and Z values of the normal vector. Here's an example of a normal map that I created: Remember when I said that the surface normal always goes perpendicular to the surface? That wasn t necessarily true. When you use normal maps, you can make the normal at each pixel go in whatever direction you want. In the image above we can see that the light blue pixels (R 127, G 127, B 255) represent normals that are pointing straight out of the screen. The pink pixels represent normals that are tweaked to the right. Green pixels represent normals that are tweaked up. Purple pixels represent normals that are tweaked down, and dark blue/green pixel are normals tweaked to the left. You can make it look like your surface has lots of extra bumps, or scratches, or any other type of surface detail simply by editing the normal at each pixel so they make the surface appear to go in directions that it really doesn t. The tweaked normals fool the eye into believing that the surface has more detail than it really does because of the way the lighting reacts with the normal at each pixel. If you ve ever painted a bump map for a non-real-time model, you already understand this principle. You can use normal maps to achieve the exact same results as a bump map only in real-time. In fact, it s very easy to just paint a plain old bump map for your real-time model and then convert it to a normal map. Then apply the normal map to your model and you ve got bump mapping in real time! The first half of the tutorial will show you how to do this. An even cooler use for a normal map is to make a low res model look almost exactly like a high res model. This type of normal
map is generated by the computer instead of painted like a bump map. Here s how it works: First you create two versions of the model a high polygon version (which can contain as much detail as you want) and a low polygon version that will actually get used in the game. Then you align the two models so that they occupy the same space and overlap each other. Next you run a special program for generating the normal map. The program puts an empty texture map on the surface of the low res model. For each pixel of this empty texture map, the program casts a ray (draws a line) along surface normal of the low res model toward the high res model. At the point where that ray intersects with the surface of the high res model, the program finds the high res model s normal. The idea is to figure out which direction the high res model surface is facing at that point and put that direction information (normal) in the texture map. Once the program finds the normal from the high res model for the point, it encodes that normal into an RGB color and puts that color into the current pixel in the afore mentioned texture map. It repeats this process for all of the pixels in the texture map. When it s done, you end up with a texture map that contains all of the normals calculated from the high res model. It s ready to be applied to the low res model as a normal map. I ll show you how to create this type of normal map in the second half of the tutorial. What You Will Need There are a few things that you ll need in order to complete the tutorial. Make sure that you have all of the following items before beginning the tutorial. If you don t have some of them, you ll still be able to learn the principles involved, but you won t be able to complete the tutorial steps. So, here s what you need: If you have trouble setting up or installing any of these programs, just ask and I'll see if I can help you. Tools for Creating Your Models 3DS Max, Maya, Softimage, or Lightwave http://www.autodesk.com/3dsmax# http://www.autodesk.com/alias http://www.softimage.com/products/xsi/default.aspx http://www.newtek.com/lightwave/index.php This is the most important piece of software you ll need. You have to have a 3D modeling program to create your high and low res models. I use 3DS Max. Tools for Generating Your Normal Maps Adobe Photoshop http://www.adobe.com/products/photoshop/main.html You ll need Photoshop for creating your bump map in the first portion of the tutorial and for converting it to a normal map. ATI s normal map generator program http://www2.ati.com/developer/normalmapper-3_2_2.zip This piece of software will create your normal maps from the high and low res versions of your model. Once you ve
downloaded the program, be sure to install the Max or Maya exporter. The readme file explains how to do this. Nvidia s DDS plugin for Photoshop http://developer.nvidia.com/object/nv_texture_tools.html This plug-in will allow you to convert your bump map to a normal map and save it in DDS format. Tools for Viewing Your Model With the Normal Map Applied Nvidia s Cg plug-in for Max or Maya Max version: http://developer.nvidia.com/object/io_3dsmaxcgfxplugin.html Maya version: http://developer.nvidia.com/object/mayacgplugin.html Before installing either of these plug-ins, you ll need to install the Cg compiler, which can be found here: http://developer.nvidia.com/object/cg_toolkit_1_1.html These plug-ins allow you to display real-time Cg shaders in the view port of Max or Maya. This tutorial uses the Cg plug-in for displaying the end results of your normal map applied to the surface of your model. If you have another program that supports normal map per-pixel lighting, you can use that instead. A Normal Map Shader http://www.bencloward.com/bcloward/simple_normal_map_shader.fx This is a shader that I wrote that you'll need to use together with Nvidia's Cg plugin in order to view your model with the normal map applied to it. An Nvidia GeForce3 or greater graphics card You could also probably use a Radeon 8500 or greater ATi card, but some of the features of the Cg plug-in for Max or Maya may not work correctly with ATi hardware. If you re using another program to display your normal mapped models, then ATi cards will work fine. At the end of the tutorial there is a list of additional links. If you use software other than Maya, 3DS Max, and/or Photoshop you can find information there about using other software to create normal maps. Creating Normal Maps from Bump Maps The easiest method of making your real-time models look more detailed is to used a normal map created from a bump map. In this method, the normal map provides, in real-time, the exact same funtionality that a bump map adds to a software rendered model. The basic principle works like this: Create a real-time model. Paint a bump map for your model in Photoshop or another paint program.
Convert the bump map to a normal map with Nvidia's Photoshop plug-in. Other simple programs can also do this. See the last page of the tutorial for more info. Apply the normal map to the model and render it will a per-pixel lighting shader. You end up with a model that looks like it has a lot of extra surface detail. This process is probably pretty simple to understand so in this tutorial I'll just cover the step that might be new to you: Converting the bump map to a normal map. The conversion is done using a Photoshop plug-in from Nvidia. You can follow the link on page 3 of the tutorial to download this plug-in. Once you've downloaded it just run the executable to install it. Next, follow the steps below to create a normal map. 1. 2. Open your bump map in Photoshop. Be sure that it is a "power of two" image (64x64 or 128x128 or 256x256, etc) and that the light colored pixels represent raised surface details and the dark pixels represent lowered surface datails. Choose "Save As" from the File menu. Give your texture a name and choose DDS format. DDS stands for Direct Draw Surface. It's an image file format that is used natively by DirectX. Don't worry if DDS isn't the final file format that you want. You can always open the image again and save it as another format once it's converted. 3. When you click the Save button, this options dialog will appear that allows you to specify all of the parameters for saving your image.
4. I was really impressed with how much control all of these options gave me over exactly what I wanted to do with my image. You can do a lot more with DDS format than we're going to cover in this tutorial. Click on the "Normal Map Settings..." button to access the normal map conversion options. The following window will open: 5. 6. Click the "Convert to Tangent Space Normal Map" box. Set Filter Type to "4 sample" and Scale to "4." Set Height Source to "Average RGB." (Once you've converted your bump map to a normal map, you're welcome to come back to this dialog and play around with these settings to achieve different results. For example, the scale value will make your bumps appear higher of lower off of the surface.) When you're done, click the OK button. Back at the DDS format options window, click the Save button. This will convert your image to a normal map and save it in DDS format. When the dialog goes away, you're image will look just the same as it did before you started. Close the image and re-open it to see the normal map that you have created. Pretty easy, isn't it? Now the cool part comes when you apply the normal map to your model using per-pixel lighting. You can jump ahead and do that now if you want. Just go to page 6 of the tutorial and follow the instructions there. Or you can go to the next page of the tutorial and learn how to use a normal map to make your low poly model look like a high poly model. Normal Maps for High Poly Detail The main drawback of painting a bump map and then converting to to a normal map is that you can't make your model appear to be more round and have more shape. A bump map can only make the surface look like it's higher or lower than it really is. A bump map allows you to add tight surface detail, but you can't give your model the illusion that it uses tens of thousands of more polygons than it actually has. The technique presented on this page is a bit more complex, but the results can be stunning because your going to use the normal map to give your low poly model the look of a high poly one. Here are the basic steps for creating a normal map from a high poly model:
Create a highly detailed version of your model. It doesn't need UV coordinates or any materials, just lots of detail created with polygons. This head model has more than 30,000 polys. It also uses a bump map, but yours doesn't have to. Create a low poly version of your model based on the high poly version. This version needs to have UV coordinates applied. The head below has 632 polygons. Use a program to bake the detail of the high poly model into a normal map based on the UV coordinates of the low poly model.
Now we take our low poly model...... apply the normal map to it, and render with a per-pixel lighting shader. Remember, this model still has only 632 polygons. The results are pretty good. Especially when we compare this to the image above without the normal map applied.
You end up with a low poly model that looks like the high poly version. You probably already understand how to create the high and low poly models and how to apply the UV coordinates. If you'd like more information on the modeling and unwrapping steps, take a look at my more advanced normal mapping tutorial. For now I'll just cover the step that might be new to you: Baking the high poly model detail into a normal map The following portion of the tutorial is only required if you are using an older version of your 3D app - like 3ds Max 5 or 6, or Maya 4.5 or 5. If you are using 3ds Max 7 or higher, Maya 6 or higher, Softimage, or Lightwave, you can create normal maps right in your 3D app without needing to export your model to an external program. My advanced normal mapping tutorial has more details on that. If your 3d software can't generate normal maps internally, you can use ATi's NormalMapper program. You can follow the link on page 3 of the tutorial to download this program. Once you've downloaded it, unzip it to your Program Files directory and install the included exporter plug-in for the 3D software you're using. This will allow you to export you models from your 3D software for use in the NormalMapper program. I use Max so I placed the file called "MAX5ExportNMF.dle" in the \3dsmax5\stdplugs folder. You can also use the Maya exporter file called, "Maya45NMFExport.mll." Note: If you're using a program other than Max or Maya, there is an alternate version of ATi's NormalMapper adapted by Michael Bunnell which allows NormalMapper to recognize OBJ format. You can download it here: http://www.seanomlor.com/mikeb/ Just export your objects in OBJ format instead of NMF and follow the rest of the steps. Next, follow the steps below to create a normal map. 1. Export Your High and Low Poly Models in NMF Format ATi's NormalMapper uses a model format called NMF. I think it's a format that ATi created. In order for the NormalMapper program to create the normal map, you need to export both the high poly version and the low poly version in NMF format. First, be sure that you've installed the NMF exporter Max plug-in that I mentioned above. Select your high poly version and choose "Export Selected" from the File menu. Save the file in the directory where you installed the NormalMapper program. Mines is C:\Program Files\NormalMapper\Rel. Be sure to give your model a name that indicates that it is the high poly version. Repeat this process for the low poly version.
2. Open Command Prompt and Browse to NormalMapper Unfortunately, the NormalMapper program is a command line applciation so you'll have to open a Command Prompt window to run it. In the Windows Start Menu, choose Programs - Accessories - Command Prompt. This will open a DOS like window for you to type commands. Theh first thing you need to do is go to the directory where the normal mapper program is. Type "CD.." and hit enter. Repeat this process until your command line just says C:>. Now type "CD Program Files\NormalMapper\Rel" That should put you in the directory where NormalMapper is installed (if you put it in the same place I did.) 3. Run the NormalMapper Program on Your Models Here's where you get to type a bunch of cammands. First type "NormalMapper.exe" followed by the name of your low res model and then the name of your high res model. Then type the width and height of the normal map you want to create. Each height value must be a power of two (64, 128, 256, etc). Finally, type of the name that you want to give your new normal map. The normal map will be created in Targa format so it makes sense to end the name with ".tga". My command line looks like this: NormalMapper.exe face_low.nmf face_high.nmf 1024 512 facen.tga Now hit enter. NormalMapper with spit out a bunch of information and begin to generate your normal map. There are a lot of other command line options that you can use to tweek your results, render in higher quality, solve problems, etc. See the ReadMe file that comes with NormalMapper for instructions on how to use all of the options. That's it! Once the program finishes running, your normal map is done. Now the cool part comes when you apply the normal map to your model using per-pixel lighting. Just go to the next page of the tutorial and follow the instructions there. You can also jump to the last page for a list of programs that can display your model and normal map using per-pixel lighting. Page 6: Applying Normal Maps to Your Model Note: The information on this page is a bit out of date now that 3DS Max v6 and v7 are out. If you're us ing those, check out my tutorial on how to use HLSL shaders in the real-time viewport. So now that you've got a normal map, what do you do with it? Somehow you need to get the computer to interpret all of those crazy blue, pink, and green colors as surface normal information instead of color information. How is that done? Of course the IDEAL way is to get your game company's game engine to do it for you! However, lots of people don't have access to a full on game engine that supports per-pixel lighting. If you don't, there are several alternatives. ATi's NormalMapper comes with a
simple program called NMFView that will allow you to choose your model and then choose your normal map and it will render the model with per-pixel lighting using the normal map. You can also look at page 8 of the tutorial for additional methods. On this page, I'm going to explain the complicated way to see your normal map on your model. We're going to go through the process of setting up 3DS Max to display real-time shaders in the viewport. (You can also do it in Maya.) You can then use a shader to display your normal map on your model. The reason I want to go about explaining this complicated method is because you'll be able to use it for lots of things. Real-time shaders in Max can give you all of the control over the surface appearance of your model that you get with Max's materials. It's possible to create and use shaders that render in real-time that look just like the software rendered materials that take several minutes to render. You, the artist, can have full control over how your model looks when rendering in real-time. Note: This page focuses mainly on viewing normal mapped models in the viewport of 3DS Max 5.1. If you're not using 3DS Max 5.1, chances are that your software can also display normal mapped models in its viewport. Take a lo ok at page 8 for a list of programs that can display normal mapped models. Note: I've received several emails from people who tell me that the steps on this page only work if you have an Nvidia graphics card. If you're using a graphics card from ATi or another brand, take a look at page 8 for a list of alternate methods of displaying your normal maps. Eventually I want to write several tutorials that explain the basics of writing shaders in Cg and HLSL so you can start to have full control over the surface appearance of your models. For this tutorial, however, I'll just provide you with a shader that I wrote that you can use in Max or Maya to view your normal map. Here's what we're going to do: Install Nvidia's Cg Plugin for Max (or Maya) Enable real-time Cg shaders in the viewport and choose the normal map shader Apply the normal map shader to your model Let's get right to it. The first thing that you need to do is be sure that you have 3DS Max 5.1 installed with Service Pack 1. If you have anything less than that, Nvidia's Cg plug-in won't work. Once you've got Max 5.1 Service Pack 1 installed, follow the steps below. (If you're using Max 6, it can use HLSL shaders in the viewport natively. It should be pretty easy to set up. I don't have Max 6 so I can't offer direct instructions.) 1. 2. Install Nvidia's Cg Plug-in This step requires that you install two items. The first is the Cg Compiler. This is a program that takes the shaders that you're using in Max or Maya and coverts them (automatically without you needing to do anything) into machine language that your graphics card can use. You can download the Cg Compiler here: http://developer.nvidia.com/object/cg_toolkit_1_1.html Once you've installed the Cg Compiler, you can install the Max or Maya Cg plug-in. You can find the Max version here: http://developer.nvidia.com/object/io_3dsmaxcgfxplugin.html or the Maya version here: http://developer.nvidia.com/object/mayacgplugin.html Configure Max for Direct3D The Max version of the Cg plug-in requires that you use the Direct3D driver for Max. (If you're using Maya you can skip this step) To use the Direct3D driver, Choose "Preferences" from the Customize menu. Then click on the "Viewports" tab. At the bottom of the window is a text box that displays your currently installed driver. If it says "Direct3D" then you should be fine. If it says something else, then you need to switch to Direct3D
Click on the "Choose Driver" button and then choose Direct3D in the new window that pops up. Now click on the "Advanced Direct3D" button and be sure that you're using DirectX 9. 3. Max should now be configured correcly. Create a material that uses a real-time shader Bring up the Material Editor. Notice that there is a roll-out at the bottom called "Viewport Manager." Choose "Cg" from the drop-down menu. Now this material is using Cg for its viewport manager and is able to render Cg shaders in the viewport. You have a new roll-out that looks like this:
I don't use the Material Mapping Options much so you can just ignore those for now. You can read more about them in the documentation that comes with the plug-in. What we're intereseted in is the "Connection Editor" button. Click that to bring up the Connection Editor window. 4. This window is similar to Max's Material Editor window in that it allows you to choose a shader and tweak that shader's settings. Load the normal map shader and select your normal map If you didn't do it already, you can download my normal map shader here:
simple_normal_map_shader.fx 5. Now you can load this shader to use in the Max viewport. A shader is a program (a simple text document) with code that describes how the lighting calculations should be done for the material. The shader that I put together uses a normal map for per-pixel lighting. Click on the slot that says "default.fx" Two buttons appear to the right of the slot. Click on "File" button to choose the shader you want to use. Browse to the spot where you saved my shader, select it, and click "Open." Now your material is set up to use the normal mapping shader. All you need to do is load your normal map and apply it to your model. Unfortunatly, Nvidia's Cg plug-in only supports textures that are in DDS format. Take a minute to open your normal map in Photoshop and save it as a DDS file using Nvidia's DDS Photoshop plug-in. Find the slot labeled "normalmap." It's currently filled with "default_bump_normal.dds." (If you apply the Max material to your model now, you'll see the default normal map.) Click the normalmap slot and click on the File button to browse to where you saved your normal map. Select it and hit the Open button. The shader is now using the normal map you created. If you'd like, you can also use a diffuse color map by repeting the process for the "colortexture" slot. Apply the Normal Map shader to your model If you haven't already, load your model into Max. Add an omni light source and switch to a perspective window. Now select your model. Hit the small "Assign Material to Selection" icon on the Material Editor. If all went well, you should now be looking at your model, lit per-pixel with your normal map. So there you have it. A step-by-step tutorial on how to create and use normal maps. If you've had any problems following along with these steps or you've run into some technical issues, email me and I'll see if I can help you. Also, if you learned something from all of this, I'd love to hear from you just so I know that I've made a good use of my time putting it all together. Now that you have the Cg Plug-in installed, take some time to load up some of the other shaders (.fx files) that came with the plug-in. You can find them here: C:\Program Files\3ds max Cg Plugin\media\CgFX. I was pretty amazed at the effects that are possible to use - right in the Max viewport! And that's just the beginning. The best part about Cg and this plug-in is that once you learn a little bit of coding, you can write your own shaders do make your surfaces look exactly the way you want them to. While I was writing the first six pages of the tutorial, I was keeping a list of all of the things that I was leaving out of the process. I left out a lot of little details along the way in the interest of keeping things short and simple. I kept the list of all that I was leaving out so that when I got here to page 7 I could just explain all of the stuff that I had left out. Well, the bad news is that the list got too long for all of the information to fit on one page, so it's not here. The good news is that I decided to write a whole new tutorial called "NORMAL MAPS: PART II - BEYOND THE BASICS" that includes all of the extra information. Just click on the link to get started. You can also go to the last page of this tutorial which contains a list of links to additional tutorials, tools, forum threads, etc, all on the topic of normal mapping.