Unity Toon shader in Shader Graph with multiple lights!

hi we're cinetic I'm Chris sir and I'm Claire I know this channel we talk about game development and we're sharing our journey as we go along and today we're talking about the tutorial lately Krista has been making a cool neat little tune trader which we're going to be sharing with you today a month I've been spending a bit too much time on it know this happened have you been playing too much Beth of the world it has such beautiful shaders yeah it does one of our favorite things in breath of the wild is when the character is standing next to the torch you can see the flickering on the character itself under light kind of wraps around the character so this trader is trying to capture a lot of those features the shaded the Krista has been working on sports actually a multiple light sources allows adjustable shading bands it also has a beautiful gloss and for nail control and it's unlit so it doesn't receive direct shadows but can still fake being in the shadow the set up is obviously very character centric so the action happens on the character and this setup is probably not very ideal for toon shade in an entire world but utilizes a bit of a similar system to zelda breath wall once you jump to a specific part in this video it dangerous time stamps in the description cuz we be an efficient and making time stamps up it everything for this project up on github so if you see any mistakes or improvements we made to the set up please for kit make pull request open issues so he make this epic when I started working on this tutorial had no clue how big an undertaking is going to be I've been refining and remaking this toon shader over and over again but I think is so it was probably good the first time around yeah it's better now even better time to look at the final material of the shader it looks quite daunting at first glance but our promise is not that bad I try to make it easy but you know it's been tried and tested on me so mm-hmm the first two here are the usual color and texture that most materials have the third one is quite interesting is the shade ingredient which decides for many bands between shade is gonna have and how light goes across it and also how it falls over distance we'll get back to this it's pretty awesome we've even made a gradient library to use with it the next two is controlling the glossiness size and intensity we're just quite straightforward the next three are the frenetic control where you can choose how far the light wraps around the object when it's backlit so crane this beautiful rim light effect from any light source finally we have a huge set of light inputs up to six lights and three inputs per light a direction color and attenuation but Krister I see only two inputs well for the color we have RGB a and we only actually need the RGB so we're using the Alpha Tunnel to store the light attenuation value and attend you what do I hear you say we'll go to our 10 uation in a little bit but yeah it's two inputs per lights but we have a third hidden input been passed in with a core alpha everything but the lighting data is user configurable drag the sliders and have fun to get the lights and data populated this setup uses a little tune helper script on the character to set all this light and data on the material itself this script will look at all the lights in the scene break has to see if the light is in sight figure out the light direction color and the attenuation as we mentioned in light attenuation basically that is how light intensity decreases or distance as you get close to the light source the attenuation value is close to one and a third away from the light so TR it goes towards zero quite straight forward I hear you say but not so fast it's not a linear fall-off the calculation is a so-called inverse square law yeah more about that on Wikipedia more about that on BPM so we use the light attenuation value to figure out how dim the light is at the distance that's pretty much all there is to this shader but just keep in mind that each character needs its own material now if you're here for the Trucy parts of the video let's speed up a new unity project I'm rolling with you DRP Universal render pipeline previously known as the LV RP the lightweight run the pipeline using unity 2020 alpha but it is also tested and fully works in unity 2019 that's where I first built it so yeah we're setting up a new project with that once unity is finished loading here we just clean the scene up a little bit deleting was unnecessary and just keeping the bare minimum and we will get started on building the shader I'm gonna be bringing in old assets we are using for this tutorial and put it in our turn shader folder in here we got our gradients our susan model and our tune helper script now let's start by pulling Susan interworld or Heiner season a little blender monkey I will not be building the c-sharp to help script in this tutorial OS you'll be here a whole thing and but in simple terms this script points the directions of all the lights in the scene and they're our colors and our distances and just puts that information into this material so the shader can use it the first thing we need to do to get going is to draw on our tune helper now you see this script air it takes a material and there's some older settings there we're not gonna worry about all fruits for now but we're gonna give it a material and we gonna make a new one so I'm gonna right click here and create first the shader gonna be an unlit graph now I right-click the shader and create material and I'm gonna name the material after the monkey this is because you need to have one material per character and I'm gonna throw this material on Susan and tada we have a very flat monkey now we also need to remember to put this material onto our toon helper that's actually the more important part now open up our toon shader we have the blackboard and the main preview I'm gonna turn the preview off because we actually want to look into the scene and see the property I'm gonna give ourselves some more space to work in so we don't get too crammed out and we want to have these side by side so we can see bit better what we're actually working on now let's start off with the interesting part of the shader right away oh but we're gonna need a vector tree we can call this light one direction I'm gonna make a color the lights one color and is very important we want to name these l1 underscore direction and for l1 underscore color because our tuna helper will be populating information into these parameters and it's also important with keep them exposed so always when unity Sarge patching materials it will bleed the information between the traders if you have multiple objects running around so keep them as is now let's hit save on that so I'll have a little look at what we got here we have the direction which is a vector three and that tells you which point the light comes from in the scene onto this Pacific mesh and we also have the color which is a representation of how bright and what color that light is in this location for now I'll close the black borders we have some more space to work with and we can include a normal vector of the model if you now do the dot product between these now it doesn't matter which order you plot these and put this inter color we will see we no longer have a flat monkey it's important to note here that the values which are bright they're pointing towards the light source and the very special dark are pointing away well actually they go below black was what is 1 this is 0 and here it goes into -1 where it points away from the light source so you have the whole specter of information all around here it doesn't stop where it turns black it says we can't see blacker than black the way it's going to set up to explain the dot product and very quickly it's a function which takes two vectors and as output is a value between minus 1 what if the vectors point in the same direction the value is 1 and if they're pointing 180 degrees away from each other the violet is minus 1 we're at 90 degrees apart they would be zero if you want a more in-depth description about dot products be sure to check out free Horner's video on it so given ourself a little bit more space so we gonna be building more stuff now if we open a blackboard we and add in texture 2d shading radiant can give it a default of gradient e too but we also need to remember let me save this now to also put the texture on to here otherwise we gonna knock PC and anything the defaults on always okay so let's have a look at what this actually looks like we will take a texture sampler and we will hook this thread into the core we enclose a block or and hit save and there we go now we can just basically see that we have applied this texture straight to the monkey face and it looks very strange freaky monkey but that's not what we want here really we want to use the UVs of the texture area to specify where the light is and isn't where we're gonna have the x-axis which is 0 to 1 in this direction would represent how much we point towards light using the dot product the y-axis we will use us the distance from the light with a light attenuation to get our working we're gonna take of mega ohm movies vector 2 I'm going to set the y UV 2.25 for now so we are somewhere up in a sector and the x-axis we want to Rema of the dot product so we hit this end input you know the dust particles from minus 1 to 1 and the UV space goes from 0 to 1 so this is looking quite good but you want to make one minor adjustment here you just move up a little bit by 0.1 and 0.99 as you v's wrap around you'll get some weird artifacts going on unless you clamp it in just a little bit and there we go we now basically have the first fruits of our labor if we grab the directional light we can see that if we turn around it update this is obviously because we're feeding in light data into the shader now there's one more thing we want to do under the hook up the light attenuation and we from the light color have the Alpha Tau which is not being used so we're gonna split this out and this tune helper gives us the lights RGB values but it the alpha value is the attenuation so we the attenuation values straight up into the y and this will then be the distance from the light where it moves up and down this gradient face at the rear view is based we're working with here looks a bit like this where the X Valley is the surface direction towards light and the Y value is the character's distance from the light moving the white area towards the left the light will wrap more around the mesh how slanted grain it is will change this effect depending on the distance from the left this way we can written really interesting effects with how the light behaves by changing the input gradient for example you can even experiment with different colors or gradients or distance for directional lights that innovation value is always at one return directional light off and instead create a point light with a point light we can see that if we're more far away the shading on the monkey gets smaller and as you move closer it completely envelops him and this is because we have a slanting on my gradient where it moves from more light and less light so the distance will actually affect how much of the mesh is being covered but as you can see when we move this far away this is not quite working yet also the moment we'd not care much about the lights color so whatever we set this to it doesn't have an effect so let's get that part working shall we let's go with pink monkey now let's tidy up our graph a little bit can take all these nodes and press ctrl-g and call it shape so this will be the basis of our shading next we want to add in the lights color and ambient lighting etc so we can take the light pole node from our blackboard and we can multiply it with the output of this and then we should be able to now see the color right I turned completely backless red increased intensity of our light with EES there we are we now have a pink monkey that it's working for clear looks me like Susan is ready to go to the party that study is a bit next we should have in some texture and ambient like most actual house so let's go with color if you just gonna call color and it can be defaulted to white then also to create text Treaty which we risk on a voltage duty I'm gonna move this to the top they don't need any more special setup than that so here we have the color and texture will do the same here sample detector closes up and we will want to multiply the color with the texture is a very common way of setting things up multiply these two again in with the output if we turned the the light back to more normal color we can now set color and texture on the material which is very common so you can you know make a red monkey without having a red light which is a normal approach and you can also of course apply a texture to a monkey I'm not going to use these two for now but they are here and we're gonna wrap them up and call them texture and we made some more space here for some ambient so we see that it's completely black here we want to race that a little bit to the natural color of the world so we're gonna add the ambient onto the end here and plug that back into it or this will be our final step if it's a now we will see that the blacks are no longer completely black we have a little bit of gray or whichever the ambient color you have chosen for your scene which you can't configure in the lighting tab and how that works you might also want to use the lake to GI node instead of the ambient or combine them together but in this scenario I think that gets a bit extreme it depends really how the scene is set up which this is relevant for you to use but I'm gonna just go with the basic yeah ambien note here so at this point this is watershed it looks like you can basically use it like this it only supports one light we'll be doing that at the very end on adding more light support and we're basically just maxing this section together or and over but before that we're gonna be making a for now and a gloss effect present-day Krister whoa to pass Krister yes stop right there yeah I also enjoyed this tutorial yeah I know I know I know you might have been enjoying this tutorial but I mean this last nine minutes mm-hmm yeah yeah that was like an hours of footage you have a very good point clock also I think the most important aspect of this Raider has already been covered and that is kind of how we're using this shade ingredient to both influence the distance from the light with the light attenuation and how we can use multiple shading guns you've got the most important part oh yeah thank you for watching we hope you found this interesting or valuable and maybe you'll go over me Cassell delight tune traitor for yourself we were considering to use this trader in mr. pips talking about mr. Phipps they'll be coming out to devlog in about two weeks time and has been lots of action we even had a mosh pit going on on the stream a little while ago and yeah we see how that's going yeah plenty of blueberries walking out yes now remember to hit that like and subscribe smash it if you like and if you have any feedback or comments let us know in down below and we will have a look and maybe you have some good ideas on how we can make this better if so remember everything is open on github and you're welcome to fork it if you like hope you guys all have an amazing week and until then bye bye [Music]

Channel: Snuti HQ

Views: 73,998

Keywords: toon shader, cell shader, cell, toon, zelda, botw, cell shading, toon shading, gamedev, game dev, indie game dev, indie game, Snuti, norway, story game, entreprenur, game development, gaming, Unity, Unity 3d, Husband and wife team, vlog, game development journey, game dev journey, developer, pair programing, game art, game play, game mechanics, game feel, indie gaming, games, making games, coding, making of, gamejam, game jam, unity tutorial, shader graph, shader graph tutorial

Id: g8eBXCgWwrk

Length: 15min 34sec (934 seconds)

Published: Mon Nov 25 2019