Stylized Anime Character Cel-Shading in UE4 [Tutorial]

so i'm going to show you how to make this really simple cell shaded texture or shader i guess um uh i was looking at kenchin impact the other day and i i really like how they did their anime art style in the game there's only like three games where i've actually liked the cel-shaded look that they have going on and that's ganshin impact and then the two arc system works games uh guilty gear and dragon ball fighters um to be fair dragon ball fighters is better but it's it's they have a lot more control over the camera and lighting in that so it's not as you know you gotta cut kenshin impact some slack they did a pretty good job so uh basically if you if you search up unreal engine 4 cell shading tutorials you're going to get a ton of stuff it's going to be 90 based on post-processing shaders and that's fine and there's definitely a place for them i'm not saying there's anything wrong with using those necessarily depending on the circumstances but this is just dramatically simpler and i think it gives way cleaner lines the problem with the post-processing ones are that it uh when when it calculates where the boundaries on the lines are it it does it after kind of realistic lighting has already been applied so you're kind of not really getting you're losing out on a bunch of the stylistic look just inherently because you've you've already shaded it realistically so what happens is you get these borders but there's a bunch of like almost dithering between it it creates like a splotchy gradient in a lot of places and it's it's not it's not ideal it's not what i was looking for i'm sure you can tweak it to be good but that's not i think for the sake of doing with just one character it's not a good method because especially if you're going for like an anime specific art style you don't really want the entire background to also then be cell shaded because a lot of the time it doesn't really end up being cel-shaded so much as it ends up getting just color banding in it which isn't really what you want especially in something like anime because the background is usually pretty high fidelity it's mostly the characters and the things that are actually animated that have the the actual cell shading and the hard outlines and stuff so let's move on this is the final result we're gonna obviously you can see there's already outlines on here we're gonna take those off really quick because uh and i'm not gonna show you how to do the outlines it's just it's inverted hull if you google it it's just a flipped out version of the model here i'll show you like model is inside out it's just it everyone uses it for for there there's if you look at the stylized cell shaded tutorial that epic games has up on post-processing cell shading and outlines they do it a different way uh that works for doing it to the whole scene it's good there's something wrong with it again but this is like the standard way to do it this is how this is how guilty gear dragon ball fighters i i'm 90 percent sure this is how kenshin impact does in mihoyus mihoyo the gangshin impact developers talked about it for the previous works um and this is how borderlands has been doing it forever so it's it's a solid method okay so i'm just going to go in and delete the the or not delete but i'm going to hide the outlines for now because they're going to be distracting okay so i'm just going to show you the whole model really quick i'm going to delete the existing shaders that i have just completely okay great so as you can see though the model is actually pretty high detail i think it's like 40 000 polygons or something um i think there's some lower ones and it might work depending on the mesh this could be optimized the arms have a lot of polygons in them and stuff that aren't strictly necessary but if your mesh has a lot of physical geometry detail in it it's going to work better with this method because we're actually shading strictly based on the geometry there's no like technically pbr is happening here but like it's it's not we're not really taking advantage of it at all we want as simple as shader as possible and i think that's part of the struggle for ue4 as to why it took me so long to get like good results doing this kind of stuff because the engine really is kind of set up by default to want to be doing realistic rendering it can absolutely do stylized non-realistic rendering but it's it's just by default kind of not set up to be doing that so you have to disable a bunch of stuff or you can just do this and we'll kind of bypass all that and you'll see in a second so um yeah just note you probably want a relatively detailed mesh so we're going to make our main texture uh we're gonna m cell shaded shader sure we're gonna work with just the body texture for now i'm gonna plug it into there and then we're going to apply that to just the body actually i'm going to speed past and make apply the other base textures to the things really quick just to get an idea of what the model looks like with just the default shaders on it okay so here's our default amber model with just the standard materials set on it um there's some specularity on it you can see that's kind of no good there's some shading going on and we don't really want the shading even though it's not you know that's not terrible um it's just not cell shaded right like it's here we'll handle the specularity first really quick um and again we're only working on the actual body the face and the hair have separate materials and separate textures so just for now we're gonna just deal with the one and then we'll apply it to the other ones after the fact okay so just to get rid of the uh to get rid of the specularity we're gonna hook zero up to metalness in specular um and then we're going to put a 1 into roughness i'm not sure if it's actually necessary to do specular and roughness it's just you know why not so okay you can see that's already kind of looking better because now we're just getting the lighting information or just getting the the highlight information from the actual texture itself right so we're still getting the shading but we're not getting any kind of highlights and like a lot of the point of the cell shading is that it's already the information is already painted into the texture right so you don't need you don't want high detail shadows and soft shadows and realistic lighting you want really stylized stuff so step two to get rid of that lighting completely we're gonna handle that because it's totally on our own so we're gonna plug the emissive color instead of the base color and is that gonna update live no okay okay so now we have no lighting information at all again not on the face and hair but on the rest of it um there's some obviously like there's some some darker bits around the armpits and the cuffs here but that's just painted into the texture that's part of the pipeline for art when you are making these kind of textures you're going to bake in some some like the folds here and stuff stuff that you don't want to model geometrically because that's not going to get shaded these cuffs you probably do self shadowing but that's this method doesn't do self shadows so you could do it in a more complicated way maybe and and get it to work but you know this is basically just ambient occlusion but not actually being calculated in real time okay so now we can actually start shading it the way we want it to work so right now the angle the light is kind of coming on from her front left so the way the lighting is actually going to work the way we're going to create it is basically the same way that they talk about doing it in the guilty gear gdc talk where they talk about how they do the lighting in that game and then uh dragon ball fighters presumably but that was afterwards so it's very simple you just take the vertex weight or not the radix weight sorry the vertex normal and if it's pointed towards the light source uh at all like in any of the 90 degrees or 180 degrees that are facing the the light source it's lit up if it's not then it's dimmed in this case we're going to leave the lit faces as the actual standard diffuse color and we're going to darken the parts that are facing away from it so the way we're going to actually figure that out is we're going to take the the light vector so the atmospheric light vector in this case and we are going to dot product it with another vector and that vector is going to be the vertex that vector is going to be learning how to spell vertex normal world space that's going to be the direction of the actual vertex normal drag those together and then this is going to be our lighting information so we're going to i'm gonna put this into a mess of color for now and you can see the lit part is white and the dark part is black this the dot product is gonna give you a value from one to negative one uh depending on whether or not it's facing the light or whether or not it's away from the light so the zero value is going to be what's in the center that's going to count as our 90 degrees then there's a gradient that goes either way it's not a linear gradient though it it sweeps it's like a sine wave basically i think now what we want to do is we want to actually get this to be like a solid band of colors so we are going to uh we're going to get a scalar parameter here actually you can do that by hitting s and clicking we're going to call this shadow depth and then we need an if node so the shadow depth parameter that's going to be 0 because we want it to be 90 degrees for the time being right we can adjust it later but you can set this as a max of one and a minimum of negative one if you want for future reference okay so now that we have those it's gonna be it's gonna check the lighting information here and if it is can we set the outputs of this no okay hang on we're going to copy these two zero and one node so if it is beyond a threshold it's going to be black and if it's within threshold it is going to be white and if we put that into the emissive data you can see now we get a really solid color band and now we just have our black and white shading so that's basically the entire shading there's nothing base everything is based off this concept and you get super clean lines and then if you want you can adjust that to to shade however deep you want to shade we're going to use that in a second kind of to get a second part of the shader just to show you one of the complexities you can add but we'll leave it at zero for now we can adjust it later that's also going to come in handy when we are handling the face because the face needs to be handled a little bit differently if you want decent results but there's a bit of a complexity to that that i will explain after the fact so first things first we're going to actually want to we leave the zero and we want the actually the texture to be what controls the light part so now we have the actual the actual texture but it's shaded just completely in black so the easy way to do this is to just make another parameter we'll do [Music] uh we'll call this tint and we will drag out a texture and we will multiply it by that tint value so right now it's by zero so if we plug that into the dark value it's just going to be black which is the same obviously that's not good but if we put this tint value up to like here we'll change the max to one whoa no one and the default value i found 0.75 is like reasonably good and then apply that and then we have a fairly light shading band so that's really all there is to it the if you actually look at kenshin impact there's a second band of color uh or there's one band i guess in between the shaded and dark area with a medium tone in it and you can absolutely do that with this color with this method too so i will show you it's only a couple more nodes um make this a little bit bigger so basically we're going to want to use the same kind of vector information so we can just reuse that what we're going to do is we're going to copy these nodes here the tint and the multiply and then we're going to feed them into a new if node these are going to be extra dark so we're well actually i guess this is going to be yeah this one's going to be the darker one actually i think so what we want to do is we'll make a new scalar parameter we will call it the band depth and we're going to feed that into b and then again the same dot product information into a and all we're going to do is we're going to check for a different range of bands and we're going to color that we're basically going to overlay the tint twice in some places and once in other places and the once the place where it's applied once is going to be the medium tone and the place where it's applied twice is going to be the dark tone so right now it's a fairly light shading we're going to add that shading again and it's going to get you know approximately twice as dark so uh what we want to do is we want to fade the feed the output of the original dark part into the input of the new dark part it's going to multiply it by two and then or multiply it by the tint again and we want to feed that into the input of the if and now if we feed those both into the dark part of the input we should get two bands we just have to adjust the numbers to actually get them to show up so if we adjust the band depth there now you can control so the the shadow depth is both bands together and you can't make the band expand past the other one so these numbers are related you can't just change them independently and have them work completely but you can adjust the shadow depth to whatever you want it to be which in this case i think we're going to leave a zero actually we'll do we'll do 0.1 and then the band depth will be zero and then you get a really thin little band between them and you can adjust that however you want to make it work for your your model and your situation uh and we're gonna use that for when we mess around with the face in a second because there's a minor adjustment you wanna make there that's all there is to it that's the entire shader the only really complicated thing going on here is the if statements uh there's the dot product it's not actually complicated to calculate dot products i just don't remember how to do it off the top of my head so we're gonna we're gonna convert this to a parameter we're gonna call it texture that's gonna be we're gonna leave it as the default for the body there and we're gonna we're gonna save that and then close it and that's all good so now we're gonna make a two two other textures um m cell hair and m cell face so here we're just gonna change this and plug the hair texture in save it that's the hair material done and face we're gonna plug the face material in remember to enable the check mark there plug the face material and save and we'll get back to the face in a second because there is that one adjustment you need to make so we just need to modify what materials we have plugged into the body here okay so that's it so now you can see obviously there's a bit of a weird shading issue going on with the face that's not really completely solvable with just shaders you need to do some things with fooling around with the normals of the mesh or using vertex paints to kind of dictate uh the actual threshold if you look at genji and impact i'll pull up a video of this on the screen uh the sh the face kind of shades in blocks and i think there's actually a couple places on the model that do this it shades in chunks as the light goes on you can see in the face it kind of it snaps from one line to another and the reason they're doing that is because if you actually look at anime you know they're only ever shaded in certain angles you don't see these weird in between places where the mouth gets shaded and the there's the transition between half the face being shaded and just the jawline you have to contend with that in 3d but you can kind of make adjustments for by setting setting the vertex weights or the vertex paints rather you can kind of paint different colors in them to control the threshold of when they shade instead of just using the broad like 0.5 method you can kind of set blocks so that it will shade you know this part of the face and then it will shade this part of the face and then it will shade just the jawline but we can kind of cheat that really quickly because we have these parameters set up so if we do the shadow depth we can kind of just here it's it's not going to work from every from every conceivable angle but if you get a situation where just the jaw you essentially want to set the shadow depth as really low because the face is rarely going to be shaded it's just from these extreme angles you just want that one jaw highlight and then the band depth you can set as very tiny and then that's that's pretty much it that's like that's your good shaded anime model right there um you can watch the guilty gear talk if you want more details about how to kind of set up the the vertex plates with shading sorry vertex colors um i'm not good enough with that if i do it and figure it out properly i'll i'll maybe post another video about it but it's not something i'm experienced with i just know it in theory let's i'm just going to readjust the re re-enable the shadows not the shadows sorry the outlines there that's the entire model and it looks pretty damn close to the actual to the actual game i could probably increase the band depth because from far away like from close up it looked okay but it's a bit tight here so let's uh i think we can actually just change the initial one and that will change the other ones do one point 0.2 yeah perfect okay so one drawback of the simple version of this shader is that it doesn't take the lighting of the scene into account in terms of color so like if you change the color of the scene you can see amber doesn't actually change color at all you can totally adjust for that if you want i'm not going to do it here in detail but if you take the there's a light color the atmospheric light color node this will actually give you that color so if we plug that into the tin for example here instead this is going to look silly because it's only going to be one one band but you can see it just changed to white the the shading i mean here we'll change the direction of the light so more shadows happen uh you can change it now you get the red into the into the shading that you you can't just plug that in directly you'll have to do some math to actually combine it with the tint and make it darker and then combine it with the texture but it's absolutely doable um so that's really all there is to it you get a really nice shader with only a couple nodes and a pretty like relative to the shaders that i saw from the unreal thing for the post processing uh version of cell shading this is dramatically simpler and uh i think the results are way better for this kind of art style again the other post-processing ones that apply to the whole scene they're great for if you have a bunch of assets that weren't necessarily designed with this in mind and you want to make them look cel-shaded by posterizing them uh that works really great but if you actually want to kind of have control over the look and the style i think this is the best method because it's not like the math is complicated or anything like that and you just have kind of exact control over it in the way that at least the industry gurus at this kind of shading do it and again i'm going to link the gdc talk from arc system works on how they shaded guilty gear um and i like the mihoyo unity talk about how they did their shading for their anime characters theirs is a little bit less applicable to a lot of things i think because they talk about kind of more cinematic types of renderings you can see here amber's hair the specularity is just painted into the texture it doesn't move up and down the hair strands it's just one solid line and that's perfectly fine for this art style i think but you know the mijo talk goes into detail about how they have special hair shaders that that generate this specular highlight all up and down the hair strand depending on the light angles and it's just it's a little bit more advanced it's kind of in between realistic rendering and really stylized rendering it's an interesting talk for sure though so if you're interested in that kind of art style but the guilty year one i think is more applicable to actually doing it in uh real-time environments in a game situation where you just want a really simplistic look so that's all folks uh i'd appreciate it if this helped you out if you'd carefully tap the like button but uh probably don't bother with the subscribe button because i'm never gonna upload a video like this again

Channel: es

Views: 40,578

Keywords: Anime, UE4, Unreal Engine 4, Shader, Material, texture, 3d, blender, 3ds max, Epic Games, Arc System Works, Mihoyo, Genshin Impact, Videogames, video games, Tutorial

Id: xf21CBx8rYs

Length: 22min 38sec (1358 seconds)

Published: Fri Nov 06 2020