What Is A Shader? UE4 Materials 101 - Episode 1

[Music] hello and welcome to this series of tutorial videos on creating shaders in Epic Games Unreal Engine 4 I've got a lot of exciting videos lined up to teach beginners how to create shaders and my plan is to release a new video each week so be sure to subscribe before we begin this series it's important to understand the answer to a very simple question what is a shader before we get into that though I'd like to take a minute to introduce myself I'm Ben Cloward and I've been a technical artist at Bioware since 2007 I started my career in the video game industry back in 1999 making games for the original PlayStation console and here a couple of the games I that I've worked on over the course of my career in addition to developing video games I've also contributed to the community in a couple of ways I was the co-author of the original shader effects plugin for 3ds max the plugin was bought by Autodesk and is now the standard method for creating real-time shaders in both Max and Maya I also created a series of training DVDs to help artists learn to write shaders in hlsl code originally the DVDs sold for about $60 a piece but they're now available for free on my youtube channel so if you want to learn to write shaders in code be sure to check it out alright let's jump right into it what is a shader first of all shaders are cool I love writing shaders for a couple of reasons first of all their way of creating beautiful art with math so I get to mess around with numbers and logic and the result is something that looks beautiful and secondly most of the things that we work on as technical artists are thankless jobs so for example if I create it at rule or a rig the artists would only come and talk to me if something was broken about it but when I'm writing a shader people walk by my desk and they're like whoa that looks great and I love it so shaders are code that controls the color of each pixel on the screen and this code usually runs on the graphics processor so we do all kinds of things in the code but the result is a colored pixel now when I say code I don't want you to worry the shaders that we're gonna write in this tutorial series are using the Unreal editors material editor and so we're using a node-based interface to create shaders we're not actually writing code the engines gonna write the code for you under the hood based on the nodes that you wire together now there is a little bit more to shader writing than just what's here and to understand that we need to talk about what shaders used to be versus what they're starting to become now currently game engines use advanced physically based rendering and lighting and the lighting model is more locked down it's kind of the realm of the graphics engineers and what the engine is doing for you under the hood so we as artists create shaders that provide the color the normal the roughness and the metallic the surface properties of the object and then the game engine does the lighting in itself also most modern game engines have a built in shader editor which means you're creating shaders in a node-based interface like I said instead of creating code or writing HLSL and finally shaders control material properties like color and normal as opposed to lighting so here are a lot of things that shaders used to be able to do and I'm gonna sort these into two main categories surface properties and light properties and you'll see that each of these things Falls nicely into one of these two categories it used to be that when we wrote shaders we blended these things together so there might be ambient occlusion or diffuse lighting in our base texture and we might have a hard-coded reflection map that was specific to our object but now we're using physically based rendering and our shaders are providing just the surface properties and the engine is creating the lighting properties so it's important when creating our art and when creating our shaders that were not blending lighting properties and surface properties the shader is just doing the surface properties and then the game engine does the lighting properties so we're gonna focus on these things over here in the left column in creating our shaders and let the game engine do the lighting for us so we're going to be using the unreal shader editor but the same principles that we're looking at in these tutorials will also apply to other game engines like for example I use the frostbite game engine at work and the shader editor that we use all of the same principles apply there as apply and unreal and whatever other game engine you using it's very likely that it has a built in shader editor where you can wire nodes together and do those kinds of things so for the next part of the video we're gonna jump into the Unreal material editor and I'm going to give you a brief overview of how the user interface works so that you'll be able to hit the ground running when we jump into the next series of tutorial videos all right so here we are in unreal and when you first download the game engine you get it installed and you open your first project it's gonna create some example content for you which is what we're looking at here in these folders and to jump right into the material editor what you're gonna want to do is come into this materials folder and you can see that there's a bunch of materials in here already we're gonna ignore those for now and we're just gonna create a blank one so I'm gonna right click inside this content browser and it brings up this menu where I can select what kind of a new thing I want to create and in this case I'm going to pick a material so here's my material it's called new material and unreal seems to follow this naming convention of M underscore for materials and so I'm going to follow that I'm going to call this M underscore my new material and then we're gonna double click on this to bring up the material editor and here it is so the first thing that I want to do is introduce you to the various parts of the material editor over here on the left hand side we have a preview of what your shader is gonna look like when you put it into the game right now I have a black sphere here because there is no shader really there's there's nothing being applied but once we start creating a shader it's gonna be applied to this sphere you can see that the sphere is resting on a plane and there's this nice environment map in the background probably from the epic games campus in North Carolina all right so that's our preview and that will show us what our shader is gonna look like now let me let me just give you a little tour of the features here so first of all we can choose different shapes to apply our shader to if we're making a tree trunk shader the cylinder might make more sense than a sphere you can also create a flat plane and a box and then we can use this button to specify our own custom model if we want but I haven't set any up so I'm not gonna use that one for now just set it back to a sphere then up here in the upper left corner of the window there are a bunch of different settings so instead of perspective I could choose top bottom left right front or back I can choose to use something orthographic rather than a perspective view right now we're looking at lit view which means the the lighting is applied but if I just wanted to see what the model would look like with no lighting I could switch to unlit or there a bunch of other options available here to detail lighting only lighting reflections etc so there's a lot of different options that you can pick for for viewing your model and then there's also this show where I can hide the grid if I want to so there's a grid there and I've got it hidden and also hide the background and there's also some stats that I can display or not display so a pretty full functional preview are here for viewing what's applied to my shader next we have this panel down here in the lower left that shows all of the parameters for the node that I currently have selected in this viewport here this is the main view or window where I edit my shader and whatever I have selected in this window its parameters and properties show up over here right now I have the main root node selected and so you can see there are all kinds of different options and settings for how I can change and adjust the way the main root node behaves down here at the bottom I have something called stats and we're gonna get into this in another video where we talk about shader optimization but what this is telling you is once the shader is compiled how many math instructions are running on the GPU in order to create this shader so a nothing shader has 87 instructions and the reason that it takes 87 instructions to do nothing is it's actually using all these instructions for the lighting and you know I've got a nice specular highlight here and I've got reflections so this isn't just nothing there's a lot going on here and that costs 87 instructions even before you get started on what you're going to do all right and then over here on the right hand side we have a long menu of all of the nodes that are available to stick into your shader now this menu isn't something that I use very often mostly because you can access the exact same thing simply by right clicking here in this window so if I right click you can see I have access to all of the same node listings as I have over here and the nice thing about this list is that I don't have to go hunting for it I can just type what I want so for example if I want to lay down a texture map I can just type the word texture in here I have my texture sample node and it comes right up all right well that's a good way to just go ahead and get started so let's create a very simple texture or a very simple shader rather simply by wiring our texture sample into our root node let's say we want to apply a texture so here's our texture sample node and we come over here to the properties now you notice when I pick the texture sample node what properties show up over here change when I have the root selected the root properties are displayed when I have the texture node sample the texture sample node selected the properties of that node appear so if I want to pick a texture I click on this drop down node and all of the textures that are available to me show up in this box now just quickly I want to show you where that comes from so I'm going to switch back to here I'm gonna minimize this window and I'm gonna switch back to my example content right now I'm in materials but if I go back to starter content you can see there's another folder called textures so all the textures that I've imported or that are available show up here and these are the same textures that show up in that list for my shader so I can import new textures by right-clicking and creating a texture here but I'm not gonna do that now I'm just gonna use a texture that I already have so let's switch back to the material editor I'm gonna drop the box down and let's see what do I want to do let's pick brick clay new so now I've loaded a brick texture into my texture sample and I want to use this texture sample on my shader and so in order to do that I'm gonna wire the texture sample node into the root node so I'm just gonna left click and drag right here where it says RGB because I want the RGB color of my texture I'm gonna left click and drag and I'm gonna wire that directly into base color and when I let go the shader connects and right now it's compiling so you can see it took them in and it kind of hesitated there and then it compiled my shader and you can see that now I have a brick texture applied to my preview model here and down here in the bottom you can see my base pass shader instructions are now 90 so it went up from 87 to 90 it took three shader instructions to apply my texture to my shader okay let's see what we can do with some other nodes you can also put down a constant node constant node is just a single number and we're gonna get into more detail in this when we have our video on datatypes but this is just like a black and white or grayscale value so if I wire that into my base color you're gonna see that it'll turn black because my value is zero but if I set this to a value of one my shader or my preview model is gonna turn white and I can set it to like a lower number and it'll turn gray well what if we want a color instead of just a grayscale value if I right click here and type constant again a color is a constant 3-vector and the reason it's a three vector is B color because colors need RG and B it needs three channels instead of just one so I'm going to drop down a constant 3 vector and you can see here there's a color that shows up right now the value is 0 0 0 but if I come over here and I click on the color then I get this nice color picker and I can pick a shade of blue and hit OK and this is gonna update with my blue and then I can wire that into my base color and I'll get a nice shade of blue on my preview model now what if I want to disconnect a node well there are a couple of different ways of doing that I can right click here on this guy and pick break link or I can also hold down the alt button on my keyboard and just left-click and that will disconnect the wire these kinds of standards are different in every material editor in the Frostbite editor that I use you can just hit delete you can select a wire and hit delete but in unreal I can't like if I still I can't select wires I can just hold down alt and left click to break them okay so that's some basics we have our material preview here we have our properties window we have our node based shader editor window here we have our stats down here and we have our giant list of shader nodes that are available so I'd recommend that you just go ahead and start playing around with some of these nodes it's really important to become familiar with all the nodes that you have available so take a look at what some of these do it's really easy to get documentation on these if you just hold down ctrl and alt it'll give you a nice simple description of what the note does but then you can click here and it'll take you to a web page with full documentation for each of these nodes so it's a really good way of just you can grab nodes plop them down and then go and read the documentation to find out what they do alright that's it for this video be sure to subscribe to the channel if you want more content like this I have a whole series of tutorial videos planned and we're gonna go over all kinds of really cool stuff in the Unreal material editor so I'll see you in the next video [Music]

Channel: Ben Cloward

Views: 47,681

Keywords: UE4, Unreal, Unreal Engine, shader, material, material editor, game development, real-time, tutorial, training, Unity, graphics, 3d, GPU, tech art, directx, computer graphics, fundamentals, basics, beginning, learning, what is a shader, UI, user interface, create a material, history of shaders

Id: uQG0SWv5lbw

Length: 18min 9sec (1089 seconds)

Published: Thu Nov 21 2019