Adding details to the terrain using normal maps
- Unreal Engine 4.9 or above
- Landscape from Part III
Now that we managed to create the landscape from WM (World Machine), and implement this into UE4 (Unreal Engine 4), and we managed to apply texture to the landscape, it’s about time we focus on some details. To make these details, we’re using normal maps.
In this chapter we’re going to cover the following topics:
- Finding/creating normal maps
- Applying the normal maps to the appropriate material
Let’s do this!
Finding/creating the normal maps
First of all, we need normal maps. Now, for the purpose of this guide, I will NOT create normal maps from the scratch. Instead, I’ll find a few on Google Images and use those. You will be able to download the normal maps at the bottom of this post.
Note: don’t ever use normal maps from Google Images if you plan on releasing your game, as the creator might not approve this. Make sure to create your own. This goes with EVERYTHING in your game, unless the creator gives you the right to use their assets. For the purpose of this guide, I will not show you how to create normal maps. This might be a subject for another guide.
We need to find some images that would fit our textures, meaning; some sort of grass normal map, and dirt normal map (if that’s what you decided to use for your terrain. If you’er using a rock texture instead of dirt, you should find a rock normal map).
Let me quickly explain what normal maps actually do. First, find a simple normal map from Google. Let’s take a look at mine (1024×1024 px):
This normal map is for the grass when we see it up close (We’re going to find normal maps for close up and for far away details). Normal maps are these blue/pink/purple images. These colors defines height information. Now these information aren’t going to be applied to your landscape (as in changing the mesh), but they are going to define how lightning affects the landscape texture. I think the easiest would be to show you an example. Refer to the image below:
If you’re able to see what this is, congratulations. It isn’t easy to see that this is the grass is it? That’s because the normal map has not been applied. We could make the texture scale less, but that’s not what we want. Now if we apply the normal map to this texture, it’ll look like this instead:
You see the difference? The grass doesn’t look flat anymore, instead it looks like is has some height which is affecting by the lightning in the scene? that’s what normal maps does (this explanation was EXTREMELY basic. If you wish to learn more about normal maps, please post a comment below and I’ll create a post about them).
So, about finding those normal maps. In Google Images I’m simply searching grass normal map and dirt normal map. In the Google Images Search Tools you can search for 1024×1024 px images specifically (you can use 512×512 if you wish, but for better detail I’m going with 1024×1024 px images).
Make sure that you find normal maps for both textures; one up close, and one from a distance. Here’s the four normal maps that I’m going to use:
Note: a download link can be found in the bottom of the guide if you can’t find any good normal maps.
Applying the normal maps to the textures
Alright, I’m not going to tell you how to import, as you should know this by now (if not, go to on of the other parts and follow the instructions). Once imported, we need to apply these normal maps to our textures.
These normal maps are to be applied on our material functions. Remember we made those? Go ahead and open up MF_Grass.
Our blueprint editor should look exactly like last time we we’re in here. Like so:
Notice the Normal attribute in the MakeMaterialAttributes node? This is where our normal maps should be plugged in.
Now, as we need to apply two normal maps, we need to blend these. This is done with the use of the node BlendAngleCorrectedNormals. Go ahead an find that node, and drop it into the editor.
Note: for the sake of simplicity and overview, I went ahead and grouped the normal maps, the LandscapeCoords, and he diffuse into their own little comment box (refer to next image). You can do this by simply clicking on one or multiple nodes and press C.
Firstly, we need to add the Texture Samples. Add two of these as we need to blend TWO normal maps. The normal map for the far detail should be plugged into the attribute BaseNormal (V3) of the BlendAngleCorrectedNormals node. Plug the other into the AdditionalNormal (V3), like so:
Now we need to define the LandscapeCoords just like we did it with the diffuse map (just to clarify: textures used in game development are also referred to as diffuse maps, so the color texture is the diffuse map).
We need a LandscapeCoords node for each of our normal maps. This will define the size of our normal map. Add two of these and plug the output of the LandscapeCoords into the UV’s attribute of the Texture Sample’s, like so:
Note: I’ve created a comment for the LandscapeCoords as well. That’s why there’s a grey box behind the nodes.
Make sure you change the Mapping Scale accordingly. For the Mid I’m using 32 and for the Close I’m using 5.
Note: we can always go back and change these if the landscape doesn’t look as expected.
Note: notice that the diffuse in our far view? When you’re far away from the mountains and such, you won’t be able to see the normal maps. So the NM_Grass_Far is actually the mid range.
Plug the output of the BlendAngleCorrectedNromals into the Normal attribute of the MakeMaterialAttributes. Press save Apply and Save. Close down the blueprint editor and look at your landscape once the shaders has compiled. Looks good doesn’t it? Notice that when your a fair bit away from the mountains, you’ll see the normal map that we applied the mapping scale 32 to, and as you get closer, you’ll see the other normal map “overlapping” the mid normal map. This is our details.
Now you can go ahead and do exactly the same with the MF_Dirt material function. again, hit Apply and Save, and take a look at your landscape.
Here’s how mine looks:
Doesn’t this just look amazing?
Now there’s only one thing left to do for this chapter of the guide, and that is to remove this ugly “plastic” like reflection. It looks ugly, and it doesn’t fit the reality of terrain textures. This is a very simple process. Open up your MF_Grass material functions. Find the node called Constant. The Constant node is just a simple number (what we in the programming world call and Integer). Drag this node into your blueprint editor.
We can change the value of this constant (default is 0.0). Let me quickly clarify a tiny thing: everything in the real world reflect lightning, and YES terrain does too. Basically what I’m saying is that this value should NOT be 1. This constant will define the roughness of our material; the more rough (1) the less reflection. The less rough (0) the more reflection. Try to set this value to 0.8. Connect this Constant node, to the Roughness attribute on your MakeMaterialAttributes node, like so:
Hit Apply and Save and look at your terrain once the shaders are done compiling. You can play around with this constant value until you find something that looks great and realistic. Do the same with your MF_Dirt and you’re done for this chapter!
Congratulations! You’ve managed to create detail on your very basic terrain!
Wasn’t this a nice short post? We didn’t really change that much this time, but we did manage to make the landscape look 500 times better and more realistic! So what did we actually do?
- We managed to find some nice normal maps
- We managed to apply these normal maps to the landscape (far + close)
- We managed to change the roughness of the terrain so it wouldn’t reflect as much
Note: if you press play, you’re character may “despawn” after falling for a while. You can fix this by either changing the Kill Z by pressing the World Settings tab underneath the World Outliner. Change this to something like -20000. Another fix; lift your terrain to the correct location on the Z axis.
Not to be continued!
We’re actually done for this guide. I have now shown you guys how landscapes in Unreal Engine 4 are made using World Machine. If you have any questions regarding this guide, you’re more than welcome to comment below, and I’ll make sure to do my best to answer you.
By the way; here’s the link to download the heightmap, the slopemask, the textures and the normal maps used in this guide: Dropbox
Thanks you guys for following this guide to the end. I hope you learned something new, and you feel like it’s now easier to create a quick landscape for UE4. And as a good ending for this guide; here’s how my finished landscape looks like:
Remember to paint your landscape to remove the ugly edges of the textures!
I’ll talk to you guys later!