How To Create Cel-Shading In Unreal Engine 4/5 (Tutorial)

hey guys and welcome back to another Unreal Engine 4 and 5 tutorial so in today's video what we'll be going over is creating a basic cell shading or cell shaded material as you can see on screen now so we're going to be creating a post-process material which will give us this cell shading effect like so so you can see that we have this robot here the one on the left has no cell shading applied to it the one on the right does the same with this Cube here the left has no cell shading the right does and you can see these walls as well again left none right it does and also some of these objects over here too so it's a bit of a subtle difference at the moment but that's probably just because of the lighting I've got set up and because I've not got a lot of cell shading in here it's a bit of a subtle difference but you can tell and so this is only going over and creating today so without further Ado let me delete this code and I'll show you how I've done it so the first thing we want to do is we want to actually create our cell shedding material so I'm going to hit control space to open up my content browser right click create a new material and I'm just going to Simply name this one cell shading matte like so opening it up straight away now in here before we do anything else we want to change two things in the details panel on the bottom left what we want to do is change the material domain from the surface to post process so we can actually use this as a post-processor material and that also only gives us access to the emissive color and then also if we search for post process what we want to do is change the blendable location from after tone mapping to before tone mapping and that will just give us a much nicer look for our cell shading you can try it with after if you want to but you will most likely not like how it looks and so once we've got that set up we can actually start doing some of the nodes for this so let's just go all the way up to the left to give us plenty of space and what we're going to do first is set up the lighting buffer so I'll explain more about that when I'm doing it so we're going to right click and get a scene texture like so and we're going to change the scene text ID to be post processing input 0. so we want the post process input of our scene texture then out of color what we're going to get is a desaturation as we don't need the color info for this it just needs to be grayscale so that's why we're desaturating it then we're going to select these and duplicate them so Ctrl C Ctrl V then we're going to change the scene texture ID from post process input to diffuse color again leaving in the desaturation then we're going to get the desaturation from the post-process input get a divide making sure that goes into a and then B is going to be the desaturation of our diffuse color scene texture so we're dividing those two like so then out of the Divide what we're going to do is get a clamp leaving the values as zero and one so this division is going to be clamped between 0 and 1. and then this is going to go into an if node because what we're going to do is compare this value here and what we're comparing it to is if we hold down one and left click we can get a scalar parameter setting that value to 0.5 connecting that into B so what we're doing here is basically getting the brightness and comparing that to the value of 0.5 so what we need to do now is get another scene texture changing this one to be diffuse color once again so we could have just duplicated that one but we've got diffuse color and then the color of this is going to go straight into a is greater than b so the one just beneath B and then we'll come out of color again and we're going to get a multiply and we're going to multiply it by 0.5 or you could alternatively get a divide and put in two we just want to halve it and this is going to go into a is less than b so what we're doing is if a is greater than 0.5 we're going to be using the normal color the full brightness and if it's going to be less than 0.5 we're going to be using half brightness so if I were to select these two here and hit C to comment it what I'm going to name this is a greater than b equals color at full brightness so the light areas of the map and then if a is less than B that will be the color at half brightness so the dark areas of the map let's just extend this out so we can actually read it and you'll notice this is what we've got here so I hope that makes sense as to what we're doing and why we're doing it and then this up here is like I said is going to be the lighting buffer so we're just calculating how bright each material in texture and object is so again I hope that makes sense then after this what we're going to do is we want to make sure that this is going to exclude the sky box so there's not really an easy way of doing that other than just getting the Skybox color and using it so what we're going to do is get another scene texture we're going to be using these a lot so scene texture like so this one is going to be seen depth this time out of color we're going to get a divide and we're going to be dividing this by 100 000 so we've got 100 000 there like so so it should be one e plus zero five out of this we're going to go to another desaturation as again we only need the grayscale values and this is now going to go into another if so we want to once again compare some values B is again going to be a scalar parameter so hold down one and left click and the value of this is going to be one without going into B there if a is greater than b we want to just do a post process input so we'll get a scene texture setting this to post-process input 0 with the color being a is greater than b and if a is less than b we want this to be the other if statement we just created down here with our lighting buffer so let me just move this a bit as well so it makes a bit more sense for me and again I hope that all makes sense as to what we're doing and why we're doing it so if I comment this this is going to be Skybox color like so let's move that up a little bit like this then that is the main part of it done all we need to do now is decide what we're going to apply the cell shading to so that's also pretty simple let's just move this out a little bit more to give us a bit more space what we're going to do is we need to again get some more Scene textures so right click and get scene texture like so this one is going to be scene depth that we just got earlier so scene depth then we'll duplicate this this one is going to be custom depth instead of scene depth so we get custom depth like so and then duplicate it one final time with this one being post process input zero so now we have these three scene textures here I've seen depth gonna come out of color and we want to get a mask component or a component mask sorry and we want to make sure only the r is ticked so that's only the red value then we're going to duplicate that connecting that into color of the custom depth keeping it as just the R value and then out of the top one we're going to go into an if so another if statement with a is obviously going to be the mask of our scene depth and B is going to be the mask of our custom depth then what we want to do is a is greater than b is the if statement from our Skybox color we just created here and a is less than b is just going to be the color of our post process input scene texture like so then the return of this if it's going to go into the emissive color of our cell shading material and that should be it fully set up all we need to do to create our material so let's hit apply and then we should see that this is now working so again I'll go over it very quickly we're just getting the lighting and seeing which needs to be at full brightness which needs to be at half brightness so we can differentiate between light and darker areas of the map then we're going to be getting the Skybox color so that isn't going to be affected by this and then this here let me comment this as well is is our depth compression which in Brackets again is only going to work for our render custom depth so I'll show you what that means in a second but that is how we're defining what uses the cell shading material so let's once again apply this and we can close this and actually get this to work so what we need to do is add in a post process volume into our level so go into the ad up here go to volumes and then get a post-process volume now if you've already got one that's great you can use it but I'm just creating a new one here then in this we want to search for post process and we've got post process materials we're going to add an array element choosing an asset reference and then we're going to choose our cell shading material we just created here now you notice this is this hasn't made a difference yet and that's because we only wanted to work on things we're telling it to work on so if I were to actually disable that so it's going to work on everything so if I just connect this straight into the emissive color we should notice that it's now going to be doing on everything although I might actually need to remove it from just here actually if I apply we can see that actually that's still not working and that's because one other thing that we need to do is also on this post process volume searchable infinite so we've got infinite descent Unbound take that and now it's going to work across the whole level not just what is inside the post process volume and again you'll notice we've now got this working perfectly we've got the post process volume on here but you know just again like the sky is black that's because we excluded this part of the code from it so this goes into emissive color instead we should notice that the sky is no longer black everything else has cell shading so you might want to leave it like this as everything has cell shading but if you want it to only be on certain objects so you can have a lot more customization and control over what has it we'll connect in all of the code and you'll notice nothing has cell shading so how do we now apply the cell shading onto these objects well if we were to select one for example this robot and we search for render custom depth we're going to take that and now we have cell shading applied to this robot if we do that for everything else we want as well for example this Cube or this wall or maybe the floor you'll notice cell shading is being applied to these objects so you can really see the difference between these two here like so so I think that'll be it for this video as we've done everything that we want to do what we've done is we've set up a basic cell shading material and managed to apply it to different objects if we wanted or we can have it applied to everything and we can exclude the sky or include the sky if we wanted as well so it's really very easy to customize and change around for what you want and you can also change from the values in the material we set up as well to again customize it for how you want it to look so thanks so much for watching this video I hope you enjoyed it and I hope you found it helpful and if you did make sure to like subscribe down below so thanks so much for watching and I'll see you in the next one okay [Music]

Channel: Matt Aspland

Views: 63,828

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, blender, unity, games design, ue5, unreal engine 5, unreal engine 5 tutorial, ue5 tutorial, cel shading, cel shader, cell shading, cell shader, cel, cell, shader, shading, zelda, botw, material, mat, post process, volume, skybox, black, color, colour, colors, colours, toon, tone, cartoon

Id: YwZH4jCO4ZM

Length: 11min 15sec (675 seconds)

Published: Mon Oct 17 2022