Creating detailed Normal Maps

From the Oblivion ConstructionSet Wiki
Jump to navigation Jump to search


Tools used in this tutorial

Required

  • Adobe Photoshop
  • Can be applied for any (re)texture tool


Why Normal Map?[edit | edit source]

You need to create a normal map first and foremost because if you don't, your texture wouldn't reflect light and therefore appear black ingame. What is more there is an even better reason why you want to do one. Normal maps are designed to make an object look much more detailed than it actually is. Based on illumination and the information stored in the file, a congrous surfase is simulated. In other words, you could stay in front of a completely flat plane with a stone texture that appears to be uneven and rocky, thanks to the normal map.

Not every texture has a normal map, only those that are rendered ingame such as tables, books, clothes, etc. Icons, book images, menus and whatnot aren't rendered ingame, hence they don't need one. The normal map's file name orientates itself by the texture, with the sole exception that _n is attached to it. E.g., the normal map for the texture Texture.dds would be Texture_n.dds.

One normal map can relate to an endless amount of textures. Example: You have a normal map and two textures. The normal map is called normal_n.dds, the two texture files normal_tex01.dds and normal_tex02.dds' respectively. The game will recognize both textures as belonging to the one normal_n; it simply ignores the letters that come after the underscores, in this case tex01 and tex02. So you may want to avoid texture file names like my_uber_sword_texture.dds.

And why is the normal map's detail important? Because it is the normal map that defines how uneven and how rocky your stone texture looks ingame. Less detail for the normal map equals less detail for the object.

Many roads lead to normal maps. The most common is to just fire up Photoshop or Gimp or your software of trust, use the Normal Map PlugIn on the color map and than think to be done with it. That's how it works, but it doesn't work well, because this way created normal maps make an object pray for a bag to pull over its polygons. There are ways to improve normal maps drastically. Even EASY and FAST ways EVERYONE can take the time and nerves for. For example, there is the blur method. It is, basically, a monotone and easy way, but gets the job done pretty well.
Further reading:


Preparing the Texture[edit | edit source]

Before you can prepare a texture, you need a texture. However, acquisition and preparation of the texture is not part of this article; I will use one that's ready to go, if it were not for the normal map.


File:NMTut01.jpg
This is the texture I prepared.


Note: The images I uploaded to the Wiki are compressed and low-quality to maintain a reasonable loading time. They should, however, sufficiently show what they are meant to.

I open the texture in Photoshop and make it greyscale via Strg+Umschalt+U (or Image > Adjust > Desaturate). Rule of the thumb, the darker the deeper, the brighter the higher. The thing is: the common texture most certainly has some spots with darker or brighter color, which would be translated as depth and height. Those are the spots you need to work on, brighten too dark spots (e.g. Dodge Tool) and darken too bright spots (e.g. Burn Tool). For a general increase of contrast strength, I like to play around with the Curves (Image > Adjust > Curves) or duplicate the texture and try out different blending options. There is not really an all-round solution for this step.

File:NMTut02.jpg
This is what I ended up with.

Since my texture is still a background layer, I double-click it to make it into a regular layer and then double the size of the image (via Image > Canvas Size; I make sure that the anchor is set to center), copy the base texture eight times and tile the copys around the center image. This is to prevent seams in the normal map due to the blurring process.

File:NMTut03.jpg
The tiled texture.

Now I copy the now tiled 1024x1024 texture and set its blending mode to Overlay. I do this several times and usually end up with between four and six overlayed copies. It strongly depends on the texture, though up until now it didn't seem to me that more than a max of eight copies makes any sense at all. In this article, and generally, I use four copies.

File:NMTut04.jpg
Current layer structure.

Next, I blur the copy layers via Filter > Blur > Gaussian Blur. I start with the topmost 04 and set the blur value to 8. 03 gets blurred with a value of 6, 02 with 4, and 01 with 2; the basic layer remains unblurred. Now even when creating a normal map you have lots of leeway. You don't have to blur in two stepts, it's just my personal favorite. With the blurring complete, the texture is ready for normal map.


Creating the Normal Map[edit | edit source]

Once I blurred all the layers except for the base layer, I start with the normal mapping process, again with the topmost 04 as point man and in two steps. In Photoshop, the Normal Map Filter is located under Filter > NVidia Tools > NormalMapFilter.... The settings are very important, and for GIMP users I recommend to read the Appendix part of the article Quality Normal Maps in GIMP.

File:NMTut05.jpg
Settings for copy layer 04.

For 03, I set the scale value to 60, for 02 to 40 and for 01 to 20. From here on, I like to a bit of experimenting. The logical consequence is to use the Normal Map filter on the base layer, too, with the scale value set to 10. I'll do this for now, then flatten the image. It is now time to set it back to its former dimensions (512x512). I do this again by altering the canvas size, with the anchor set to center. At this point a closer look at the channels tab reveals that the blue channel is completely white. It needs renewal, which I will do via Normal Map filter plugin; I open it up and tag Normalize Only instead of Average RGB. I save it as a dds file into the same folder as the texture.

File:NMTut06.jpg
DDS Saving Settings

Now off to an ingame test of texture and normal map. I predict it will be rocky. Pretty. Damn. Rocky.

File:NMTut07.jpg
Rock texture plus normal map at work.

Pretty. Damn. Rocky. Which is great for stuff like rocks and stone caves and you know, but what if you have an interior rock wall, nicely processed and smoothened as good as possible? Well, in that case, I get back to experimenting, back to the point where I used the Normal Map filter on the copied layers, but not yet on the base layer. And instead of doing so, I just flatten the image, with the base layer as a greyscale image.

File:NMTut08.jpg
No normal mapping for the base layer.

I press Strg+U, in other words, I desaturate the image again to get a grayscale, and then use the Normal Map Filter on it, with the scale value set to 10.

File:NMTut09.jpg
Greyscale and normal map images.

I rescale the image back to 512x512 and save it as above. As an interior rock wall, it looks a tad better now.

File:NMTut10.jpg
New normal map at work.

There are several ways to further improve the normal map. I can now go back and work with the 1024x1024 greyscale image of the second normal map and repeat the whole procedure, change it where I want, even leave layers out – practically, experiment with it until I am satisfied. I settled for this:

File:NMTut11.jpg
My final result.

This method does not only work with textures that have little detail, like the rock texture. It also works with highly detailed images. The challenge is to take the time that is necessary to get the best result out of the texture. It follows a comparison of all three normal maps next to their ingame result:

File:NMTut12.jpg
Comparison