Realistic Integrated Level Design 2
Hello
I’m Kwangwook Tak, and I’ll be leading this lecture
Today, we’ll learn how to apply materials
to surfaces created using whiteboxing
First, through an example of coloring an apartment
we’ll understand the concept and application of materials
Then, through a practical exercise of texturing
we’ll learn how to apply materials
Material Creation and Application
We’ll start by creating and applying materials to walls
Before painting the walls
let’s first understand the principles behind materials
Most 3D modeling programs
like Unreal Engine, Blender, 3D MAX, or MAYA
follow a similar structure
to display objects
These programs use meshes to construct shapes with points, lines, and planes
and materials to represent textures using numbers or images
These two components are essential for expressing
3D objects in a 3D space
They are indispensable
for visual representation in 3D environments
regardless of the program
In Unreal Engine
there’s also an element called collision
which defines areas for detecting impacts
Including collision
these elements form an actor
combined with components that handle various functionalities
Among these, we will focus on materials
Let’s start by applying an orange color to the living room
To create a color, you need a material
Open the content drawer
and create a new folder
Name the folder Materials
That's our Materials folder
Since we’ll frequently use the content drawer
click Dock in Layout
to keep it visible at all times
So we have it here all the time
Inside the Materials folder
let’s create an asset
You can either right-click on an empty space
or click the Add button and select Material
I’ll use the right-click method to create the material
and name it M_Orange
Once the material is created, we need to set it
to hold the orange color
Double-click the material
to open the Material Editor
I’ll maximize the editor window for easier navigation
On the left, you’ll see a preview of the material
and below it is the details panel
for managing various settings
The central area
which we’ll use the most
is called the graph
This empty space is called the material graph
In the graph, there’s a yellow box
containing various data points
which we refer to as nodes
Nodes can be moved by clicking and dragging
Right-clicking and dragging moves the entire graph
as you see, like this
while left-clicking moves individual nodes
Right-click and drag
to move everything
The node we see here
is the final node that determines how the material will appear
It includes several options
Scroll and it zooms in and out
Scroll while pressing Ctrl to zoom in more
We see here Base Color, Metallic
Specular, and Roughness
Among these, we’ll focus on Base Color
Next to Base Color is a square box
Click on it to select a color
Let’s choose an orange color
The selected color is displayed
in the lower-right corner
It's a little too yellow now
Let's mix in some red to get a closer orange tone
and click OK to get that orange color
The material preview will
also update to show the orange color
After creating the material
be sure to click Apply at the top
to confirm the changes
Once applied
you’ll notice an asterik icon next to the name
indicating that there are unsaved changes
or that it hasn't saved after a change
Apply literally means to apply it in the system
The asterisk means
that you will save this in the drive
to put it roughly
Clicking the save icon on the left
will record the changes to the hard drive
and remove the asterisk from the name
By following these steps, applying and saving
you can ensure smooth progress without errors
Now we have the orange color applied
From here, you can either
minimize this window or, like me
you can dock the window to the side of the level
I can easily switch back and forth
Back to the apartment level
if you check the content browser
you’ll see the material with the orange color
Now, we can paint this material onto the wall
It’s simple, just drag and drop
You can drag and drop the material onto
any area inside the level
Alternatively, if you select a wall
on the right side, in the Details panel
there is an option called Surface Material
Geometry Brush Actor allows you
to select each surface individually like this
Depending on what you select, the options might change
For the surface you have selected
in the Surface Material section
you’ll see an element labeled as None
Onto this None field
drag and drop the material, and it will be applied
to the selected surface
Let’s now look at the adjacent wall
Click on this wall
We drag and dropped it here
but you can also
search for None here
Let's try the name M_Orange, and it's here
So you can select this M_Orange here to apply
So there are three ways to do this
Drag and drop
or, at this wall
Click on this wall
drag and drop on Surface Material
it is not yet divided, which we'll change later
Then, selecting this surface, click on None
search for the asset you created, and insert it
There are various ways to do this
Let’s complete the living room with all the walls
For the inner room, we’ll also add color
but this time, let’s go with a bluish tone
To create the blue tone, we apply like so
and then change the orange color to blue
Apply and Save
Not only does the color change on the selected surface
but all materials that had the orange color applied
will change to blue
What we can learn from this
is that materials are shared
Material assets are shared across multiple actors
Let's undo the change
and restore the color
If we want to apply blue
only to this wall, what should we do?
We need to create a new material
Right-click, a new material, and let’s name it M_Blue
Double-click to open it
and just like before, change the Base Color to blue
We’re only changing the Base Color here
but in many cases, when you search on Google
you'll find many Unreal tutorials
In previous versions, before Unreal Engine 5.2
you couldn't change the color after this Base Color
or any slots to change the number
after Metallic or Specular
You couldn't set the value for this node
So what did we do?
We had to drag this value to this pin
So let's try the old-fashioned way
It's been something used recently
so you must also know about this method
Let's try it
Let’s bring in a node
to define color values
Right-click on the background
and search for Constant3Vector
You’ll see a node called Constant3Vector
which you can click to create
This Constant3Vector node uses three color channels
commonly referred to as RGB
to represent digital colors
These channels are Red, Green, and Blue
The three channels, Red, Green, and Blue
are stored in variables labeled X, Y, and Z
and are used to define the colors
To put it simply, X contains the red channel
Y contains the green channel
and Z contains the blue channel
This means the RGB channels are stored as values
in these variables and then passed to the Base Color
Of course, you can input values for each channel directly
but you can also double-click the black area below
to select a color, like so
You can select it like so
When you click OK, the color will change accordingly
and the RGB channel values
will immediately be applied
Now, to connect these values to the Base Color
we use the white pin at the top, on the right
This on the right is the output pin
while pins on the left side of a node are input pins
Data in Unreal Engine
typically flows from left to right
Nodes flow from left to right
much like how we read text
That's the data flow in Unreal Engine
This means the right pin on a node
outputs data to the right
and the Base Color input pin is located
on the left side of the node, which accepts data input
or accepts the data flow
So an out pin brings it out
into the input pin like so, see?
Once connected, the previous information is replaced
and the new data from
the connected node is applied
This method is the most commonly used approach
When you click Apply and Save
you will see that a blue material has been created
Drag and drop this material to apply it
and apply it to the interior
The blue interior looks much better
than having a red interior
so we will leave it like this
Let’s use the same method to design the larger room
For this room, we will create a yellow material
Right-click to create a new material
and name it M_Yellow
Double-click the material, right-click
to add a Constant3Vector node
and choose a yellow color
Connect the yellow
to the Base Color, and you will see
it changed to yellow
Click Apply and Save
then apply this yellow material
to the surfaces like so
Each color requires its own material
as we now understand
We also noticed earlier
that there are several parameters
in the material
other than the Base Color
Let’s briefly examine
what these parameters mean
In the final node, there are multiple
input slots for various values
They're for inputs
This node does not output data
since it is the final node
that determines
how the material will appear
Essentially, this node takes
the parameter values, processes them through calculations
and determines the final appearance of the material
In this node
are calculations or functions
that determine the presentation
These calculations or functions
inside the node are often referred to
as shaders
Shaders are usually written as code
When parameter values are input into a node
the calculations inside the shader
are executed to generate a result
which is then applied to the material
Unreal Engine uses a system called PBR
which stands for Physically Based Rendering
as the foundation for shader calculations
In reality, light particles
hit the surface of an object to reach the eyes
PBR replicates how light interacts with surfaces
in the real world
Light particles hit the surface of an object
undergoing calculations
through complex physical formulas in the shader
and displaying the result through the camera
allowing us to perceive the material of the object
It depicts reality as it is
The PBR system enables highly realistic renderings
In the past, these complex physical calculations were not possible
especially in real-time engines
They were only used in rendering programs like 3D MAX
Maya, or Blender for creating images or videos
However, with advancements in computer performance
and optimized shader code
things have been improved
for real-time engines like Unreal Engine
to now produce results close to real-world appearances
Beyond enabling realistic renderings
PBR has another major advantage
It allows almost all materials used in everyday life
to be represented with a single shader
It is by being able to add values to the nodes
By adjusting the parameters in the node
you can represent real-life materials
that we see every day, such as
plastic, wood, stone, and metal
In the past, different shaders were used
to represent various materials
Since each different shader
required different parameters
even for the same material
it sometimes required different values
depending on the location
This made the production process highly inefficient
Consistency in graphics was also lacking
However, with the introduction of the PBR system
it became possible to use one shader
to represent a variety of materials with consistency
improving content quality
The PBR rendering system
used in real-time engines
allows the creation
of many materials by changing
only a few key elements
The key elements
are Base Color, Metallic
and Roughness, as seen in the final node
These three components alone
can represent almost any material in the world
This is a distinctive feature of
the PBR system in Unreal Engine
Let us take a closer look at the main elements
Base Color, Metallic, and Roughness
Base Color represents
the color
the inherent color of a material
Let's continue with yellow
Let's zoom in a little
The Base Color is essentially the fundamental color
input into the material
expressed through the RGB values
Metallic represents the material’s metallic property
It determines whether a material is metal or not
If the Metallic value is set to 0
and this 0 means that
the material is not metal
If it is set to 1
the material is fully metallic
The value 1 represents 100 percent
so 1 is a pure metal material
It is either metal or not
Aside from 0 or 1
intermediate values, such as 0.5, can also be used
But -1, or something lower than 0
you can use it, but under 0
is all read as the same 0
So even with -1, it's still a 0
Similarly, values above 1, such as 2
are treated as 1
Even with 2, it applies the value of 1 for Metallic
External nodes can
also provide input for these values
For Base Color
it require three values, X, Y, and Z
It needed three channels for the RGB
Metallic, as you can see
requires only a single numeric value
You simply need to bring in a node that holds one number
Right-click
and search for Constants
This will generate a node
where you can input a single value into the Value field
Connect this node to Metallic
and the node’s current value is set to 0
With a value of 0 for Metallic
the material is displayed
as non-metallic
We have Metallic, and Roughness below that
Roughness defines the surface’s texture
specifically whether it is rough or smooth
Currently, Roughness is set to 0.5
meaning it is moderately rough
Let’s adjust this value to the extreme
If Roughness is set to 1
it signifies that the surface is completely rough, like Metallic
Over of equal to 1 is at 100 percent
A rough surface scatters light
due to its uneven texture
resulting in a matte or diffuse appearance
To understand this better, consider the opposite
If Roughness is set to 0
the surface is very smooth, reflecting light directly
and creating a shiny effect, similar to glass
So it is very smooth
The material reflects surrounding light perfectly
resulting in a highly polished surface
If you combine this with a Metallic value of 1
it becomes even more apparent
It is completely metallic with Roughness 0
meaning it is a perfectly smooth
and reflective metal ball
If Roughness is set to 1
it is metallic but takes on a very rough texture
Roughness, like Metallic, only requires a single numeric value
You can duplicate the Constants node using Ctrl+C and Ctrl+V
to quickly provide a value for Roughness as well
Try changing Metallic value, 1, to 0
The material will transform into the shiny yellow metal sphere we saw earlier
By adjusting just these three values
you can represent any material in the world
If we apply the changes and save them
the apartment will now be displayed with a metallic look
This result, however, feels unnatural
Let us adjust the values to better suit the room
It's not metallic, so set Metallic to 0 and Roughness to 0.5
Let's keep the bedroom slightly glossy
by setting Roughness to 0.3
This creates a material with a slightly shiny surface
Compared to the kitchen, this area will appear glossier
That's how we can see the result like so
Now, for the blue material, set Roughness to 1
to create a completely rough texture
This results in
a very matte wall texture
Image Textures
Now, let us apply a wood texture
to the floor instead of a plain color
Right-click to create a new material and name it M_Wood
So far, we have used
Constant3Vector for Base Color
and one numerical value for
each Metallic and Roughness
using Constants nodes
It was all numbers
But Unreal Engine materials
can also use images in addition to numbers
Let us add a wood image
Open the Content Drawer by pressing Ctrl and Spacebar
In the Starter Content section under Textures, you will see
various resources provided by Unreal Engine
They are for us to use
Scroll down, and you will see wood textures
like Wood Oak and Walnut
One more Walnut here
A darker Walnut, and a brighter wood tone
We will be using
this Oak, the brown wood
Drag and drop this texture
into the empty space
This creates a Texture Sample node
with the wood image loaded inside
In the Details panel of the selected node
you can see
that the texture is properly assigned
Take the white RGB pin of the node
and connect to to Base Color
As shown in the preview
the wood image is applied
right to the material’s color
Apply the changes and save them
Come back, and you will see
the material with the wood image applied
Drag and drop the material onto the floor to use it
Then we see the result like so
Unreal materials can incorporate images as well as numerical values
Similarly, Metallic and Roughness
can use black-and-white images
so define values, like these images
Unreal Engine materials express numbers through colors
They speak of a color through numbers
For example, 0 is represented as black, and 1 is as white
Let's see it
by double-clicking on it
White areas represent a value of 1
and black areas represent a value of 0
That's how this understands each
Gray areas fall between these extremes
such as 0.3 or 0.5, in between 0 and 1
You can use these images
to input numerical values into the material
For a shinier floor, reduce the Roughness value
to around 0.3, so that it shines
To make it even shinier, you could lower it to 0.2
This creates a glossy finish
Apply and save the changes
to see the floor appear shiny, see?
Currently, the floor texture looks a bit dense
Go to the Details panel of the Geometry Brush
where you can adjust the applied material
Look below and find Surface Properties
Use the Scale values
to change the U and V values from 1 to 2
Or, make it more drastic and set them to 5
After applying the changes, the texture will appear larger
You can also adjust the scale
You can use Scale to adjust
the size of the material applied to this side
It's too big, so let's use 3 and press Apply
I think this is good enough
You can use the Rotate value
to rotate the material, see?
I find this more usable
That's it for what we have, see?
Returning to the wood material
we learned how to use an image
in the Base Color slot to represent material textures
We have covered Base Color, Metallic, and Roughness
which are the three fundamental PBR elements
Now, let us explore additional elements
Below Base Color, Metallic, and Roughness
you will find a property called Emissive Color
Let us revisit the yellow material
to discuss it here
Emissive Color refers to self-illumination
or material emits light on its own
Currently, no color is assigned to
the Emissive Color property
You could add a color here
Or you can select a color like this
For example, let us input yellow
Input yellow, press OK
You will see the material emitting a yellow light
This self-illumination
is similar to how a monitor screen emits light
to brighten its surroundings
Unlike external light sources, this is light
emitted directly from the material itself
Emissive is essentially a self-illuminating
a very bright material property
That was self-illuminating Emissive Color
I'll reset the Emissive Color property
Reducing the alpha to 0
or setting it to black will remove the emission
Next, another common element
is an element called Normal
Normal is one of the most frequently used elements
and is typically defined using textures
rather than numerical values
In the Starter Content, you may have
noticed these purple textures
These are used as Normal maps
which can define the Normal property of a material
Let us use one of these textures
such as the Ground Moss texture
with its pronounced bumps
and connect it to the Normal slot
By connecting Normal, you can see
that the material now appears bumpy
as though it has uneven surfaces
Let's see the same thing in a rectangle
Hold the Alt key and click
on the connection line to disconnect
Without Normal, we see a flat surface of the mesh
This mesh is flat without any bumps
No grooves at all
The wireframe also reveals the same
You can't see it well now
The wireframe also shows that a surface
is constructed with just a few flat polygons
These rectangles are all polygons
Other polygons are also two triangles
both of which are flat
For actual bumps and grooves
a higher polygon count would be necessary
They would make the grooves
meaning, a lot of polygons
However, increasing that
would also increase the computational load
reducing performance
for the gameplay
It has to calculate all the polygons
To address this
we use a technique called Normal mapping
By applying a Normal map to a flat surface
or the maps with some
special information
the polygon number remains the same
but the texture creates the illusion
of bumps under lighting
See, it looks like it is rough inside
That's what Normal Map does
This blue or purple map here
is called Normal Map
Normal maps essentially trick the computer
into rendering a flat surface
as though it has texture
This clever method allows for realistic detail
without adding computational complexity
Applying and saving the changes
you can see that the bumpy effect
has been successfully applied to the material
Now, let us extend this technique
to the floor’s wood material using Normal
In the textures, you will find a Normal map
associated with the oak wood texture, next to Oak
Let's connect Normal texture to Wood
Connecting this oak Normal map to the Normal slot
of the wood material enhances the texture
making the surface rough and more realistic
The surface also appears as though
it has grooves between the wood panels
That's also what this enables
Applying and saving this change
will result in a slightly textured floor surface
enhancing its realism, see? Like so
Since the texture in the main bedroom is so bumpy
the texture on the floor isn’t very noticeable
Let’s remove the yellow material for now
The Material Editor is designed to allow you
to freely manipulate and experiment with nodes
While we’ve kept things simple so far
if you check the Materials folder within the Starter Content
you’ll find many materials pre-created by Unreal Engine
Let’s double-click one to take a closer look
You’ll see that it also has a final node
with various nodes feeding into it
Zooming out
you’ll notice an extensive network of connected nodes
all leading to the final node
Using these complex node configurations
you can create materials that are much more detailed
realistic, natural, and aesthetically pleasing
This approach is something worth exploring
more deeply if you want to dive further into material creation
For now, let’s apply some of
the pre-made materials from Unreal Engine to the apartment
For instance, since this area is a bathroom
we can apply a concrete tile texture that fits well
Like this, maybe this?
Or this concrete tile
Let's give it the appearance of tiles
Such textures also work well for areas like balconies
For the exterior walls, a brick material would be a good choice
Let’s apply it in a brighter area, like this
Feel free to experiment with
different materials to achieve your desired results
I’ll use a brick material to structure
the exterior of the building, yeah?
Apply colors and textures as densely
or sparingly as you wish
Be sure to apply them to all parts
Now that we’ve applied various materials
after this coloring work
let’s move on to the entrance areas
such as doors and windows
Let's add the frames for these
In the Starter Content under the Props folder
you’ll find various assets provided by Unreal Engine
We’ll use these to make the space look more complete
For example, there’s an asset called SM_Doorframe
which represents a door frame
Dragging and dropping this asset
places it into the scene
It's too large, so we’ll scale it down
First, let’s rotate it and adjust its size
Since the snap increment is set too high
click on the snap
Let’s reduce it to a smaller unit, like 0.1
allowing finer adjustments
After adjusting, reduce the snap increment
further to 0.0625 for more precision
Adjust the frame along the Y-axis to fit the space
Maybe bigger? That's it
Now, let’s make the frame thinner
along the X-axis to fit better
The door frame seems appropriately placed now
The Props folder also contains a door asset called SM_Door
Drag and drop it into the scene
and adjust its size to fit the frame
Rotate it by 90 degrees so it aligns perfectly when closed
Then, adjust the size slightly
and leave the door slightly ajar
That's it for the entrance door
Besides the front door, there are also window frame assets
Let’s use the Window Frame asset
Bring in the Window Frame
Drag, resize, move
and position the frame appropriately
to fit the space
We have frames for windows too
This is Glass Window for the glass part of the window
It's tall by default, so scale it down and position it like so
Let's resize it and put it to the center
It may not be too apparent now
but it will reflect light realistically when viewed from outside
or when light shines through it from the inside
Adding window frames and doors to spaces
like small rooms, bathrooms, the master bedroom
or balconies will make the apartment look better
Place door frames, window frames, doors
and even glass props in the balcony
That's it for this apartment, which looks nice
Instead of having sharp and abrupt transitions
you can use objects to hide awkward areas
and achieve a more natural and convincing design
This approach is a crucial aspect of level design
And that completes the design
Let’s summarize what we learned today
Material Creation and Application Understanding Materials
Graph: A workspace for visual scripting tasks such as arranging or connecting nodes
Final Node: A node that receives parameter values, processes them, and displays the final result
Shader: A set of calculations contained within a node
Constant3Vector: A node for retrieving color values
Constants: A node for storing a single numeric value
Core Elements of Material Representation Base Color: Represents the inherent color of an object
Metallic: Defines the metallic property of the material Roughness: Determines the smoothness or roughness of the surface
Types and Applications of Image Textures
Image Texture Features You can input images into the Base Color to represent materials
Materials provided by Unreal Engine can be applied to your projects
Image Texture Applications Emissive Color: Creates an effect where the material emits light on its own
Normal Map: Allows for the representation of bumpy or uneven surfaces without increasing the polygon count