UE4 Tutorial: Toon Shader (Borderlands/Jet Set Radio)

now this is cool today we're gonna be making a toon shader we're gonna go through the outline and the soul shading model because who doesn't love a toon shader you know I love all of that I love the style I love the feel all of the way it makes models look so uh let's get into it well you're not going to need any prerequisites but you down in the in the description below you'll find a download link where you can pick up a model and some textures that I've made I've made myself in this case it is a rather cool-looking Tunis biplane and we've got some materials here that we can play with so we're just right clicking on one of them we'll go create material that's all you to do so far and we'll open that up now we'll need a constant to put into roughness we'll set that to 1 because we don't want any shine at all and we'll also grab our normal map [Music] or is it by plane by plane in both of these are going to need to be parameters because will be instancing instancing this material for each each component of the pipeline this is all just setup will just bust through this really really quickly so that we can get into making a cartoon shader we'll also need to control the power of our normal map we'll just grab a solid blue and we will lap did here interpolate these together and I'll just make a parameter here called normal tower and use that as my offer now go in normal sword hit save there we go and we're just instanc that oh I didn't want to do behead delete we want to instance want to change these two wing textures and the normal now we'll open up a biplane again and drop these in ah playing wing and the regular biplane they're looking good so save their a floppy mint ever seen very nice now I just have a way to see the to see our material as it comes to life and get a good look at how its house went to effect a model with the texture on it but if you don't have this texture or this model or or any of your own that's okay you can use one of the ones in the engine if you're using the third person model find the mannequin folder open up animations and just drag in the the idle animation that way that way you'll be able to see when when the materials are done so that's all I really need to get started and transition over to working on the outline which I think I'll use a LSU's a classical music transition nice that was nice okay let's get into it so first of all jump over to this link I'll put it in the description to a video on the Epic Games YouTube channel where they go through so shading in their own way I'm going to be using their outline material or at least the pace of it as a starting off point but what I'm gonna do going forward so if you want to do yourself a favor check out that video and it will get to you about about this far so once you get to about the 40 45 minute mark I head back over to this video and we'll what we'll get going so without with our material here you should have some of the looks a bit like this just make a new making your scalar parameter this one is our up contact boundary line thickness control well I think the outlines are I think the outlines are going to appear and we'll need these four guys drag them out for some space need another multiplier so just put just put here like that we'll take this number and we'll floor it and also set a default just one from that floor we'll multiply our vector and hook it up to the network yeah this is this is the exciting part because this is really where the magic happens all right so much you got we're gonna do something similar to our normal Airlines and I think the fastest way to do this is if I just simply delete all that and grab all this just duplicate it just hook it all up like above easy enough and that's done well this because it's our normal lines so we call it the normal line thickness done ok that's finished now next as you can probably see here our material is affecting the sky like it's bringing up all these lines in the in the sky sphere we don't really want that and well before you guys start which gonna make sure yeah make sure to set the blendable location took before tone mapping so you don't get that weird flicker that this kind of material tends to produce so we're gonna mask out the skybox here so we're not seeing these is checkerboard pattern in the sky using a distance mask so this effect will only be applied to things that are that are close that are closer than in the distance that we set so it grab yourself a scene texture node I will send the color through a divide the second value Val divide this is go constant here we'll set it to 10,000 good good we'll take that put it through a desaturation so we just get the black and white the zero to one data and the end of this into an if node if nodes can be fairly intimidating but there's really nothing much to it just send in an a value of B value and then you can perform calculations based on whether a is greater than B a is less than B or a is equal to B next we got to yeah we'll duplicate our texture I've seen texture and we need a component mask and just to mask out the alpha the Alfa mashed-up will just plug in the result of this component mask into a s greater and the a is equal to and will do nothing when it's oh that's where we feed in this lip so we'll fit the lip into a is less than B and plug that into the emissive color and that is how you mask out the skybox but really it's a distance mask but we're going to use it to mask out the skybox and that uh that finishes that chunk next we'll be putting in another mask to to mask out things that have custom depth because really when the effect be applied on certain objects but necessarily want it to be applied to the entire scene if you do just want to use want to use this effect for the whole scene then you can skip this next step oh wait a sec when I'm done here with the sky so the so we have a post process input zero here we need this one to be a scene depth scene def can't forget to set them properly so we'll grab another scene depth and duplicate twice because we do mask the scene depth from the custom depth and obviously use our post input process input zero as the control will need another if and some more masks myself some space here so color goes into this mask and we just want to mask the green Channel and that goes into a get another mosque just the green to mosque custom death and that is our B then if a is less than B we'll get this mask again just masking out the alpha just like before this one is if our a is less than B if a is greater than B then we use our then we use our material and that goes into the emissive and that's it so we've tweaked our Twitter materials so that we can use an instance for the thickness values we've masked out the sky with with this piece of piece of code and we're masking our custom depth objects with this piece of code so we're well on the way that's that's the entirety of our outline materials so go back to the editor find your post process volume and we're going to set materials so post process materials add an entry to this array needs to be an asset reference and if we go back to back to our material we'll make an instance instance which will drop in objects with custom depth and I think upset a few of them here too custom death can enable just by searching for custom depth in the in the details tab and yeah up set custom depth on to a few of these objects so we turn it on for the biplane and we'll turn it on for our guy here and we got we've got outlines cranking not this instance and we can just these values thickness values to multiply those vectors at the start of the start of our material we can get some really striking outlines that way said to keep aside the one for now and obviously we can mark about with these values you know to create to create the effect that we want so that's it for the sit for the outline we'll move on to the Associated and I think for this I'll use a dubstep transition [Music] well that was extremely intense anyway let's continue on so we'll take our outline outline material and just duplicate it this is going to be our cell shading and we'll get our cell shading happening so with that duplicated we'll open it up and we're gonna need to well first of all delete all of this we don't need our outlines so that can all go and there's also just a little bit of tweaking we need to do on our depth mask and our skylight like you can see here you know things aren't carefully properly this cuz there's nothing in this a less than B but we'll fix that in a sec for one thing we're not gonna need this mask so we can just plug our color straight into these two not gonna need this mask which can go straight but it away less than B so don't worry about these errors for the time being because we'll just we'll just get to it and it'll fix once it's once it's all with us all built all right so grab will need two of these two of these st. extra nodes a post process input 0 which I put at the top and a diffuse color so we want just the colors feed this into ad saturation will need two of these this is just to extract the lighting information from the scene as a yeah as a zero to one value so extracting the lighting so that we can play with it in our if node it's what is dividing the diffuse color by the post process input clamp it from zero to one and this will be our a value of our if node so this extracts the lighting from our scene texture now we'll get a Scylla this is a shade depth and it's going to be 0.5 and set in I'll be value so let's make the actual Associated so duplicate these two again we'll need to fuse color and post process input zero and we'll need another scalar this one to control our tint amount and we'll just rename it light tint amount said that one to zero to what set it to 1 and that will go straight into a multiply node which will multiply by other post-process input 0 at it will add out diffuse color and this going to multiply and we'll be multiplying it by our color rabitor we call it light tint well I don't into an append because we want to simplify it so that it is just late will append zero we'll make up the other side of our multiply node and this gets the cell light tint so we'll be sure to set it to white or very very nearly white will get a very nearly weight now multiply all of this for our dark tint hence we call this wine dark tint and a scaler instead of light tint amount needs to be dark tint amount and that's it that gets us this gets us our two sides of so shaded lighting al light and our doc speaking of set out color to a darker gray so our light tent goes into a is greater than B and a dark tint into a is less than B you know if just connects up to the connects up to our sky mask and a custom death mask and that's all there is to it that gets herself cel-shaded lighting so to recap we extract the lighting as a zero to one value if the lighting is well greater than 0.5 it is it gets this light tint and if the lighting is lower than 0.5 it gets abducted pretty easy follow pretty easy to understand and we control the amount of depth the shadow has with this scaling parameter here other than that that's it we already covered the distance mask and the custom depth mask so just hit save back over here in the editor we'll take our soul shading and we will just right click make an instance just hit enter we'll grab our post process volume once more we'll find our materials and hit this little plus next to the array to add a new one make it an asset reference and we'll drop in our so shading and there the year the results are immediate so we can see clearly what's uh what the soul shading is doing we can even grab our plane here and you can see the interaction of the shadows there this is very striking two-tone shading that looks looks quite attractive as its sort of bouncing off the model like that and we can open up our instance turn on all of this see our depth will control how much how much shade hits objects we'll keep that at 0.5 for the for the perfect half where you can control how much tints hits the scene how much of this color the light in the dark and we can control the raw values of the light and dark tint so we can get some proper shadowy colors going on there if I make that proper wave even on our guy and if we will jump in so I've got custom depth on the third person character so he's being affected in real time even all the animations looks very very cool and just to put the combination of these two materials the outline and the sole shading so if we get our outline instance we can play with these values too I cranked up these normal lines and normal line multipliers all of these values can be can be manipulated to get the effect that you want out of your models so if you want like a really heavy really thick sort of outline you can do that if you want like it really discrete sort of downplayed downplay sort of look then you can go with the defaults which I quite like I love the lot of the outline looks fantastic so that's really the the end of the tutorial here I hope this helps people this is a great tune shading method it's the easiest one I've found and I've been playing around with tuned shading effects with this type of post-processing for a while now so it's good to find one that it's relatively simple that is as effective as this and for some closing thoughts I've noticed that this kind of model of this kind of system works really really well on models with a high poly count and a lot of hard edges and I don't know about you guys but I have the perfect thing I have a void so whoo those of those who have followed my work will will be familiar with this model I made in a couple years back and I just noticed that it looks absolutely fantastic when it's lit in this tiny style even as the light hits it give a bit of a rotate you can see yeah there the effect the effect is effect is really really good me this time I'll catch you guys in the next video

Channel: underscore

Views: 180,342

Keywords: unreal, engine, ue4, tutorial, guide, toon, anime, shader, post process

Id: 0UBNXneL1oo

Length: 18min 16sec (1096 seconds)

Published: Wed Apr 04 2018

Reddit Comments

[u/DeadlyMidnight]

Actually looks really good!

[u/oNodrak]

For anyone wondering, it is the standard Post Processing route.

It also uses 5 branching nodes, so performance will probably be less than ideal.

[u/GruntosUK]

Definitely the best cel-shader I've seen so far, looks great!

Could you not just share the material, seeing as you explain it step by step anyway! :)

[u/[deleted]]

I do love toon shaders, especially when used well like in LOZ: BOTW

[u/[deleted]]

Video won't load for me right now but does this react to point lights and emissives? I have a toonshader that uses a kind of "global light" and doesn't react to anything else besides that one light source.

[u/frant0n]

Thanks for the tutorial this works very well indeed, would you mind pasting the nodes onto https://blueprintue.com ? It would be a lot easier for people to follow through from there.

[u/No_1-Ever]

Commenting to save post for later