Quick and Easy Character Outlines in UE4 [Tutorial]

so by popular demand and by that i mean uh matthew on my last video so hopefully this helps you at least we're gonna do a video on uh how to do quick inverted hall outlines on characters and this this method's really simple so when in some cases it's not going to work on more complicated characters you'll have to you know your mileage may vary um and this is probably not a very performant way of doing this just throwing that out there so if you're super performance focused or maybe on mobile like it may or may not be a good idea it is however really fast and simple and it works for at least some of the models that i found on the marketplace the reason i'm showing you on this model in particular i'm not a character artist i don't know how to animate anything like that but i needed to get a character that animated effectively like you can see the amber model here from gentian impact it has outlines but it's not animated and there's some issues with this method they don't stop it from working it's just that it's a bit more complicated and i don't fully understand the animation side of things so i needed a model that was animated that i could try it on and again it doesn't work on all of them your mileage may vary at the end of the video i'll show you an issue with a model that i had from the paragon epic um all those models epic put out on the marketplace for free okay so uh we're just gonna go over some things that are kind of like fundamental to understanding how the method works if you don't want to know any of this stuff and you just want to see how the blueprint is set up skip to the time stamp i will try and put one on the screen if i can figure out how youtube works so uh you know here we have a cube right and there's six sorry eight wait no six heights six okay so there's six sides um they're quads and you know in theory they're rendered as triangles but like you know but it's not really important right now so uh each of these faces has a normal associated with it if you don't know what a normal is it's just the the mathematical kind of definition for the vector that the the surface is facing so uh like like these these are the normals for those faces right um and they're the same across the whole of the face because they're they're not smoothed so when you're rendering something in 3d the 3d engine the rendering engine is actually not uh they're only rendering one side they're doing what's called culling and for example the other three sides that are behind right now they're not being rendered because it knows that we can't see them because they're facing in the opposite direction ignoring the fact that they're farther in the z direction and being covered up by the front faces they're just not being rendered so like for for example uh we can't do that actually so if you go into the object and you select all the flash the faces you can flip them so now you have you can see it's kind of like it's like a diorama setup but all those faces still exist they're just not being rendered you have the uh like these faces here what you do have are the new normals for these faces are facing towards us so we can see them and the old normals are facing away from us and we they're just the rendering engine just decides that they don't need to be rendered and skips them so the way we take advantage of this to do outlines is we here we're gonna unflip the normal so we just have a box again we're gonna duplicate the box move it back into approximately the center and now if we take this new slightly larger box and flip the normals and we'll uh we'll give it a black material just to make it look outliney now we can see the inside of the larger box but not the front of it so we get a full 360. outline around the box okay i'm just going to start writing the unreal uh epic games launcher store whatever it's called uh delete the previous version of this that i had we're going to do everything completely from scratch we're going to launch the engine we're going to make a game set the third person demo just because it's convenient for this name the project outlines so we're doing blueprints the quality settings don't really matter you can do whatever you want uh we don't need starter content but all that's up to you okay so here's the third person blueprint or a template whatever you want to call it you can jump around as the mannequin character um we don't want him so we're just going to delete him so we need a character we could do this with the mannequin maybe i haven't tried with him actually but whatever we'll we'll go with the coolest stylus character so in the epic games store if you go to the marketplace um search for i think maximo mcsammo there we go there's a mixomo animation pack it's free you can download it just click uh there's there used to be a free button here but just click this and add it to projects we'll show you so now i have it in my library if i click add to project nothing comes up because i don't have any 4.10 projects but if do show all products and then that's the current one and we can just change that to 4.10 it's it's fine it works fine so that's now added to our content folder the mixamo animation pack it gives us a bunch of characters we're going to do the maw because i think he just looks the best with the outline look we're just going to drag him into the scene so we can see him and if you click g you can disable all the little icons and stuff so now though if we click play we're still going to get the mannequin we don't want that so what we're going to do is in world settings on the right hand side under game mode game mode override go to third-person game mode and select the selected game mode default pawn class change it from uh the third person character whatever the default is there and select the ma or whichever character now if we click play we get this guy and he can run around and jump and uh and attack okay so we're just gonna leave that there so you can see him on the screen so we need to go into the actual maximum blueprint and make some small changes here and that gives you a warning about this being a data only blueprint that's fine just you can still open it in the editor you just have to click the enable full editor button or whatever it said there so we're going to go in and select the mesh for the character and what we're going to do is duplicate it and just call it outline so in this character for whatever reason the original mesh is uh offset by a couple of location and rotation values so like this the duplicated one starts at zero uh i don't know why you just you have to copy over the rotation and location values from the original mesh onto the new one so that they line up and i'm just going to skip through that because it's just copying pasting a couple values so now that's done you can see the meshes don't actually line up properly that's just because every time you move them in the viewport here it resets the animation cycle on them but if you hit compile or save it'll it'll re-line everything up so that's the character everything looks about right now so we just need to actually set the second this outline mesh material to a new mesh or new material we're going to make call it m outline and with the outlines mesh selected not the main character mesh change the material to this new material we made and do compile again to line everything up there okay so that's all we need to do with the blueprint we can now open that material that we just made and we're going to change a couple of the details settings here on the left material domain surface is fine blend mode we need to change from opaque to masked and that basically just gives us alpha control with this opacity mask here and shading detail model we don't need it to be lit we can just set it to unlit because it's just going to be a black outline and we need to set two-sided to be enabled so what we want to do is flip the normals of this mesh so that it's only rendering the inside and not the outside um what that's going to give us is kind of a shell where we're only seeing the main model and then the back of all these black polygons so there's actually a node for that it's called the two-sided sign and what that gives us is it's going to give us a positive one for the outside and a negative one for the inside i'll do it with the emissive color really quick to show you so here this white that means one and if we scroll in that black is going to be a negative one it gets clamped down to one to zero to one anyway but it's for the math it's one and negative one if we're doing an opacity mask the alpha a1 is going to be something that's shown in a black is going to be something that's not shown what we want to do is have this plugged into the opacity mask that's not going to make a difference right now but hold on a minute what we want is the outside to be black and that means it's not going to be rendered and then the inside to be white which means it is going to be rendered so if we put that into a one minus node put that into the opacity mask now you can see we don't actually get anything but if we were to erase or if we were to hide the the main character mesh you would see that there would still be a black kind of silhouette of the character there we can hide him for a second just to demonstrate so select the character mesh and then disable him so you see that shadow is still kind of left over so all we really have to do to make an outline is make that shadow slightly bigger than the original character and uh there's a pretty simple way to do that there's just a node for vertex normal world space there's one for vertex normal vertex tangent world space don't click that because that's a different vector and if you just put that directly into world space position offset it actually expands it a little bit by default and you can see now we already have an outline so you can leave it at that but there's a couple of other things we want to kind of have control over the easiest thing is to just multiply this by some amount you can make a new scalar parameter by holding s and just clicking anywhere we'll call it width so it'll control the width of the outline and multiply that and it'll just scale all those vectors along their world normal by some amount so 0 is obviously going to be nothing and then 1 is going to be what the standard was when we just plugged the world normal vertex vertex normal directly into the world position offset and then we can just scale that to whatever we want you can see there's some artifacting going on with these floating meshes there's not really any way to avoid that the way to avoid it would be to set up a more thorough version of this shading um and exclude these little these little meshes that are kind of floating but also like you kind of would want them anyway so it's really just when you're designing the model you want to take into account that you're planning on doing this you want to have bold bold shapes not many floating little pieces of geometry all over the place because this is going to work with smooth bold shapes best any little little intersecting pieces of geometry are going to look kind of weird so we're just going to set the width for now as one point 1.6 something seems fine so that's really the entire shader if we just save all this stuff um we can go in and actually play around and you can see everything just kind of kind of works all the animations are good everything syncs up so i'm going to show you one other adjustment you can make here i noticed it in some of the games where you have outlines that are done in this style they do a system where the closer the camera is the smaller the outline is so like if we go way far away for example you can see the outline almost disappears you can still see maybe maybe the remnants of it around the antlers there but uh you know it becomes a lot less defined so if for whatever reason you want to go with that art style and you want that to be more pronounced at a distance i'll show you there's an easy way to do that we're going to move this over here and there's a node called camera position camera position world space and we're gonna get the actor position now if we take this and do a distance calculation on it that's going to give us the distance between the two things the actor and the position or the actor in the camera sorry now if we take our width we can multiply the distance between our width we're going to have to change the the width in a second you'll see the value is going to be different but you can just change it to whatever it works out for in your scene and we're going to clamp this actually i'll show you later i'm going to change this first because it looks really weird it's going to be a really low value in this case 0.001 something like that and plug that into the world position offset that might be too small oh hang on that's all that's all wrong oh you know what i'm silly we want to plug that into the multiply there and then the world position offset there we go that'll be better yeah so now as we get farther you can see relative to the size of the model the outline gets like huge and it just keeps getting bigger the farther we get away so first of all this number is too big this width needs to be even lower than it was it's going to be a very small value in this case something like like 1.00 here i have sorry 0.007 in my example so even that's a pretty thick uh well i guess it gets thinner the closer you get which is what we wanted so but as you get farther away you can see it's kind of that's even probably a bit too big but it gives kind of a neat effect because at medium distances it's kind of that looks pretty good but then the closer you get like the uh borders don't become overpowering but obviously at far distances it gets to look a little bit silly so we're going to add one more uh one more feature here and we're just going to clamp the value to a minimum and a maximum so that it doesn't get out of control and the example i have like what i've set up with and tested is is a value of 0 for the minimum and a value of 3 works well for the maximum that is so there so that's as small as the uh well that's actually as big as the outline gets for being far away so there's a little bit of an outline but then as you get closer it does kind of max out so that's all that's all there is to it um you can add probably some other complexities to make this shader work differently there's one um there's one thing i'm actually i am going to show you and this is what i did on that amber model and i think it looks good in a lot of cases depending on the style you want though so right now this border is black obviously um which is probably what i would go with for this character i mean it looks pretty good but um if you plug the emissive color into the uh texture for the actual character right now it'll look a bit silly hang on like now it almost looks like there's no outline right um but if we multiply this by some amount let's call it tint because it's gonna make it darker um put that into a miss of color and set this to anything between zero and one like one will just give us the same texture so that's kind of not helpful but if you put this to like 0.3 or something like that it creates a darker border but it kind of matches the color so you can see it looks kind of better for the things like hair um this again works better on really stylized models like the genji impact model it's it's pretty much flat colors so you can see here the hair texture and that ends up being a little bit a little bit weird it still kind of gives a neat effect and it might work better or worse depending on the model you have so i lied but that's that's all there is to the shader now we're done i want to show you one of the uh kind of drawbacks of this method because uh it's it's not going to just be a straight drag and drop this material in this mesh onto some character and make it work every single time because it depends on how the model and character were developed so with that maximo pack it's going to work and everything should be fine maybe not for all the characters i haven't tried all of them but it you know is very easy it takes a couple minutes to plop on the outline i tried with one of the characters from the paragon packs first because i don't have a ton of experience doing this with actually animated characters so i wanted to try how it works so this is a character from the paragon uh characters fact that epic games released and you can see he's got outlines on him he's you know he looks really good he's obviously not a kind of stylized character where i would recommend using this necessarily but he's kind of borderlands i suppose and this works all good you can jump around and his his outline stays mapped to the same animations but if you attack it gets completely out of whack and i have no idea why i'm not terribly surprised this is one of the things that i'm not sure about with this method so your mileage absolutely will vary between characters but i don't know how to fix that with this character so with modern really complicated character setups this might not be as simple as just dragging and dropping it onto the character and having it work with every single animation especially if you have some kind of physics cloth simulation going on i can't imagine that this exact method would work the same you can still do the inverted hall somehow it's just that i do it won't work this way exactly so the other downside of this method uh is effectively tripling your poly count depending on how the engine handles two-sided faces i assume there's some optimizations so it's probably not quite as bad as tripling but it's at least doubling right because you have that main mesh that's duplicated once to create this outline shell and so that's that's two times right there but then the way that engines generally handle two-sided polygons is they just treat them as though they're two separate polygons facing opposite directions so again might not be three times but it's it's definitely a performance hit to some extent um but i would basically say don't worry about it because monographics hardware chews through polygons so fast that just increasing the polygon count of a model even by a pretty significant margin isn't really going to tank performance this isn't a fair scene to demonstrate that because it's so simple right but um you know just work within a reasonable budget and if it ends up being too high polygon for your model then you can reassess later and again the the correct way to do this is to go into your 3d package and create the shell which is still going to double your poly count but go into the 3d package and create the shell in there and then it's only going to be one-sided polygons at the very least you'll get a little bit of a benefit

Channel: es

Views: 12,925

Keywords: UE4, Unreal Engine, Mixamo, inverted hull, animation, characters, tutorial, guide

Id: EDenvaizlP4

Length: 21min 51sec (1311 seconds)

Published: Mon Nov 23 2020