Zelda Breath of The Wild Toon Shader Graph - Unity Tutorial

[Music] oh [Applause] [Music] [Applause] [Music] [Applause] oh [Music] hmm zelda breath of the wild is one of the best games ever created and the most memorable thing about it is its graphics and especially the tune shader they used in the game so in today's video i'll show you step by step how to create that shader graph in unity engine this is ramis altapa from binary lunar and let's get started the shader graph i will show you is built using an article published by royston so i give all the credits to him so in today's video we will not only learn how to create shadow graph but also how to convert a coded shader into nodes so one of the first things that related to zelda's shader is the following three main aspects which are two-tone shading a rim lighting and a specular reflection so let's start by creating a new unity project and let's name it zelda's toon shader graph and make sure to select the universal render pipeline template to start with it once the default scene is loaded let's bring the 3d model which we'll be using in this project princess zelda and i found that 3d model in the sketchfab website which is a great source to get 3d models so in order to properly import their assets you need their plugin for unity so i'll provide the link in this description it's called sketchfab plugin for unity so download that then go to assets import package and select that imported sketchfab unity plugin now you'll find a new window called sketchfab click on it then browse sketchfab and select the 3d model you want to import from there i imported the princess zelda when you import the 3d model you'll notice that it's totally pink and that's because the materials are not upgraded to work with the universal render pipeline so go to edit render pipeline and upgrade the materials to fit the universal render pipeline let's remove the example assets and reposition the camera and resize the 3d model to be in the middle of the screen but i didn't like the fog here so let's go to window rendering lighting and disable the fog from there now let's go to the materials of the zelda model and change the shader for all its materials to universal render pipeline outlet because we will use only shader graph and we will configure the lightning in a special way let's create our shader graph now right click create shader unlit graph and let's name it zelda's toon shader for this shader graph we need the data that give us the information about the directional light in the scene and for that we will create a custom node that has a chunk of code which give us the information about the directional light its color its direction and more properties let's see how to get it so let's create custom function node and for that we'll use a code provided by unity themselves to access the directional light in the scene i provided the link to download the custom light down in the description once you downloaded the custom lighting script add it to the source in the custom function and it it will auto detect the script inside it now we need to set the input and output of the custom function and make sure to copy exactly the same names of the parameters for the outputs which are the direction color distance attenuation and chatu attenuation and for the input we just need a vector3 called world position if you entered everything correctly you'll see the custom node colored with yellow and to expose the parameters just hit the arrow on the top right of the node put we need just a position node which represents the position of each vertices in the 3d model so the first step is to calculate the amount of light received by the surface from the main directional light the amount of light is proportional to the direction or normal of the surface with respect to the light direction to calculate that easily we will use the dot product node which will return the value 1 which means the maximum lightning when both the light direction and the normal of the vertices in the same direction or parallel we can say and we get 0 value which means darkness or shadow area when the two normals or two vectors are perpendicular so back to our shader we need a normal vector node which represents the direction of each verticy of the 3d model and we normalize that to get the direction not the value of it then as we explained we use a dot product node to calculate the amount of light received for each point based on the direction of the light and the normal to distinguish this value we can group all those three nodes and name them n dot l which means normal dot product light direction as named in the article we are following then if we link the n.l to the color in the master node we will start seeing the shading applied to the 3d model but first we need to tell the materials to use the new shader we created to go to zelda's model materials and change the shader to the zelda tune shader we just created you see now we can get shaded models based on the light direction without the textures because we need now to add sample texture 2d node and also create texture 2d property and make sure to set the reference underscore main text so it auto detects the texture on each game object or each part of the model then using the sample texture 2d link the texture 2d to it then multiply the n dot l with the value of the sample texture 2d to get the textures from the materials and as you can see now we only reached a normal shading to any 3d model but to get the tune effect we need to create distinct two areas of shading without any gradual transition between them and to reach that we need a smooth step node which eliminates the fading between bright and dark so create smooth step node then set the value of both h1 and h2 to 0.001 now we can see two shades but the dark area is totally black so we need to color that using a main color and ambient color and for the ambient color make sure to set the mode to hdr the smooth step node represents the light intensity so let's label it as light intensity then we need to multiply the color of the directional light with this light intensity the ambient light represents the light that bounces off the surfaces of the object in the area and is scattered in the atmosphere so we will model that as a light that affect all the surfaces equally and is additive to the main directional light so we need to add the ambient light using an add node to the results from the last multiply node then we multiply that with the main color make sure to choose the pure white color for the main color and for the ambient color choose a darker grade of the white color so we can notice the difference in the scene now we can multiply the main color with the additive ambient light then we link the results to the multiply with the texture 2d hit save and now in the scene we come to nicely two shaded areas one light and one dark as in the zelda's toon shader next step is creating the specular reflection which is a distant reflections made by the light source this reflection is view dependent in that it is affected by the angles that the surface is viewed at and for that we need a view direction node also the specular reflection have two properties the specular color and the glossiness so let's add those two properties in the shadow graph the specular color retains the reflection and the glossiness controls the size of the reflection the strength of the specular reflection is defined by the dot product between the normal of the surface and the half vector and what is the half vector it's the vector between the viewing direction and the light source and we can obtain that by summing those two vectors and then normalize the results so let's calculate the half vector by adding the view direction to the direction of the light then normalizing the results then we calculate the strength of the specular light by getting the dot product between the n dot l and the half vector and to control the specular intensity we need to power up the glossiness with the value of multiplying the n dot edge value with the light intensity now we can see the specular reflection but it is too smooth and to make it sharp we need a smooth step node and set the edge 1 value between 0.005 and the edge to 0.01 then simply to control the specular reflection color we multiply the results with a specular color node since i made a mistake that shows the specular reflection in the middle of the game object instead of the top right and that's because i forgot to normalize the view direction to keep things organized let's group all the nodes related to the spectral reflection into specular light group and finally we need to add the specular light to the ambient color before multiplying them with the main color save and now you can start seeing the specular reflection on the model we have you can control the glossiness and can also increase how vivid is the specular light by increasing the intensity in the color settings now we reach the final step which is creating the rim lighting i found that rim lighting can be created using the front cell node the rim lighting will need two properties the first one is the rim color and the second one is the rim amount for the rim color set it to white and the mode to hdr and while for the rim amount make it a vector 1 and a slider between 0 and 1 and set the value to 0.7 then we can create the rim intensity by using smooth step and setting the edge 1 and jet edge 2 using the rim amount after adding and deducting 0.01 from it so for h1 we add to the rim amount 0.01 for h2 we subtract from the rim amount 0.01 and of course the input will be the front cell effect since i flipped the values so let me just switch between adding and subtracting but now we have two issues the rim is on in the all directions and also we need to control the intensity or the amount of the rim so to solve that we need to multiply the friend cell amount with the value of the light direction after powering up the n.l with a new parameter called rim threshold which is a slider between 0 and 1 and the default value is 0.1 and now we can see the rim in the right direction toward the light after that we can simply color the rim light by multiplying the results with the ring color let's keep things organized and clean by grouping all the nodes related to the rim light and finally we add the rim light to the results of adding the specular reflection to the ambient light then we multiply the results with the main color and now we can change the rim amount the rims threshold and the rim color from the inspector but now we have one final issue if we created another game object it doesn't cast shadows on the game objects that have the zelda's toon shader as you can see there is no shadow from the cylinder on the character but the cylinder can receive the shadow from the character so let's fix this let's go back to the shader graph and in the custom node let's change its precision from inherit to half then we simply need to multiply this is the shadow attenuation with the n dot l then link it to the light intensity and voila now the game object can receive the shadow from any other game objects and acts normally in the 3d world and that's it for today's video we created the amazing zelda's toon shader graph that can be applied to any other game objects immediately simply drag any ready 3d model and change the shader on the materials to the new shader we created and you'll get the same amazing results on any other game objects and of course you can control all the perimeter you have created you can change the main color you can change the ambient color you can change the specular color you can adjust the glossiness you can change the rim color you can adjust the rim amount and threshold i hope you enjoyed watching this video special thanks to our supporters on patreon sergey [Music] g lee fever jesse weaver pedro jones valentine rick chabowski and jack crystal don't forget to join our discord channel and of course you can download this project and all other projects we have worked on if you become a patreon till next video see you soon [Music] hmm

Channel: Binary Lunar

Views: 55,137

Keywords: unity3d, gamedev, videogame, developer, tutorial, vfx, vfxfriday, shader, transition, toon, zelda, zelda botw, the legend of zelda breath of the wild, toon shader, unity tutorial, unity, unity3d tutorial, binary lunar, unity shader graph tutorial 2020, zelda shader unity, Zelda Breath of The Wild Toon Shader Graph, unity toon shader graph, unity toon shader tutorial

Id: Frx8FNkt9HU

Length: 17min 59sec (1079 seconds)

Published: Sat Nov 28 2020