Bump mapping and normal mapping are two different methods of doing the same thing: creating the illusion of surface texture to a visual computer model.
These methods are useful to know if you’re creating video game characters or rendering 3D animations.
Bump maps impose a grayscale image, so dark spots appear deeper and provide contrast for lighter “bumps.” Normal maps use an RGB scale to derive 3D vector normals to the 3D surface. This tricks the rendered light into creating highlights and shadows. Both methods leave the geometry unchanged.
Knowing the differences between these two techniques can help determine which one is better suited for the application at hand. Read on to learn more about both so you can add them to your bag of tricks.
The Main Difference Is Lighting
The goal of both of these maps is to give a surface the illusion of texture on a surface that has no texture. This is beneficial for video games because it means the model’s mesh does not need to be so fine that it physically captures all the little details like a displacement map.
The map creates this illusion by distorting the way the rendered light interacts with a surface. This is also where the bump map can become limiting, depending on what level of detail you are trying to achieve.
- A bump map tells the renderer which areas of a surface are brighter and which areas are darker, no matter the direction of the light source.
- A normal map relates artificial surface normals to the rest of the 3D space and mathematically dictates how the texture interacts with the rendered light source.
So, the result in both cases is that a geometrically smooth shape appears to have a very detailed surface texture. However, the bump map starts to falter when the textured object is viewed from different angles. The perceived texture likely won’t interact with the environmental light in a believable way.
To understand this more, let’s take a look at how each method goes about rendering texture.
A Bump Map Uses A Set Grayscale to Manipulate Height
If you were to create a bump map or just look at one, you will see a black and white image. There’s nothing more to it. Essentially, the map uses this grayscale to tell the rendering engine which spots are light and which spots are dark.
- Black areas on the map indicate dark or “sunken in” locations on the surface
- White areas on the map indicate highlighted or “protruding out” locations on the surface
- And every shade of gray in between acts accordingly.
Most rendering engines do this by relating the shade of gray to the normal vector of the surface. Since the normal vectors are how the rendering engine “sees” the surface, this is a way to trick it into rendering texture on an actually smooth surface.
The relationship between grayscale and surface normal is as such:
- Black = tangent to surface
- White = normal to surface
And any shade of gray between changes the angle of the normal vector. This is nifty because it allows the grayscale image to act as a translator between the human game designer, who sees an image in black & white, and the rendering engine, which sees an image in terms of surface normals.
Now, as mentioned earlier, there is a shortfall to this method as it pertains to lighting. The bump map sets a fixed surface normal distribution. In other words, it only creates local lighting effects. It will only tell the rendering engine which areas of the surface are darker than others relative to itself.
So, the bump map does not provide the rendering engine enough to consider where the global light source is coming from in relation to the details on a surface. This could lead to a situation where the shadows of a surface are actually facing the light source, and the highlights are where you’d expect the shadows to be.
If the end-user sees shadows where their eye expects highlights, they may find the graphics less believable. This doesn’t mean bump maps are totally obsolete, though. They can be used on their own or in conjunction with other maps to really enhance the overall rendering. We’ll get into some best practices in a bit, but first a bit on normal maps and how they interact with lighting.
A Normal Map Uses RGB To Manipulate Light
As we’ve alluded to, normal maps have the ability to better incorporate global lighting into the perceived surface texture of an object.
They do this by providing the rendering engine with a third piece of information or color channel to use. In contrast, a bump map technically only provides two color channels to use; black or white. Normal mapping uses the RGB color scale to calculate a surface normal from three component vectors instead of two. RGB, in this case, means:
- Red
- Green
- Blue
To understand this better without giving a dissertation on linear algebra, let’s quickly go back to thinking about bump maps for a second. The shade of gray essentially equates to the angle of a vector relative to the surface itself. That vector is made up of two component vectors in cartesian object space, one on the tangent axis (black) and one on the normal axis (white).
The closer the color is to black at a certain location, the lower the angle between the normal vector and the surface itself. Conversely, the closer to white the image is, the closer to orthogonal the normal vector is.
But if we’re operating in 3D space, what about the third dimension? This is where normal maps come in with RGB instead of grayscale. Like the bump map, a normal map has a tangent axis and a normal axis, but it also introduces the bitangent axis. And since there is a third axis, there needs to be a third color to represent it. The table below illustrates how each map translates colors into vectors.
| Vector Axis | Bump Map Color Translation | Normal Map Color Translation |
| Normal | White | Blue |
| Tangent | Black | Red |
| Bitangent | N/A | Green |
The key to understand here is that the normal map has the ability to define surface normals in 3D global space because there are three vector components making up said normal. Each of the components can be related to the global X, Y, and Z components of the cartesian world space in which a lighting source is fixed.
A bump map cannot do this because there is no third component relating the normal to global cartesian space. This is why you can end up with highlights where you’d expect shadows with bump mapping.
The three vector components of a normal map make up a cartesian system, meaning they are all orthogonal to each other. However, the coordinate system can still be oriented in an infinite amount of directions and needs to be constrained somehow so that the map makes sense.
This is done by orienting the vector components to the texture coordinates of the map. Most rendering and 3D modeling software will do this in the background for you, though, so no sweat if you weren’t paying attention in linear algebra class. There are typically 3 different orientations to choose from:
- Tangent space
- Object space
- World space
Each one of these has its advantages and disadvantages, depending on the application of the object. We’ll get into these later.
Regardless of which orientation is used, it’s an important step because it allows the rendering engine to calculate the surface normals in a way that they all smoothly relate to each other. The result is a perceived surface texture that reacts uniformly to the global light source.
So that’s the big difference. Both maps affect the lighting on a surface, but they do so in different ways. The normal map excels in its ability to relate a surface texture to the 3D space in which it resides. This will ultimately provide more believable renderings, although it is not uncommon to use bump maps and normal maps together to create highly detailed surfaces.
Again, neither of these methods actually modify the 3D geometry of the underlying surface.
A Quick Note on Normal Map Orientation
Since normal maps determine the angle at which light reflects off of a surface, it’s important to consider how the map itself is oriented with relation to the object it’s applied to.
Tangent Space Is Most Common
When a normal map is oriented in tangent space, it’s texture normals are stored relative to the geometry normal. This is typically the most versatile because it allows the object to move and deform in space while keeping the effects of the texture intact. This is particularly useful when texturing things like:
- A character’s skin
- Moving textiles
- Objects that move around and interact with the user
Bottom line; use this if the object you are texturing will be moving around in space with the user.
Object Space Creates Higher Quality at The Cost Of Versatility
A normal map oriented in object space calculates its normals relative to the object as a whole. The object can still move, but if its surfaces deform there may be issues with the normal. The maps are usually specifically tailored to the object they are being applied to, which leads to sharper detail and better smoothing.
This makes it difficult to reuse or tile the map on other surfaces, though. Texture coordinates cannot be mirrored, either. So, modeling texture on symmetric objects will be twice the work.
World Space Creates A Totally Fixed Map
A normal map oriented in world space is fixed in place relative to the global 3D coordinates. This means the object it’s applied to should remain stationary; otherwise it will “slip out” from under the map if moved.
This is good for creating high levels of detail on large, stationary objects of an environment.
Which Map Has A Better Rendering Speed?
While rendering speed is heavily reliant on the rendering engine itself, bump maps and normal maps do take up different amounts of memory.
Typically, normal maps are faster to render than bump maps.
The difference is not drastic, but it’s there. Normal maps slightly edge out bump maps because they don’t require multiple texture samples like bump maps do.
What Kind of Map Should I Use?
As with anything, there is no unanimous consensus that one of these maps is better than the other. Bump maps and normal maps both have advantages in different applications. Let’s explore a few of these.
Best Uses for Normal Mapping
We already touched on some of these when discussing the different normal map orientations. Generally speaking, normal maps are the most versatile solution when you are in need of a texture that responds well to movement. This can apply to just about anything:
- Characters
- Weapons/tools/objects
- Vehicles
- Textiles
- Foliage
Normal maps are also useful for bringing detail into parts of the environment that are expected to be viewed up close.
- Walls
- Walkways
- Signage
Normal maps are extremely versatile, especially with tangent space orientation. They also wrap around edges to create a favorable beveling effect, something that bump maps cannot do. This softens otherwise sharp edges on an object that shouldn’t appear to have sharp edges, thus making the image more believable.
This doesn’t achieve the same level of detail as a displacement map (which we’ll briefly touch on at the end of this article), but it does at least create the illusion of rounded edges on things like:
- Doorknobs
- Weapon handles
- Wall corners
This subtle effect is not achievable with a bump map.
Best Uses for Bump Mapping
Bump maps are best used for background surfaces or relatively small objects. Think environmental features that are to be perceived in the distance.
- Operating Room
- Landscapes
- Cityscapes
Since bump maps don’t do as well as normal maps on moving objects, they are easily applicable to a scene’s backdrop or mid-detail level aspects. Since they are easier to create and don’t require as much vector calculation, they are the lower effort option.
However, when applied to parts of an environment that will not be under as much scrutiny, bump maps give the most bang for your proverbial buck.
They Can Be Used Together, Too
Don’t forget that bump maps and normal maps can be layered over one another to create even more depth of detail to your rendering.
As with any texture map, you can layer as many or as few as you like to achieve the desired level of detail.
- Bump maps adjust the perceived height of a surface relative to itself
- Normal maps adjust the perceived angle at which light reflects off the surface
Combine these two to balance the benefits of both height and angle manipulation of your surface.
To Sum It Up.
The difference between a bump map and a normal map is how each manipulates a surface to interact with light. Bump maps work in “two dimensions” by using a grayscale to artificially move parts of a surface up or down. Moving up means brighter, and moving down means darker.
Normal maps work in “three dimensions” by using red, green, and blue color channels to artificially manipulate the direction in which light reflects off of a surface.
The maps can be used together or individually, and neither texture map actually alters the geometry of the surface. While normal maps can wrap around edges to create a bevel effect, both of these maps lack the ability to produce the illusion of texture along an edge.
Bonus: What About Displacement Maps?
If you need to render the edges of a surface so that the silhouette of the object matches the texture, a bump map or normal map won’t cut it.
The advantage of bump maps and normal maps is that they create the illusion of texture without actually altering the mesh of the surface. This means that the model size can remain small, and the render time is still pretty quick. But this limits the amount of detail on object edges.
This is where displacement maps come in. Consider the example of a brick wall. The bricks stick out relative to the mortar holding them together. So, if you were looking around the edge of this corner, it would not appear to be a straight line, the bricks would protrude, and the mortar would retreat.
Neither normal maps nor bump maps can achieve this illusion, and it would just be a tedious task to sit there and actually model all those bricks. Not to mention, it would make your 3D model pretty clunky.
This is where displacement mapping comes in. It, like a bump map, adjusts the height of a surface. But instead of manipulating the lighting, it manipulates the actual shape of the object when rendered. Because of this, it requires more rendering time and a much finer mesh on the surface. For example, the larger surface needs to be broken down into hundreds, more likely thousands, of individual surfaces.
This is worth it though, if the rendering engine is powerful enough and the detail is needed.
Below are some useful videos to show these concepts visually:
Bump mapping:
Normal mapping:
Displacement mapping:
Click the following link to learn why 3d rendering takes so long.
