Normal vs. Displacement Mapping & Why Games Use Normals

Large

Triple-A game assets such as characters, weapons, and environments rely heavily on normal mapping in order to look good. But what is normal mapping...and why is its use so widespread?

Balancing Quality and Performance

Games should run in real time at 60+ frames per second. This means that high-poly models commonly used for 3D printing or animation would not work well in a game, since they would be a huge sap on the game's responsiveness.

Low-poly models are needed in order to ensure a game's smooth performance.

But at the same time, gamers expect beautiful  visuals with a high level of detail. Game devs need to be able to use many models in one scene to achieve this, not to mention costly lights, physics, and effects.

So how can we compromise between smooth performance and realistic visuals?

Normal maps are the best compromise we have to the struggle between model quality and game performance. The secret is that they allow us to get more apparent detail while using less geometry.

Faking Geometry With Textures

How does it work? Normal and displacement maps are special kinds of image textures that influence how light is calculated across a surface. They create an illusion of depth by telling the light to bounce off simulated features of the surface, even though those features are not actually there.

diagram_01

The light bouncing off a normal mapped surface bounces according to the texture normal instead of the surface normal. 

This allows us to achieve a high level of detail without burdening the game engine with intricate geometry. Sounds too good to be true? Keep in mind that there are some limitations to this technique.

Normal Maps vs. Height Maps

While both normal and height maps give our low-poly models the appearance of more detail, they are used for distinctly different purposes.

The most obvious difference is that height maps are greyscale only, because they only portray height differences. Black is 'down', white is 'up', and 0.5 gray means no change of height.

There are a couple different types of height maps that you might be familiar with already.

Bump maps are the old school way of adding detail to low poly objects. They are used in the same way as normal maps, except they only contain height information and not angle information. 

Bump Maps

Displacement maps are sometimes used to change the location of actual vertices in a mesh. This kind of displacement doesn't add any additional detail. Instead, it is used to generate otherwise complex objects. An example of this type of displacement is how terrain is often generated from a texture.

Another use for a displacement map is parallax mapping (also called virtual displacement mapping), which is a more advanced technique in which a game engine attempts to offset the texture coordinates away from the camera. This is pretty computationally expensive, but it can lead to good looking results.

Displacement Maps

Normal Maps, on the other hand, do not contain any height information whatsoever. Instead, they contain angle information. They are colorful because the RGB value tells the renderer which direction the slope is facing and how steep that slope is.

Normal Map

The most important advantage of this is that we can use angle information to artificially bend edges of adjacent faces toward each other to produce a bevelling effect. This cannot be done with only height information, because the renderer would have no way of knowing in which direction the edges should be bent.

Softening sharp edges sounds simple, but it gives a surprisingly large jump in visual quality. This is because in real life nothing has completely sharp edges (except for maybe graphene). On the other hand, in CG, everything has an infinitely sharp edge since each line has zero thickness.

You're not likely to notice the actual thickness of an edge in game, but you can notice the fact that at least some light should be glancing off those edges.

bevel and no bevel

Beyond just appearing more natural, this edge-glint light greatly helps to show the form of the object, especially if seen from a distance. Since many game objects are displayed quite small on a screen, game artists often exaggerate their bevels in order to help the player see everything clearly or to help emphasize important objects.

3 Types of Normal Maps

There are three types of normal maps that all achieve the same effect, but they are calculated slightly differently.

TanObWorld

Tangent Space

As the name implies, tangent space normals are based on the tangent direction of each face. These maps are always made up of a combination of three colors.

  • Blue shows what has a slope in the normal direction
  • Red shows what has a slope in the left and right tangent direction
  • Green shows what has an up or down slope in the tangent direction. OpenGL normal maps have the green sloping up while DirectX maps have the green sloping down.
Object Space

Object space normal maps are based on the entire object instead of each face individually. This is slightly faster for a graphics card to compute, but it does have some drawbacks.

Since the right side will be a different color than the left side, no UV's can be mirrored, meaning that a lot of texture space will be wasted on symmetrical models. This also means that if the object twists around, the shading will appear flipped.

World Space

World space normal maps are the least flexible of all. Since they are based on global coordinates, the object may not rotate at all in order to preserve the correct shading. This type of normal map is only used for large, static, and asymmetrical objects like environments, or used temporarily in programs like Substance Painter as a means to calculate weathering effects.

Wrapping Up

The most common type of normal map you will see and work with is a tangent space since it is the most flexible, but it's useful to understand the other types as well so that you can use them if needed. For an in-depth look at Normal Maps and how to model for and bake them, dial into my Introduction to Normal Map Modeling course.

Intro to Normal Map Modeling for Games

  • k
    Russell Boswell

    Great explanation of normal maps. I will say that the the diagram under "Faking Geometry with Textures" is slightly misleading as the ray still has to hit the actual geometry.

  • k
    Russell Boswell

    This Image: http://imgur.com/a/dEh1y better illustrates what I mean

  • l
    Karianne

    Thank you for this. I'm just starting to dive into game animation, and this is a great intro.

  • Large
    kann

    Thank you for great post! Made many things clear to me.

  • c
    Jose Navas

    Great introduction to normal maps! I've always been a little confused with bump maps (like those used in GIMP's bump map filter :) ), displacemente maps and normal maps. But now I have a better idea. Looking forward to take the course sometime this year :D

  • k
    kindabella

    Good post! Though I still find tangent, object and world spaces confusing. Maybe some more examples would help.

  • l
    Leonel Vazquez

    Excelent!!! Thanks!!!

  • d
    diaoheyhey

    Good Introduction to theory about mapping!

  • c
    Cindy Hill

    Great post, thank you!

  • m
    mattmurch

    Really good info on normal maps and types of map, thank you!
    One amendment, the diagram implies the simulated surface is added rather than subtracted from the details on a face. Normal and Height maps are subtractive (Normaly matters for modelling shells and to keep your low-poly silhouette in check), and displacement maps can be either/both (depends on your displacement settings).

  • s
    smithian

    Nice intro. Don't you have to bake them anyway to get the speed advantage?

  • c
    csehz

    That is really a great article, I think started to understand these now :-) Thank you very much

  • s
    sovaanima

    Thank you! Please drop more :)

  • l
    Luis Monteiro

    Thank you so much! Good information. ::

  • Large
    Jonathan Lampel

    Thanks for the feedback! I've edited the diagram to be more technically accurate.

  • Large
    Jonathan Lampel

    Thank you! Try this if you still find it a bit confusing - draw a square on the palm of your hand, to represent a face. Then make an X on the right side of the square.

    When looking at it dead on (by turning your hand to face up, facing you, facing a friend) the right side of the square will always be where the X is. This is tangent space.

    Next, think of the X in terms of your right and your left, even when you can't see it. If you hold your hand palm up, it's on your right, but if you flip your hand over, the X will be on your left. This is object space, with you as the object.

    Lastly, think of whether the X is pointing north, south, east, or west. This would be world space.

  • t
    thecaitasaurus

    This is very helpful! I've wondered what the differences were between bump mapping and normal mapping, and I've struggled to find much info elsewhere besides "i personally prefer one or the other" -type comments. As a beginner in the 3D modeling world, it's great to be able to learn the limitations and use cases for these kinds of things, instead of just what people's arbitrary opinions are. :P Thanks for posting this!!

  • k
    koko0

    "This allows us to achieve a high level of detail without burdening the game engine with intricate geometry"
    Afaik, and I've talked to some professional tech artists, it's not always true.
    I've never managed to fully understand when it's better, but depending on your target device and lighting techniques, it's sometimes better to have the real geometry and save the additional textures.
    If you could explain it better it would be great.

    Thanks!

Your was successfully !