Using Height Maps and Pixel Displacement in Unity3D

If you want to get some extra depth out of your flat surface textures, look no further than Height Maps and Pixel Displacement.

I am going to use this Stone 4 texture from the Filebase asset library.

After pressing the download button, a package preview opens up, giving the user the option to change what all is being imported, if desired.

After pressing the import button, the stone texture comes in pink, which means it needs to be upgraded to be an HDRP material. You can do this by navigating to Edit>RenderPipeline>HD Render Pipeline>Upgrade from Built-in Pipeline>Upgrade Selected Materials to High Definition Materials.

With the new material upgraded to an HDRP material, I will need an object to attach it to. Being that this is a stone texture, I want to apply it to an outside floor. Let’s create a 3D object of the Plane type.

Here is the default plane object as it appears in the scene view.

The stone material, or whatever material you are using, can be dragged directly from the Assets folder on to the object in the scene view.

Now we have a nice flat looking stone floor, which is a pretty typical look for using the Universal Render Pipeline. There are so many more options available with the HDRP to enhance this, so let’s explore and experiment .

Bringing down the Albedo color in the Base Map will give the material a more natural and less blown out look.

This Gif is just me sliding the color picker to create some drastic changes to the material appearance.

The Surface Inputs include sliders to adjust the Metallic and Smoothness properties. This isn’t a hematite floor, so I won’t be increasing the metallic value. I do add some smoothness to give an appearance that this stone is walked on and maybe even took some rain recently.

Here is me playing with the smoothness slider.

Changing the directional light shows how powerful this texture now is, being it’s still just a flat plane as far as geometry is concerned. It does look rather wet as well with the smoothness applied.

Adjusting the Normal Map slider will add some contrast and deepen the tone and depth of the shadows.

Here is an extreme example of the Normal Map being adjusted.

In order to use Pixel Displacement, a Height Map (bump map) will be needed for the texture. This can be done quickly in Photoshop. Open the original source file PNG in Photoshop. Then go to Filter>3D>Generate Bump Map. This is also where you can generate a Normal Map if by chance you need one of those as well.

You should see a pop-up displaying the new height map. Note the Invert Height checkbox, which can be used if you wanted to push your texture inward rather than outward. For my purposes here, I am leaving it un-ticked.

After pressing the OK button, the height map is displayed as a 2D image.

It’s pretty dark, so let’s add some quick contrast by going to Image>Auto Contrast.

That’s much better, and has some soft blur to it, which is perfect for a height map.

Save this file into the same location on your hard drive as your other textures for that particular material.

When you close Photoshop, remember to select the No option when asking to save. The Yes option here will overwrite your original Base Map with the new Height Map, being that was the originally opened file.

Back in Unity now, the Height Map should appear in the Assets folder.

With the Stone material selected, I can go into the inspector and change the Displacement mode from None to Pixel Displacement.

A new assignment slot for the Height Map has now been added under the Normal Map.

Drag the new Height Map from the Assets folder into the Height Map on the material to assign it.

You can see the difference it makes as I toggle the Height Map on and off.

If you zoom in really close to the floor, you can see the actual pixels being displaced along the Y (vertical) axis! This really does a solid job of creating the illusion of depth on what is still really a simple flat surface.

The minimum and maximum steps sliders can be used to dictate how much detail the displacement will use. Increasing the maximum steps will yield more detail. The Fading Mip Level will provide a distance for the displacement effect to fade away at as the camera moves farther from the object.

Enabling the Depth Offset option will use the Height Map to add a touch of contrast and depth to the shadows.

As the Depth Offset toggles on here, you can see the shadows deepen.

The Height Map has an Amplitude slider, but be careful as this is really powerful and it’s easy to add too much.

Here is a fairly drastic increasing of the amplitude.

Looking from the inside out, I am starting to get some nice looking stone.

Another option to take is Vertex Displacement, which can be selected under Displacement Mode on the material.

Under Height Map there is a Parametrizatior option where I will change the MinMax to Amplitude.

As seen here, the default plane has more natural geometry than you would expect. The Parametrizatior, will basically use parameters to change the geometry of the plane mesh.

With the plane object selected in the hierarchy, I greatly increase the Amplitude of the Parametrizatior to create some variations in the geometry.

You can see the ground change from a flat plane to a surface with variation as the amplitude increases.

I have the amplitude pretty high here just to show the effect really working.

This is a bit too much, but you can really see the ground deformation now.

I dial the settings back to a desired look and then prepare for the next step. Thanks for reading and I hope you join me in my next article about Tessellation!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store