Using Height Maps and Pixel Displacement

See how Height Mapping adds realism to your flat textures

Height Maps, at times referred to as parallax maps, are frequently used alongside normal maps to add more detail to surfaces where the texture maps render significant bumps and protrusions. While the idea behind height mapping is similar to normal mapping, this approach is more sophisticated and consequently more expensive to accomplish.

Objectives: Learn about height maps and how to apply them in Unity.

· What is a Height Map?
∘ How does the occlusion effect work?
· How to create a Height Map texture
· How to add Height Maps in Unity

What is a Height Map?

A Height Map is a step above a Normal Map. Generally, normal maps manipulate the lighting of a texture to create the illusion of protrusion, and crevice formations. Height Maps use actual displacement of visible surface areas, allowing it to achieve a level of occlusion.

Note: Occlusion is when an object is obstructed or hidden behind another object.

How does the occlusion effect work?

• Facing the camera(near side) → Bumps or protrusions expand and appear more exaggerated
• Facing away from the camera(far side) → Bumps or protrusions will be reduced to appear occluded(hidden) by the more exaggerated ones.

Although limited, this occlusion can generate realistic-looking pieces of geometry. However, Height Mapping will not change the actual structure of your 3D object, it will only give it the illusion of depth.

How to create a Height Map texture

For this article, I am using Stone material from Filebase and Photoshop.

What is Filebase and How do You Use It?

This Stone(stone04) material has a Diffuse Texture that can be accessed in photo editing software or digital art software.

Note: Diffuse Maps or textures provide details on the object’s color and pattern.

In the previous articles, I had used Clip Studio Paint, but unfortunately its appliances are limited without a native 3D pipeline integration. You can still create Height Maps using Clip Studio Paint, but it may require more mental acrobatics and steps, while photoshop can generate one with just one click.

1. Locate your Diffuse Map using “Show in Explorer”.

2. Drag-and-Drop your Diffuse Map into Photoshop.

3. Make sure that you’ve clicked on the image, then go to Generate → 3D → Bump Map(Height Map)

An image demonstrating a 3D display of your map will appear, click ok.

4. If the image looks too dark, go to Edit → Auto-Contrast.

Remember: We want the darks and light to be clearly defined, so a very dark image will likely result in a less apparent bump map.

5. Save the Height Map with a new name. Do not overwrite the existing Diffuse Map.

How to add Height Maps in Unity

1. Back in Unity, change your Displacement Mode to Pixel. This will enable the Height Map option without changing the Geometry of your object, only the pixel data of the mesh surface will be displaced.

Note: The Stone material also included a Normal Map which I set to 1.

2. Drag and drop the Height Map into the Height Map option. You should see how the texture pops up now.

Note: My texture turned a neon blue to signify it was loading. This is normal when Unity is running slowly. I forgot I was running a rather taxing process in the background. 😅

The Result:

Thank you for your time! If you found this information valuable give me a follow! :) I document my learning journey into Unity Development and Software Engineering in the form of tutorials!