Using Height Maps and Pixel Displacement in Unity — Part 01
Objective: To understand what Height Maps and Pixel Displacement are in Unity and how to use them.
In the High Definition Render Pipeline we are given this really cool tool in our Shader Options called ‘Displacement Mode’ and when used in conjunction with a Height & Normal Map we are able to give the illusion of flat surfaces having bumps.
Displacement Mode
There are 3 different types of height map displacement available in the HDRP depending on whether you are using Lit Shaders or Tessellation Shaders. Lit Shaders offer the user the option of vertex or pixel displacement while a Tessellation Shader provides tessellation displacement. Part 02 of these articles is going to cover Pixel Displacement specifically and I will discuss Tessellation in a subsequent article.
Height Mapping (parallax mapping)
From Unity’s Documentation — Height Maps “are used to give extra definition to surfaces where the texture maps are responsible for rendering large bumps and protrusions”. Generally Height Maps and Normal Maps go hand in hand and they will be used together. Using Height Maps can be more performance intensive when comparing to just using Normal Maps.
Representing a height map is a greyscale image that has the white color corresponding to the high area and the black color representing the low area. To get a greyscale image setup let’s take a look at how to do this in GIMP and Photoshop. Part 02 article is going to cover using Photoshop.
GIMP
Find your texture you want to adjust in Unity and right click → Show in Explorer → Open with GIMP.
Then let’s create a duplicate layer by right-clicking on the original layer → duplicate layer. Now, let’s hide the original layer by pressing the eye icon next to the layer.
From here we are doing to Desaturate the image which is going to make the colours of the image more black and white. Let’s also set the mode to ‘Lightness (HSL)’
Now we could use this image as is, but we really want to accentuate the bumps and in order to do this we have to adjust the contrast to be much closer to a black and white image:
Colors → Brightness/Contrast → Increase Contrast + Decrease Brightness
Now let’s rename our image to ‘Bump Map’ and export out as a PNG to the same location where we opened the file and when you head back into Unity it should be sitting there waiting for you!
Once you have created your greyscale texture, the next step will be to choose a ‘Displacement Mode’. Click on the drop-down box in the Inspector and select ‘Pixel Displacement’ which will now give us the new ‘Height Map’ option where we are able to drag our greyscale texture into this box:
Adjusting the ‘Amplitude’ field will show the changes.
