Advanced Cel-Shader in UE4 & UE5 [Prismati-Cel Part 1]

[Music] today i'm gonna learn you how to make a cell shader this is going to be a global cell shader so it's going to be a post-process material and basically what it's going to do bam instantly much better there's no point making something if you don't understand how it works so i'm gonna take you through how it's set up we're gonna we're gonna go through it together and hopefully by learning how to build it you understand how to take it apart and you know if you want to and you know start to suit your game then if you wanna then uh then you'll be able to so what is a cell shader what does it do what does it look like so you can see here it's night time when i've got the effect disabled uh this light source just has a smooth gradient from white down to black you know this looks nice okay cool but when you have the cell shader applied it breaks up all those luminosity values into distinct bands um so this is how you get that sort of effect that all of the character models in breath of the wild use or gentian impact or basically any sort of anime inspired game will use a cell shader for their characters so the first thing we're going to do is in our content browser we are going to right click we are going to click material we are going to have a new material mine's called tutorial cell shader and we are going to open that up first first thing we'll do is down here and get my dumb head out of the way where it says material domain we're going to click on that and instead of surface we're going to click post process bam let's grab scene texture and just for now we'll grab the diffuse color all right back to our main screen you'll notice nothing is different and that is because we need to go over here to our components panel uh mine's off screen sorry and we're going to search in that vol u and go to post process volume and we're going to drag and drop that into our scene looks like this here little cube very cool right first thing we're going to do is click on it we're going to go to our details panel we are going to search bound and where it says infinite extent and then in brackets unbound we're going to click that bam right so our bounds is infinite and down here and right click that and we're going to create a material instance and i'm just going to keep my name the same thing with inst at the end and then in our post process volume click it search the details we're going to search matt mit we're going to find post process materials and we're going to click this plus sign then in this drop down we're going to click asset reference and then in this drop down we are going to find material instance of our cell shader bam something changed this looks different this is the diffuse color channel and only the diffuse color channel so a good thing to do a good a good word of advice something that really helped me is click this and just explore what all of these different scene textures do for example we just saw a diffuse color post process input zero if i save our process and go back to our bingo you'll see that this is exactly what we had before this is just the finished render of our of our scene this will really come in handy later on when we run into some issues that some cell shaders that i've seen on youtube run into quick thing we're gonna do before we start is we're gonna scroll all the way down to the bottom and up a tiny bit and where it says blendable location we are going to set that to before tone mapping all right everything is set up and now we are ready to begin building our cell shader material first thing we're going to do is we're going to grab our post process input 0 and we're going to duplicate that and this one will be our diffuse color now with both of them we are going to desaturate the saturation node and then we are going to divide this by this and we'll plug that in and take a little look at it what this is is our true luminosity value of the scene bits that are in sunlight are bright and bits that are in the darkness are dark so this is the basis for our entire cell shading effect right so what we're going to do with this lighting value is we're going to pop this up say here and we are going to use an if node now if you're not familiar with what an if node is really it's just a node that is asking a question and that question is if a is greater than b do this and if a is less than b do this so the question we want to ask this node is if a our extracted lighting value is greater than b a arbitrary threshold let's just go one for now then we want to do something so if a is greater than b what we're going to do because this is our top layer of our cell shader this is our white layer um we are just going to set this to another scalar value and it's it's going to be five which is like super duper white like one is regular white five is like blindingly white cool and then if a is less than b what we're going to want to do is to grab another diffuse color and we're going to multiply that by a tint value so we'll grab another scalar value shortcut for scalar value is hold down one on your keyboard and click i'm gonna plug that in this one will times it by four what we're going to want to do is parameterize this one this will be called our white threshold and this one down here will be called our white tint this is good we are going to copy this and we are going to paste it down here now this one is going to be called our highlight threshold and this one will be called our highlight tint very good now the trick here is if a is greater than b we don't want it to be blinding white if it's greater than b we want it to be this one so we're going to get this we're going to plug it down there and then in the a channel we're going to plug in our lighting value so what we're going to do next same thing we're going to grab that we're going to plug this one into the a is greater than b plug in our lighting value into the a i'm going to rename this our neutral neutral and this will be our neutral tint cool all right i'm just gonna repeat this a few times you you get the gist but i'm gonna do this a few more times and then tidy it up a little so mine has eight layers you might only want three you might want 256. that was a joke i'll put all my values up on the screen if you just want to copy them if you're following along [Music] we've hooked all of them up with that same method so the output of the one above goes into the a is greater than b of the one below it and then we are going to pop this out into our emissive color save so as you can see yeah you know this is sort of the look that we're that we're going for but there is a problem and this is a problem that every cell shading tutorial that i've seen runs into the issue of as soon as you put a colored light in the scene pump up its intensity and i'm gonna change its color to red and you watch what happens see that white red so you'll soon find out that nothing happens colored lights do not exist according to the diffuse color channel my work around for this we're going to get our post process input 0 which is our finished render you know lights and all if i just plug this in for example hit save and go back to our scene so this is it you know in normal rendering mode and you can see that color light works and it's it's beautiful so what we're going to do with this is we are going to normalize it and after we normalize it just from trial and error i found that multiplying it by 1.5 is quite beneficial just take my word for it so it takes our scene and it basically condenses it down into a really flat looking image this is just color this is just the color of our scene and you can see that this colored light here is still working so we jump back into our material [Music] this whole cell shader that we built just before we are going to destroy it by desaturating it so this will leave us with just a black and white image like this it's still cell shaded it's just black and white so we are going to multiply our the saturated cell shader thing by this sort of extracted color we're gonna inject it into the the original image and then chuck that into the emissive color and all of a sudden we've got our cell shaded look back but what this what this it's a colored light any color will do this is very good news and the other thing is uh we've got our we've got our skybox back you might be wondering why does your scene look terrible compared to this and that would be because if we go into the material instance of our material our cell shader if i grab the neutral threshold and play around with it a bit you'll see that boots are getting brighter and darker see this kind of line in this bush or this line that sort of divides the bush in half you use these sliders to determine you know where this line kind of falls um a lot of it is sort of balancing it afterwards uh so you know you can up the subsurface intensity of you know your materials um but yeah it's it's just about finding what looks good for your project so all in all that's basically it now there are a few little add-ons few little bonus tips back in our material if we want something to not be cell shaded we're going to grab our scene texture we're going to get our scene depth we're going to copy that paste it and then we're going to grab our custom depth and what we're gonna do is grab another if node and right i it up uh first we need to mask these these two values here and we're just going to mask a single channel because they have to be a scalar value they have to be a single numerical value so right that's all fixed up cool now we hop back in the game this might be what you want you might want a regular scene but then you want your characters to be cell shaded um so if you want something to be cell shaded you're going to go into its details you're going to search cust render custom depth pass [Music] right there you can see that so i click that and all of a sudden our single object is cell shaded good evening ladies and gentlemen this is charlie from the future and the cat is on my keyboard um uh just to clarify this is how it should be set up um this is one of the configurations so that the two configurations are you have everything cell shaded by default and you enable the custom depth pass to uncell shade it um this might be it i'm i'm not sure and then if you want the inverse of whatever that one was you set it up like this so you want to be switching at these values instead of these values these ones should always stay like this so um so back to the uh the video well that's so meta right another little bonus we can get our ambient occlusion channel and multiply it by our end product go back to our scene and let's look at this stump if we go to our post process volume again and search ambient then we can see we can add ambient occlusion and all of its other by-products um so you know this this might be a look that you're going for i personally like the super flat look but you know this this looks nice too you can go super overboard with it so you can see the effect a bit more uh it can look really really nice on geometry like yeah like this house for example and really bring some gradients back into the into the scene while still maintaining that cel-shaded look um and it can you know give a lot of depth to the the trees and stuff taking the color from post process input zero and injecting that into our desaturated layer sort of gets around a lot of the issues so we can have like glass and even like metallic and reflective objects will work with this method you want to apply this at the very start of your project because every single decision that you make will revolve around this post-processing method i believe that's everything i believe that's the entire thing covered from start to finish i guess i will find out when i start to edit this video um so yeah i hope you enjoyed that i hope you found it useful um i guess with that i say goodbye goodbye [Music] [Applause] [Music] you

Channel: PrismaticaDev

Views: 151,207

Keywords: cel shader, celshader, cel-shader, unreal engine, ue4 cel shader, ue4 celshader, ue4 cel-shader, ue4 toon shader, ue4 toon shader tutorial, ue4 cel shader post process, unreal engine cel shader, ue4 anime shader, ue4 anime material, ue4 cel-shader white spots, ue4 cel-shader broken, ue4 cel shader metallic, ue4 cel shader broken, ue4 cel-shader metallic, ue4 cel shader coloured lights, ue4 cel shading, ue5 cel shading, ue5, ue5 toon shader, ue5 stylized, ue4 stylized

Id: RkFwe7JI8R8

Length: 18min 4sec (1084 seconds)

Published: Sat Dec 12 2020