38,39 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Unreal Engine is here to stay! Since the launch of the first edition of this book, based on the Unreal Engine 5 technology, real-time rendering has only grown in popularity. The demand for expertise in this area has grown exponentially across various fields over the last few years, and Unreal Engine 5 builds upon that foundation and continues to push the boundaries of what is achievable in an interactive format.
Against this backdrop, the second edition of this book takes a leap forward and explores the new opportunities offered by the latest version of the engine, including Lumen, ray tracing, and Nanite. The book also revisits previously covered techniques and updates them to current standards, shining new light on topics such as the PBR workflow and the different lighting solutions that were present in the first edition. Throughout the chapters, you’ll be able to focus on two key principles that you need to consider when dealing with real-time graphics: optimization and efficiency.
By the end of this book, you’ll have explored the many rendering possibilities that Unreal Engine 5 has to offer to become the master of your own creations!
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 692
Veröffentlichungsjahr: 2023
Ähnliche
Unreal Engine 5 Shaders and Effects Cookbook
Over 50 recipes to help you create materials and utilize advanced shading techniques
Brais Brenlla Ramos
BIRMINGHAM—MUMBAI>
Unreal Engine 5 Shaders and Effects Cookbook
Copyright © 2023 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Group Product Manager: Rohit Rajkumar
Publishing Product Manager: Nitin Nainani
Senior Editor: Hayden Edwards
Technical Editor: Simran Udasi
Copy Editor: Safis Editing
Project Coordinator: Aishwarya Mohan
Proofreader: Safis Editing
Indexer: Manju Arasan
Production Designer: Ponraj Dhandapani
Marketing Coordinator: Nivedita Pandey
First edition published: May 2019
Second edition published: May 2023
Production reference: 2050924
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-83763-308-1
www.packtpub.com
To my mother, Mari Carmen Ramos, and my father, Manuel Brenlla; for their love and support throughout the years. To my partner, Celia, for brightening up my days. To my cousin, Fran, for instilling a love for video games in me.
- Brais Brenlla
Foreword
Unreal Engine has evolved over 25 years to become the leading game engine for AAA studios and powers some of the most exciting projects. As the Architecture Industry Manager at Epic Games, I’ve had the opportunity to see how the engine has spread beyond games and now empowers a new generation of content creators in the Architecture, Engineering, and Construction industry, as well as in other domains.
Brais Brenlla is a great example of one of these new creators: working for AccuCities, a company specializing in capturing the built environment, Brais is someone who has leveraged the power of Unreal Engine to construct one of the best examples of applying the power of real-time technology to the problem of urban planning. With over 60 square kilometers of London buildings loaded into Unreal Engine, he's figured out how to make it all run smoothly on a small laptop. Optimizing for such a large, city-scale project while still allowing for smaller-scale objects requires a deep understanding of Unreal Engine to make things work efficiently and with fidelity.
With that experience under his belt, you’ll find this book contains a wealth of knowledge to help the reader tackle many of the materials and effects required in a real-world environment. Starting from the basics, you’ll soon start to work with some of the techniques that are used daily in any real-time production, followed by more advanced concepts that tackle some of the more interesting rendering features that the engine has to offer – all whilst following an accessible learning curve.
You're in good hands with Brais at your side.
Kenneth Pimentel
Architecture Industry Manager, Epic Games
Contributors
About the author
Brais Brenlla Ramos is an architect, 3D artist, and Unreal Engine developer, but above all else, he is a passionate follower of all things 3D. His interest in that field likely started when he first laid his eyes on a video game advert, with this “love at first sight” moment leading him to explore architectural design and visualization, 3D modeling, game development, and more.
He is currently focused on developing digital city twins in Unreal Engine, where he gets to sharpen his UI design, visual effects, and tool development skills every day. He also loves sharing all this knowledge with others, something that has turned him into a little bit of an author in recent times!
I want to thank everyone that has played a role in supporting me throughout the writing of this book: my partner Celia, who suffered from my sometimes lack of free time; my parents, who taught me the value of hard work; the team behind the scenes at Packt, who have made this possible; and my editor Hayden, who has caught more than one mistake along the way. Thank you all for being there.
About the reviewer
Deepak Jadhav is an XR developer, with a master’s in game programming and project management, based in Germany. He has been involved in developing augmented reality, virtual reality, and mixed reality enterprise applications for various industries, such as healthcare, pharmaceuticals, and manufacturing. He has also developed digital twin apps for the manufacturing and healthcare industries.
Before that, Deepak was a game developer who developed games for multiple platforms, such as mobiles, PCs, and consoles. He has a strong background in C#, C++, and JavaScript, as well as years of experience in using game engines such as Unity and Unreal Engine for XR and game development.
Deepak has experience in reviewing many technical books on Unity and Unreal Engine.
Table of Contents
Preface
1
Understanding Physically Based Rendering
Technical requirements
Setting up a studio scene
Getting ready
How to do it…
How it works…
See also
Working inside the Material Editor
Getting ready
How to do it…
How it works…
See also
Creating our first physically based material
Getting ready
How to do it…
How it works…
See also
Visualizing a simple glass
Getting ready
How to do it…
How it works…
Using IBL and Lumen to light our scenes
Getting ready
How to do it…
How it works…
See also
Using static lighting in our projects
Getting ready
How to do it…
How it works…
See also
Checking the cost of our materials
Getting ready
How to do it…
How it works…
See also
2
Customizing Opaque Materials and Using Textures
Technical requirements
Using masks within a material
Getting ready
How to do it…
How it works…
See also
Instancing a material
Getting ready
How to do it…
How it works…
There’s more…
See also
Texturing a small prop
Getting ready
How to do it…
How it works…
See also
Adding Fresnel and Detail Texturing nodes
Getting ready
How to do it…
How it works…
See also
Creating semi-procedural materials
Getting ready
How to do it…
How it works…
See also
Blending textures based on our distance from them
Getting ready
How to do it…
How it works…
See also
3
Making Translucent Objects
Technical requirements
Creating a translucent glass
Getting ready
How to do it…
How it works…
See also
Displaying holograms
Getting ready
How to do it…
How it works…
See also
Working with subsurface scattering
Getting ready
How to do it…
How it works…
See also
Using refraction in a body of water
Getting ready
How to do it…
How it works…
See also
Faking caustics with a Light Function
Getting ready
How to do it…
How it works…
See also
Animating a sea shader
Getting ready
How to do it…
How it works…
See also
4
Playing with Nanite, Lumen, and Other UE5 Goodies
Technical requirements
Taking advantage of Nanite and Quixel Megascans assets
Getting ready
How to do it…
How it works…
See also
Using software and hardware ray tracing
Getting ready
How to do it…
How it works…
See also
Revisiting screen-space and planar reflections
Getting ready
How to do it…
How it works…
See also
Creating an arch viz scene with realistic-looking glass and virtual textures
Getting ready
How to do it…
How it works…
See also
Varnishing wood through the Clear Coat Shading Model
Getting ready
How to do it…
How it works…
See also
5
Working with Advanced Material Techniques
Technical requirements
Using vertex colors to adjust the appearance of a material
Getting ready
How to do it…
How it works…
See also
Adding decals to our scenes
Getting ready
How to do it…
How it works…
See also
Creating a brick wall using Parallax Occlusion Mapping
Getting ready
How to do it…
How it works…
See also
Taking advantage of mesh distance fields in our materials
Getting ready
How to do it…
How it works…
See also
Lighting the scene with emissive materials
Getting ready
How to do it…
How it works…
See also
Orienting ourselves with a logic-driven compass
Getting ready
How to do it…
How it works…
See also
Driving the appearance of a minimap through Blueprint logic
Getting ready
How to do it…
How it works…
See also
6
Optimizing Materials for Mobile Platforms
Technical requirements
Increasing performance through customized UVs
Getting ready
How to do it…
How it works…
See also
Creating materials for mobile platforms
Getting ready
How to do it…
How it works…
See also
Using the forward shading renderer for VR
Getting ready
How to do it…
How it works…
See also
Optimizing materials through texture atlases
Getting ready
How to do it…
How it works…
See also
Baking a complex material into a simpler texture
Getting ready
How to do it…
How it works…
See also
Combining multiple meshes with the HLOD tool
Getting ready
How to do it…
How it works…
See also
Applying general material optimization techniques
Getting ready
How to do it
How it works…
See also
7
Exploring Some More Useful Nodes
Technical requirements
Adding randomness to identical models
Getting ready
How to do it…
How it works…
See also
Adding dirt to occluded areas
Getting ready
How to do it…
How it works…
See also
Matching texture coordinates across different models
Getting ready
How to do it…
How it works…
See also
Using interior cubemaps to texture the interior of a building
Getting ready
How to do it…
How it works…
Using fully procedural noise patterns
Getting ready
How to do it…
How it works…
See also
Adding detail with Detail Texturing
Getting ready
How to do it…
How it works…
See also
8
Going Beyond Traditional Materials
Technical requirements
Playing a video on an in-game TV
Getting ready
How to do it…
How it works…
See also
Capturing the scene through a CCTV camera
Getting ready
How to do it…
How it works…
See also
Highlighting interactive elements
Getting ready
How to do it…
How it works…
See also
Creating snow on top of objects using layered materials
Getting ready
How to do it…
How it works…
See also
Changing a sunny scene to a snowy one with a parameter collection asset
Getting ready
How to do it…
How it works…
See also
Moving between seasons using curve atlases
Getting ready
How to do it…
How it works…
See also
Blending landscape materials
Getting ready
How to do it…
How it works...
See also
9
Adding Post-Processing Effects
Technical requirements
Using a Post Process Volume
Getting ready
How to do it…
How it works…
There’s more…
Changing the mood of a scene through color grading
Getting ready
How to do it…
How it works…
See also
Creating a horror movie feeling using post process materials
Getting ready
How to do it…
How it works…
See also
Working with a cinematic camera
Getting ready
How to do it…
How it works…
See also
Rendering realistic shots with Sequencer
Getting ready
How to do it…
How it works…
See also
Creating a cartoon shader effect
Getting ready
How to do it…
How it works…
See also
Summary
Index
Other Books You May Enjoy
Preface
This Unreal Engine 5 Shaders and Effects cookbook aims to be your companion on your quest to master the world of materials in Unreal Engine. Throughout its pages, you’ll be able to discover many of the techniques that enable the powerful graphics on display in many of the latest interactive experiences, from the cutting-edge graphics present in some of the most renowned triple-A video games made today to some of the innovative effects making their way into the movie and visualization industries.
The importance that Unreal has gained in recent years across several industries can’t be overstated, and that prominence is a direct result of both the powerful visuals it offers and the ease of use across many different fields. Taking advantage of that situation, we’ll take a look at some of the most used techniques that will make you, the reader, capable of handling any material-related challenge you face within Unreal.
By the end of this book, you’ll become competent in a wide variety of techniques that will allow you to create many different materials, which will put you at an advantage when working with any type of real-time rendering project.
Who this book is for
Anyone interested in Unreal Engine, rendering, real-time graphics, or simply passionate about creating stunning visuals will be more than capable of following the contents of this book. This will be possible thanks to a gentle learning curve that takes you from the basics of the rendering pipeline to some of the most advanced techniques in that area. This journey provides a wealth of information that will see you become proficient in this topic, no matter your background knowledge!
What this book covers
In Chapter 1, Understanding Physically Based Rendering, we will look at the basics of working with materials (and lights!) in Unreal Engine.
In Chapter 2, Customizing Opaque Materials and Using Textures, we’ll learn how to create some of the most common materials available in Unreal.
In Chapter 3, Making Translucent Objects, we’ll discover how to work with translucent shaders, a very important type that allows us to create substances such as glass or water.
In Chapter 4, Playing with Nanite, Lumen, and Other UE5 Goodies, we’ll explore some of the new rendering features that made it into the latest version of the engine.
In Chapter 5, Working with Advanced Material Techniques, we’ll take a look at some of the more advanced features available in the Material Editor.
In Chapter 6, Mobile Shaders and Optimization, we’ll understand how to optimize our materials when targeting mobile devices.
In Chapter 7, Exploring Some More Useful Nodes, we’ll see how to take advantage of some nifty nodes that defy categorization.
In Chapter 8, Going Beyond Traditional Materials, we’ll work with some types of shaders that challenge the logic of where materials should be applied!
In Chapter 9, Adding Post-Processing Effects, we’ll tap into Unreal’s post-processing pipeline to create shaders that simultaneously affect the whole scene.
To get the most out of this book
You will need a version of Unreal Engine, preferably the latest one. At the time of writing, this is Unreal Engine 5.1.1, even though 5.2.0 is already on the horizon. The topics covered in this book should be applicable to all Unreal Engine 5.X versions.
Software/hardware covered in the book
Operating system requirements
Unreal Engine 5
Windows 10 or 11
Optional – ray tracing capable graphics card
Optional – image editing software (Photoshop, GIMP)
All of the topics can be tackled using only the default Unreal Engine installation. Access to a hardware-enabled ray tracing graphics card can be useful in a specific recipe where we discuss hardware and software ray tracing. Access to image editing software is not needed, but we recommend it in case you want to modify or author your own textures.
Download the project files
You can download the project files for this book from the following link: https://packt.link/A6PL9
If there’s an update to the project files, they will be updated through that link as well.
We also have other project and code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/ia7i3.
Conventions used
Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Select System info from the Administration panel.”
Tips or important notes
Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Share Your Thoughts
Once you’ve read Unreal Engine 5 Shaders and Effects Cookbook, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.
Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.
Download a free PDF copy of this book
Thanks for purchasing this book!
Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?
Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.
Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.
The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily
Follow these simple steps to get the benefits:
Scan the QR code or visit the link belowhttps://packt.link/free-ebook/9781837633081
Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly1
Understanding Physically Based Rendering
Welcome to Unreal Engine 5 Shaders and Effects Cookbook!
In this first chapter, we’ll begin by studying the PBR workflow. PBR is an acronym that stands for physically based rendering – an approach to rendering a scene that takes into account how light behaves when it encounters 3D objects. This is at the core of the rendering pipeline, and the focus of the recipes you’ll encounter in the next few pages. In them, we’ll work with the building blocks of the PBR workflow – lights and materials – while also studying their impact on performance – things that we need to be aware of if we want to succeed in the rendering arena. With that in mind, this is what we are going to do:
Setting up a studio sceneWorking inside the Material EditorCreating our first physically based materialVisualizing a simple glassUsing IBL and Lumen to light our scenesUsing static lighting in our projectsChecking the cost of our materialsHere’s a little teaser of what we’ll be doing:
Figure 1.1 – A look at some of the things we’ll work on in this chapter
Technical requirements
To complete this chapter, you’ll need to get a hold of Unreal Engine 5, the main star of this book!
This can be done by following these simple steps:
Download the Epic Games Launcher from the engine’s website, https://www.unrealengine.com/en-US/download, and follow the installation procedure indicated there.Once installed, get the latest version of the engine. You can do so by navigating to the Unreal Engine section of the launcher, and then to the Library tab. There, you’ll be able to see a + icon, which lets us download whichever version of Unreal we want.Launch the newly downloaded version of Unreal by clicking on the homonymous button:Figure 1.2 – Location of the buttons you’ll need to click to complete the previous set of actions
Apart from that, we have provided all the assets that you’ll see me use throughout the different recipes in this book. You can download all of the ones used in this chapter at https://packt.link/20u7B.
And don’t worry – I’ll make sure to remind you in the relevant Getting ready sections of the recipes if there is an already created file that you can use to follow along with.
Setting up a studio scene
The first objective that we are going to tackle in this book is creating a basic scene, one that we’ll be able to reuse as a background level for some of the materials we’ll be creating later. This initial step will allow us to go over the basics of the engine, as well as get familiar with some of the tools and panels that we’ll revisit multiple times throughout the next few pages. Let’s jump right in!
Getting ready
First, we need to download Unreal Engine 5 before we can start creating the basic studio scene. I’ve started writing this book with version 5.0.3, but don’t hesitate to use the latest iteration available to you whenever you read this. Instructions on how to download and install it can be found on the previous page!
How to do it…
Having launched the engine as the last of the previous steps, let’s look at how to set up a studio scene right from the beginning:
Go to the Games category in the Unreal Project Browser and select the Blank option.Leave the standard options applied, except for Starter Content – untick that checkbox. We’ll be taking a further look at the options mentioned in this section both later in this recipe and in the How it works… section.Select a location for your project, give it a name, and click on Create:Figure 1.3 – The Unreal Project Browser
Once the editor loads, click on the File | New Level… option, and select the Basic map. This is the quickest option to create a new, empty level without any preexisting objects. Adjust the save location to your liking, and feel free to check out the See also section to learn about more ways you can organize your project.Once done, we are now ready to start spicing things up. Erase everything from the World Outliner (which you can find in the top-right corner of the screen if you’re using the default layout) – we are not going to be using any of that for our studio scene.The next thing that we are going to do is add the assets of the Starter Content to our project. This is something that could have been done when we created the project, but I intentionally left this for us to do now so that we know how to achieve this.
Navigate to the Content Drawer by hitting the Ctrl and Space keys at the same time.Right-click on the main Content folder and select the Add/Import Content option. Then, select Add Feature or Content Pack….In the newly opened panel, open the Content tab and choose the Starter Content option:Figure 1.4 – Sequential steps to import the Starter Content assets into any project
That will cause the selected content to be downloaded, giving us the same assets we first discarded at the project creation stage. We’ll now be using them to populate our temporarily empty level.
With that done, we can see that the Starter Content includes a Blueprint, which can be quite useful for setting up the lighting in our scene. You can look for this inside the Content Browser | Starter Content | Blueprints folder, under the name BP_ Light Studio.Important note
The asset called BP_LightStudio is a Blueprint that Epic Games has already created for us. It includes several lighting settings that can make our lives easier – instead of having to adjust multiple lights, it automates all of that work for us so that we can focus on how we want our scene to look. Making a simple studio scene will be something very easy to achieve in this way.
Drag the Blueprint into the scene.Select the BP_LightStudio Blueprint from the World Outliner so that we can tweak several of its settings, allowing us to make the scene look the way we want.In the Details panel, the first of the parameters we can look at is the HDRi tab. HDRi is short for High Dynamic Range imaging, which is a type of texture that stores the lighting information from the place at which the photo was taken. Using that data as a type of light in 3D scenes is a very powerful technique, which makes our environments look more natural and real.
Tick the Use HDRi checkbox to be able to use that type of lighting and set the Alexs_Apt_2k texture as the value for the HDRi Cubemap parameter. Doing that will allow us to light the scene through that asset, which is exactly what we are after. You can see this in the following figure:Figure 1.5 – Location of the HDRi Cubemap setting
Tip
HDRi images are very useful for 3D artists, though they can be tricky to create on your own. There are many websites from which you can buy them, but I like the following one, which gives you free access to some very useful samples: https://polyhaven.com/hdris.
You can now untick the Use Light Sun and the Use Atmosphere options found under the Sun and Atmosphere sections too. As we mentioned earlier, using an HDRi sometimes renders the use of other lights to be optional.Once you’ve done that, create a basic plane so that we have a surface where we can lay out any objects that we might want to display later. You can do this by accessing Quickly add to the project | Shapes | Plane, as seen in the following figure:Figure 1.6 – Creating a plane by accessing the appropriate option in the Shapes menu
Now that we have a plane, let’s assign an interesting material to it. With the plane selected, scroll down to the Materials section of the Details panel and change its default value to M_Wood_Pine (this material is part of the Starter Content, so make sure you have it installed).We should now be looking at something similar to the following:
Figure 1.7 – The final look of our first scene!
With that out of the way, we can say that we’ve finished creating our basic studio scene. Having done that will enable us to use this level for visualization purposes, kind of like having a white canvas on which to paint. We will use this to place other models and materials as we create them, to correctly visualize our assets. Fun times are ahead!
How it works…
There are at least two different objectives that we can complete if we follow the previous set of instructions – creating our first studio scene is the first one, while the second is simply getting familiar with the engine.
With regards to the first objective, the first step that we took was to create the Unreal Engine project on which we’ll be working throughout this book. Then, we added the assets present in the Starter Content package that Epic Games supplies, as it contains useful 3D models and materials that we can use later in other recipes. The most important bit we did was probably the lighting setup, though. This is because having a light source is vital for visualizing the different models that we create or add to the scene. Lighting is something that we’ll explore more later, but the method we’ve chosen in this recipe is a very cool technique that you can use in your projects. We are using an asset that Unreal calls a Blueprint, something that allows you to use the Engine’s visual scripting language to create different functionalities within the game engine without using C++ code. This is extremely useful as you can program different behaviors across multiple types of actors to use to your advantage – turning a light on and off, opening a door, creating triggers to fire certain events, and so on. Again, we’ll explore these more as we go along, but at the moment, we are just using an already available Blueprint to specify the lighting effects we want to have in our scene. This is a good example of what Blueprints can do, as it they allow us to set up multiple different components without having to specify each one individually – such as the HDRi image, the Sun’s position, and others that you can see if you look at the Details panel.
The second objective – getting familiar with the engine – is something that will continue to happen over time. Despite that, something that could also speed that up further is reviewing the steps we follow in each recipe, just like we’ve done before. Not only will we learn things faster, but knowing why we do things the way we do them will help us cement the knowledge we acquire (so expect to see a How it works… section after each recipe we tackle!).
Before we move on, I also want to revisit the initial project settings that we chose in step 2 when we created the project. We chose the Blank template out of the games section, and we created a Blueprint-based project with no Starter Content and no ray tracing – all while leaving the target platform as the desktop and the quality preset set to the maximum. The reason we did that was to simply retain as much control over our project as possible, as templates only differ between themselves in terms of the specific plugins that they have activated or the type of settings that are enabled by default. These are all things that can be changed at a later stage, and we will also be able to review some of them before we finish this book – especially the ray tracing one! Having said that, it’s important to lose any fear we might have after seeing the sheer amount of initial available choices, so don’t worry thinking that we might be missing out on some cool advanced feature simply because we went with the simplest option.
See also
In this recipe, we created and saved a new level within Unreal’s Content Browser. If you care about organization (and you should if your project becomes something bigger than a quick testing exercise!), know that there are many different styles that you can follow to keep things tidy. One is what I like to refer to is Allar's style guide, which you can find out more about here: https://github.com/Allar/ue5-style-guide/tree/main.
Working inside the Material Editor
Let’s get started working inside the Material Editor! This is where the magic explained in this book happens, as well as the place where we’ll spend most of our time, so we’d better get well acquainted with it, then! As with everything inside Unreal, you’ll be able to see that this space for creating materials is a very flexible one – full of customizable panels, rearrangeable windows, and expandable areas. And the best thing is you can place them wherever you want!
Because of its modular nature, some of the initial questions that we need to tackle are the following: how do we start creating materials? And where do we look for the most used parameters? Having different panels means having to look for different functionalities in each of them, so we’ll need to know how we can find our way around the editor. We won’t stop there, though – this new workspace is packed with plenty of useful little tools that will make our jobs as material creators that much easier, and knowing where they live is one of the first mandatory steps we need to take.
So, without further ado, let’s use the project we set up in the previous recipe as our starting point, and let’s create our first material!
Getting ready
There’s not much that we need to do at this point – all thanks to having previously created the basic blank project in the previous recipe. That’s the reason we created it in the first place – so that we can start working with materials straight away. Setting up the studio scene is all we need to do at this point.
Despite this, don’t feel pressured to use the level we created in the first recipe. Any other one will do, so long as there are some lights in it to help you visualize the world. That’s the advantage of the PBR workflow – whatever we create while following its principles will work across different lighting scenarios.
How to do it…
Let’s quickly tackle this recipe by creating our first material in Unreal Engine 5. This won’t take us long, but it will give us a good excuse to look at the Material Editor – a panel that we’ll revisit plenty of times throughout this book and one that you will explore in further detail in the How it works… section of this recipe.
With that said, let’s learn how to create our first material:
Navigate to the Content Browser and right-click in an empty area. Create a new material by selecting the Material option from the expandable menu that should have appeared upon right-clicking on the screen. Alternatively, you can create a new material by clicking on the + Add button located at the top-left corner of the Content Browser.Give the material a simple name, such as M_BasicPlastic, as that’s what we’ll be creating.Double-click on the newly created asset to bring up the Material Editor, the place where we’ll be able to alter the appearance of our materials.Right-click on the main graph, preferably to the left of the Main Material node, and start typing Constant. Notice how the auto-complete system starts showing several options as you start typing: Constant, Constant2Vector, Constant3Vector, and so on. Select the last one, Constant3Vector.You will see that a new node has now appeared. Connect its output pin to the Base Color property of the Material node.With the Constant node selected, take a look at the Details panel. You’ll see that we can tweak the Base Color property of the material. Since we want to move away from its current blackish appearance, click on the black rectangle to the right of where it says Constant and use the color wheel to change its current value. Let´s choose a different color just to demonstrate the effect, as shown in the following figure:Figure 1.8 – The look of the material graph so far and the color selection process
Important note
You can read more about the Constant nodes and the Base Color property in both the How it works… and See also sections of this recipe!
As you can see, we have managed to modify the color of the preview sphere. We should also adjust the sharpness of the reflections given by the material, given how we want to go for a plasticky look. To do so, we need to modify the Roughness parameter using a different constant. Instead of right-clicking and typing, let’s choose it from the palette menu instead.
Navigate to the Palette panel and scroll down until you reach the Constant category. We want to select the first option in there, simply named Constant. Alternatively, you can type its name in the search box at the top of the panel instead of scrolling.A new and smaller node should have appeared. Unlike the previous one, we don’t have the option to select a color – we need to type in a value. Let’s go with something low for now, something like 0.2 – a value that will produce clear reflections on the material. Connect the output of the new node to the Roughness input pin of the main material.You might notice how the appearance of the material has changed after applying the previous Roughness value; it looks like the reflections from the environment are much sharper than before. This is happening thanks to the previously created Constant node, which, using a value closer to 0 (or black), made the reflections a lot clearer. Whiter values (those closer to 1) decrease the sharpness of the reflections or, in other words, make the surface appear much rougher.
Having done so, we can now apply this material to a model inside our scene. Let’s go back to the main level and add a new shape onto which we can apply our new asset.
Open a level that you can use to visualize models (such as the one we created in the previous recipe).Create a cube and place it on top of the existing plane, if you’re working on the level we created in the previous recipe, or simply somewhere you can see it if you’re working with a custom map. You might need to adjust its scale if you’re working with our scene, as the default size of the cube will be too big.With the cube selected, head over to the Materials section of its Details panel and click on the first drop-down menu available. Look for the newly created material and assign it to our cube.The scene should now look something like this:
Figure 1.9 – The way our scene should look by the end of this recipe
And there it is – we have applied our material to a simple model, being displayed on the scene we created previously. Even though this has served as a small introduction to a much bigger world, we’ve now gone over most of the panels and tools that we’ll be using in the Material Editor.
How it works…
We’ve just created our first material in Unreal Engine 5 – the first of many more! But what better opportunity than now to take a further look at the Material Editor itself? Let’s dive right in and see the different sections that we’ll have to pay attention to throughout the rest of our journey.
Tip
Remember that you can open the Material Editor by double-clicking on any material that you want to modify.
The Material Editor
Given how we are going to be studying the Material Editor, let’s make sure that we are looking at roughly the same screen. We can do this by resetting the appearance of the Material Editor itself, which can be done through Window | Load Layout | Default Editor Layout. Remember that resetting things to their default state doesn’t necessarily mean that our screens will look the same, mainly because settings such as the screen resolution or its aspect ratio can hide panels or make them imperceptibly small. Feel free to move things around until you reach a layout that works for you!
Now that we’ve made sure that we are all looking at the same panels, let’s turn our attention to the Material Editor itself and the different sections that are a part of it. By default, we should all be looking at something very similar to the following screenshot:
Figure 1.10 – The default look of the Material Editor and several of its subcomponents
Let’s break down the previous interface:
The first part of the Material Editor is the Toolbar area. Some of the most essential controls can be found here, such as saving the material on which you are working or finding it in the Content Browser.The second panel is the Viewport area, where we’ll be able to see what our material looks like. You can rotate the view, zoom in or out, and change the lighting setup of that window.The Details panel is a very useful one, as it is here where we can start to define the properties of the materials that we want to create. Its contents vary depending on what is selected in the main graph editor.The Stats panel will give you information regarding the resources used by the current material. You can also open the Search panel next to this one by clicking on that option in the Toolbar area.Material Node Palette is a library that contains all the nodes and functions available in the material graph. It’s collapsed by default, but you can access it by clicking on the text with your mouse.The Main Editor Graph area is where the magic happens, and where you’ll be working most of the time. It is in this area where we arrange the different components that make up a material.Constants
We’ve used this recipe to learn about the Material Editor and created our first material along the way. Knowing what each section does within the editor will help a lot in the immediate future, as what we’ve just done is but a prelude to our real target – creating a PBM. Now, we are in a much better position to tackle that goal, which we will look at in the next recipe!
Before moving on, though, let’s review the nodes that we have used to create this simple material. From an artist’s point of view, the names that the engine has given to something such as a color value or a grayscale one can seem a bit confusing. It might be difficult to establish a connection between the name of the Constant3Vector node and our idea of a color. But there is a reason for all of this.
The idea behind the naming convention is that these nodes can be used beyond the color values we have just assigned them. At the end of the day, a simple constant can be used in many different scenarios – such as depicting a grayscale value, using it as a brightness multiplier, or as a parameter inside a material function. Don’t worry if you haven’t seen these other uses yet; we will – the point is, the names that these nodes were given tell us that there are more uses beyond the ones we’ve seen. Going a bit further than that, we should know that they are also called constants because their values don't change: they are the ones that they receive when we create them!
With that in mind, it might be better to think of those elements we’ve used in more mathematical terms. For instance, you can think of color as a Red, Green, and Blue (RGB) value, which is what we defined using that previous Constant3Vector node. If you want to use an RGB value alongside an alpha one, why not use Constant4Vector, which allows for a fourth input? Even though we are at a very early stage, it is always good to familiarize ourselves with the different expressions the engine uses.
See also
You might have noticed that I’ve named our first material in a very particular way, using the “M_” prefix before the actual name of the asset. The reason for that is that I like to stick to clear naming conventions that I can rely on for better readability throughout the project. The one I use follows a very famous one called Allar Style Guide, and you can find more about it at https://github.com/Allar/ue5-style-guide.
I also want to point you to the official documentation regarding the importance of the Base Color property in Unreal, as well as some of the other common attributes that you’ll find when working inside the Material Editor: https://docs.unrealengine.com/5.0/en-US/physically-based-materials-in-unreal-engine/. You’ll see that certain real-world materials have a specific measured value that should be used to act as the Base Color property’s intensity. Be sure to check that information out if you are interested in using realistic values in your projects!
Creating our first physically based material
PBR is, at its core, a principle that several graphic engines try to follow. Instead of being a strict set of rules by which every rendering program needs to abide, it is more of an idea – one that dictates that what we see on our screens is the result of a study on how light behaves when it interacts with certain surfaces.
As a direct consequence, the so-called PBR workflow varies from one rendering engine to the next, depending on how the creators of the software have decided to program the system. For us, that means that we are going to be looking at the implementation that Epic Games has chosen for the rendering pipeline in Unreal Engine 5.
However, we are going to do so in our already established recipe process – that is, by creating materials that follow the PBR workflow so that we can see the results. Let’s get to it!
Getting ready
We don’t need a lot to get started working on this recipe – just a basic scene like the one we created in the previous recipe with some basic lights and models in it. You can simply continue using the previous level and repurpose the model we placed there.
Tip
We are going to create multiple materials in this section, so duplicating and modifying an already existing asset is going to be faster than creating several ones from scratch. To do this, just select any material that you want to duplicate in the Content Browser and press Ctrl + D.
How to do it…
Let’s start our journey by creating a new material and looking at the attributes that define it:
Right-click anywhere inside the Content Browser and select the Material option in the Create Basic Asset section. Name it whatever you want – I’ll go with M_PBR_Metal this time. Double-click on the newly created material to open the Material Editor.With that panel open, let’s focus our attention on the Material section of the Details panel. This area contains some very important settings that determine how our material behaves concerning the light that reaches it – from blocking it to allowing it to pass. It also contains some other parameters that affect other properties, such as how the asset is shaded or what type of objects can use it:
Figure 1.11 – A close-up look at the Material section of the Details panel for the Main Material node
The settings you can see here are the default ones for most materials in Unreal, and they follow the PBR pipeline very closely. The first option, Material Domain, is currently set to Surface. This tells us that the material we are creating is meant to be used on a 3D model (as opposed to on a light or a UI element). Blend Mode, which has a value of Opaque, indicates that light won’t travel through the objects where this material is applied. Finally, Shading Model is set to Default Lit, which indicates a particular response to the light rays that the material receives. This configuration is considered the standard one and is useful when you’re trying to create materials such as metals, plastics, walls, or any other ones that represent everyday opaque surfaces.
With that bit of theory out of the way, create a Constant3Vector node anywhere in the graph and plug it into the Base Color input pin of our material. We used the Base Color attribute in the previous recipe, which defines the overall color of our creation.The next item we have to create is a simple Constant. You can do so by holding the 1 key on your keyboard and clicking anywhere within the Material Editor graph. Assign a value of 1 and plug it into the Metallic attribute of our material.Important note
The Metallic attribute controls whether the material we create is a metal. That is true if we plug a value of 1 into the slot, and false if we choose 0 or if we leave it unconnected. Values between the previous two should only be used under special circumstances, such as when dealing with corroded or painted metallic surfaces.
Next, create another Constant and plug it into the Roughness slot. This gives it a value of 0.2 instead. The final material graph should look something like this:Figure 1.12 – The look of the material graph so far
Important note
The attribute we are controlling through the previous Constant defines how rough the surface of a given material should be. Higher values, such as 1, simulate the micro details that make light scatter in all directions – which means we are looking at a matte surface where reflections are not clear. Values closer to 0 result in those imperfections being removed, allowing a clear reflection of the incoming light rays and a much clearer reflected image.
With that, we have looked at some of the most important attributes that are used to define a PBR material by creating a metal, a type of opaque material. Despite that, it will be good to create another quick example that doesn’t involve the metallic property – this is because some of the other settings used in the PBR workflow, such as the Specular material attribute, are meant to be employed in such cases.
Create another material, named M_PBR_Wood, and open the Material Editor for that asset.Right-click anywhere inside the main graph for our newly created material and search for the Texture Sample option. This will allow us to use an image instead of a simple color as one of the attributes that defines the material.With that new node in our graph, click on it to access its Details panel. Click on the drop-down menu next to the Texture property located within the Material Expression Texture Base section and type Wood. Select the T_Wood_Floor_Walnut_D asset and connect the Texture Sample node to the Base Colormaterial attribute.With that done, it’s time to look at another material attribute – the Specular parameter. This is a property that controls how much light is being reflected by the material, in a range of values that go from 0 to 1. The standard figure is 0.5, a value that gets automatically assigned whenever we don’t connect anything to that material slot. Even though it doesn’t see a lot of use nowadays, it can be of assistance in cases such as this one, where we are trying to replicate a wooden surface – a surface that contains both flat areas that reflect a normal amount of light as well as crevices that trap it. Using a texture to define that circumstance can be helpful to achieve more realistic results, so let’s tend to that!
Drag a pin from the red channel of the previously created Texture Sample node into the Specular attribute of the Main Material node. This will let us use the black-and-white information stored in the previously selected texture to drive the amount of light reflected by the material. This will work perfectly for our purposes, seeing as the areas of the main wooden boards are clearer than the seams.You might be wondering why we are using the red channel of the wood texture to drive the specular parameter. The simple answer is that we need a black-and-white texture to drive that setting, and selecting an individual channel out of an RGB texture allows us to do just that. Because seams are going to contain darker pixels than other areas, the result we achieve is still very similar if we use the red channel of the original texture. The following figure shows our source asset and the red channel by its side:
Figure 1.13 – The original RGB wood texture on the left and the red channel to its right
Now, copy the Texture Sample node twice, since we are going to use more textures for the Roughness and the Normal material attribute slots.As we did previously, select the T_ Wood_ Floor_ Walnut_ M and T_ Wood_ Floor_ Walnut_ N assets on each of the new nodes. Connect the first one to the Roughness slot and the second one to the Normal node.Save the material and click on the Apply button.Navigate back to the main level and select the floor plane. In the Details panel, scroll down to the Materials section and assign the M_PBR_Wood material we have just created – feel free to assign the metallic material to the existing box. With that in place, let’s see what our scene looks like:Figure 1.14 – A final look at the scene after applying the different materials
Nice job, right? The new nodes we’ve used, both the specular and normal ones, contribute to the added details we can see in the previous screenshot. The Specular node diminishes the light that is being reflected in the seams between the wood planks, and the Normal map modifies the direction in which the light bounces concerning the surface. The combined effect is that our model, a flat plane, looks as if it contains a lot more geometrical detail than it does. Cool stuff!
How it works…
Efficiency and speed are at the heart of any real-time application. These are two factors that have heavily influenced the way that the PBR pipeline works in Unreal. That being the case, the parameters that we have tweaked (Base Color, Metallic, Roughness, and Specular) are the most important ones when it comes to how Unreal deals with the interaction between light and 3D models. The Base Color property gives us the overall appearance of the material, while roughness indicates how sharp or blurry the reflections are. The Metallic property enables us to specify whether an object is made from metal, and the Specular node lets us influence the amount of light that gets reflected. Finally, normal maps allow us to modify the direction in which the light gets reflected – a useful technique for adding details without using more polygons.
The previous parameters are quite common in real-time renderers, but not every program uses the same ones. For instance, offline suites such as V-Ray use other types of calculations to generate the final output – physically based in their nature but they use other techniques. This shows us that, at the end of the day, the PBR workflow that Epic uses is specific to its engine, and we need to be aware of its possibilities and limitations.
Throughout this recipe, we have managed to look at some of the most important nodes that affect how PBR gets tackled in Unreal Engine 5. The base color, roughness, specularity, ambient occlusion, normals, and the metallic attribute constitute the basics of the PBR workflow.
Having seen all of them, we are now ready to start looking into how to build more complex materials and effects. And even though we still need to understand some of the other areas that affect our pipeline, we can do so with the certainty that the basics are covered.
See also
Now that we have introduced textures and 3D models, we’re going to start playing with more complex assets that might feel a bit more complicated than the constants we used in our first material. Creating them requires us to use their specific software packages, and we would need another couple of books to cover the specifics of how to do this.
Having said this, the guys at Epic have recently acquired the amazing company Quixel, which focuses on capturing realistic 3D assets, and made their library free to use for Unreal users – so we can count ourselves lucky! You only need an Epic Games account to enjoy their content, and you can get a hold of those resources through the Quixel Bridge integration, which comes packaged with Unreal. Simply head over to Window | Quixel Bridge inside Unreal and explore all the content available there!
On top of that, I also want to leave you with another site that might help you with your work, https://www.textures.com/, where you can get useful textures and scans to bring your scenes to the next level.
Visualizing a simple glass
In the previous recipe, we had the opportunity to create a basic material that followed the physically based approach that Unreal Engine uses to render elements on the screen. We saw how we could potentially create endless combinations by simply using nodes and expressions that affected the roughness and the metallic attributes of a material, letting us achieve the look of plastics, concrete, metals, or wood.
Those previous examples can be considered simple ones – for they use the same Shading Model to calculate how each element needs to be rendered. Most of the materials that we experience in our daily lives fall into that category, and they can be described using the attributes we studied previously. Despite that, there are always examples that can’t be exactly covered with one unique Shading Model. The way that light behaves when it touches glass, for example, needs to be redefined in those cases.
The same applies to other elements, such as human skin or foliage, where light distribution across the surface varies from that of a wooden material.
With that in mind, we are going to start looking into these other categories by creating several small examples of materials that deviate from the standard Shading Model: one in this recipe, and some others in future chapters. We will start by creating a simple glass, which will work as an introductory level before we can create more complex examples at a later stage.
Getting ready
The sample Unreal project we created previously will serve us fine, but feel free to create a new one if you are starting with this section of this book. It is completely fine to use standard assets, such as the ones included with the engine through the Starter Content, but I’ve also prepared a few of them that are included alongside this book that you can use if you want to follow me more closely. If so, feel free to open Level 01_04_Start from the download link in the Technical requirements section, and buckle up for the ride!
How to do it…
So, to create our simple glass example, follow these steps:
Right-click within the Content Browser and create a new material. You can give it an appropriate name (or not!), such as M_SimpleGlass, as that’s what we’ll be creating.Open the Material Editor and select the Main Material node.Focus your attention on the Details panel. Look under the Material section and find the Blend Mode option. Change the default Opaque value to the Translucent one.Now, scroll down to the Translucency section. There is a drop-down menu there called Lighting Mode, which is currently set to a default value of Volumetric Non Directional. Switch to the Surface Translucency Volume instead.Important note
You might have noticed that several input pins in the Main Material node became unusable once we changed Blend Mode from Opaque to Translucent and that they became available once again after changing the material’s Shading Model. These pins define how a material behaves, so it makes sense to have certain ones available depending on what the previous parameters allow our material to do – it wouldn’t make sense to have an opacity option in a fully opaque material. Make sure you read the How it works… section to learn more about those settings.
Create a Constant4Vector and connect it to the Base Color node of the material.Assign any value you fancy to the RGB channels of the previous Constant and set the Alpha parameter to 0.5. I’ve gone for a bluish tone, which will give us the effect of slightly transparent blue glass. Take a look at the values in the following figure:Figure 1.15 – The values that were chosen for the Constant4Vector variable
Plug the output of the previous Constant4Vector node into the Base Color input pin on the Main Material node.Now, it’s time to plug the Alpha value of our Constant4Vector into the Opacity slot of our material. So, drag from the output pin of Constant4Vector into an empty space in the material graph and release the mouse button. A contextual menu should appear, letting us select a node. Type Component to reveal a node called ComponentMask; select it.With the last node selected, take a look at the Details panel. You can select which of the four components from the Constant4Vector node you want to use. Tick the Alpha option as we want to drive the opacity of the material through the value we selected earlier.Connect the output of the previous mask to the Opacity pin.Click on the Apply button and save the material.The preview window may take a moment to update itself but, once it does, we should be looking at a translucent material that lets us see through it.
