Realistic Common Level Design 1
Hello
I am Kwangwook Tak, and I will be in charge of Unreal Graphics lectures
This Unreal Graphics course
is designed to teach effective ways to use the Unreal Engine
to showcase powerful real-time graphics
We will explore level design for building spaces
and sequencing techniques to capture these spaces as beautiful visuals
The course will cover how to visualize and render high-quality graphics
from Unreal Engine in real-time
To start, we’ll first understand Unreal Engine as a visualization tool
and learn the foundational work of level creation
which is called whiteboxing
Unreal Engine and Graphics
In computer programming, the term "engine" refers to
a program that performs essential and core functions
for other programs
or for specific internal purposes
much like how an engine serves as
the critical component of a car
To simplify, you can think of it as a "program that creates programs"
On a smaller scale, we use
search engines daily to look things up
In modern AI, inference engines are utilized
for tasks such as machine learning development
In graphics, the term "engine" is also widely used
Rendering, the process of generating 3D spaces or 2D images
into a single picture
often relies on dedicated rendering engines
Unreal Engine, in particular, has long been used
in the gaming industry as a game engine
Initially developed by Epic Games
for the game Unreal Tournament
Unreal Engine is a 3D physics engine
Today, it leads the metaverse space
with the game Fortnite
Within the engine, technologies like graphics, physical collision
sound, and networking operate together
all computed in real time
this is what happens
Let’s delve deeper into Unreal Engine
from a visualization perspective
Let us first learn about Computer Graphics Pipelines
The engine we use
is based on 3D processes
even for many current 2D games
that utilize 3D engine-based workflows
Let’s explain using the 3D production workflow as a reference
How does a 3D object end up displayed on your screen
and visible to the human eye
We’ll use an illustration to guide us through the process
Imagine an empty 3D space
Within it, there are characters and backgrounds
characters and backgrounds, all composed of 3D objects
In the same space, effects like shimmering lights or explosions
commonly referred to as "FX", exist
The character objects also move
performing actions like walking, running, or flying
collectively known as animations
For users to recognize
or interact with these objects
we need signposts
or indicators where users can press a button
For users to recognize this
known as UI, is needed
All these elements
collectively form what we call level design
Here, "level" refers to
the highs and lows of terrain
essentially the design of the space
Once level design is complete
a camera is required to capture everything in the level
The camera takes everything visible in the level
and projects it onto the screen
The process of projecting it onto the screen is called rendering
With this rendered image
consecutively displaying them
we perceive motion
We typically see a rendered frame
that a camera shot 30 to 60 shots per second
Raw rendering outputs are rarely shown as-is
They usually undergo a correction phase
known as post-production or post-process
We usually call it post production
For instance, before you watch a movie
when actors promote a movie in interviews
they often mention that the filming is complete
but post-production is ongoing
You may have heard something like this
This means effects, color grading, and filters are being applied
in tools like Photoshop, After Effects, or Premiere
to enhance the color
and create various effects
Whether the visuals are softened, darkened
or adjusted for emotional impact of the movie
post-production elevates the movie’s focus and overall quality
This is what we call
the post production phase
By following these steps, the final output is displayed on a monitor
allowing us to experience the completed visuals
If it's a game, you'll be looking at a monitor
If it's a movie, you'll be watching it on a projection in a movie theater
Most computer graphics
goes through these steps
You have a level design, a camera that takes pictures of the level design
and a render shot from that camera
and then a selection of images from those render shots
that we see, which undergo post-production
The 3D graphics are taken by the camera
and render it on the screen, and at that stage, depending on the nature of the content
it's either real-time rendering or non-real-time rendering
Real-time rendering is literally drawing the image
that the camera is drawing right there on the monitor
Non-real-time rendering is the opposite
Instead of showing you the image from the camera right away
it is showing it later, regardless of time
This is called non-real-time rendering
Let's talk a little bit more about non-real-time rendering
The typical non real-time content is
movies, TV shows, commercials, things like that
When we watch a movie, or when we watch a commercial
we're just looking at the output from start to finish
To be more specific
we're seeing 30 or 60 pre-drawn images in a second
one after the other
If it's a movie, it's about two hours, if it's a drama, it's about an hour
We watch it during this time
So when we're rendering
you don't have the time constraints
so the characters move, effects go off, lights switch
These things are set beforehand
and are created on scene at a time with lots of effort
There is no need for the shot to be short
It could be a couple minutes, or it could take even an hour
Also, to save time you can have the PC do multiple tasks
such as having the rendering PC create one image
at the same time
by using making many computers
So through this precise process
video files, and image files are created
The created images are later
reconstructed through Premier or After Effect
so we can simply enjoy the final video
By taking time and using many PCs
the reason for video or image rendering is simple
It is to gain high-quality data
For movies, videos or architecture rendering
expressing the main character's sweat glans
or expressing small particles such as smoke
and the exact expression of certain textures reflecting light
is extremely important
Which is why it takes a long time
to make sure the final content is of high quality
and it should be of high quality
and so non real-time rendering is used
This is the characteristic of non-real-time rendering
Real-time rendering, in general
is the rendering method used
for real-time content
Real-time content refers to
content that provides interactive services
allowing interactions between the user
and the computer
Typically, games are a representative example
For instance, in a game, if we want to move a character to the left
or to the right
we only need to input the key
and the character moves accordingly
We can command them to do so
When the user's input changes the character's movement
the environment of the level also changes
and the scenes captured by the camera vary
This process happens repeatedly every moment throughout the gameplay
Moreover, there are physical interactions involved
such as colliding with a wall or explosions causing objects to fly
These physical interactions continuously occur
along with various effects appearing dynamically
In addition, lighting values keep changing in real-time
So, it's not just about rendering static objects
Instead, it's about continuously rendering
unpredictable, dynamically changing information
in real-time
This is a key characteristic
of real-time content
Furthermore, games typically run on a single computer
This means that a single computer, or a smartphone
or a console device like PlayStation or Xbox
has to compute all of this instantaneous content
Rendering such unpredictable content
onto the screen every moment
is what we call real-time rendering
Real-time content involves
a large number of computations simultaneously
These include object modeling data, lighting, effects, UI
as well as physics interactions, sound, and artificial intelligence
All of these must be computed at once
and rendered repeatedly
at a rate of 30 frames per second
This means the rendering time for a single frame
needs to be around 0.001 seconds
As a result, because there is so much to compute
and the time is extremely short
the graphical quality in the past was not particularly impressive
Let's take a look at the game Tomb Raider as an example
Tomb Raider began development in the 1990s
and has evolved through its series
continuing to be created to this day
It has even been adapted into movies
As you can see in the image
the character on the far left represents the protagonist from the earliest version of Tomb Raider
Due to the large computational requirements and the low performance of computers at the time
the character appeared very angular and geometric
giving a rather unnatural look
However, as graphic technology improved
and computer hardware advanced
the character evolved into the image seen on the far right
This image is already from 2017
nearly 10 years old
yet it appears nearly lifelike
You can imagine how much further the graphics have developed since then
As the visual representation capabilities of game engines improved
with advancements in hardware
and programming skills
the graphical quality of games has progressed
to the point of resembling live-action films
among game engines, Unreal Engine, in particular, has focused on photo-realistic representation
It is recognized as the engine capable of achieving
the most lifelike graphics
With this level of quality being achieved in real time
using Unreal Engine
other industries have taken notice
In fields such as video production, industrial design, and architecture
where rendering used to be done without time constraints
real-time rendering is now
being introduced
This shift allows for on-the-spot adjustments
transforming the overall production process
As a result, this approach saves time
resources, as well as money
Recently, with the development of VR
and AR devices
as well as the rise of virtual spaces
and mixed reality (MR)
many of these new types of content are being produced
and they frequently use real-time rendering
in the present day
Creating A White Boxing
Now, let's move on to level design
by creating 3D spaces to build an environment
Level design usually begins
with a workflow called "white boxing"
In the early stages of project development
prototyping is used
to validate content
and simple levels or terrains are often needed
At this stage, to facilitate rapid validation and modification
temporary data is used
which is later replaced with finalized assets once all validations are complete
This temporary data
is typically represented as white basic boxes
referred to as "white boxes"
and the process of creating them is called
"white boxing"
Although these boxes are generally white, they don’t have to be
In Unreal Engine, this process is sometimes referred to as "gray boxing"
or "block out"
The 3D modeling data used in an engine
is collectively called "mesh"
While meshes are often created
using external tools like Blender, 3D MAX, or Maya
the simple dummy meshes used in white boxing
can be created directly within the engine
Unreal Engine provides two features for this purpose
the Modeling Tool and Geometry Brush
these two are provided
Geometry Brush is optimized
for creating simple shapes
while the Modeling Tool enables more advanced modeling
comparable to what can be achieved
in external tools like Blender or Maya
However, because the Modeling Tool requires similar expertise
to external tools
for this level design session
we will use the simpler Geometry Brush
to create basic designs
and create levels
For this session on designing a level
I’ve downloaded an apartment floor plan from the internet
Using this 2D floor plan as a reference
we’ll proceed to build a 3D space
We’ll match the approximate dimensions
based on the measurements in the floor plan
so it’s a good idea to keep the floor plan
displayed next to your monitor and refer to it periodically
I’ll also display it on a separate monitor
and check it as needed
while progressing
I’ve created a new project
and set up a basic level
We’ll use this to create the apartment
Click the plus button at the top
to open the Place Actors Panel
making it easier to select and place actors
For this project
we'll use the Geometry Brush actor
It's slightly different from
the cube-shaped objects found under the Shapes category
If you look at the Geometry section
you'll notice there's also a box available there
Dragging and dropping this box into the viewport
you'll see it differs from the white cube on the left
The white cube on the left is a Static Mesh, which is a fixed object that cannot be altered
In the Details panel
you’ll see an entry for Static Mesh
indicating that this object is static
and unmodified
While you can adjust its size using transforms
such as Scale
It is not actually flattening or thickening the cube
and changing it's shape
flattening or elongating the cube through Scale
only distorts its spatial dimensions visually
making it look flat
The Mesh does not alter
it is a fixed shape as a cube
So this cube cannot be changed
In contrast, the Geometry Brush
allows actual shape transformations
When selected, you'll notice blue vertices and orange edges connected to form faces, which appear as checkered polygon
The blue parts are called vertices and the orange are called edges
The corners are called edges
They are presented as lines
These edges connected to form faces
which appear as checkered polygons
These faces represent the individual
surfaces of the geometry, also known as polygons
In the Details panel, Geometry Brushes
do not display the term Static Mesh
Instead, they are categorized under Geometry
indicating that they are modifiable
Similarly, because this is data within the space
you can compress and distort the space
to shrink or stretch it
just like with the white cube
While this is possible
the object itself is not actually transformed, it is merely distorted within the space
If you look below
in the Geometry Settings, the X value is set to 200
which means 200 units
equivalent to 200 cm in real-world measurements
This shows that the current length
along the X-axis is 200 cm
If you reduce the X value by 100 units
by 100 cm and input 100
you'll see the red X-axis shorten accordingly
At this point, if you set the X value
back to 200 and scale the X-axis
to 0.5
you'll notice that the internal checkered pattern gets distorted
making it appear flattened
However, when you set the X value in Brush Settings to 100
there is no distortion
The internal squares remain undistorted
In this undistorted state
the shape is properly resized
to 100 cm
reflecting an actual transformation of the data
So, using the Geometry Brush
and adjusting the Brush Settings for X, Y, and Z
you can create properly transformed shapes
This results in a truly transformed shape
rather than one distorted
by spatial compression
Therefore, we will use the Geometry Brush for our work
First, let’s delete all the objects we’ve placed
including the Floor object
which is also a Static Mesh
Since it is a Static Mesh
we don’t need it and will remove it
Let’s start by creating the floor
Looking at the apartment floor plan
you can see the horizontal and vertical dimensions
The width is 13,200
and the height is 4,500
Floor plans are generally measured in millimeters
As mentioned earlier, in Unreal Engine
1 unit equals 1 cm
So, instead of 13,200
you can use 1,320 when building it in Unreal
Keep this rule in mind
as we start creating the floor
Let’s start by creating a floor with dimensions of 1320 x 450
Drag and drop the Box from the Geometry section
of the Place Actors panel
Place it at the origin for proper alignment
In the Brush Settings for X, Y, and Z
let’s orient the gizmo so that
the red X-axis points forward
The green Y-axis should point to the right
and the blue Z-axis should point upward
In Unreal Engine, the red arrow is designated as Forward
the green arrow (Y-axis) as Right
and the blue arrow (Z-axis) as Up
By setting the gizmo this way
you’ll have the correct orientation
From this state
we will extend the Y-axis to 1,320
and the X-axis to 450
First, set the Y-axis to 1,320
and the X-axis to 450
he floor looks too thick, so let’s thin it out
Set the Z-axis to 10 cm
Rename this actor to Ground
and the floor is complete
Now, let’s proceed from left to right, starting with the hallway and the bedroom
We’ll ignore elements like the sink in the entrance area
We’ll also skip the utility rooms
and focus on the bedroom, bathroom, master bedroom, and up to the balcony
Let’s exclude the balcony here
and proceed systematically
from the left
Let’s start by creating the wall on the left
As before, we’ll use a box to create it
The size is similar, so set the X-axis to 450
Just like the floor
set the wall thickness to 10 cm
Set the Y-axis to 10
Based on an average human height
of 1.5 to 2 meters
let’s set the height to approximately 2 meters
Set the Z-axis to 200
Place it in position
Snapping is active, so it should snap into place
but you can see it doesn’t align properly
In such cases, adjust the grid size
from the grid icon at the top
Currently, it is set to move in increments of 10 units
Reduce it to 5 units
so the movement is more precise
With finer increments
snapping becomes more accurate, that looks good now
here is a hallway in the center, and its width is 150 units
Now, we’ll move this by the specified amount
First, let’s assign a name to this wall
Name the wall Hallway01
Copy Hallway01 and use it to create the wall
where the right-side bedroom begins
To copy an object
you can use Ctrl + C and Ctrl + V
Alternatively, you can duplicate it using Ctrl + D
Holding the Alt key while moving an object
creates a duplicate that moves along with it
It’s convenient, isn’t it? Let’s use this method for moving the object
By default, the duplicated object gets a 2 appended to its name
but let’s rename it to 01 and 02 for consistency
Currently, the gap between the two objects is 1,500
so I’m not sure if it moved exactly 150 units
We need to check the position value of Hallway01
Since we’re looking at the Y-axis
it’s currently set to -655
Moving it 150 units to the right will suffice
Thus, Hallway02 will be at -505
The space will now be expanded by that amount
Shall we move on to the bedroom?
Since the bedroom has walls
let’s add one here
It’s the same process: adjust the X and Y axes
according to the dimensions on the floor plan
Set the thickness on the X-axis to 10
For the width on the Y-axis, set it to 270
Move it into position, and it should fit
Let’s rename it
Let's name it SmallRoom
Use a naming convention like SmallRoom01
Let’s create the wall here as well
For this wall
it would be efficient to duplicate the Hallway2 wall
Hold the Alt key and duplicate the wall
Then, simply adjust the length along the X-axis
Since the floor plan does not specify the length
we’ll assign an approximate value
Let’s set it to 250 instead of 450
Place it in position like this
Name this actor SmallRoom02
For the inner part of the bedroom
duplicating the SmallRoom01 actor
will solve it quickly, snap it into place precisely
Rename it SmallRoom03, easy, right?
Let’s create the kitchen
The kitchen wall spans 2,200 units, so let’s build it
Duplicate the wall and adjust its position
by 220 units along the Y-axis
Name it Kitchen
specifically Kitchen01
Place it to block the appropriate section
Shall we extend this part as well?
The length will be determined by the WashRoom above it
so let’s construct the bathroom first
Shall we build the bathroom before proceeding?
Duplicate the existing wall
and name it WashRoom
This wall is 200 units long, which is relatively short
Let’s set it to this length
Next, let’s create the vertical wall for the WashRoom
Drag and drop to position it appropriately
Since the X-axis length isn’t specified
we’ll approximate it as well
Let’s set the X-axis length to around 150
Actually, let’s make it 180 and set the wall thickness
along the Y-axis to 10 units
Adjust it accordingly
Next, extend it slightly to align with this end
If it’s confusing, move it slightly out of the way
snap it into place, and then bring it back That should align correctly
Rename this one WashRoom02 for consistency
Since there is a wall here
Copy Washroom01 and bring it here
This makes it quick and easy
Let’s create it and name it WashRoom03
To connect the wall as one continuous piece
duplicate the wall from the hallway on the left
and position it here
Problem solved—simple, isn’t it?
Now, this will determine the length here Let’s create it
Drag in a box
and set the X-axis thickness to 10 units
Move it into position and set the height to 2 meters
Based on calculations, the Y-axis should be approximately 670 units
Let’s try 670
It doesn’t align perfectly
It seems the central wall
is causing slight misalignment
690 doesn’t align perfectly either
Let’s try 700, perfect fit
It seems this wall is positioned in the center
Done, then shall we move on to the bedroom?
For the bedroom, drag and drop a box into the scene
The X-axis represents the wall thickness, so set it to 10 units
The Y-axis for the master bedroom is 330 units
Move and reposition the object
Let’s rename it as well
Since this is the master bedroom, name it BigRoom01
It seems the name for the object below hasn’t been assigned yet
This one is part of the kitchen, right?
Let’s name it Kitchen02
This isn’t part of the hallway
let’s include it as part of the master bedroom
Name it BigRoom02 to match the naming convention of 01 and 02
Duplicate BigRoom02
using the Alt key
Snap it into position to complete the right wall
Similarly, duplicate BigRoom01
and position it
to close the bottom wall
It would be good to rename them for clarity, such as 04 and 03
Lastly, we have the balcony to create
Let’s work on the balcony
Drag in a box and use it to create the upper wall for the balcony
Set the X-axis thickness to 10 units
The horizontal length is 1,500, so set the Y-axis to 150 units
Adjusting it like this should align well enough, right?
Let’s rename it
Select the renamed actor and duplicate it
Hold the Alt key to duplicate it
Place it this way, and it marks the bottom area
Name it Balcony02
Now we just need to align the outer edges
Copy one of the master bedroom walls to fill in the gap
Just rename it after positioning it
Name it Balcony03, and that should do it
After building this
I noticed a small gap at the bottom
caused by minor errors during the process
To address this gap
select the Ground Actor
It seems to be a bug
Closing the Surface Properties causes it to appear below
You could adjust the XYZ values in Brush Settings
but the calculations can be too complex
How much should you input
to extend the Y-axis just enough to fix it?
It might get a bit confusing
Fortunately, with Geometry
you can input values directly
or manually adjust the shape
using specific tools
How do you do this? Select the object you want to modify
Change the Selection Mode
on the left to Brush Editing Mode
Brush Editing Mode is
a mode designed specifically
to edit Geometry Brushes
You’re now in the editing workspace
for the selected Geometry Brush Actor
On the left, you’ll see several options
These options are part of
the Brush Editing panel
Use these options to modify the actor’s shape
You’ll notice the appearance changes slightly
The selected actor turns blue
You can see edges referred to as vertices
lines called edges
and surfaces known as faces or polygons
You can select them individually in this manner
Depending on your selection
the menu options will activate
Simply put, if you just want to extend this face to a certain point
that’s exactly what you can do here
Select the face you want
and move it to adjust
This allows you to move the face independently
resulting in a stretched
or elongated shape
There are features like Extrude, Split
and many others available
Using these features effectively will require some practice
Practicing the creation of complex shapes is typically done
in external tools like
Blender, 3D MAX, or MAYA
So, there’s no need to master such techniques here
What we want is to perform simple tasks
like moving faces
or slightly adjusting vertices
Just basic operations
But it’s good for you to know these basics
We’ll conclude with a simple process
of selecting and moving faces
Change the mode back from Brush Editing Mode
to Selection Mode to exit the editing workspace
The geometry reverts to its original appearance and to it's grey color
Now, you can see the gap has been filled properly
Finally, let’s create some openings
The Geometry Brush allows you to create holes in a mesh
Using this feature
we’ll create the front door, room doors, and balcony doors
Let’s start with the front door
To create the front door
first, bring in a box
Adjust the size of the box to match the desired dimensions for the hole
Think of this box as a tool for creating the hole
Set the X-axis width to 90 units
enough for a person to pass through
The height should be slightly less than 2 meters
Let’s set it to 180 units
Adjust it accordingly
The thickness should be just enough to pierce the wall
Let’s reduce it from 2 meters to 50 units
After creating a thin box
position it where the hole should be made
Once it’s positioned
we’ll modify the Geometry Brush setting
Scroll down in the Details Panel
to find the Brush Type section
It’s currently set to Additive
Change it to Subtractive
This makes the box transparent
and creates a hole in the overlapping object
making it appear as if it’s pierced
Now the front door opening is complete
Moving the box will adjust
the hole’s position accordingly
So, place it
in your desired location
Using the same method, place another box here
and set its Brush Type to Subtractive
I’ll duplicate the box
rotate the duplicate by 90 degrees, and move it
This quickly creates a door for the small room
Duplicate it again
to create the bathroom door
Shall we do the same for the bedroom?
Duplicate it again and rotate it for the bedroom door
Rotate it like this to create the entrance to the bedroom
Place it appropriately
Duplicate it again and extend it slightly
setting the X-axis to about 400 units
This creates a large opening
It’s too big, so let’s reduce it to 350 units
This creates a large window
connecting the master bedroom and the balcony
Move it similarly
and it creates the opening for the veranda
The veranda might have a small threshold, so let’s move it slightly upward
Reduce the height slightly
to about 150 units
for a more interesting shape
While the apartment floor plan doesn’t show this
you can use the same technique to create windows
Select this object and duplicate it
Duplicate it backward
and adjust its size
Reduce the height significantly, perhaps to about 100 units
Adjust the Y-axis to about 100 units
Or make it a bit wider, say 150 units
I mistakenly thought I was adjusting the Y-axis
but it turns out I increased the X-axis
This happened because I rotated
the Brush Actor that was originally
created for the front door
As a result
the reference axis of the object has shifted
At the top
change the gizmo orientation to Local
Switch it from World to Local
and you’ll see the rotated orientation of the object
The object’s X-axis and Y-axis directions have rotated
causing them to misalign
Since the Brush Settings align
with the Local orientation
increasing the Y-axis by 150 extends the object
in this specific direction
To correct this
change the top setting from World to Local
to ensure the X, Y, Z axes are represented accurately
Instead of setting Y to 150
it should be X = 150
Adjust it this way to create the window
Let’s add a window to the master bedroom as well
Duplicate the object
and position it in the master bedroom
Shall we make the master bedroom window larger?
Let’s set X to about 200 for a bold look
Place a large window like this
Now we have a completed apartment
with appropriately placed windows
That completes the work so far Let’s save it first
We don’t want to lose progress, so save it before moving on
Click Save Current Level As from the File menu
and save it within the Content Folder
of the project
Create a new folder by clicking New Folder
and name it Level
Create the folder named Level
and assign a name to the file
Since we’re building an apartment, name it Apartment
Click Save, and this will store the file
within the Content Folder of the project
The file is now saved as a Level Asset
inside the Level Folder
Ensure that the level asset is always saved
within the project folder
Let’s summarize what we learned in this session
Unreal engine and graphic
Basic Elements of a Graphics Engine
Animation: Various movements of characters and objects
UI: Displays information and movements of objects for user recognition
Level: Spatial design including terrain elevations Rendering: The process of drawing what the camera captures onto the screen
Postproduction: Editing and refining rendered shots
Rendering Real-time rendering: A method where the camera instantly draws images on the monitor
Non-real-time rendering: A method where the camera pre-renders images regardless of time and displays them later
White Boxing
White Boxing Tools
White Box: Temporary data created for quick validation and revisions during the early stages of content creation
Place Actors Panel: A menu for conveniently selecting and using actors
Geometry: The process of modifying the actual data of an object to change its shape and freely edit it
Brush Editing Mode: A mode for editing Geometry Brush Actors