Materials in Unreal Engine 165
FIGURE 4.36: Tutorial 4.2 Material Progression.
SETTING UP THE LEVEL
In this step we simply created a level with a Demo Room and Display Item
blueprints and a Player Start. If you have completed the Tuto rial 4.1, skip this
step.
CREATING AN D ORGANIZING ASSETS
In this step, we simply created a fo lder called MyMaterials for organizational
purposes. We will place all of the mate rials we create in this cha pter into this
folder.
CREATE A SIMPLE MATERIAL
This section was a simply hands-on experience with how we can create new ma-
terials in Unreal Engine 4. We saw two different ways to create n ew materials in
the Content Browser. We also o pened the new material in the Unreal Engine’s
Material Editor.
EDITING THE MATERIAL
This section walked us through editing our newly created material in the Unreal
Engine’s Material Editor. We wante d to create a Brick material. To do this we
created a Texture Sample expression and assigned a diffuse brick texture to
it. We usually u se diffuse texture to simulate the color of th e material. Diffuse
textures a re simple bitmaps (or images) that look like the material we need to
make.
166 Game Development and Simulation with Unreal Technology
We saw three different ways to create Texture Sample expressions. You can
Right-click on the graph editor and search form th em in the search box. You
can also find the expression from the Palette and drag it onto the gra ph editor.
Finally, you can use the shortcut (hold the T key and Left- click on the graph
editor) to place the expression.
Once a Texture Sample expression is placed on the graph editor, you should
assign a texture to it from the Content Browser. To do this you can go to the
Details Panel of the expre ssion, open the drop-down list next to the Texture
section and assign the texture. Alternatively, yo u can select a texture from the
Content Browser, and then click on the Left-Arrow in the Texture sec-
tion to assign the selected texture from the Content Browser. You may also
drag and drop a texture from the Content Browser onto the Text ure section.
To create the look of the br ic k material, we simply connected the RGB ( w hite)
output channel of the Texture Sample expression to the Base Color channel
of our material node.
ADDING THE NORMAL MAP
Normal maps are bitmap (or images) that, for ea ch pixel, conta in a 3D vector
representin g the pixel’s no rmal vector. A normal vector is a vector that points out
of a surface and is perpendicular to the surface. In Computer Graphics, normal
maps are intensively used to cr eate a 3D look on otherwise flat surfaces without
the need to add any complex geometry.
The lighting calcula tion will take into account three vectors: the viewer vector
(also known as the camera vector), th e light vector (also known as the inciden t
vector) and the normal vector to calc ulate the amount of light that is scattered on
a surface and reaches the viewers eyes.
If we do not apply a normal map to our m aterial, all of the pixels on the
surface on wh ic h the material will be applied will have the same dire ction for
their normal. Therefore, the light w ill reflect out uniformly on the surface and
will make it look flat. Applying a normal map to a material will assign different
normal vectors to different locations on the surface. This will make the light rays
that hit different locations on the surface reflect w ith different angles. The end
result is that the surface with normal maps will look 3D, even if its geometry is
perfectly flat. You can see the difference in Figure 4.33(a) (without normals) and
Figure 4.33(b) (with normals applied).
MODIFYING THE NORMAL TO ADD MORE DEPTH
Figure 4.37(a) shows a flat surface with its nor mal vectors unchanged. The black
arrows labeled N are the norm al vectors, the red arrows labeled I are the light
vectors and the blue arrows labeled R are the reflection vectors. Figure 4.37(b)
shows the same flat surface afte r its normals are modified –i.e., they point to-
wards different directions.
In both Figure 4.37(a) and Figure 4.37(b), the light vecto rs are the same to
indicate that the direction of light has not cha nged. Notice that with changes in
Materials in Unreal Engine 167
(a) (b)
FIGURE 4. 37: (a) Reflection on a regular flat surface. (b) Reflection on a flat surface with
modified normals. The dashed l ine shows the perceived surface after normal modifications.
Notice how the surface would look bumpy.
the normal directions, the reflection vectors change. This will create the illusion
that the surface is no t flat, but rather follows the dashed line . Notice after the
normals are modified, the surface seems to actu ally have a bump, and therefore
look 3D.
We used this notion that when nor mal vectors actually point towards a differ-
ent direction than the p erpendic ular d irection to a sur face, they make the surface
look bumpy. Therefor e, if we use the normals from normal map and skew them
even more , we will make the illusion of d epth even more magnified. To this end
we took the normal map , and multiplied its Red and Green channels by two,
keeping its Blue chan nel unchanged.
The Red, Gree n, and Blue channels represent the X, Y, and Z axes. Therefore,
the Blue channel o f a the normal map actually represents the perpendicular direc-
tion to the surface (its Z-axis). This means that the Red and Green channels of a
normal m ap are the tangent directions. Multiplying these directions will skew the
normal map fur ther away from the perpendicular direction. As a result th is effect
will add more depth to the surface, as o bvious from the comparisons between
Figure 4.34(a), Figure 4.34(b), and Figure 4.34(c).
APPLYING MATERIALS IN THE DEMO ROOM
In the final step of this tutorial we applied our three materials, Mat_Simple,
Mat_Simple_Normal, and Mat_Enhanc ed_Normal to the three preview mesh
props in the level.
In Tutorial 4.2, we worked with the most primary material channels, the Base
Color channel and the Normal channel. The ba se color ch annel is responsible for
the color and texture of our material. It is the paint applied to the surface and nothing
more. The normal c hannel, on the other hand, ha d a bit more of an inte resting role.
As we discussed in the What Happ ened ... section above, the normal map actu-
ally applies the normal vectors when the light re flection from a surface is calculated.
This is what makes our material look 3D . We actually used the normal texture f or
168 Game Development and Simulation with Unreal Technology
our materia l in a network to even give more d epth to our material than is supplied
in the normal texture. This made the imperfections and cra cks in our material a b it
more, magnified!
We will learn ab out other material channels and their use in giving a certain look
in the next couple of tutorials. We will use the rough ness channe l to give a little damp-
ness to our material and enhance its look w ith the metallic channel in Tutorial 4.3.
FIND ON THE WEBSITE
To find updates to this tutorial and upda te d instructions about its implementa-
tion on othe r UE4 versions, p le ase visit the book’s companion Website at:
http://www.RVRLAB.com/UE4Book/
TUTORIAL 4.3 Enhancing t he Material’s Look
Now that our material has a nor mal map to give it some de pth, let us enhance
its look. We will create a couple of networks to feed the Roughness and the
Metallic channels of our material.
In the new U nreal Engine’s ma te rial model, called Physically Based Materi-
als, the reflection and sh ininess of a material are encoded within the Metallic
and Roughness channels.
ADDING MOISTURE WITH ROUGH NESS CHANNEL
For an even m ore realistic look to o ur material, it is best to add a Roughness
channel. Adding this channel will give our bric k wall the appearance of being
slightly wet or glossy in certain areas.
1. In th e Content Browser lo cate the Mat_Enhanced_Normal.
2. Right-click on the Mat_Enhanced_Normal and choose Duplicate. This will
make a dup licate copy of the Mat_Enhanced_Normal.
3. Rename the duplicate copy of Mat_Enhance d_Normal1 to Mat_Enhance d_NormalV1.
4. Open the Mat_EnhancedV11 mater ia l by Double-clicking on it.
5. Add a TextureSample expression and set the Texture value to be
T_Brick_Hewn_Stone_M.
6. Create two Constan t expression s above the new Textu r eSample. Set the first
to 0.7 and the second to 0.2.
7. Create a LinearInterpolate (Lerp) expression by right-clicking on the graph ed-
itor and searching for it. Place it to the right of the TextureSample and th e two
Constant expressions and make the following co nnections:
Materials in Unreal Engine 169
Constant with value 0.7 ↔ Input A of the Lerp expression.
Constant with value 0.2 ↔ Input B of the Lerp expression.
TextureSample Red Output ↔ Input A lpha of the Lerp expression.
Lerp Output ↔ Roughness channel of the Material Node.
8. Comment the 4 expressions you just created and call this section Moisture
Network (see Figure 4.38(a)).
9. The preview wind ow will reflect th ese changes. Notice how the material has a
glossier look. If you rotate the preview mesh, you can see how drastically the
light interaction changes (see Figure 4.38(b).
10. Save your material so far.
(a) (b)
FIGURE 4.38: (a) The network that simulates the moisture on the brick wall. (b) The brick
wall now looks shiny on some areas with moisture.
ADDING GLOSSINESS WITH METALLIC CHANNEL
Now we will make our material look a bit reflective on the areas where it is
moist by adding a Metallic channel. Adding this channel will give our brick
wall the appearance of being slightly reflective where it is wet in certain areas.
11. In the Content B r owser locate the Mat_Enhanced_NormalV1.
12. Double-click on the Mat_Enhanced_ NormalV1 and choose Duplicate. This
will make a duplicate copy of the Mat_Enhanc ed_NormalV1.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.