언리얼과 Unity에서 셰이더 생성하기

### 언리얼 엔진 5와 Unity에서 첫 셰이더 만들기
* 🎨 언리얼 엔진 5에서는 새 프로젝트를 생성할 때 **3인칭과 같은 템플릿**을 선택하여 미리 구성된 환경과 캐릭터로 시작할 수 있습니다. 또한 게임 로직을 **블루프린트와 C++ 중에서 선택**하고 **타겟 플랫폼과 퀄리티 프리셋**을 설정할 수 있습니다.
* 🔵 Unity에서 새 프로젝트를 생성할 때 셰이더를 사용하려면 **고해상도 렌더 파이프라인(HDRP) 또는 유니버설 파이프라인** 중 하나를 선택해야 합니다. **HDRP는 하이엔드 제품**을 위한 것이고, **유니버설 파이프라인은 멀티 플랫폼 확장성**을 위한 것입니다.
* 🔲 언리얼 엔진 5에서 새 머티리얼을 생성하려면 콘텐츠 브라우저에서 우클릭하고 **"머티리얼"을 선택**하거나 **"추가"를 클릭한 다음 "머티리얼"**을 클릭하면 됩니다. 언리얼 머티리얼 에디터는 노드를 사용하여 셰이더를 빌드하는 곳입니다.
* 🔶 언리얼 엔진 5의 머티리얼 에디터에서는 가운데에 노드가 배치된 머티리얼 그래프가 있습니다. 오른쪽의 루트 노드에는 **셰이더 결과가 연결되는 머티리얼 소켓**이 있습니다. 하단의 인스트럭션 수는 **셰이더의 복잡도를 추정**할 수 있습니다.
* 🔴 Unity의 셰이더 그래프에서는 마스터 스택에 노드를 추가하여 셰이더를 만듭니다. 셰이더를 사용하려면 **그래프 인스펙터에서 활성 타깃을 설정**해야 셰이더가 적용될 위치를 결정할 수 있습니다.
* 📏 가장 기본적인 셰이더는 **색상 노드를 추가**하고 이를 머티리얼의 기본 색상에 연결하는 것입니다. 숫자 값이나 색상 선택기를 사용하여 색상을 설정할 수 있습니다.
* 다음 주에는 곱하기, 나누기, 더하기, 빼기와 같은 기본적인 수학 노드에 대해 설명할 계획입니다. **셰이더 생성에 익숙해지려면 언리얼 엔진 5와 유니티에서 노드를 실험**해 보는 것이 좋습니다.

Unreal 또는 Unity에서 셰이더를 생성하려면 프로젝트를 선택하고, 새 머티리얼을 추가하고, 컬러 프로퍼티를 설정합니다.

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.

Ben Cloward

언리얼 5와 Unity에서 첫 셰이더 만들기: 단계별 가이드

Unreal 5에서 새 프로젝트를 시작할 때 원하는 게임 유형에 맞는 템플릿을 선택하고, 게임 로직을 블루프린트 또는 C++ 중에서 선택하고, 타겟 플랫폼과 퀄리티 프리셋을 결정할 수 있습니다.

Unity에서도 새 프로젝트를 만들 때 2D, 3D, 고해상도 RP 또는 유니버설 렌더 파이프라인 중 하나를 선택하는 등 비슷한 옵션이 있으며 셰이더 사용에 적합한 파이프라인을 선택해야 합니다.

Unity에서 셰이더를 사용하려면 고해상도 렌더 파이프라인 또는 유니버설 파이프라인 중 하나를 선택해야 하며, 다른 옵션에는 필요한 모듈이 모두 설치되어 있지 않을 수 있다는 점에 유의해야 합니다.

프로젝트가 설정되면 Unreal 5에서 다음 단계는 새 레벨을 생성하는 것으로, 이때 라이팅 및 사전 설정된 요소에 시간 옵션을 사용하는 것이 좋습니다.

언리얼 엔진의 콘텐츠 브라우저에는 머티리얼과 스타터 콘텐츠를 포함하여 생성된 모든 콘텐츠가 표시됩니다.

머티리얼 에디터는 사용자가 셰이더를 생성하고 편집할 수 있는 곳으로, 머티리얼 그래프가 중심 요소입니다.

통계 창의 인스트럭션 수는 셰이더의 복잡도를 나타내지만 실제 성능은 타깃 플랫폼의 게임에서 테스트해야 합니다.

3D 그래픽에서 뷰 조정 및 노드 추가하기

3D 그래픽 설정을 통해 시야, 보기 모드 및 배경 표시를 조정할 수 있습니다.

원통, 구, 평면 또는 정육면체 등 다양한 기본 요소를 선택할 수 있으며 사용자 지정 메쉬를 사용할 수 있는 옵션도 있습니다.

그래프에 새 노드를 추가하려면 색상과 같은 카테고리를 선택하고 상수 3 벡터를 선택하여 RGB 채널을 수동으로 조정하거나 색상 선택기를 사용하여 편리하게 조정할 수 있습니다.

언리얼과 Unity에서 다채로운 셰이더 만들기

언리얼 엔진에서 컬러 휠을 사용하면 머티리얼의 색조, 밝기, 채도를 선택할 수 있습니다.

이 프로세스에는 색상을 추가하고 베이스 컬러 노드에 연결한 다음 셰이더를 컴파일하여 최종 결과를 확인하는 과정이 포함됩니다.

Unity에서는 HDRP를 사용하여 빈 셰이더 그래프를 추가하고 이름을 지정한 다음 마스터 스택을 사용하여 입력을 추가하고 셰이더의 노드를 생성하는 방식으로 셰이더를 만들 수 있습니다.

Unity의 고해상도 렌더 파이프라인에서 셰이더 입력 사용

스페이스바를 눌러 버텍스 입력에 위치 또는 탄젠트를 추가하거나 다양한 옵션 중에서 프래그먼트 입력을 선택합니다.

Unity의 고해상도 렌더 파이프라인에서는 셰이더를 사용하기 전에 HDRP와 같은 활성 타깃을 선택해야만 머티리얼에서 색상을 조작하고 미리 볼 수 있습니다.

이 과정에는 컬러 피커를 열고 원하는 색상을 선택한 다음 이를 프래그먼트 셰이더에 연결하여 프리뷰 창에서 변경 사항을 확인하는 과정이 포함됩니다.

Unity와 언리얼에서 셰이더 생성하기: 수학 노드 살펴보기

다음 튜토리얼에서는 유니티와 언리얼에서 셰이더 생성을 위한 기본 수학 노드에 대해 다룹니다.

시청자 여러분은 숙제로 노드를 실험해 보시기 바랍니다.

다음 튜토리얼에서는 두 플랫폼에서의 셰이더 생성에 초점을 맞출 예정입니다.