Normal maps are maps that help create more tactile-looking surfaces.
Normal maps don't actually change the polygons of a surface—they don't really change the object they are attached to, but they present the visible representation of a more complex form. The grandfather of normal maps was bump maps, but normal maps are more powerful in some important ways.
Bump maps were largely grayscale (or at least that was the only value that mattered to the 3D software rendering them). When the texture map that was used to define bump had pixels closer to white, they were rendered as raised and pixels close to black were rendered as receding. The power of this was that a surface looked as though it had all sorts of bumps and valleys when the geometry did not.
Normal maps take this to the next level in that they use a similar idea, but instead of simply rendering the surface as raised or lowered in one direction, they describe the x, y, and z coordinates of a normal vector. The science and math here is well beyond what is relevant, but the net results are low-poly forms that are able to visually indicate much higher forms. The textures react to change in light and behave in believable and predictable ways as a player moves around them. In 3D arenas where polycount is important (like games), normal maps are tremendously powerful.
Historically, there are three ways that normal maps are usually created. The first is to actually model a very high-poly version of a surface (including characters) and then generate a normal map from that high-poly mesh that will be applied to a much lower-rez version of the form. In many ways this is most accurate, and frankly often produces the best normal maps. However,
this essentially means creating the form twice, which can take some serious time. Although for characters that will be seen throughout a game, this could well be a worthwhile technique.
The second method is to use some of the relatively new tools on the market (ZBrush or Mudbox) to paint normal maps. Essentially what these packages are doing is creating higher-resolution copies of a form that are sculpted (in some really fun ways) in these applications and then normal maps are generated and applied to their lower-resolution cousin. Especially for character work ZBrush and Mudbox are some really awesome tools. They have become ubiquitous in game character creation. If character design and creation are your thing, be sure to get your hands on one of these tools (I prefer Mudbox because it interfaces well into Maya, but there are fantastic results coming out of both packages).
The third method is the method we will be exploring—extracting a normal map from a color map. Up to this point we have been defining a surface by the color attributes alone. A rock wall is painted to look like a rock wall. However, this painted rock wall is flat without any of the real peaks and valleys that such a wall would have from one rock to the next. This means that the still image might work out, but as a player walks up to and past the wall, there is never any of the visual clues that there are actually rocks coming out of that mortar.
Because the color maps are complete, and because the raw versions of those color textures are carefully saved in the images folder of the Maya project file (Incursion–Maya), the core building blocks of this technique are at hand. A bit of time in Photoshop and a few additional tools will yield some reasonable normal maps.
The drawback to using Photoshop to develop normal maps is that the creation is a little more opaque. Figure 7.1 shows what a bump map would look like as opposed to a normal map.
It's easy to see how bump maps can be easily altered with a bit of contrast adjustment, and even by hand painting some white areas that needed to be rendered higher. Not so with the normal map. In fact, the red, green, and blue normal-vector values must equal exactly 1, and if the colors are painted by hand the values may not be what are needed and break the texture. So to ensure these values are correct and will function in the game we will need to use some other tools.
Additional Tools
There are some cheap and even free software packages that assist in creating normal maps. A very nice one (and one that is reasonably priced: $299 for Professional, $99 for Personal, $49 for Student) is CrazyBump (http://www. crazybump.com). CrazyBump allows for a 30-day trial, but anyone who tries this will quickly see how powerful and easy it is to refine a normal map from a color map. If it's in your budget, CrazyBump is a really great time-saving tool to add to your tool kit. Importantly, CrazyBump is available for Mac and PC whereas the plug-ins for the next step unfortunately appear to be PC only. So if you're Mac based, be sure to grab CrazyBump's free trial and skip this tutorial. For those of you who use a PC and are interested in the free options, there are some free alternatives (which are what we will be using for this tutorial). NVidia has released a free set of plug-ins for Photoshop that assist in the creation of normal maps. They are available at http://developer.nvidia.com/ object/photoshop_dds_plugins.html. We will only be using the Normal Map Filter part of the package, but just this part is quite powerful.
Step 1: Download and install NVidia's Plug-ins for Photoshop (use the
preceding URL). The install package is a .exe, so just launch it and follow the instructions to install.
Unfortunately, when using the default installer, the plug-ins will be installed in the 64-bit version of Photoshop. On install, you should be able to define which version of Photoshop the plug-ins are installed to, and if you are, just point the installer to the 32-bit version. However, if you were not able to define which version of Photoshop to install the plug-ins to, go to C:\Program Files\Adobe\ Adobe Photoshop CS5\Plug-ins\Filters and copy the NormalMapFilter plug-in and paste it into C:\Program Files (x86)\Adobe\Adobe Photoshop CS5\Plug- ins\Filters. Then, of course, launch the 32-bit version of Photoshop when you wish to use these plug-ins.
Step 2: Select a texture to work from. I am using the texture assigned to
the EntryWayWallsInner. This texture is EntryWay_WallsInner_Color. Open the unflattened (all the layers intact) version in Photoshop (Figure 7.2). This version will probably be within the images folder of the Maya project file and may be labeled either EntryWay_WallsInner_Raw or EntryWay_ WallsInner_UV if you just saved over the UV snapshot. Do not edit the version of this texture in the sourceimages folder. We need the layers. Finally, resave this file as EntryWayWallsInnerNormalRaw.
Warnings and Pitfalls
It has been a while since NVIDIA updated these plug-ins. Unfortunately this means they are apparently not compatible with 64-bit versions of Photoshop. So, if you are using a 64-bit operating system (Windows 7 or Windows XP 64-bit) you will need to use the version of Photoshop that was installed in the Program Files (x86) folder—this is the 32-bit version.
Tips and Tricks
Remember that in the texture creation chapter (Chapter 4), whenever we built a texture we kept a copy of the construction texture in the images folder and a flattened version in the sourceimages folder (both within the Maya project folder). Keeping that raw version pays dividends in situations like this. Because all the dirt and drips are on separate layers, those can just be hidden to reveal the base texture beneath.
If you are following exactly along with the tutorial and using the assets I use as provided on the web site (http://www.Creating3dGames.com), the file we are after, EntryWayWallsInnerUV, is in the images folder.
Cleaning up the Raw Texture
Step 3: Hide all the grime, dirt, and drips layers. Do this in the Layers palette
by just turning off the eye icon on the layers that are not wanted (Figure 7.3).
Figure 7.2 Raw version of the inner walls texture. Notice the complex collection of layers that will pay off here.
Why?
The dirt and grime was very important for the effective color map. However, in the real world usually this dirt and grime is over the top of existing tactile attributes. This means, usually the grime is going over the peaks and settling into the valleys of a surface and not actually changing the rises and falls. Through this process we will be using the light and dark parts of the color texture to define (roughly) the high parts and low parts of the surface. If the drips (for instance) were left, the normal map would interpret them as actually recessed sections of the surface rather than grime atop a surface.
Step 4: Gray out areas without much bump (Figure 7.4). This can happen with an adjustment layer, or with a new layer with 50% gray filled or painted in over areas that are smooth.
Why?
The two areas that are grayed out in Figure 7.4 are the cement floorboards and the cement wall under the roof. Since this is cement, it may have a bit of bump (which is why the gray isn't a solid gray), but not a whole lot. If this is not grayed out, then every dark splotch on the color part would register at a pock mark. Graying it out keeps the surface visually smooth.
Step 5: Flatten the layers. Layer>Flatten Image.
Why?
Once we are down to the core color information, there is little need for all the other layers to be taking up all that memory space and slowing the work. Alternately, the dirt layers could just be deleted instead.
High Pass Filter
Step 6: Run a High Pass filter. Select Filter>Other>High Pass. Adjust the
Radius to about 10 (although this is largely to taste (Figure 7.5).
Why?
The High Pass filter does some important things for us. First, it
desaturates or removes the color information. Second it starts to remove some of the detail from the image. Ultimately, the goal of the normal map is to create some large undulations across the surface; but when building the normal map off a color map, there can end up being way too much information and the result being entirely too bumpy. By removing a bit of the variation on the surface of the rock, we can keep the focus on higher rocks with much lower grout and not on sandpapery-looking stones.
Step 7: Adjust the Levels to take advantage of the highs and lows of the
image. Access the Levels via Image>Adjustments>Levels… and move the sliders beneath the histogram to where the input levels really start to rise (Figure 7.6).
NormalMapFilter
Step 8: Apply NVidia's NormalMapFilter. Assuming the NVidia package
has been installed, choose Filter>NVidia Tools>Normal Map Filter…. Change the settings to match Figure 7.7, basically changing the Filter Type to 4 Sample, the Height Source to Average RGB, and the Scale to 10. Press OK. A sample of the newly created normal map is seen in
Figure 7.8.
Figure 7.5 Applying a High Pass filter.
154
Why?
These settings are not entirely intuitive. The parts we are more interested in allow for a fairly soft sampling (Filter Type) with a pretty high Scale (10).
Step 9: Gaussian blur the results. Select Filter>Blur>Gaussian Blur. For this Figure 7.6 Adjusting the levels.
155
Why?
Even with our High Pass, there is still quite a bit of “noise” in that initial pass. Giving a little blur helps soften the noise and keeps the information where it should be. This shouldn't be too high since too much of a blur will simply wipe out all the detail (including the desirable large detail).
Tips and Tricks
How much to blur this first pass is tricky. Much of it is relative to the file being affected. A Radius of 1 might be just the trick for a 2048×2048 image, but way too much for a 512×512. Further, if the image is tillable and much closer, it might need to be much higher (5 or more). So keep frequent saves to make sure you can go back to an earlier version if things aren't going as planned.
Layering to Increase Height
Step 10: Duplicate the Background layer. The quick keyboard shortcut for
this is Ctrl-J (Command-J on a Mac). This will create a new layer (Layer 1) identical to the first that sits atop the original.
Step 11: Change the new Layer 1 Blending to Overlay. You can do this
either within the Layers palette (immediately beneath the Layers tab) or by double-clicking the layer and in the Blending Options section of the Layer Style window changing the Blend Mode drop-down menu. The results can be seen in Figure 7.10.
Why?
Often the results of the NormalMapFilter are too muted. The amount the surface will be raised is just too low. By duplicating the information and adding the color information to the original via the Overlay Blending Mode, the height of the normal map will increase.
Figure 7.8 Sample of the newly created normal map. Figure 7.9 Sample of first level of Gaussian blur.
Figure 7.10 Results of duplicate layer with an Overlay Blending Mode.
Warnings and Pitfalls
By using an additional layer and adding the value, this is no longer a valid normal map. Remember when we talked earlier about the normal vectors needing to equal exactly 1? Well, now they definitely do not. So be sure not to use the file in its current state or the results will be very unpredictable.
Why?
By making the next level up blurred a bit more, we are creating a stepped increase in the new height being created. Each successive layer copy will be blurred a bit more, thus increasing the height and spreading the up ramp out a bit.
Step 13: Repeat the process of duplicating the level and then running a
Gaussian Blur, but this time with a radius of 4.
Step 14: Repeat the duplication and Gaussian blur process five
more times, each time increasing the radius of the blur by 2 (Figure 7.12).
Why?
Take a look at Figure 7.13, which shows the initial output by NormalMapFilter and compares it to the result of the multiple overlayed layers. Notice how much more information is there, and how much richer the normal map actually is.
Figure 7.12 Multiple layers of increasingly blurred normal maps.
Housekeeping
Step 15: Save again. Be sure you're saving as EntryWayWallsInner NormalRaw.
Why?
Since this strange bluish image makes it pretty tough to know what the result will look like, it will be important to have the raw version to come back to if the final result in Unity is not what was planned.
Step 16: Flatten the image (Layer>Flatten Image).
Why?
We will need to “normalize” the image to bring the normal vectors back into the needed value of 1, but this needs to be done to the total image and not just one layer.
Step 17: Normalize the image. Choose Filter>NVidia Tools>NormalMapFilter.
In the Alternate Conversion area check Normalize Only. Press OK.
Why?
The other settings can all remain the same because none of them will be used. Normalize Only will ensure the red, green, and blue normal vectors are exactly 1 and thus ready to be a normal map.
Step 18: Save the image for use in Unity. Save the file as EntryWay_ WallsInner_Normal into the Incursion-Unity/Assets/EntryWay.fbm. The file format can be whatever you'd like (I saved it as a .psd).
Why?
Due to our deft use of manual exporting, all the texture files related to the EntryWay are in this EntryWay.fbm folder that Unity created. Adding any new texture assets that are meant for EntryWay keeps the Project panel clean.
Back in Unity
After all this work in Photoshop, we need to help Unity understand what this new asset is and where to use it.
Step 19: Help Unity understand that this is a Normal map. In Unity, in the
Project panel, select EntryWay_WallsInner_Normal. In the Inspector look for the Texture Importer section and change the Texture Type to Normal map. Click off the Generate from grayscale setting. Click Apply.
Why?
Unity likes to know what it's dealing with. If this image is used to define the normal channel of a bumped shader, Unity will complain that the image is “not tagged as a normal map.” By telling Unity to bring the image in as a normal map, this warning will be avoided. However, the Generate from grayscale option is not what we want here. What this option attempts to do is what CrazyBump does or what we just did in the past 17 steps—it attempts to create a normal map from a color texture image. However, in my experience, the result here is neither optimal nor easy to control. The most control comes from techniques outside of Unity.
Step 20: Select the EntryWayWallsInner GameObject. Do this by either
clicking the object in the Scene window or finding it by name in the Hierarchy panel. The attributes of the GameObject will appear in the Inspector.
Step 21: Change EntryWayWallsInner's shader to be Bumped Specular. In
the Inspector look down toward the bottom at the entryway-entryway_ wallsinner_mat. In the Shader section there, choose Bumped Specular from the drop-down menu. There should appear a new Normalmap section.
Why?
Really, most any of the Bumped shader would work. However, to really get a look at what this normal map does, the specular flavor shows it off the quickest. This will probably be changed later as the specular shaders make things look shiny or wet, but for now, for illustration purposes it'll do just the trick.
Tips and Tricks
If there are no options below the Shader section in the Inspector, click once on the sphere swatch. It will expand or collapse the settings for that particular material.
Step 22: Use EntryWay_WallsInner_Normal as the Normalmap. Still in the
Inspector, in the Normalmap section, click the Select button and choose our newly imported EntryWay_WallsInner_Normal image. The results