Unreal Studio for Engineers Part 2: Materials, Lighting and UV Lightmaps

In part two of four, we further explore using Unreal Engine to make attractive 3D presentations.

You'll see how we can give life to a project like this.

In this part of our series, you’ll see how we can give life to a project like this.

In the first article in this series, we took a look at how you can import different CAD file types using the Unreal Engine Datasmith* features for both native and plug-in type workflows. We also took a quick look at some of the software’s GUI and learned how to navigate the Unreal Editor.

In this article, we will continue on our quest to show engineers how they can make attractive 3D presentations using the Unreal Engine real-time rendering capabilities by looking at lighting, textures and all the other elements that can help to make those renders all the more realistic and immersive.

So, if you’re not up to speed on the software, check out the previous article, get yourself a copy of Unreal Studio Beta, which includes access to both Unreal Engine and Datasmith, and let’s pick up where we left off.

One more thing…we will be using an upgraded car model (see Figure 1) with a few new neat things inside it (like a powertrain and gearbox; we will use these later) in this article. You can download the model from this link. Use the procedure from the previous article to import the file using Datasmith.

Figure 1. New powertrain internals.

Figure 1. New powertrain internals.

Automotive Materials Pack

At the end of the last article, we gave a brief teaser for the free Automotive Materials Packs that is available on Epic Games store (see Figure 2).

You’re probably going to want to download this and use it, as the materials will come in useful—not just for this specific project but for any project that you really want to make standout. You can get them at this link.

Once you have downloaded the Automotive Materials Pack, be sure to make a note of the location of the files as you’re going to need to know where to find them shortly.

You can open the Materials Pack as a project to take a look at them.

Figure 2.The Automotive Materials Pack.

Figure 2.The Automotive Materials Pack.

Alternatively, you could just load them directly into your own project, then follow these steps:

First, open up the project you wish to install the Materials Pack to, then observe the Content Browser section shown in Figure 3.

Figure 3. Content Browser view.

Figure 3. Content Browser view.

You can see a folder named “Content” in the left-hand pane of the Content Browser.

If you right-click on the Content folder, you will see a pop-up menu.

If you right-click on the “Show in Explorer” option (see Figure 4), the content folder for the current project will be opened in your operating system explorer.

Figure 4. The Show in Explorer option will open the folder in your OS explorer.

Figure 4. The Show in Explorer option will open the folder in your OS explorer.

At this point, it’s a simple process of dragging and dropping the entire Automotive Materials Pack folder from the location where you downloaded it to the Content folder that has just opened up in your explorer (see Figure 5).

Figure 5. Transferring content from the Automotive Materials folder to your own project Content folder.

Figure 5. Transferring content from the Automotive Materials folder to your own project Content folder.

If you’ve completed this process correctly, the Automotive Materials folder should now visible in the Content Browser’s main panel as shown in Figure 6.

Figure 6. Your new materials will appear in the Unreal Editor Content Browser.

Figure 6. Your new materials will appear in the Unreal Editor Content Browser.

That’s it. The materials and textures are now accessible from your project. You can use this method to upload any assets into the Unreal Editor. Just remember to put them in the Content folder, which is the top level of the file structure.

Applying Materials

OK, now that the Automotive Materials are loaded up into the Content Browser, you can begin to apply them to the model(s).

There are a couple of ways to do this.

First, you can drag the AutomotiveMaterials from the Content Browser direct onto the model component that you wish to apply it to. Simply go to the Content Browser, then navigate to the CarPaint materials folder, which is located at Content>AutomotiveMaterials>Materials>CarPaint.

Locate the colored orb of your choice, then drag and drop it onto the vehicle body.

This method works fine for large bodies, but it can be a little clunky when you are dealing with smaller items.

Another method for this process is to locate the part in the World Outliner hierarchy, click on that, and then apply it in the Details panel. Here are the steps for that method:

  1. First, locate the component in the World Outliner. The main body component (and the windshield, windows, etc.) is all part of a single static mesh. The static mesh is named as AMG_STEP_CONT­__body120. Click on that so it is highlighted in the World Outliner (as shown in arrow 1 in Figure 7).
  2. Next, go to the Content Browser and click on the material that you would like to add to the body (arrow 2 in Figure 7).
  3. Finally, navigate to the Details panel beneath the World Outliner, and locate Element 3 under the Materials heading. You will notice many different material elements here. This is because the static mesh has different materials applied. Element 3 represents the painted part of the body.

    Figure 7. You can drag and drop materials or use the little arrow indicated at arrow 3.

    Figure 7. You can drag and drop materials or use the little arrow indicated at arrow 3.

  4. You will notice a little white arrow pointing leftward next to the orb in Element 3. Hovering over this arrow with your mouse pointer will reveal its function.

It says “Use Selected Asset from Content Browser.” Clicking that arrow (indicated ironically by arrow 3 in Figure 7) will apply the material that you selected from the Content Browser back in step 2.Figure 8 shows the Element 3 section in detail, with the little arrow.

Figure 8.Close-up of the Element 3 little arrow.

Figure 8.Close-up of the Element 3 little arrow.

Congratulations. You now know how to apply materials.

Figure 9 shows a new paint job from materials applied to the model.

Figure 9. A new paint job applied to a model.

Figure 9. A new paint job applied to a model.

Go ahead and apply materials to the hangar and the rest of the vehicle to become familiar with the process. Remember to apply a material to the floor. This area is classed as an actor too, and it is a static mesh. Follow the same procedure for this area. When you are satisfied with the results, you can move on to the next step. Figure 10 shows the completed hangar.

Figure 10. Hangar is complete!

Figure 10. Hangar is complete!

And what if you want to create your own materials? This seems like a good opportunity to introduce you to the world of Unreal Engine’s BlueprintsVisual Scripting method.

Custom Content

There are several methods of generating your own content in Unreal Engine. You can use various code and scripts, such as C++, to tell the engine what to do. Or, if you are useless at coding (like me), you can utilize the Blueprints Visual Scripting feature. Blueprints, which are a visual scripting system used to create gameplay elements in Unreal Engine, can be used to create actors, camera positions, environmental behavior—and pretty much anything within the game engine.

Defining your own material makes use of a similar block diagram process.

It is a node-based system that resembles the classic block diagrams used in systems engineering.

You are going to use it here to create a translucent plastic for your vehicle brake light covers, because there isn’t one in the Automotive Materials Pack.

First up, browse to the Automotive Materials folder in the Content Browser, then locate the Glass folder within it. This is where you will create your translucent material.

Right-click in an empty space in the Glass folder, then locate the Create Basic Asset section in the menu that appears. From that section, select Material, as shown in Figure 11.

Figure 11. To create a new Material, right-click in the Content Browser and select Material.

Figure 11. To create a new Material, right-click in the Content Browser and select Material.

This will create a new material asset in the Glass folder. You will rename it as “Rear_Light_Cover” as shown in Figure 12.

Figure 12. Renaming the new asset to something a little more memorable.

Figure 12. Renaming the new asset to something a little more memorable.

Double-click on your newly named new blank material asset and a new screen will appear. This is the New Material screen, where you will use blocks and nodes to create the new material.

You can find a good overview of Materials and Material Instances over at this link on the Unreal Engine website. But for the purposes of this article, you will learn how to specifically create a translucent colored plastic.

Take a look at the Materials screen to familiarize yourself with the layout.

The Materials screen is split up into six parts, as you can see in Figure 13. The parts are numbered in the figure for easy reference.

Figure 13. The Materials Editor screen and its six parts.

Figure 13. The Materials Editor screen and its six parts.

The numbered parts of the Materials screen are described below:

  1. Top menu bar
  2. Material preview window
  3. Material details/parameter details tabs
  4. Material graph
  5. Statistic
  6. Palette

The main sections you will be using to create your translucent material are section numbers 3, 4 and 6, which correspond to the details panel, the main material graph area and the palette. Most of the action will take place in the graph area, as this is where you will be creating your blocks and nodes.

First, go into the search bar in the palette area and type in “Constant3Vector”. From the search results, drag and drop the Constant3Vector item into the main graph area. You will see a block with an orange border and three zeros in the graph area, as shown in Figure 14.

Go ahead and click the output of the Constant3Vector block, and drag it to the Base Colorinput. You will see a node (a wire) appear, linking the two blocks.

Figure 14.Adding a node/block in the graph area.

Figure 14.Adding a node/block in the graph area.

The three vectors in this case will represent three colors of the RGB color format. Double-click on the Constant3Vector block to open it and select a color from the color wheel (or you can alternatively input numerical RGB values). When you have selected your color, click OK to close the window (see Figure 15).

Figure 15. Double-click a node/block to open it and view its parameters.

Figure 15. Double-click a node/block to open it and view its parameters.

As you make changes in the material screen, you will notice the material preview change appearance, as you can see in Figure 16.

Figure 16. The material live preview.

Figure 16. The material live preview.

Next, you will want to add a few extra effects to change the appearance further, so that it resembles a shiny and translucent plastic.

To do this, you will add some single float-value Constant blocks. You can do this by searching for “Constant” in the palette, then dragging and dropping the result into the graph area, or, you can simply hold the number 1 key, and click the primary (left) mouse button in the graph area. You will then see a green block appear with an orange border, as shown in Figure 17.

Figure 17. Another node/block.

Figure 17. Another node/block.

Double-clicking this block (or any other block from the palette) will open up a unique Details panel in the left-hand side of the screen (numbered as “3” in Figure 13 and shown in more in Figure 18).Here, you can write a description of the block and assign a value to it. In this case, you will assign it a value of 0.5 and we name it as “Metallic” as shown in the figure.

Figure 18. The material details section.

Figure 18. The material details section.

Next, after you have assigned a value to the block, you can connect its output to the input labeled “Metallic” on the main material block, as shown in Figure 19.

Figure 19. Linking your blocks/nodes.

Figure 19. Linking your blocks/nodes.

You will see the material preview window change to reflect this new input. Indeed, the colored orb is no longer a flat color, but has a metallic tinge to it.

But we are not done yet. Go ahead and add two more “Constant” blocks. Name them “Roughness” and “Opacity”, and assign values to them in the Details panel as you did previously, and then link the outputs to the inputs as shown in Figure 20.

Figure 20. Adding other parameters to the material.

Figure 20. Adding other parameters to the material.

So, your Metallic block should have a value of 0.2, your Roughness block should have a value of 0.2, and your Opacity should be set to 0.8.

To bring up the main details section for the entire material (as opposed to a single block), simply click on an empty area within the graph area, then observe the Details section on the left side of the screen. This is where you will enable the translucency blending to occur.

Change Blend Mode to “Translucent” to unlock the Translucency section, then check the box next to “Screen Space Reflections” and change the Lighting Mode to “Surface Translucency Volume” as shown in Figure 21.

Figure 21. Click any empty space of the graph area to bring up these details.

Figure 21. Click any empty space of the graph area to bring up these details.

If you’ve followed those steps correctly, your material should resemble a translucent red shiny orb, like the one shown in Figure 22.

Figure 22. There we have it! A translucent, shiny plastic.

Figure 22. There we have it! A translucent, shiny plastic.

Environment and Lighting

Now that you have your materials applied, you can start working on the environment.

Zooming outside of the hangar will enable you to see some icons floating above it, as shown in Figure 23.

Figure 23. Icons. What do they do?

Figure 23. Icons. What do they do?

The icons have the following functions:

Let’s take a look at the light source icon in more detail.

Light Source

Lighting is everything in Unreal Engine. It can set the mood, draw the viewers’ attention to areas of importance, and even hide things that you don’t want seen. There are many lighting schemes and options available to the designer. In this article, we will look at some of lighting basics and the default options.

Looking over to the left-hand pane on the main screen, you will see the Modes panel. This is a smorgasbord of basic entities such as geometry, volumes, cinematic effects and lighting. Clicking the Lights option will show you several basic lighting options, as you can see in Figure 24.

Figure 24. The Modes panel, at the left side of the screen.

Figure 24. The Modes panel, at the left side of the screen.

Adding these lights into the scene is super easy. Simply drag and drop them into the scene, and you will see a symbolic representation of the light in the scene, as well as details of the orientation, luminosity and other parameters in the Details section.

The basic lights in Unreal Engine consist of Directional Lights, Point Lights, Spot Lights, Rect Lights, and the Sky Light. You can find more information about what each of these lights does by clicking on the corresponding links above.

In our scene, we have altered the sunlight (Directional Light) and added a couple of other directional lights to help create some moody shadows of the hangar structure (see Figure 25).

Figure 25. Sunlight is a Directional Light.

Figure 25. Sunlight is a Directional Light.

Baked vs Realtime Lighting

There are, broadly speaking, two methods by which Unreal Engine uses lighting. These are Real-time Lighting and Baked Lighting methods.

Real-time Lighting is more computationally intense and is suited for dynamic lights that can move around the scene and cast dynamic shadows, and dynamically change their parameters.

On the other hand, Baked Lighting is less computationally hungry, and can be used for static or stationary lights.

We don’t really have time to go into all the intricacies of Baked and Real-time Lighting in this article. If you want a great in-depth explanation of dynamic vs. baked lights, you can read more about them over at this link.

But one thing you do need to know is that using static, precomputed lights will require the use of something called UV lightmaps. If you’re planning on using entirely dynamic lights for your scene, then you don’t need to worry about lightmaps, but if you are planning on baking your lights to reduce the load, then you’ll need to read the next section on how Datasmith helps with importing UV lightmaps.

UV Mapping with Datasmith

The concept of UV mapping may be a bit unfamiliar to those accustomed to an engineering workflow. In particular, software such as SOLIDWORKS makes no use of it. In such circumstances, we are often too busy making geometry for manufacturing to worry about how the textures look.

So here is a quick recap of what UV mapping is.

First, it has nothing to do with ultraviolet light! UV is merely a reference to the XY coordinates in 2D space. XYZ is already taken in three-dimensional space, you see?

In short, UV mapping is the process of projecting a 2D image onto a 3D surface for the purpose of texture mapping.

There are two kinds of UV mapping in Unreal Engine.

The first Texture UVs, and the second type Lightmap UVs.

Texture UVs are a fairly simple concept to grasp—it is simply the 2D texture coordinate data projected onto the 3D surface, like a skin.

Lightmap UVs are a little more complicated.

Unreal Engine offers multiple ways to light your scene. The method that offers the best performance, and typically the smoothest, most realistic spread of indirect illumination, is baked lighting.

In this approach, you use a tool called Lightmass to build your lighting in the Unreal Editor. This tool calculates the light that hits each object in the scene from static and stationary lights, and stores it in a special kind of texture, called a lightmap. At runtime, this lighting information is applied from each object’s lightmap texture to its surface.

In order for this system to work, every vertex in a static mesh needs to be mapped to a unique coordinate in the 2D space of its lightmap texture. This mapping is called a UV set or UV channel.

If this process isn’t done correctly (if the UVs are overlapping), it can result in weird shadows and lighting artifacts in the game scene. You can see this in Figure 26.

In the left image of the figure, the light is casting a weird shape on the rear wall of the hangar. This has been rectified in the second image on the right, where you can see the proper shapes of the shadows and light.

Figure 26.Examples of bad shadows (on left) and good shadows (on right).

Figure 26.Examples of bad shadows (on left) and good shadows (on right).

Luckily for us, when we import CAD data with Datasmith (see last article), Datasmith automatically uses the Unreal automaticUV unwrapping system for each static mesh that it imports, adding two new UV sets to each static mesh.

The first (see Figure 27) is a simple unwrapping of the triangles that make up the mesh into a flat representation in 2D space. This breaks the mesh into multiple smaller “islands” that each represents a connected section of the mesh surface. This is placed into UV channel 1 by default.

Figure 27. UV lightmap of a tire.

Figure 27. UV lightmap of a tire.

The islands from the first lightmap are then rearranged and resized to fit into a layout (see Figure 28) that avoids any overlap and minimizes wasted space around the islands. This is the final layout that will be used for the object’s lightmap when you build the lighting for your level. This is put into UV channel 2.

Figure 28. The same tire, but with the lightmap broken into smaller islands in UV channel 2.

Figure 28. The same tire, but with the lightmap broken into smaller islands in UV channel 2.

Then, Datasmith automatically sets up the Static Mesh Asset to use the second generated UV for storing and applying lightmaps.

When you add a new light, or change the direction of your lights in Unreal Editor, the lighting effects need to be recalculated. This is called “rebuilding” (or just “building”).

Well, sometimes when you go to build your lighting, you may receive an error (or several) related to overlapping UV lightmaps, resulting in the botched shadows seen in Figure 26. The errors are signified by a percentage, where a higher percentage shows a higher error with the UV lightmap compared to its surroundings.

Keep in mind that Unreal Studio is still in beta, and there may be a few occasional bugs with the way that Datasmith fixes the UV maps. You can get a good visual idea of where these errors are occurring by changing the View Mode in the main window.

You can do this by clicking the Litbutton in between Perspective and Show, and selecting Optimization View modes, and then Lightmap Density from the menu (as shown in Figure 29).

Figure 29. Checking the UV overlaps in Lightmap Density view mode.

Figure 29. Checking the UV overlaps in Lightmap Density view mode.

Generally speaking, you want the lightmap density to be a uniform color throughout the entire scene. As you can see in Figure 29, the wing mirrors and tires are not uniform with the scene. They have high percentage errors. To make them uniform, you need to override the Light Map Resolution of those individual actor components.

With the Lightmap Density view active, look at the nonuniform components (such as the wing mirror, which is red) in the World Outliner, and navigate to the Lighting settings in the Details section. Click the check box to Override Light Map Resolution, and tweak the value until the component turns the same color as its surroundings (see Figure 30).

Figure 30. Static Mesh lighting details are found in the Details section in the right-hand panel of the screen.

Figure 30. Static Mesh lighting details are found in the Details section in the right-hand panel of the screen.

Now when you rebuild your lighting, you will notice that the error values have dropped significantly as the colors in the Lightmap Density view have become more uniform.

What does this all mean?

It means that your shadows and lighting will be more visually appealing and more accurate, and that there will be less instances of light bleeding through the meshes. Easy, right?

Volumes

There is one more thing we can look at regarding setting up lights, and it’s a good excuse to familiarize ourselves with the concept of Volumes, which can be found in the Modes menu (see Figure 31).

Figure 31. The lightmass area in wireframe view mode.

Figure 31. The lightmass area in wireframe view mode.

A Volume is a 3D space that can be sketched into the main area, which can perform a variety of functions on the volume inside it. You can use it to trigger actions when a player moves inside it, you can have it increase music dramatically (like a musical volume swell) when a player enters inside, or you can use it for lighting and post-processing functions. We will look at the post-processing aspects in the next article, but for now, we will focus on the Lightmass Importance Volume.

When you play a game, or have some visual scene such as an engineering presentation like the one in this article, the lightmass aspect distributes its computational resources evenly throughout the whole scene, even on meshes that are generally out of bounds or in the distance from the player’s point of view. This can result in longer lighting build times and greater computational load.

But it’s not really necessary to do that. There’s no need to have superior lighting effects 50 meters away from the player’s point of view.

You can get around this by creating a Lightmass Importance Volume, which tells the engine to focus its efforts in a certain volume, which you can define by dragging and dropping from the Modes panel and into the main screen. You can adjust its size using your mouse, or by using the transform functions in the Details area.

All this means is that our Lightmass Importance Volume controls the area that lightmass emits photons in, enabling you to concentrate it only on the area that needs detailed indirect lighting. Areas outside the importance volume receive only one bounce of indirect lighting at a lower quality.

Wrapping Up

Whew, that was another long one. Unreal Engine is easy to show off with, but somewhat phenomenally complicated to master…like the bass guitar (speaking from experience). We can’t even hope to show you all the workings of this software in just four articles. But we can show you the basics, and we can show you what you need to understand about Unreal Studio that will help you present your engineering visualizations in the most awesome way.

So,to recap, in the last article, we learned how to move around the Unreal environment, we learned about transforms and actors, and we learned how to import engineering CAD into Unreal Engine using Datasmith.

In this article, we learned how to apply materials to those imported CAD files, we saw how to create new materials, and we learned about lighting and UV lightmaps.

So, by now, you should have a basic understanding of how to put stuff in Unreal Studio, and how to make stuff look pretty.

To use the bass guitar analogy again, we can show you how to play “Imagine,” but if you’re wanting to play “La Villa Strangiato,” you will have to delve a little deeper on your own time. But we have provided a sufficient workflow for you to understand the basics, and enough relevant links to make your job a little bit easier!

Coming Up Next Time…

In the next article, we will be looking at cameras, using Blueprints, and we will explore post-processing with Volumes, so we can get Unreal Engine to perform some awesome effects such as cutaways, X-ray vision, and dialog boxes—all the cool stuff that you need to communicate your ideas in a manner befitting Industry 4.0!

While the first two articles in this series focused on production and lighting, the next two will be more about direction!

Until then…adieu!

Figure 32. Coming up next...we will make this powertrain all X-ray and glowing like in Tron 2.0!

Figure 32. Coming up next…we will make this powertrain all X-ray and glowing like in Tron 2.0!

*Editor’s note: With the release of Unreal Engine 4.24, all Unreal Studio features have been rolled into Unreal Engine. Datasmith is also included as a standard Unreal Engine feature.

Epic Games has sponsored this post. They have had no editorial input to this post. Unless otherwise stated, all opinions are mine. —Phillip Keane