Introduction to Normal Mapping
ArtIS 409, Spring 2012
Iowa State University
Stefanie Dao

 

What is a normal?

Before examining normal maps, you should understand what a surface normal is.

A normal is the direction that a point on a surface is facing (typically, the direction is perpendicular to the direction of the polygon).  Texture artists will be familiar with normals, as they determine which side of a polygon a texture will be displayed on (for example, an “inverted” normal will cause a texture to be displayed on the inside of the model).


The normal on the gray polygon has been reversed, causing the texture to be projected inside the sphere instead of outside.

In addition to affecting how textures are displayed, normals also determine how light hits an object.

 

What is a normal map?

A normal map is an image that is placed over a low-polygon model to give the effect of a high-polygon surface.  Normal maps work by telling light how to hit the surface of the model so that there is an illusion of depth and texture.

Normal maps are useful for creating detail while leaving the polygon count low.


A blank plane with no normal mapping (polygon count: 2).


The same plane, with a normal map applied (polygon count: still 2).

The main advantage that normal maps have over height maps is that height maps only calculate the height (Z value) of a texture, using grayscale values; normal maps, on the other hand, use RGB values to calculate the position of a pixel in space, using its X, Y, and Z coordinates.


An image used as a height map.


The same image as a normal map.

 


An animation showing height mapping.

 


An animation showing normal mapping.

 

How to create and apply normal maps:

I explored creating normal maps using both photographs and model renders.

Creating normal maps from photographs:

Using the program CrazyBump, creating normal maps from photographs is very easy.


The version of CrazyBump I used.

 


When the program opens, it will ask which type of file you are opening to generate your normal map.  I was creating a map from a photograph.  You can also import existing normal maps to generate displacement maps.

 


Selecting a file.  I had already set it up with the desired resolution in Photoshop.  This was 512x512 px, saved as a .PNG.

 


This select screen appears.  As it says, the image can be further adjusted following this step.

 


The generated normal map.

 


CrazyBump allows the user to make adjustments to the level of detail, the sharpness/softness, and the intensity of the image.

 


At the same time, the user can create a displacement map from the same image if they wish.

 

Once the normal map was created in CrazyBump, I applied it to a material in Cinema 4D.

 


I set up a plane to which I could apply the normal map.

 


Setting up the material.  I deselected the specular option so that the light effects could be better seen.

 


The plane with the normal map applied.

 


The plane with color also applied and a moving light to show how normal maps affect the surface of the geometry.

 

There is a more in-depth method of creating normal maps from photographs, which involves photographing a surface with different light setups (from each direction).

 


I used a patch of carpet, a camera with a tripod, and a table lamp to try out this method.  A better setup will probably produce a better result.

 


By converting the photographs to grayscale and using them as color channels in Photoshop, I was able to generate this normal map.

 

When applied to a colored plane:


Combined with a displacement map.

 

 

 

Because my photographs weren’t aligned perfectly, the mapping did not come out as accurately as it could have.  Here is a link to the tutorial that I learned this technique from and a much better example of what this method is capable of.


Using photographs of a bowl of peanuts:

 


This model was created.  (Images by Ryan Clark)

 

Creating a normal map from a 3D model is also possible.  I followed the same method as outlined above, but using renders from a model created in Cinema 4D.  This can be useful for making projected images along a plane, such as tiling along a wall.

 


A flat plane with a rendered model applied as a normal map.

 

One of the most useful applications of normal mapping is to make a low-polygon model look like a high-polygon one by applying a normal map to it.


I started with just a cube primitive (polygon count: 6, doubled if triangulated).

 


The low polygon model, unwrapped.

 


From the low polygon model, I created a high polygon version (polygon count: 24,576).
(… because I could)

 


Render of high poly version.

 


The next step is to go under Cinema 4D Tags and find the “Bake Texture” tag.  This will allow you to render out the high polygon model’s normal map as an image.

 


Under “Options,” it’s possible to render out just the normal map.  You can also render out a number of other images with this tag.

 


The resulting image.

 


The resulting normal map is then applied to the material for the low polygon model.

 


The final result.

However, you will see that where the edges of the polygon meet, there is a sharp crease instead of the beveled edge that the high poly model had.  This is because the normal map only changes the appearance of the model, not its geometry.  In addition, the faces of the low polygon model are continuing to reflect light perpendicularly to themselves; this causes a hard seam wherever two polygons meet.  On a simple model like this, the hard edges are not such a problem, but on a more complex model, they become increasingly obvious.


Smoothed, high polygon head and legs; low polygon body with normal map applied.  Seams are visible where the edges of the polygons meet.

 

The way to prevent hard edges on a low polygon model from showing through is to create a cage mesh, which will affect the distance, and in some cases, the direction of the raycasting, in order to prevent seams and overlaps.

However, in order to use this method, you will need to use Autodesk 3DS Max, Maya, or ZBrush; I have not been able to find a method to create a cage mesh in Cinema 4D.  A very good explanation of cages can be found here.

 

 

Normal mapping is a valuable technique for creating game models, and can save a lot of time and energy.  A good method would be to use photographic imagery to create normal maps for objects and landscapes, while using the low-poly vs. high-poly modeling technique for characters.  In this way, a lot of detail can be created without having to take up a lot of space with high-polygon models.

In addition, there are many more aspects to normal mapping that I could not accomplish for this project, including Photoshop plugins that aid in normal map creation and the use of ZBrush to create high-polygon models, but this document should give you a solid base to start creating practical normal maps for your games.

 

 

Software used:
Adobe Photoshop
Cinema 4D R12
CrazyBump (Macintosh Beta 2)

Download examples (plane with grass, sand, carpet, cylinder with tree bark, dice, goat)

Resources:
Ben Cloward, Creating and Using Normal Maps, http://www.bencloward.com/tutorials_normal_maps1.shtml
Ryan Clark, Normal Map Photography, http://www.zarria.net/nrmphoto/nrmphoto.html
James Hastings-Trew, Cinema 4D and Normal Maps for Games, http://planetpixelemporium.com/tutorialpages/normal.html (somewhat outdated, but still a good base to work from)
Ben Mathis, Normal Map Workflow, http://www.poopinmymouth.com/tutorial/normal_workflow.htm
KatsBits.Com, How NOT to make normal maps from photos or images, http://www.katsbits.com/tutorials/textures/how-not-to-make-normal-maps-from-photos-or-images.php
Tech-Artists.Org, Normal Map (wiki article), http://tech-artists.org/wiki/Normal_mapping