Creating UE4 Landscapes with World Machine – Part III – Texturing the Landscape


Creating material and applying textures to the landscape


prerequisites

  • Slopemap from Part I
  • Textures from Part II
  • Unreal Engine 4.9 or newer

introduction

Now that we managed to create our textures from Part II, we managed to create and implement our WM terrain into a UE4 landscape, and we managed to create the slopemap from WM, it’s time to use this slopemap and apply the textures to our landscape.

In this chapter we’re going to cover the following:

  • Import the textures from Part II into UE4
  • Creating material functions that we can use in our master landscape material
  • Applying the textures to these materials
  • Creating the actual master landscape material

Let’s do this!

Note: if you tried to run the game as this point (with only the landscape imported) and your character freezes at some point. Don’t worry. That is something we’ll take care of later. For now, we’re just creating the terrain.

importing the textures

Last time I explained how to create seamless textures, using Google Maps. This time, we’re going to use these textures, but before we can do anything at all, we need to import these textures into UE4. To do this, simply click the Import button right above your Content Browser. Navigate to your textures, and import it (the textures should be 1024×1024 PNG’s if you followed the guide in Part II. They might as well be 512×512, but 1024×1024 simply has better resolution).

First step taken care of. Easy isn’t it?

Creating the material functions

Yes I said Functions. Not just basic materials, but material functions.The reason for this is simple: you cannot apply more materials to a landscape, you can only apply ONE single material. With that said, we can still apply multiple textures, with their own material properties to said master material. This is what we do with the material functions.

To create a Material Function simply right click in whatever folder where you want the material function. Choose the Material options, and choose the Material Function. For the purpose of this guide, I will create a dirt material, and a grass material. Refer to the image below.

Material Function

Make sure to give the material function an appropriate name. Since this is a material function, I choose to go with MF_Dirt and MF_Grass (MF for Material Function).

Create another material, but this time a regular material. This will be our Master Material. I’ll just call this M_Landscape_Master.

Your content browser with all your materials, should now look something like this:

Materials in the Content Browser

Now go ahead and Double-Click the MF_Dirt material function. You should be presented to a window like this:

Material Function Blueprint

Note: as I mentioned in the preview post (Part II), I’m using the Blueprint third person template. If yours doesn’t look like this, perhaps you didn’t choose the blueprint version?

And now is where the fun part begins; actually creating the material functions.

First thing you want to do, is to add the node: MakeMaterialAttributes. This basically allows us to create the material attributes that you’re used to see in the regular material. you can now either find the Texture Sample node, and apply your dirt texture, or you can drag and drop from the content browser.

Note: you cannot see the content browser within the blueprint editor, but you can make the blueprint editor window smaller, and see the content browser from there.

With the added MakeMaterialAttributes node and the Texture Sample node, your function should look like this:

Function with atributes and texture sample

Now, go ahead and put the output of the texture sample, into the BaseColor of the material attributes, and the output of said attributes, into the input of the Output Result, like so:

combining the texture wiht attributes with output

For now, this is all we’re going to do in this function. Go ahead and do exactly the same with your MF_Grass material. It should end up looking like this:

grass function

Now we need to add the LandscapeLayerCoords node. Find this, and drag it into the editor. Take the output of your LandscapeCoords and plunk that into the UV’s slot of your Texture Sample. The landscape layer coordinates defines the tiling of the texture (basically the size of the image onto the landscape) try to start with 512, like so:

landscapecoords

From this point on, all we need to add to these functions, is details. Details is something we’ll do in the next part (Part IV).

Go ahead and close these blueprint editor windows, so all you can see, is the base window of UE4. In the content browser, Double-Click your M_Landscape_Material (Your master material).

This material should look like this, in the blueprint editor:

master bare

From here, we need to combine the two functions we just made, with the master material of the landscape.

First thing you want to do, is to make sure that this material is using the attributes we make with the functions. If you press the M_Landscape_Master node (as the image above), you can see the Node Details on the left side, just beneath the material preview. It should look something like this:

use material attributes

Make sure to note the checkbox Use Material Attributes. This should be checked like the image above. This DOES change the node in the editor window, but don’t worry, it’s supposed to do so.

Now, to blend our two functions together, we need to use the node MatLayerBlend_Standard. Find this node, and place it into the blueprint editor. Drag the output Blended Material into the input of the MF_Landscape_Master like so:

matlayerblend

Note: yes that’s a big fat red error. Don’t worry about it 🙂

Since we’ve made our MF_Dirt and MF_Grass as functions, we’re able to call these functions within other blueprint. To do this, simply find the node MaterialFunctionCall. With this node, in the Details panel, we can search for a function inside the Material Functions attribute (refer to image below). Find the grass function MF_Grass and click this.

MaterialFunctionCall

Copy this node, and do exactly the same with the grass MF_Dirt. Your material should now look like this:

material 1

From here, you can put the Result of the MF_Grass node into the MatLayerBlend_Standard in the slot Base Material. Go ahead and drag the Result from your MF_Dirt into the MatLayerBlend_Standard in the slot Top Material. This should make your material look like so:

combining

Note: notice the error is gone.

Now we need to plug something into the Alpha slot of the MatLayerBlend_Standard node. To do this, we’re going to use the node HeightLerp and the Texture Sample node. Find these two, and drag them into the editor. Plunk the texture sample into the Height Texture slot of the HieghtLerp node. Your editor should look like this:

heightlerp

Note: details about the HeightLerp and Alpha Channels is out of the scope for this guide. Leave a comment if you wish to know more.

What this specific section of the blueprint does, is to blend our two material functions, based off of the texture sample we choose to use. For now, we’re going to use a texture that should already be in our project (comes with UE4). Click on the texture sample and find the texture T_Perlin_Noise_M. Click this.

And now your material should look like so:

perlin noise

Remember the LandscapeLayerCoords that we used in the material functions? We need one of those in here as well. Find this node, and drag it into the editor. This defines the blend scale of the two textures. Let’s try with 32 to start with (refer to image below). We need to add a LandscapeLayerSample node aswell, to make this work inside the Landscape Mode. Give this sample an appropriate name (I’ll call mine Grass). Your material should look like this now:

landscapecoords2

Note: to name the Sample node, simply go into the details of that node, and change the Parameter Name.

And there you go. Hit Apply and Save.

With that done, we have created our two material functions, and our master material. Hit Save and Apply in the top right corner of the blueprint editor.

Applying the master material

Now, if you click on your landscape in the viewport, or click the landscape in the World Outliner in the top right corner of your UI (your UI may differ from mine), you can scroll down in the details panel. Find the Landscape property and either drag and drop your material into the slot, or search for the material you just created, using the drop down (refer to image below).

landscape material apply

TADAAAAH. Your engine should now compile the shader, and you should see a completely green landscape. The reason for it to be completely green is simply because we haven’t told it to use the slopemap yet. That’s basically the only thing left to do for this part.

Applying the slopemap

If you look to the left side of your Unreal Engine, you should see the Landscape Mode we talked about in an earlier part. Click this mode. You should now be presented to this:

landscape paint

Actually, yours shouldn’t look completely like this, because you didn’t hit the Paint option. Go ahead and click on that option. Notice how our Grass is present? The name of this layer comes from the LandscapeSample node that we created in our master material.

To apply the slopemap, we first need to create the LayerInfo. To do this, simply press the little icon on the far right of the layer (refer to image below). Make sure to press the Non Weight-Blended Layer option.

landscape layerinfo

Now place the layerinfo where ever you’d like, and you can either rename it, or don’t. That’s up to you. Press OK.

landscape layerinfo save

From here, we can now tell the layer, to paint from our slopemap. If you Right-Click the layer (in my case, the layer called Grass), you can choose the option Import from file. Click this option. Now you can navigate to your slopemap, and select that file (make sure you select the .png and not the .bmp).

Note: there’s a chance that it’ll say: “The Layer file appears to be a color png, grayscale is expected”. Simply ignore this and press OK.

The Grass and the Dirt may be in the opposite placement (eg. the Grass is on the sharp slopes and the Dirt is on the flat ground). To change this, simply change the MF_Grass to be in the Top Material inside your Master Material. Refer to the image below.

Change top material

And there you go. You now successfully managed to texture your landscape! Congratulations!

Quick recap

This was a rather long post with some complex terminologi. I hope you were able to follow along. The great thing about this post is that it isn’t a video. No need to pause, simply scroll up a bit. now, what did we actually manage to do in this part?

  • We managed to import our textures into UE4
  • We created two material functions; one for each texture
  • We managed to combine these materail functions into a single master material
  • And we managed to apply this master material to our landscape

We are now ready to go into more details, in the next part!

To be continued

Next time, as mentioned above, we’ll go more into details. Already now, you can start by going into details. Your landscape might not look great (I know mine could use some work), you could try to make a few changes in World Machine? Perhaps find some new textures? Maybe try to play around with the LandscapeCoords to make the textures tile less. From this point on, it’s all about details.

Below is a small image of my current landscape, that I’ve created during this guide. notice how this still looks like ****. I might go ahead and make the mountains go higher, play around with the slopemap, etc.

Trial and error my friends…. trial and error.

Landscape done

Details comes in the next part! Enjoy!

Advertisements

2 thoughts on “Creating UE4 Landscapes with World Machine – Part III – Texturing the Landscape

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s