In today's video, we're gonna make our first shader, so let's get started. [Music] Alright, so we're gonna start right from the beginning today. When you first launch Unreal 5 or Unity, it comes up with a project browser like this. Here's the one for Unreal, and here's the one for Unity. You can either select a project that you've already created, or you can create a new one. So, with Unreal, if you go to the Games tab, it gives you an option of selecting a template that's most similar to the kind of game that you want to start. For example, if you pick a third-person game, it'll come with a mannequin character already set up, a very simple environment, and controls already set up to put the camera behind the character in a third-person environment. This is probably the easiest one to use for creating sample shaders, so that's the one that we're going to go with today. You also have the option to select whether you want to use Blueprint or C++ for your game logic.

blueprint is a graph-based editor that lets you create game logic with a node interface. C plus is obviously just writing code, so depending on which of those you'd be most comfortable with, you can select which one you'd like. For target platform, you can choose either desktop or mobile. And then for quality preset, you can pick maximum or scalable. Scalable allows you to scale your game from multiple platforms, whereas maximum just sets it to the maximum quality. The options in Unity are similar. So if you want to create a new project, you can click the new button here. And then you have the option to select 2D, 3D, high definition RP, or Universal Render Pipeline. Selecting high definition RP is similar to Unreal's selecting maximum as the quality preset. And selecting the Universal Render Pipeline is similar to selecting scalable here. Universal allows you to create a game that's targeted at multiple platforms with a scalable quality level, whereas high definition a render pipeline is made for high-end PCs and high-end game consoles. So for each of these, I already have a

project set up. Oh, one more thing, with Unity. If you want to use shaders, you need to either select high definition render pipeline or universal pipeline. Some of these others don't have all the modules installed that you need to be able to use shaders. So go ahead and pick high definition render pipeline or universal pipeline, depending on if you only want to make a high-end product or a product that will scale across multiple platforms. All right, for Unreal, I already have a project set up, so I'm just going to go ahead and use that one. It's called learning shaders, and I'm just going to open it and launch right in. So the first thing that you'll do when you launch is pick file, new level, and then you can pick default, time of day, VR basic, or empty level. I recommend using time of day because it has some things set up already that you need for lighting and such. So here we have our new level. You can see it has some animated clouds up here at the top and some other objects placed in the level.

we're not really going to do much with this level today, but what I do want to show you is the Content Browser. Before I go any farther, I'm going to come here under Debug Widget Reflector, and I'm going to set my application scale to 1.5, just so everything's a little bit bigger. Bigger so that you can see it on the video. All right, now I'm going to come down here to the Content Drawer and click this little up arrow. And this is the browser that shows you all of the content that you've created so far. If you selected the option to include starter content, it's here in this folder called Starter Content, obviously. And there's a folder here called Materials, and these are all the materials I've created so far, plus some that shipped with Unreal. I'm just going to scroll down here to the bottom and right-click to create a new material. I can also come over here and click Add and then pick Material. So I'm going to go ahead and do that, and you can see now I've created this new

material, and it's ready for me to give it a name. So, I'm going to call this my first shader and hit enter. And there it is. You can see it's just a gray ball right now because I haven't actually added anything to it. So, if I double click the material, it's going to open a new window here, which is the Unreal Material Editor. This is where we're going to be focusing all of our time in this series. Before we jump into creating a shader, I want to go over a couple of the UI elements just so you're familiar with what's going on here. The most important element of the UI is this window here in the middle. This is the material graph, and this is where your shader nodes will go. This large node over here on the right is the root node, and all of the results of your shader will plug into one of these material sockets on the root node. Down here at the bottom, you can see that there's a stat window, and this is the window that shows

you how many instructions your shader is using, and that will give you kind of a ballpark indication of how expensive your shader might be. Instruction counts aren't necessarily the best way of knowing how expensive your shader is going to be, but it will give you a general idea. Sometimes the instruction count can be misleading, and so the best way to judge the expense of your shader is actually to apply it to your mesh and put it in the game and run it on your target platform. So like I said, these things will give you kind of an idea, but you shouldn't rely on it exclusively. Okay, over here on the right, on the left, you have the preview window, and this is going to show you the results of your shader. Right now, it's just black with a little bit of uh specular shine or reflectiveness, and that's because there's nothing happening here. There are some options here for editing, like you can show a top, bottom, left, right, front, or back instead of perspective. We can also change the field of view so

right now, it's set to a really wide angle, 90-degree field of view. But if we set it to 50, you can see it zoomed in quite a bit for us. But I can scroll the middle mouse button to zoom out. And now I have kind of a 50-millimeter lens view instead of a 90-degree field of view, which is a little bit closer to what the human eye will do. There are also a bunch of different view modes here. I can switch to unlit where I can just see the color, or I can switch to wireframe, or a bunch of different lighting modes. There are also optimization view modes and level of detail coloration. We may go over some of these in a future video. And then it's also possible to toggle the background off, toggle a grid off, and then also to not show the stats down here at the bottom. And then at the bottom of the preview window, you can see that we can switch this to different primitives. So I can switch to using a cylinder.

sphere, a plane, or a cube. And I can also use a custom mesh, which is this selection here. But in order to use that one, I have to select a mesh in the content browser. And once it's selected, I can click that button, and it'll show up here in the preview window. For now, we're just going to stick with a sphere. Down below the preview window, you can see we have this panel with details. And right now, all of the options that are showing here are the options that are coming from my root node. Once I add additional nodes to my graph, if I select those nodes, their options will show up here in the details panel. And if I expose parameters in my graph, the parameters will show up here in the parameters window. Okay, that's about all I want to show for now. So let's go ahead and add a new node to our graph. So I'm going to right-click here. And you can see that there are a whole bunch of different categories of nodes that I can add. To begin, all I want to do is add a color.

so I'm going to come here under constants and open this up and pick constant 3 vector. And why is it called a constant 3 vector? Well, a color consists of red, green, and blue. And these three numbers here are the three channels: red, green, and blue. You can see here that it's currently set to red, green, and blue of zero. Each of these three is zero, which gives me a result of black. Now I have two choices. I can either type in these numbers one at a time. For example, if I type a one here in the red channel, you can see that my color is now converted to red. Or I can also click this box here, and it'll bring up a color picker which will allow me to easily set the color that I want, and it'll set all three values for me at the same time. So if I want a color, I can use this color picker. That's really convenient. But if I want to be able to type in three independent numbers, then I want to use the number values to type in.

can see number values of one one one will give me white. Number values of zero zero zero will give me black. And then I can pick any color in between. This color wheel here lets me select the hue that I want. This lets me select the value or the brightness of the hue. And then this slider here lets me pick how saturated or desaturated the hue is. This is a pretty cool nice little color picker. All right, so let's say I want this kind of a random shade of red. And I want to make my material red. So the way that I make a red material is I add a color first. And then I grab this little output socket here on the right side of the color node. And I left-click and drag out a wire. And then I drop it into the base color socket of my material. Now the color from my vec3 node here is flowing through this wire and into my base color node. And whatever comes into my base color node is going to be the resulting color of my material. So pretty neat.

and now if I click over here and change my color picker, and hit ok. You can see that it compiles for a minute, and then it updates, and the final material has a color of blue, or a color of green, or whatever color I set it to. That's pretty great. So, this is the very most basic shader that you could create, pretty much. And from here, it's just a matter of adding more nodes and building up an interesting shader, and doing all kinds of cool stuff in the editor. Let's switch over to Unity and see how to do the same thing in Unity. Alright, here we are in Unity. And if you created your project using HDRP, it creates a default scene for you that looks like this. And what we want to do is just create a shader. So, I'm going to come down here to our project, and you can see that it also came with sample assets, and there's a folder called shader. So, I'm just going to click on this shaders folder, and then right click and pick create, and then come up here to

shader and the elements that end with graph are the ones that I want to be able to create because I'm creating a shader graph. Now, if I'm using the HDRP (the High Definition Render Pipeline), there are some presets here available for me to create specific types of shaders: decal, eye, fabric, hair, lit, etc. But in my case, I'm just gonna pick blank shader graph. And now I can give it a name down here. So, I'm gonna type my first shader and then we'll double click it to open it. And you can see there's a new tab here at the top called my first shader. And now I have the shader graph open and ready to start creating my shader. And so, this is the area of the graph where I can create nodes. And instead of a root node like in Unreal, we have what's called a master stack. Here you can see that right now I have the vertex shader inputs and the fragment shader inputs with no sockets to input things like I had in Unreal. So, in order to add new inputs here, there

are two options that I have. I can either press the space bar and click, and now it's going to let me add normal position or tangent to the vertex inputs, or it's going to allow me to add any of these options here for the fragment inputs. Let's say I pick base color, and now I have a base color input, and I can start wiring things in here. In Unity, you can see that my base color input socket comes with a default color already. If I click on this color, it'll instantly open a color picker where I can start picking the color that I want. You can see I can type in values here in a range of either 0 to 255 or 0 to 1, similar to Unreal. So let's say I want red. I'll just type a value of 100, and now I have red. But you can see that it's kind of grayed out like this. Well, why is it grayed out? There's one thing that you need to do before you can start using your material or your shader.

and that is I need to come here to the graph inspector and pick an active target. Right now it says the list is empty, which means I don't have a target. Now, a target is where I intend to use the shader. So if I come down here and hit this plus button, you can see that I have two available targets: one is Visual Effect and one is HDRP. Well, I want to use my shader in the High Definition Render Pipeline, so I'm going to pick HDRP as the target. And now you can see it's automatically added a bunch of input options for me. And instead of my graph being grayed out, now the colors are bright and it's ready to start being used. So now if I pick this red color here in my fragment shader and close it, you can see that my preview window now is red because my material is creating this red color. And if I pick another color like blue, you can see my preview is blue. And I can pick green, and there you go. So I have all kinds of different

color options. So, we've just created our first shader in both Unity and in Unreal, and now we're ready to jump in and create all kinds of new things. Well, we're going to do that next week. We're going to start out, and I'm going to explain some of the most basic math nodes that you can use in shader editors. We're going to talk about multiply and divide, and add and subtract. I hope you enjoyed the video and that you've got a new shader. Your homework, if you'd like to do it, is to start playing around with nodes. So, for example, in Unity, if I press the space bar now, you can see that I've got all of these nodes available, and you can add nodes to your graph and start wiring them into the master stack. And the same thing in Unreal. So, go ahead and do some experimenting with that. If you create something neat, I'd love to see it. If you want to post screenshots down in the comments, anyway, come back next week, and we'll start making shaders together.

Your First Shader - Shader Graph Basics - Episode 3

Shader creation and other game dev tips and tricks in Unity and Unreal. My opinions are my own and do not represent the positions of my employer.

Ben Cloward has been a game dev for over 20 years and has been creating shaders since 2003.  He was a co-creator of ShaderFX, a plugin (originally for 3ds Max) that allows artists to create real-time shaders using a node-based interface.  ShaderFX is now built in to Max and Maya as the main way that real-time shaders are created.  Ben was the original author of the Uber shader used in Maya's viewport. In 2007, Ben joined Bioware in Austin, Texas as a Cg Supervisor focused on graphics, performance, and shaders - on titles such as Star Wars The Old Republic, and Anthem.  Ben now works for Unity on the Shader Graph team.  Ben has given numerous talks at industry events such as Siggraph, and GDC.  He loves to share what he has learned.