The rendering system in Unreal Engine 4 uses the DirectX 11 pipeline, which includes deferred shading, global illumination, lit translucency, and post processing. Unreal Engine 4 has also started branching to work with the newest DirectX 12 pipeline for Windows 10, and DirectX 12 capabilities will be available to all.

Unreal Engine 4 uses the Physical Based Shading Model (PBSP). This is a concept used in many modern day game engines. It uses an approximation of what light does in order to give an object its properties. Using this concept, we give values (0 to 1) to these four properties: Base Color, Roughness, Metallic, and Specular to approximate the visual properties.

For example, the bark of a tree trunk is normally brown, rough, and not very reflective. Based on what we know about how the bark should look like, we would probably set the metallic value to low value, roughness to a high value, and the base color to display brown with a low specular value.

This improves the process of creating materials as it is more intuitive as visual properties are governed by how light reacts, instead of the old method where we approximate the visual properties based on how light should behave.

For those who are familiar with the old terms used to describe material properties, you can think of it as having Diffuse Color and Specular Power replaced by Base Color, Metallic, and Roughness.

The advantage of using PBSP is that we can better approximate material properties with more accuracy.

The Material Editor enables visual scripting of the High Level Shading Language (HLSL), using a network of nodes and connection. Those who are completely new to the concept of shaders or HLSL should go on to read the next section about shaders, DirectX and HLSL first, so that you have the basic foundation on how the computer renders material information on the screen. HLSL is aproprietary shading language developed by Microsoft. OpenGL has its own version, known as GLSL. HLSL is the programming language used to program the stages in the graphics pipeline. It uses variables that are similar to C programming and has many intrinsic functions that are already written and available for use by simply calling the function.HLSL shaders can be compiled at author-time or at runtime, and set at runtime into the appropriate pipeline stage.

To open the Material Editor in Unreal Engine 4, go to Content Browser | Material and double-click on any material asset. Alternatively, you can select a material asset, right-click to open the context menu and select Edit to view that asset in the Material Editor.

If you want to learn how to create a new material, you can try out the example, which is covered in the upcoming section.

We will continue to use the levels we have created. Open Chapter3Level.umap and rename it Chapter4Level.umap to prevent overwriting what we have completed at the end of the previous chapter.

To create a new Material asset in our game package, go to Content Browser | Material. With Material selected, right-click to open the contextual menu, navigate to New Asset | Material. This creates the new material in the Material folder (we want to place assets in logical folders so that we can find game assets easily). Alternatively, you can go to Content Browser | New | Material.

Rename the new material to MyMaterial. The following screenshot shows the new MyMaterial correctly created:

Note that the thumbnail display for the new MyMaterial shows a grayed-out checkered material. This is the default material when no material has been applied.

To open the Material Editor to start designing our material, double-click on MyMaterial. The following screenshot shows the Material Editor with a blank new material. The spherical preview of the material shows up as black since no properties have been defined yet.

Let's start to define some properties for the MyMaterial node to create our very own unique material. Base Color, Metallic, and Roughness are the three values we will learn to configure first.

Base Color is defined by the red, green, and blue values in the form of a vector. To do so, we will drag and drop Constant3Vector from MyPalette on the right-hand side into the main window where the MyMaterial node is in. Alternatively, you can right-click to open the context menu and type vector into the search box to filter the list. Click and select Constant3Vector to create the node. Double-click on the Constant3Vector to display the Color Picker window. The following screenshot shows the setting of Constant3Vector we want to use to create a material for a red wall. (R = 0.4, G = 0.0, B = 0.0, H = 0.0, S = 1.0, V = 0.4):

Connect the Constant3Vector to the MyMaterial node as shown in the following screenshot by clicking and dragging from the small circle from the Constant3Vector node to the small circle next to the Base Color property in the MyMaterial node. This Constant3Vector node now provides the base color to the material. Notice how the spherical preview on the left updates to show the new color. If the color is not updated automatically, make sure that the Live Preview setting on the top ribbon is selected.

Now, let us set the Metallic value for the material. This property takes a numerical value from 0 to 1, where 1 is for a 100% metal. To create an input for a value, click and drag Constant from MyPalette or right-click in the Material Editor to open the menu; type in Constant into the search box to filter and select Constant from the filtered list. To edit the value in the constant, click on the Constant node to display the Details window and fill in the value. The following screenshot shows how the material would look if Metallic is set to 1:

After seeing how the Metallic value affects the material, let us see what Roughness does. Roughness also takes a Constant value from 0 to 1, where 0 is completely smooth and makes the surface very reflective. The left-hand screenshot shows how the material looks when Roughness is set to 0, whereas the right-hand screenshot shows how the material will look when Roughness is set to 1:

We want to use this new material to texture the walls. So, we have set Metallic as 0.3 and Roughness as 0.7. The following screenshot shows the final settings we have for our first custom material:

Go to MyMaterial in Content Browser and duplicate MyMaterial. Rename it MyWall_Grey. Change the base color to gray using the following values as shown in the picker node for the Constant3Vector value for Base Color. (R = 0.185, G = 0.185, B = 0.185, H = 0.0, S = 0.0, V = 0.185):

The following screenshot shows the links for the MyWall_Grey node. (Metallic = 0.3, Roughness = 0.7):

To create a material using textures, we must first select a texture that is suitable. Textures can be created by artists or taken from photos of materials. For learning purposes, you can find suitable free source images from the Web, such as www.textures.com, and use them. Remember to check for conditions of usage and other license-related clauses, if you plan to publish it in a game.

There are two types of textures we need for a custom material using a simple texture. First, the actual texture that we want to use. For now, let us keep this selection simple and straightforward. Select this texture based on the color and it should have the overall properties of what you want the material to look like. Next, we need a normal texture. If you still remember what a normal map is, it controls the bumps on a surface. The normal map gives the grooves in a material. Both of these textures will work together to give you a realistic-looking material that you can use in your game.

In this example, we will create another wood texture that we will use to replace the wood texture from the default package that we have already applied in the room.

Here, we will start first by importing the textures that we need in Unreal Engine. Go to Content Browser | Textures. Then click on the Import button at the top. This opens up a window to browse to the location of your texture. Navigate to the folder location where your texture is saved, select the texture and click on Open. Note that if you are importing textures that are not in the power of two (256 x 256, 1024 x 1024, and so on), you would have a warning message. Textures that are not in the power of two should be avoided due to poor memory usage. If you are importing the example images that I am using, they are already converted to the power of two so you would not get this warning message on screen.

Import both T_Wood_Light and T_Wood_Light_N. T_Wood_Light will be used as the main texture, we want to have, and T_Wood_Light_N is the normal map texture, which we will use for this wood.

Next, we follow the same steps to create a new material, as in the previous example. Go to Content Browser | Material. With the Material folder selected, to open the contextual menu, navigate to New Asset | Material. Rename the new material MyWood.

Now, instead of selecting Constant3Vector to provide values to the base color, we will use TextureSample. Go to MyPalette and type in Texture to filter the list. Select TextureSample, drag and drop it into the Material Editor. Click on the TextureSample node to display the Details panel, as shown in the following screenshot. On the Details panel, go to Material Expression Texture Base and click on the small arrow next to it. This opens up a popup with all the suitable assets that you can use. Scroll down to select T_Wood_Light.

Now, we have configured TextureSample with the wood texture that we have imported into the editor earlier. Connect TextureSample by clicking on the white hollow circle connector, dragging it and dropping it on the Base Color connector on the MyWood node.

Repeat the same steps to create a TextureSample node for the T_Wood_Light_N normal map texture and connect it to the Normal input for MyWood.

The following screenshot shows the settings that we want to have for MyWood. To have a little glossy feel for our wood texture, set Roughness to 0.2 by using a Constant node. (Recap: drag and drop a Constant node from MyPalette and set the value to 0.2, connect it to the Roughness input of MyWood.)

Using the custom materials that we have created in the previous two examples, we will replace the current materials that we have used.

The following screenshot shows the before and after look of the first room. Notice how the new custom materials have transformed the room into a modern looking room.

From the preceding screenshot, we also have added a Point Light and placed it onto the lamp prop, making it seem to be emitting light. The following screenshot shows the Point Light setting we have used (Light Intensity = 1000.0, Attenuation Radius = 1000.0):

Next, we added a ceiling to cover up the room. The ceiling of the wall uses the same box geometry as the rest of the walls. We have applied the M_Basic_Wall material onto it.

Then, we use the red wall material (MyMaterial) to replace the material on wall with the door frame. The gray wall material (MyWall_Grey) is used to replace the brick material for the walls at the side. The glossy wood material (MyWood) is used to replace the wooden floor material.