NORMAL MAPPING TUTORIAL [Archive]

View Full Version : NORMAL MAPPING TUTORIAL

dynafx

25-04-2005, 11:24 PM

CREATING AND USING NORMAL MAPS - A Tutorial - page 1 

<hr color="white" size="1">
 
 <t></t><table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
[authors into: 
http://www.monitorstudios.com/bcloward/contact.html 

http://bcloward.blogspot.com/] 
 
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 <a href="http://crytek.com/downloads/index.php?sx=polybump" target="_blank" target="_blank">here</a>. 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, <a href="mailto:bsmji@hotmail.com" target="_blank" target="_blank">please let me know</a>.
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
clearly, 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. I?m skipping a lot of the
details here. 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
<a href="http://en.wikipedia.org/wiki/Surface_normal" target="_blank" target="_blank">normal</a>. 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 light in the scene. 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. 

 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals01.gif" alt="Surface Normal and Light Vector" height="132" width="164" border="0"></center> 
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). 

 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals02.gif" alt="A smaller angle between the two vectors means a brighter surface" height="132" width="137" border="0">
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals03.gif" alt="A larger angle between the two vectors means a darker surface" height="132" width="184" border="0"></center> 
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: 
 <center>brightness = N dot L</center>
 
 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 <a href="http://en.wikipedia.org/wiki/Dot_product" target="_blank" target="_blank">dot product</a> of the two vectors.
</td></tr></t></table>

<edited><editID>dynafx</editID><editDate>38468.4891898148</editDate></edited>

dynafx

25-04-2005, 11:25 PM

RESOURCES - TUTORIALS - CREATING NORMAL MAPS - page 2 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
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 <a href="http://en.wikipedia.org/wiki/Gouraud_shading" target="_blank">Gouraud shading</a>
(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 <a href="http://en.wikipedia.org/wiki/Linear_interpolation" target="_blank">interpolation</a>.
So if my polygon had one vertex who?s light value was dark and one
vertex who?s light value was bright, the pixels in between would just
be a linear gradient from light to dark 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals04.gif" alt="Gouraud Shaging: Lighting only happens at the verticeshe pixels are lit by linear interpolation" height="182" width="241" border="0"></center> 

 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. 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals05.gif" alt="Gouraud Shaging: The sphere has obvious lighting errors because lighting is only being calculated at each vertexeight="132" width="135" border="0"></center> 

 The image above illustrate 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. 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals06.gif" alt="Per-Pixel Shaging: The sphere's shading is smooth because the lighting is caculated at every pixeleight="132" width="135" border="0"></center> 

 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: 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals07.gif" alt="The R, G, and B colors in the normal map represent the X, Y, and Z values of the normal vectoreight="256" width="256" border="0"></center> 



 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. 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals08.gif" alt="Paint a bump map just like you would for a high quality rendering" border="0" height="180" width="180" border="0"> <img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals09.gif" alt="Use a program to convert the bump map to a normal maporder="0" height="180" width="180" border="0"> <img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals10.gif" alt="Apply the normal map to a flat plane to get bump mapping in real-timeorder="0" height="180" width="180" border="0"></center> 

 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. 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals11.gif" alt="The low polygon version of the model" height="126" width="180" border="0"> <img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals12.gif" alt="The high polygon version of the model" height="126" width="180" border="0"></center>
 
 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 is facing at that point and put that direction
information (normal) in the texture map. 
 <center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals13.gif" alt="Rays are cast from every pixel of the low poly model texture. At the point where each ray intersects the high poly model, the new normal is calculated and stored in the texture as an RGB coloreight="114" width="256" border="0"></center>
 
 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. </td></tr></t></table>

dynafx

25-04-2005, 11:26 PM

RESOURCES - TUTORIALS - CREATING NORMAL MAPS - page 3 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
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, <a href="mailto:bsmji@hotmail.com" target="_blank">just ask</a> and I'll see if I can help you.

 Tools for Creating Your Models
<ul> <li>3DS Max, Maya, or Softimage 
<a href="http://www.discreet.com/3dsmax/" target="_blank">http://www.discreet.com/3dsmax/</a> 
<a href="http://www.alias.com/eng/products-services/maya/index.shtml" target="_blank">http://www.alias.com/eng/products-services/maya/index.shtml</a> 
<a href="http://www.softimage.com/products/xsi/v3/" target="_blank">http://www.softimage.com/products/xsi/v3/</a> 
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. 
Note: If you use Softimage you won?t be able to use
the ATi exporter below, but I?ve heard that Softimage can generate
normal maps without needing any external software. I haven?t used
Softimage, so I can?t show you how to do it, but you should be able to
find more information on the web.


</li></ul>
 Tools for Generating Your Normal Maps
<ul> <li>Adobe Photoshop 
<a href="http://www.adobe.com/products/photoshop/main.html" target="_blank">http://www.adobe.com/products/photoshop/main.html</a> 
You?ll need Photoshop for creating your bump map in the first portion
of the tutorial and for converting it to a normal map. 

</li><li>ATI?s normal map generator program 
<a href="http://www.ati.com/developer/tools.html" target="_blank">http://www.ati.com/developer/tools.html</a> 
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. 

</li><li>Nvidia?s DDS plugin for Photoshop 
<a href="http://developer.nvidia.com/object/nv_texture_tools.html" target="_blank">http://developer.nvidia.com/object/nv_texture_tools.html</a> 
This plug-in will allow you to convert your bump map to a normal map and save it in DDS format.


</li></ul>
 Tools for Viewing Your Model With the Normal Map Applied
<ul> <li>Nvidia?s Cg plug-in for Max or Maya 
Max version: <a href="http://developer.nvidia.com/object/IO_3dsmaxCgFXPlugin.html" target="_blank">http://developer.nvidia.com/object/IO_3dsmaxCgFXPlugin.html</a> 
Maya version: <a href="http://developer.nvidia.com/object/MayaCgPlugin.html" target="_blank">http://developer.nvidia.com/object/MayaCgPlugin.html</a> 

Before installing either of these plug-ins, you?ll need to install the Cg compiler, which can be found here: 
<a href="http://developer.nvidia.com/object/cg_toolkit_1_1.html" target="_blank">http://developer.nvidia.com/object/cg_toolkit_1_1.html</a> 
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. 

</li><li>A Normal Map Shader 
<a href="http://www.monitorstudios.com/bcloward/simple_normal_map_shader.fx" target="_blank"> http://www.monitorstudios.com/bcloward/simple_normal_map_sha der.fx</a> 
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. 

</li><li>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. 

</li></ul>
 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.</td></tr></t></table>

dynafx

25-04-2005, 11:26 PM

RESOURCES - TUTORIALS - CREATING NORMAL MAPS - page 4 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
Using Normal Maps for Bump Maps

 The easiest method of making your
real-time models look more detailed is to use a normal map as 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: <ul> <li>Create a real-time model. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals16.gif" alt="Create a low polygon model" border="0" height="227" width="320" border="0">


</li><li>Paint a bump map for your model in Photoshop or another paint program. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals14.gif" alt="Paint a bump map in Photoshop" border="0" height="128" width="128" border="0">


</li><li>Convert the bump map to a normal map with Nvidia's Photoshop plug-in. Other simple programs can also do this. See the <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">last page</a> of the tutorial for more info. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals15.gif" alt="Convert the bump map to a normal map with Nvidia's Photoshop plug-in" border="0" height="128" width="128" border="0">


</li><li>Apply
the normal map to the model and render it will a per-pixel lighting
shader. I use Nvidia's Cg plug-in for Max or Maya but <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">other programs</a> are also available. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorials_normals01.jpg" alt="Apply the normal map to the model using Nvidia's Cg plug-in for Max or Maya using the normal map shader" border="0" height="227" width="320" border="0">


</li></ul>
 
 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 <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps3.html" target="_blank">page 3</a>
of the tutorial to download this plug-in. Once you've downloaded it,
place the file called "dds.8bi" in the PhotoshopPlug-InsFile Formats
folder. This will allow you to use the plug-in in Photoshop. Next,
follow the steps below to create a normal map. <ol> <li>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.
</li><li>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. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals17.gif" alt="Save your image in DDS file format" border="0" height="192" width="317" border="0">


</li><li>When
you click the Save button, this options dialog will appear that allows
you to specify all of the parameters for saving your image. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals18.gif" alt="The DDS format options dialog box" border="0" height="169" width="320" border="0"> 
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. 

</li><li>Click on the "Normal Map Settings ..." button to access the normal map conversion options. The following window will open: 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals19.gif" alt="The normal map conversion dialog box" border="0" height="345" width="320" border="0">


</li><li>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. 

</li><li>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. 

</li></ol>
 
 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 <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps6.html" target="_blank">page 6</a>
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. </td></tr></t></table>

dynafx

25-04-2005, 11:44 PM

RESOURCES - TUTORIALS - CREATING NORMAL MAPS - page 5 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
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:
<ul> <li>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. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals20.gif" alt="Create a high detailed modelorder="0" height="420" width="450" border="0">


</li><li>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. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals21.gif" alt="Create a low poly version of the modelorder="0" height="420" width="450" border="0">


</li><li>Use
ATi's NormalMapper program to bake the detail of the high poly model
into a normal map based on the UV coordinates of the low poly model. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals22.gif" alt="A normal map containing all of the detail of the high poly model for use on the low poly modelorder="0" height="225" width="450" border="0">


</li><li>Now we take our low poly model . . . 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals23.gif" alt="The low poly model without the normal map applied and lit per-vertexorder="0" height="420" width="450" border="0">

. . . apply the normal map to it, and render with a per-pixel lighting
shader. I use Nvidia's Cg plug-in for Max or Maya but <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">other programs</a>
are also available. 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. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals24.gif" alt="The low poly model with the normal map applied and lit per-pixelorder="0" height="420" width="450" border="0">

</li></ul>
 
 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. I'll add a section with some tips on how to create your
high and low poly models to achieve the best results at the end of the
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 normal map is created using ATi's NormalMapper program. You can follow the link on <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps3.html" target="_blank">page 3</a>
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 3dsmax5stdplugs folder. You can also use the Maya exporter file
called, "Maya45NMFExport.mll." 
 Next, follow the steps below to create a normal map.

 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: 
<a href="http://www.seanomlor.com/mikeb/" target="_blank">http://www.seanomlor.com/mikeb/</a> 
Just export your objects in OBJ format instead of NMF and follow the rest of the steps.

 <ol> <li>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 FilesNormalMapperRel. 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. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals25.gif" alt="Save the high and low res versions of your model in NMF formatorder="0" height="277" width="450" border="0">


</li><li>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
FilesNormalMapperRel" That should put you in the directory where
NormalMapper is installed (if you put it in the same place I did.) 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals26.gif" alt="Browse to the NormalMapper directoryorder="0" height="157" width="450" border="0">


</li><li>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. </li></ol>
 
 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 <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">jump to the last page</a> for a list of programs that can display your model and normal map using per-pixel lighting.
</td></tr></t></table>

dynafx

25-04-2005, 11:44 PM

RESOURCES - TUTORIALS - CREATING NORMAL MAPS - page 6 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
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 using those, check out my tutorial on <a href="http://www.monitorstudios.com/bcloward/tutorials_shaders1.html" target="_blank">how to use HLSL shaders in the real-time viewport</a>.

 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 <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">page 8</a> 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 look at <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">page 8</a> 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 <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps8.html" target="_blank">page 8</a> 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:
<ul> <li>Install Nvidia's Cg Plugin for Max (or Maya) 


</li><li>Enable real-time Cg shaders in the viewport and choose the normal map shader 


</li><li>Apply the normal map shader to your model 


</li></ul>
 
 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.) <ol> <li>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: 
<a href="http://developer.nvidia.com/object/cg_toolkit_1_1.html" target="_blank">http://developer.nvidia.com/object/cg_toolkit_1_1.html</a>

Once you've installed the Cg Compiler, you can install the Max or Maya Cg plug-in. You can find the Max version here: 
<a href="http://developer.nvidia.com/object/IO_3dsmaxCgFXPlugin.html" target="_blank">http://developer.nvidia.com/object/IO_3dsmaxCgFXPlugin.html</a> 
or the Maya version here: 
<a href="http://developer.nvidia.com/object/MayaCgPlugin.html" target="_blank">http://developer.nvidia.com/object/MayaCgPlugin.html</a>


</li><li>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 

<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals27.gif" alt="You need to use Direct3D as your Max video driverorder="0" height="88" width="450" border="0"></center> 

Click on the "Choose Driver" button and then choose Direct3D in the new window that pops up. 

<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals28.gif" alt="Select Direct3Dorder="0" height="207" width="239" border="0"></center>

Now click on the "Advanced Direct3D" button and be sure that you're using DirectX 9. 

<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals29.gif" alt="Be sure that you're using DirectX 9" border="0" height="350" width="201" border="0"></center>

Max should now be configured correcly.


</li><li>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. 

<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals30.gif" alt="Choose Cg as the Viewport Manager for your material" border="0" height="103" width="331" border="0"></center>

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: 
<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals31.gif" alt="The Cg Viewport Shader roll-out" border="0" height="406" width="332" border="0"></center>

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. 
<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals32.gif" alt="The Connection Editor" border="0" height="471" width="415" border="0"></center>

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. 

</li><li>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: 

<a href="http://www.monitorstudios.com/bcloward/simple_normal_map_shader.fx" target="_blank">simple_normal_map_shader.fx</a>

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. 

</li><li>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. 

</li></ol>
 
 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, <a href="mailto:bsmji@hotmail.com" target="_blank">email me</a>
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
Files3ds max Cg PluginmediaCgFX. 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. 
 Page 7 of the tutorial is a
collection of Tips and Tricks you can use to create better normal maps.
There are some details I've left out along the way that will help you
get better results. I've included those details on page 7. </td></tr></t></table>

dynafx

25-04-2005, 11:46 PM

Page 7: Additional Tips and Tricks

 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. 

NORMAL MAPS: PART II - BEYOND THE BASICS - page 1 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
Introduction

 After writing the first tutorial,
I compiled a list of all of the extra information that I wanted to
include on the "Tips and Tricks" page. The list ended up being so long
that I decided to create a whole new tutorial. With this second normal
mapping tutorial, I'm going to go a bit more in depth for each of the
steps of the process of working with normal maps. While learning how to
create and use normal maps myself, I've learned a lot of information
for how to achieve better results both on my own through trial and
error, and also through research on the web. With Part II I'm going to
go beyond the nuts and bolts of creating and applying normal maps and
get into the jucy tid bits that really make them work well. 
 Note: If you haven't
followed the steps in the first tutorial and/or created your own normal
maps yet, I recommend that you do that first before proceeding with
this tutorial. I lot of the tips presented here cover issues that
you'll run into while working with your first normal maps, and they may
not make as much sense to you until you've actually tried out the
process.

 In order to make things a little
more organized, I've divided this tutorial into four main sections
covering the four main steps of normal mapping (so far I've only
finished the first one. Come back soon for the other three sections.): <ul> <li><a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps10.html" target="_blank">Tips for Creating Models</a> 
As covered in the previous tutorial, normal maps can require creating
both a high poly model and a low poly model. This section covers
information to keep in mind while creating these models that will help
you achieve a better end result. 
</li><li><a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps11.html" target="_blank">Methods for Creating Normal Maps</a> 
The previous tutorial covered two methods for creating normal maps:
converting a bump map to a normal map, and using ATi's NormalMapper
program. This section illustrates some additional (and better!) methods
for creating normal maps. 
</li><li><a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps12.html" target="_blank">Tips for Editing Normal Maps</a> 
This topic was not covered at all in the previous tutorial but needs to
be addressed here since editing a normal map requires some special care
and consideration. 
</li><li><a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps9.html" target="_blank">Tips for Applying and Using Normal Maps</a> 
I presented one method for apply normal maps in the previous tutorial:
Nvidia's Cg plug-in for 3DS Max and Maya. There are several other good
methods that I'll explore in this section. </li></ul>
 One more thing before you jump
in. As I said in the first tutorial, I'm an artist, not a programmer.
I'm writing this tutorial to help artists better understand the process
(which can be quite technical) so they can use it to make better art. I
hope it's helpful to you. If you find some problems, know some more
information that would be helpful to include, or just would like to
give me some feedback, I'd love to hear from you. <a href="mailto:bsmji@hotmail.com" target="_blank">Email me!</a>

 Now get going and make some cool stuff!
</td></tr></t></table>

dynafx

25-04-2005, 11:46 PM

NORMAL MAPS: PART II - page 2: Tips for Creating Models 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
Tips for Creating Models

 As I've discussed, the whole goal
of normal mapping is to make a low poly model look like a high poly
model. This is usually achieved by creating both a low poly model and a
high poly model and then using the detail of the high poly model to
create a normal map for the low poly model. So we've got two models
involved. This page contains tips for creating both the high and low
res models that will help you to achieve better final results. First,
we'll discuss the order of creation for the models. 
 Which Model Do I Create First?

 So if you have to create a low
poly model and a high poly model, which one do you create first? The
honest answer is, which ever one you want! Here are a couple of options: 
<ul> <li>Create the High Poly Model First 
If you are used to creating high poly models for non-real-time
rendering, you might want to create your high poly model first. Once
you've created a beautiful model with lots of detail, make a copy of
the model. This copy will become your low poly model - you just need to
reduce the poly count. Most 3D programs come with a feature to simplify
a model. In 3DS Max, the MultiRes modifier works pretty well. Just
crank the poly count down to a number that fits in your budget. If the
model is a character that needs to deform, be sure that you leave
enough detail in the joint areas for realistic deformation. 
</li><li>Create the Low Poly Model First 
A lot of artists in the game industry are more comfortable creating low
poly models. If that's you, you'll probably want to create the low poly
model first. This gives you very fine control over the low poly mesh.
(Sometimes resing down a high poly model, like in the previous method,
gives you a very messy mesh.) Once you've got a low poly model you're
happy with, make a copy of it. This copy will become your high poly
version. Just subdivide it several times. The Mesh Smooth modifier in
3DS Max works well for this. Now go in and add all the detail that
you've always wanted to add but couldn't because of your polygon
budget. </li></ul>
 There are other options, but this
is probably enough to get you going. Once you get started you'll
probably settle on a method that you're most comfortable with. 
 Tips For Creating the Low Poly Model

 The low poly model is the version
that will actually get used in the game. It needs to have a poly count
that fits in your engine's budget. Creating a low poly model that uses
a normal map is a little different from creating a regular model. Here
are some tips for getting good results from your normal map: <ul> <li>Only One Smoothing Group, No Hard Edges 
Up until now, smoothing groups (or hard edges) have been a good way to
accentuate features of a low poly model and make the details more clear
and readable. It used to be important to use smoothing groups carefully
to create a good model. Throw all of that out the window. Smoothing
groups are an enemy to normal maps. Your low poly model should have one
smoothing group (no hard edges). Here's why: 
<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals33.gif" alt="Hard edges cause gaps in data collected in the normal map" border="0" height="150" width="256" border="0"></center>

This image illustrates the process of generating a normal map. For
every pixel in the normal map, a ray is cast from the surface of the
low poly model outward along the normal where the ray started. The high
poly model surface normal is recorded at each ray intersection. (A more
detailed explaination is available in my first normal mapping tutorial <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps2.html" target="_blank">here</a>.)
If your model has a hard edge, all of the rays on the polygons that
share that edge will be uniform (go in the same direction). This will
leave a gap in the rays between the two polygons. No data from the high
res model will be recorded in this gap and an ugly seam on your final
model will result. 
<center><img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals34.gif" alt="Use soft edges to avoid gaps in the data" border="0" height="150" width="256" border="0"></center>

This image illustrates the same case but with a soft edge. Here we see
that with a soft edge, the low poly normals are interpolated (smoothed)
from one polygon to the other. There is no gap in the rays that are
cast from the low poly model to the high poly model. No high poly model
data is left out. There is a similar principle with regards to the high
poly model. Be sure to check it out below in the high poly model tips
section. 
</li><li>Avoid Extremely Sharp Angles 
Because you're using one smoothing group, as mentioned above, if your
model has sharp angles (greater than 90 degrees or so) you will get bad
artifacts in your normal map. These are caused by the large difference
between the angle of the faces and the vert normals. Round off your
sharp angles with extra faces for better results, or if you need sharp
angles, go ahead and use smoothing groups/hard egdes to create them. 
</li><li>Hide UV Seams Well The low
poly model needs to have UV coordinates applied. You should already be
familiar with this process. There are a few things to keep in mind when
laying out the UVs. The first is to hide your UV seams as best you can.
Put them on the insides of arms, in the back of the head, where the
neck meets the shirt, around the waist, etc. Try to find spots on the
model were a seam makes sense. UV seams are much more pronounced in a
normal map than they are on a regular diffuse texture. There is one
method that you can use to erase them. I discuss that on page 4. 
</li><li>Flipped UVs Issue In order to
save space on the texture map and to achieve a high texel density, most
character modelers will unwrap half of the model and then mirror that
half for the other side. You can also do this during the unwrap process
by selecting a group of UVs and flipping them horizontally or
vertically and then laying them down on top of the coresponding set of
UVs from the other side of the model. This is a great technique, but it
causes some problems when creating normal maps. Here's the issue: The lighting on a normal mapped model is dependant on the
surface direction (normal) of the polygons, but also on the normal
direction of the UVs. It's as if the UVs have a normal also. When you
flip the UV coordinates horizontally or vertically, the effect on the
lighting is the same as if you flipped the polygon from front facing to
back facing. Suddenly, the lighting looks like it's coming from the
opposite direction. If you work for a game company, you can ask your
engineers to add some additional code to your model exporter, so that
when your models are exported from Max or Maya, etc, the exporter will
recognize cases were the normal of the polygon and the normal of the UV
coords don't match. In those cases, the exporter can flip the UV normal
back the right way for you without effecting the unwrap at all. If they
need help figuring out how to do that, <a href="http://developer.nvidia.com/object/NVMeshMender.html" target="_blank">this</a> is a good place to start.

If you don't work at a game company or have access to programmers that
can just whip up stuff like that, your best bet is just to avoid using
mirrored texture coordinates all together. That's probably not what you
wanted to hear since you'll have to use a lot more texture space to get
the results you want, but that's the best you can do. 
</li><li>Overlapping UVs Often when
applying UVs to a model there are several parts of the model that share
the same part of the texture, so the UV coordinates of those pieces are
all on top of each other. This will work, but requires some special
handling. Generally, programs that create normal maps, like
NormalMapper, get all confused if you have overlapping UVs - so the
trick is to make a special copy of your low res model that's used only
for generating the normal map. On that copy, delete all of the polygons
that have overlapping UVs except for one set. That way, when you
generate the normal map using the copy, there are no overlapping UVs,
but you can then apply the normal map to the original model that has
overlapping and evething will work fine. 
</li><li>Splitting Up Your Model Many
models require more than one normal map. In these cases make a copy of
the original low res model, break the copy into multiple pieces, one
for each normal map. Put all of the polygons that will be using the
first normal map in the first piece, all of the polygons that will be
using the second normal map in the second piece, and so on. Then
generate the normal maps using the seperate pieces as if each piece was
its own model. Once the normal maps are created, you can apply them to
your original model. Sometimes it is also necessary to split up a complex model
into several different peices even when it's just using one normal map.
If you try to generate the normal map for your whole model and it comes
out very messy looking with high res details in the wrong places and
lots of errors, you can often fix the problem by making a copy of your
low res model and breaking it up into pieces along the UV seams.
Generate a normal map for each piece seperately and then put all of the
parts of the normal map together in a paint program to create a single
normal map for your original model. 
</li></ul>
 Tips For Creating the High Poly Model

 The high poly model will only be
used to create your normal map. Since it won't be rendered in
real-time, you can use as many polyons as you want - even millions! You
can model every rivet and every nail head, every skin wrinkle and every
pore. You can sub-divide the model until the wireframe is do dense it
looks like one solid color. (This kind of modeling is very gratifying
for those of us who've been stuck in low poly land for many years.) The
only practicle limitation is the amount of time it takes to generate
the normal map. Here are some tips to keep in mind when creating your
high poly model: <ul> <li>You Don't Need UV Coordinates 
That's right! The high res model does not need UV coordinates. It's
just a high detail mesh. Only the low res model needs UV coordinates.
Optionally, you can apply UV coordinates to the high res mesh and then
apply a bump map to it. Then when the normal map gets created, all of
the detail from the high res mesh AND the bump map will go into the
normal map (I'll get into more detail about how this is done on page 3
of the tutorial), but this is not required. 
</li><li>Be Careful With Straight Extrusions 
Details that extend straight out from the surface of the mesh don't
translate to the normal map very well. If you select some faces on the
high res mesh and extrude them straight out from the surface, the
detail won't show up in the normal map or it will not look very good
because the normal map contains surface direction, not surface height.
Consider extruding the faces and then scaling them down a little at the
top so that the sides are slightly sloped. Rounded details always
translate into the normal map better than sharp grooves and ridges. 
</li><li>Remember Your Normal Map Resolution 
Keep in mind that all of the detail in the high res model is being
created for the purpose of creating a normal map. The normal map will
be created at a limited resolution (256x256, or 512x512, etc). If you
put details on the surface of your high res mesh that are smaller than
the pixel size of your normal map, you're wasting your time because
they won't show up, they won't be clear. Remember that as you add small
details to your high res mesh. 
</li></ul>
 
 I hope that these modeling tips
help you get better results when creating your normal maps. This is
certainly not a complete list of tips for creating the high and low res
models. If you know of additional information that I need to add,
please <a href="mailto:bsmji@hotmail.com" target="_blank">email me</a>!
</td></tr></t></table><edited><editID>dynafx</editID><editDate>38467.5536226852</editDate></edited>

dynafx

25-04-2005, 11:47 PM

NORMAL MAPS: PART II - page 3: Methods for Creating Normal Maps 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
Methods for Creating Normal Maps

 In the first tutorial, I outlined two methods for creating normal maps. On <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps4.html" target="_blank">page 4</a> of the first tutorial I discussed converting a bump map to a normal map in Photoshop. On <a href="http://www.monitorstudios.com/bcloward/tutorials_normal_maps5.html" target="_blank">page 5</a>
of the tutorial I explained how to generate a normal map from a high
and low detail model using ATi's NormalMapper program. In this section
I'll explain some additional (and better!) methods for creating normal
maps. 
 Creating A Normal Map Right In Your 3D App

 Did you know that you can create
a normal map in ANY 3D program? You don't need any special plug-ins or
exporters or extra tools at all when you create a normal map with this
technique! I'll explain how to do it, but first there are a few
limitations: 
<ul> <li>Your low res model must be a flat plain.</li>
<li>The low res model must have a planar UV projection (flat texture coordinates).</li>
<li>You can't use this for characters that have specific unwrapped texture coordinates.</li>
</ul>
 This technique is really good for
environment normal maps like bumpy ground, rock walls, bricks, metal
panels, etc. I'll explain the steps to set it up for 3DS Max, but you
can do the same thing in ANY other 3D program. Here's how to do it: 
<ol> <li>Open 3DS Max and create a
directional light. Rotate it in world space to 0,-90,0. Set the light's
color to 255,0,0 (red). Set the multiplier to -0.5. </li><li>Create another directional light. Rotate it in world
space to -180,-90,0. Set the light's color to 255,0,0 (red). Set the
multiplier to 0.5. </li><li>Create a third directional light. Rotate it in world
space to 90,-90,0. Set the light's color to 0,255,0 (green). Set the
multiplier to -0.5. </li><li>Create a forth directional light. Rotate it in world
space to -90,-90,0. Set the light's color to 0,255,0 (green). Set the
multiplier to 0.5. </li><li>Create one more directional light. Rotate it in world
space to 0,0,0. Set the light's color to 0,0,255 (blue). Set the
multiplier to 0.5. </li><li>Select each of your lights and check the "Overshoot"
box under Directional Parameters so they'll light things that are
outside of their cone. </li><li>Choose "Rendering->Environment..." In the Environment panel set the Ambient color to 127,127,127.
</li><li>Create
a free camera. Set the camera rotation to 0,0,0 in world space. Click
the "Orthographic Projection" check box so that the camera becomes
orthographic (so it has no perspective). </li><li>Now you create a high resolution model. Apply a
material to the model that has a white diffuse color. When you render
your model from the point of view of the camera, you'll get a normal
map! </li></ol>
 <center>
 Here's what the scene looks like when it's all set up: 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals35.gif" alt="Creating a normal map in any 3D program" border="0" height="342" width="350" border="0">
</center>
 
 I like creating normal maps this
way because they render much faster and I don't have to use any
external software. I got the idea for this technique from this web
page: <a href="http://www.pinwire.com/article82.html" target="_blank">http://www.pinwire.com/article82.html</a> 
If you're having a hard time setting it up, you can download a sample
file for Maya, Max, or Lightwave at the bottom of that page. 
 Using My Normal Map Shader In 3DS Max 6 and 7

 When you boil it down, a normal
map is just an image of your high res model where every pixel is
colored to represent surface direction instead of surface color and
lighting. With this in mind, all you really need to create a normal map
is a material or shader on your high res model that gives you normal
colors instead of surface colors. I've written a shader in HLSL FX
format that does exactly that. You can grab it <a href="http://www.monitorstudios.com/bcloward/shaders_NormalMapMaker.html" target="_blank">here</a>. When you apply that shader to your model in 3ds Max 6 or 7 (follow <a href="http://www.monitorstudios.com/bcloward/tutorials_shaders1.html" target="_blank">these instructions</a>
to apply it) you get an instant normal map. Just take a screen shot of
your model, open it in an image editing program, crop it, and save it
out. You're all done! 
 The main draw back to this method
(and the previous one also) is that you can't make a normal map that
wraps around a 3d character. This technique is best for creating
tilable normal maps that you're planning to apply to the environment. 
 Normal Mapping Tools in 3DS Max 7

 3ds Max 7 ships with some pretty
impressive tools for creating normal maps of all types. Since I got the
beta version of Max 7, I haven't used NormalMapper anymore. Max's tools
are just very good and very easy to use. (There are some bugs in Max
7's shaders for displaying normal maps though. I'll discuss those on
page five of the tutorial.) Paul Greveson has written a simple
introductory tutorial for creating normal maps using the tools in Max
7. You can find it <a href="http://www.cgchat.com/forum/showthread.php?threadid=20424" target="_blank">here</a>. Thanks Paul!

 Normal Mapping Tools in Maya 6

 Maya 6 has some great tools for
creating normal maps. Jeff Parrott has a simple tutorial on his web
site that shows how easy it is to use the normal mapping tools in Maya.
You can find his tutorial <a href="http://www.jeffparrott.com/normalmaptut_01.html" target="_blank">here</a>.

 Normal Mapping Tools in Softimage XSI

 I think that XSI was the first
major 3D authoring app to feature tools for creating normal maps.
Bartek Dabkowski has created a tutorial that shows how to use these
tools. You can find it <a href="http://be3d.republika.pl/howto_d3_normalmap.html" target="_blank">here</a>.

 Normal Mapping Tools in Lightwave

 While Lightwave doesn't have any
"built-in" tools for generating normal maps, it has a very flexible
plug-in system. Marvin Landis has taken ATi's NormalMapper and turned
it into a plug-in for Lightwave's Modeler. He even wrote a nice
interface for it! You can get his plug-ins <a href="http://amber.rc.arizona.edu/lw/normalmaps.html" target="_blank">here</a>.

 Nvidia's MeLODy

 Nvidia has created a tool called
MeLODy that can create normal maps. It also automates the process of
creating LODs. You can get it <a href="http://developer.nvidia.com/object/melody_home.html" target="_blank">here</a>. To create a normal map for your model using MeLODy, install it and follow the steps below:
<ol> <li>Create a high and a low res version of your model. The low res version needs UV coords.
</li><li>MeLODy supports OBJ or 3DS format so export both of your models in one of those two formats.
</li><li>Open MeLODy and click the "Normal Map Settings" button.
</li><li>By
defualt, MeLODy is set to create its own set of texture coordinates for
your low res model. You can leave it that way if you want, but most
artists prefer to use their own texture coordinates. You can use use
your own coordinates by choosing "Use Existing Normal Map Texture
Coordinates." Click the "Close" button at the bottom of the panel. </li><li>Now you're going to load in your models. In MeLODy, the
low res model is called the "Working Model" and the high res model is
called the "Reference Model." Click the "Load Working Model" button and
browse to the location of your low res OBJ or 3DS file. Now that the
low res model is loaded it will appear on the right side of the
viewport. </li><li>Click the "Load Reference Model" button to load the
high res version. Browse to the location of your high res OBJ or 3DS
file. The high res model will appear on the left side of the viewport. </li><li>Now you're ready to generate your normal map. Just
click the "Generate Normal Map" button and MeLODy will create a normal
map for your low res model using the normals of your high res model. </li><li>Once the normal map is finished, you can see where it has been saved by clicking on the "Console..." button.
</li></ol>
 If you don't get the results you
were hoping for, MeLODy has a host of settings for tweeking the way the
normal map is created. You can find a detailed description of the
settings and how to use them in the User Guide that comes with the
MeLODy installation. 
 Normal Map Formats

 Since a normal map is a way to
use color data to represent surface normals, there are several ways
that the color data can be used - or several normal map "formats." In
order for your normal map to give you the correct results, the program
that generates the normal map and the program (or shader) that uses the
normal map must use the same format. 
 <ul> <li>
Tangent Space vs Object Space vs World Space 
The main way in which normal map formats differ is in what "space" they
use. "Space" refers to the point of reference for the X,Y, and Z values
(the R,G, and B of the normal map). All of the info that I've been
discussing in my tutorials so far has been covering normal maps created
in "Tangent Space." 
Tangent Space normal maps use texture
coordinate space, so X and Y are the U and V of the texture coordinates
and Z is the surface normal. Tangent space normal maps appear mostly
light blue (127,127,255) because the Blue channel represents the
direction that the underlaying model surface is facing. The red (X) and
green (Y) channels are for offseting that direction. Tangent Space
normal maps are best used on characters that deform and when tilable
normal maps need to be applied to curved surfaces in the environment. 
Object Space normal maps use the
orientation of the model as their X, Y, and Z. Y is most commonly in
the direction of the top of the model while X is to the left of the
model and Z in the direction the model is facing. Object Space normal
maps usually appear rainbow colored because they represent normals that
face in every direction instead of just a 180 degree hemisphere like
Tangent Space normal maps. Object Space normal maps can be used on
rigid objects that need to rotate and have a unique set of texture
coordinates (not a tiled texture). 
World Space normal maps are very similar to
Object Space normal maps - except they use the X, Y, and Z of the world
as their coordinates. They also appear rainbow colored. Because they
depend on the world coordinates, you can't rotate a model with a World
Space normal map and have the lighting still appear correctly. For that
reason, World Space normal maps can only be used on static objects that
have a unique set of texture coordinates. In my opinion, Tangent Space normal maps are the best.
They can be used for everything. You can apply them to deformable
characters, rigid objects, and world geometry. Unlike Object Space or
World Space normal maps, Tangent Space normal maps can be created to be
tilable and then applied anywhere - on the walls, ceilings, floors,
etc. They are a bit more expensive computationally, but this extra
expense is insignificant on today's graphics hardware. 

</li><li>
Positive or Negative Y 
When using Tangent Space normal maps, the most common difference in
formats is the direction that the green channel is lit. Some programs
light the green channel from the left (postive Y) and others light the
green channel from the right (negative Y). Some programs give you the
option to choose positive or negative Y. If your normal map isn't being
lit correctly, the first thing that you should try is to flip the green
channel. Just open the normal map in Photoshop, select the green
channel, and choose "Invert." That will give you the same result as if
you had rendered the normal map in the other format. </li>
</ul>
 
 So there you have it: A bunch of
extra stuff about generating normal maps! Now I bet you're asking
yourself, "If my normal map has problems, can't I just open it in
Photoshop and paint out the errors?" The answer is a most definite and
totally confident "sort of." :0) There are a few things that you should
know about editing your normal map in a paint program. I'll discuss
those on the next page. </td></tr></t></table>

dynafx

25-04-2005, 11:54 PM

NORMAL MAPS: PART II - page 4: Tips for Editing Normal Maps 

<hr color="white" size="1">
 
 <table border="0" cellpadding="1" cellspacing="1" width="481">
<t><tr>
<td colspan="2" width="481">
Tips for Editing Normal Maps

 So you've created your normal
map, you apply it to your model and it looks great! -- Except for those
annoying seams and those few spots that didn't turn out quite right.
Well that's easy, you can just open the normal map in Photoshop and fix
those with the clone tool, right? WRONG! 
 A normal map is very different
from a regular texture, because the colors represent the X, Y, and Z
values of a directional vector instead of just a color. Not only that,
but the three values together must yeild a directional vector whos unit
lenth is one (a normalized vector). This means that only a very
specific set of colors can be used. So you can't just go painting
colors and expect them to give you good lighting when used as a normal
map. 
 "Can't I just paint with the
colors that are already there?" - Yes, but if your brush has a soft
edge, the blending will give you colors that no longer result in a
vector length of one. Just about any editing that you do in your paint
program that doesn't preserve the exact colors that were there when you
started will give you incorrect results. 
 "So I can't edit my normal map at
all in a paint program?" - You can. But there are a few things that you
need to watch out for and a few tips that will help you get better
results. Read on! 
 Re-normalization

 The main thing that you need to
do to avoid the problems that I mentioned above is to "re-normalize"
your normal map. You can paint on it, and use the clone tool and edit
all you like as long as you make sure all of the colors result in a
vector with unit length one (normalized) when you're done. 
 Luckyly, Nvidia has created a
very cool Photoshop plug-in that will do this for you. When you're done
with your editing, you just run the plug-in and it looks at every pixel
in the normal map and adjusts the colors so they give you normalized
vectors! You can grab the plug-in <a href="http://developer.nvidia.com/object/nv_texture_tools.html" target="_blank">here</a>.
Download the "Adobe Photoshop Normal Map Plugin" and install it. Once
you're done with the installation, follow the step below to
"re-normalize" your normal map. 
 <ol> <li>If you added layers while
you were editing, flatten your image so it's all on the base layer. Get
rid of any alpha channels if you have them. </li><li>Choose "Filter -> nvTools -> NormalMapFilter . .
." This will bring up the Normal Map filter options window. There are
options here for converting a bump map into a normal map, but since we
already have a normal map, we're just going to use the normalization
feature. </li><li>Under "Alternate Conversions" choose "Normalize only." Click "OK."
</li></ol>
 
 That's it! Your normal map is now
normalized again, just like it was before you started editing. Now you
can save it and apply it to your model. 
 
 Seams

 One of the main problems that
occurs when creating normal maps is that there are seams at the edges
of UV regions. This problem can be solved on several ways. The best way
is to have the program that creats the normal map expand the colors of
the map beyond the edges of the UV regions. In some normal map creation
sogtware this is called "edge padding" and in others it's called
"expand border texels." There may be other names for the features, but
that's the first thing you should try if you're having trouble with
seams. 
 If that doesn't work, another
method is to paint a small buffer strip of light blue (127, 127, 255)
along both of the edges of the seam. This light blue color represents
the vector that points straight out of the surface. If both edges of
the seam are using this color, they'll match each other better. You
might lose a little of your high res detail, but at least you won't
have an ugly seam. I recommend only using this method if you really
need it. 
 
 Mip-Maps

 Real-time textures use mip-maps
to reduce texture flickering and sizzling when the texture is smaller
on the screen than it is in resolution. Mip-maps are smaller copies of
the texture. The smaller the texture appears on screen, the smaller the
copy of the texture that gets used. Usually the mip-maps are
automatically generated when the texture is used and the artist doesn't
have to worry about them at all. With normal maps, it's a different
story. 
 Mip-maps are generated by copying
the texture and scaling it down. For regular textures, this works fine,
but for normal maps, the scaling also de-normalizes all of the normals.
That means that as your model moves away from the camera, all of the
normals will get de-normalized and the lighting on your model won't
look at good. 
 The solution to this problem is
to make sure that when mip-maps are created for normal maps, the
mip-maps get renormalized. This is probably a step that a graphics
engine programmer could do pretty easily. If you don't have a graphics
engine programmer handy, you can do it yourself by using DDS as your
image file format. 3DS Max will read DDS image format. 
 DDS stands for Direct Draw
Surface. It's an image file format that is used natively by DirectX. It
contains extra information that DirectX can use - like mip-maps. Nvidia
makes a plug-in for Photoshop that will read and write DDS format. The
plug-in allows you to do a ton of stuff with the image when you save it
in DDS format. Most importantly it allows you to normalize all of the
mip-maps. If you installed the plug-in that I talked about above in the
"Re-normalization" section you already have it. If not, you can get it <a href="http://developer.nvidia.com/object/nv_texture_tools.html" target="_blank">here</a>. Once you're done with the installation, follow the step below to "re-normalize" your mip-maps.

 <ol> <li>In Photoshop open your normal map and choose "Save As . . ." Pick DDS format and click "Save." 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals17.gif" alt="Save your image in DDS file format" border="0" height="192" width="317" border="0">


</li><li>When
you click the Save button, this options dialog will appear that allows
you to specify all of the parameters for saving your image. 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals18.gif" alt="The DDS format options dialog box" border="0" height="169" width="320" border="0"> 
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. 

</li><li> Under MIP Map Generation, choose
"Generate MIP maps." The plug-in will automatically create mip-maps for
your normal map when you're ready to save. The mip-maps will be stored
as a part of the DDS format image. 

</li><li>Click on the "Normal Map Settings ..." button to access the normal map conversion options. The following window will open: 
<img src="http://www.monitorstudios.com/bcloward/images/tutorial_normals19.gif" alt="The normal map conversion dialog box" border="0" height="345" width="320" border="0">


</li><li>
Make sure that the "Convert to Tangent Space Normal Map" box is
checked. Under "Alternate Conversions" choose "Normalize only." Click
"OK." These settings will ensure that when your mip-maps are generated,
they will be re-normalized. Now click the "Save" button. 

</li></ol>
 Now you've got a DDS image saved
that has correctly normalized mip-maps. The lighting detail will remain
correct regardless of the model's distance from the camera. 
 Texture Compression

 To allow for as many textures as
possible, most video games use some type of texture compression. Most
use S3TC, DXTC, or some type of palletization. These types of texture
compression work well for diffuse textures, but they don't work so well
for normal maps. 
 All of these compression
tecniques change that colors of the image so that it can be smaller.
This causes the normals to become denormalized. The compression also
introduces other artifacts. These artifacts aren't as obvious on a
diffuse texture, but on a normal map they really stick out. 
 The following table illustrates
the effects of texture compression on a normal map. The left column
shows the normal map itself with several different types of texture
compression. The right column shows the lit model with the normal map
applied. 
 <center><img src="http://www.monitorstudios.com/bcloward/images/texturecompression.jpg" alt="Normal Map Texture Compression Comparison" border="0" height="1026" width="342" border="0"></center>
 
 While the file size savings is
significant, the quality loss is also significant with all types of
compression. It's pretty obvious from the chart that 8 bit compression
is not usable at all. You might be able to use 16 bit, but it's only
2:1 compression. There is very little difference between DXT5 and DXT1
except that DXT5 also has an alpha channel (not shown here) which can
contain extra information - like a height map. 
 Obviously, the best thing to do
is to not use any texture compression at all on normal maps. If you
absolutely have to use compression, DXT1 seems to be the best option.
It has the smallest file size and is better looking than 8 bit. 
 There is another option, but it
requires that your normal map be changed around a bit and also that
your shader be edited slightly. DXT5 gives the most quality to the
green channel and to the alpha channel. We can take advantage of this
to "hijack" the DXT5 format and turn it into a normal map compression
format. First we need to re-arrange the data in the normal map. Take
the red channel data (X) and put it in the alpha channel. Now make the
red and blue channels black. Now we need to adjust the shader to switch
the data back around for us. The shader needs to be told that the red
channel data is in the alpha channel of the texture and that it needs
to calculate the blue channel values itself. This is possible with a
little algebra because we can assume that the vector that results from
R,G, and B will be unit length one. If you are able to make these
changes to both the normal map and the shader, you'll get 4 to 1 normal
map copression with very little quality loss! I haven't implemented
this technique in any of my shaders yet, but I plan to. 
 I hope that the tips on this page
have been helpful for you. I've learned that the data in normal maps is
very sensitive and can't just be treated like any other color map. I
hope that as a result of the things I've written, you'll be able to
more successfully handle and edit normal map data. 
 In the first Normal Map Tutorial,
I explained how to use the Nvidia Cg Plugin for 3DS Max 5 to apply your
normal map to a model. On the next page I'll explain lots of other good
methods to apply your normal map to your model. Read on! </td></tr></t></table>

dynafx

25-04-2005, 11:55 PM

Links to Additional Information


 There is a lot of information on
the web about generating normal maps using lots of different techniques
and different software packages. I've compiled a list of the links that
I found the most useful. 

 Creating Normal Maps:

<ul>
 <li><a href="http://developer.nvidia.com/object/nv_texture_tools.html" target="_blank">http://developer.nvidia.com/object/nv_texture_tools.html</a> 
Nvidia?s DDS plugin for Photoshop. This plugin converts bump maps into normal maps


</li><li><a href="http://www.pixolator.com/zbc-bin/ultimatebb.cgi?ubb=get_topic&f=1&t=011260&p=" target="_blank"> http://www.pixolator.com/zbc-bin/ultimatebb.cgi?ubb=get_topi c&f=1&t=011260&p=</a> 
A forum thread with lots of information about creating normal maps using ZBrush.


</li><li><a href="http://www.drone.org/tutorials/normal_maps.html" target="_blank">http://www.drone.org/tutorials/normal_maps.html</a> 
A technique for generating normal maps in Maya.


</li><li><a href="http://www.pinwire.com/article82.html" target="_blank">http://www.pinwire.com/article82.html</a> 
A very cool method for creating normal maps for flat surfaces in just about any 3D program.


</li><li><a href="http://reblended.com/www/alien-xmp/Tutorials/NormalMap/NormalMap.html" target="_blank"> http://reblended.com/www/alien-xmp/Tutorials/NormalMap/Norma lMap.html</a> 
A technique for creating normal maps using Blender.


</li><li><a href="http://members.shaw.ca/jimht03/normal.html" target="_blank">http://members.shaw.ca/jimht03/normal.html</a> 
Creating normal maps using Cinema 4D.


</li><li><a href="http://www.ati.com/developer/tools.html" target="_blank">http://www.ati.com/developer/tools.html</a> 
NormalMapper - ATi's norm