Simple Stylization Techniques in Unreal Engine | GDC 2024

hello everybody my name is Chris Murphy I'm a senior technical artist with epic games I'm the tech Consulting team and today we're going to be talking about stylization in Unreal Engine don't stress we'll do we'll get this and we'll go several steps beyond what you're looking at I'm going to forward this with something because I feel a little bit um I don't want any like programmers throwing things at me from the audience so I'm going to start off with this it's like a caveat um today we're going to be going through the kind of things you can do to stylize your project using materials and postprocesses and that kind of stuff I'm not going to be touching on writing your own Shader Model or anything of the sort so if you do have access to a rendering engineer who wants to do it their way I totally get it and that is a good path to go down but if you are working on a project that you want to kind of like test different types of looks out and try different types of things without necessarily going down the pathway of writing your entire shading model and get it and that's what we're going to be covering today but within this project which some of you may recognize as dating back as year old 2014 assets for ue4 um I've got this project because I kind of want to take it a little step further and do a little bit more what I want to fix first though is see this grass it's um it's kind of gly so what I'd really love to do is begin with kind of fixing that grass into some sort of like stylized way that really kind of helps it match the the aesthetic for the rest of it now few things that I want to do here is I want to get that grass and I want to make it match the landscape that's beneath it which is a somewhat stylized landscape if I come up here you can kind of see there's a little bit of patch work going on there I really wanted to match that color and I also wanted to kind of match the normal of it that will make more sense in a second but the tldr is this think of any anime grass you've ever seen and that's what we're going to be going for which means first things first is I'm going to go ahead and I'm just going to Nuke the uh the Shadows on them because by default we don't really want to have that in there we can get rid of that and we can now see that already that's looking a little bit more stylized but now we just have this flat block green and that's really not what I'm after what I'm after instead is uh matching the color from one asset to the other now there's a really cool feature in unreal called runtime virtual textures which is really a fancy Engineers way of saying we take a screenshot of the ground at any given time and everything else can kind of look up what the ground looks like and we're doing it in a memory conservative way I'm sure somewhere out there is a marketing person who didn't want me to describe it that way but that's essentially what we're doing so I'm going to open up the landscape material and I'm basically going to say hey when something screenshots you this is what I want you to look at and to do that I'm going to create an output for a runtime virtual texture I'm going to say to it hey if something asks you what your base color is tell it that if something asks you your spec roughness and for normal instead of reading in the normal map I'm actually going to give it the world space normal so I'm going to tell the ground if something asks you which way you're facing I want you to just tell it that you're facing your pixel normal Direction okay so we get that out of the way I'm going to hit save we've got no noticeable change yet cuz I need to go ahead and tell it that we actually want to capture this and save that somewhere so inside of the ground I'm going to open up my virtual textures and I'm going to add a virtual texture and say Hey I want to create a lookup for you I'm going to call this rvt environments and click create volume so I should be able to tell if that's working by just going back to my root content folder see this image here that's the asset that I just created and we can tell that that's actually a snapshot of my ground from top down the cool part of that is that if I was to go and open up my grass material grass blades this is the big fancy material as it stands and if I get rid of this base green color and instead sample the runtime virtual texture that we just created what we end up with is this so see the colors are now actually kind of matching the thing beneath it I've kind of kept a little bit of a shade that was there still going into it but the next thing I want to do to stylize the grass and this is a really good little technique is by default when you render a model what we actually do is we say hey your surface is facing this way so we want your tangents to go that way you know we want to tell everything to react to lighting as if you're facing that way a cheeky little trick you can get away with when you're stylizing assets is is actually to tell them hey face the direction and uh the lighting information of the landscape instead and that's super simple that's literally doing the same thing except down here telling it to get the Landscapes normal which you may remember before was just the an output and say Hey I want you to face that however the thing coming into me is a tangent space normal no it's a world space normal when I click apply we now end up with this kind of look to the grass and see how that that's just got like a far more like anime style kind of look to what we wanted here so that's good we've started to get something together there but the next thing that I want to work on is I want to start getting this character in order as well so oh actually before this character I might work on the sky so let's look at the sky as our next thing I'm kind of going to step from landscape to Sky then character to postprocess to work on the sky there's a few things here that are going on to begin with this sun doesn't actually match up with the Sun so some poor artist would have to manually place this sun in the sky to kind of line up with it which is what we call a bad time so I'm going to delete that for a second now the next thing that's going on here is honestly the sky here is really just like the the the stock standard Unreal Engine Sky atmosphere right if I pull this down here we're like o looks pretty but it doesn't really look particularly stylized so what can we do on that front to make it more interesting uh I'm going to make a custom Skydome but I'm going to leverage some of the other systems that we've got and hopefully uh create something a bit more interesting just going to get a sky sphere I I say sky doome still out of habit and I'm just going to blow this sphere up or Igan to 800 right so this is really big this thing's wrapping around the world um I'm now going to set up a material that represents this Horizon so I'm going to call this mcore Horizon and this is going to be anything in here will be now on my sky once I set it up so I'm going to say to this thing hey don't take in lighting valy vales okay and just to test it out I'm just going to plug in a red value we pop back to here we drop it on the horizon and we can see that that's working it's not pretty but it's working so what I'm going to take advantage of is this there's a thing that we can access within the unreal engines integrated Sky system we have a fantastic little node called Sky atmosphere view luminance which was definitely named by an engineer what this essentially does is this takes the color data that you would normally see on the horizon but runs it through a material first do you get what I mean so it's just kind of looking up hey if I'm looking in that direction what would the Horizon be cool now I've done that because what I would love to do is kind of Step that so check this out um we're going to do a little bit of math because Math is fun if we were to think of a if we were to think of a linear gradient going from0 to one okay if you were to kind of stylize a lot of things what you often do is instead of having like a smooth transition from one thing to the other you often kind of like have it stepping towards the color and getting a bit closer and closer to what you want now the math for that actually really straightforward right if I was to multiply that value by 10 that's now 0 to 10 right if I was to then run a rounding function which says get rid of all of the decimal places that's now from 0 to 10 but you can see that there's those bars there because all of the it's now just the integers rather than the floats and if I was to divide it back by that initial number it's no longer 0 to 10 it's now 0 to one again except this time around we've got that stepping pattern youall with me sick so if I wanted to I can get rid of this gradient and I can say Hey what if we did that to the sky instead now generally speaking when you're handling color you're usually dealing with it as RGB red green blue right but we can deal with it another way some of you may have dealt with HSV before which is Hue saturation and value if I was to go ahead and get RGB to HSV I can say hey Don't Step the color just step the amount of saturation between them anyway what that looks like is this sorry I'm going to say to it hey I want to turn it into HSV and I just want to step the saturation okay afterwards I want to combine them back to where they were as they were and because my mother raised me right I'm going to make a variable just have that set up now this has to go back into being RGB again but what we've done is we've gotten the Horizon colors that were there and you can see now that we've got this kind of Ste effect on the yeah you see that so we've kind of gotten something and it's kind of nice right because like that is just using the standard you know reasonably scientifically accurate Horizon system in unreal but it's kind of saying hey hey hey before you do that can we just uh maybe have some fun with that I will flag that this is definitely better when eye adaptation is turned off if you have eye adaptation turned on you won't get that same effect but I really wanted everyone to be aware of that kind of stepping that we can do so let's go ahead and fix the sun which is a phrase that you can really only say inside of game development certainly not in astronomy and what we're going to do next is we're going to get the Sun and project it to where the sun is you get me so I'm going to get this and I'm going to say hey there's a fancy little function here called Sky atmosphere image and all this does is this takes a texture object which fortunately I have one it takes a texture object and then it says what direction and I say the direction of the skylight okay when we hit apply you can now see that that texture is being projected to that location right there is a problem which is if I turn around it's also projected at the inverse right don't worry if you ever get that that's super quick to solve you literally just get the mask value and multiply that by the result and that will turn that off now it is red green and blue right now because I didn't fully prep this asset to look like that so I'm just going to convert this to something that's monochrome and then I'm going to multiply it against some sort of sun color Sun color um o sorry I want to Vector PRM what a fool okay great so we've got that we kind of want to just throw some sort of vague yellow onto it and you know if you want to scale it you can do that as well so shrink it down and if you want to have it rotating you can just run a Time Value into that but in the meantime we've kind of got ourselves a nice cute little friendly Sky Skydome didn't really take much work to really get done um the next thing I'm going to work on though is I'm going to start working uh on this character all right so this is the type of stuff here that will probably make your rendering Engineers grown but you know I can I can dodge pretty quickly so I'm going to make a uh a new material called mcore overlay and we're going to Leverage a feature in unreal um that allows us to kind of change her lighting a bit okay so by default how this how this works is we render all of the stuff that's in the scene the G buffer does its stuff but what I really want to do is after it's rendered that I actually want to kind of go back and say hey can I look at the information you've got and recombine them in a different way to get a bit of a more stylized look and there's a great feature inside of unreal that a lot of people don't know about um that works really well for not only stylizing assets but also things like um but also things like um like adding Shields and things like that over the top of people so it's called an overlay material and the overlay material when you apply it to a skeletal mesh just does an extra pass of the entire mesh even if they have 12 material channels normally it just does the whole mesh um in a single pass right and the reason that's super handy is that we can access all sorts of information through that um if this was translucent it means that we can access the information after we've rendered the initial scene so I'm going to set this to translucent and unlit and check this out I can actually access information such as the base color so this will actually bypass notice we've lost all of the lighting on the character we've kind of just gone back to a completely flat character that's cuz we're able to kind of step into this and say hey what did you look like beforehand but this allows me to kind of remix that initial material in some way and this is a really good way to styli characters in my opinion because we can do things like um we can get that and we can say hey if this is the version of her that's lit what does the version of her that's unlit look like so what does she look like when she's in darkness uh I'm going to make this a desaturated version of her right so we'll get something that is uh grayscale and there's a really handy node that we can use called bounding box uvw what this node does apologies for shooting through the graph so quickly I'm just uh got a lot to show you all what this node does is bounding box uvw actually finds out how big the object is and says the back of the object is zero the front of the object is one how is it on the y axis 0 to one and on the Zed Axis or Z for my the Americans within here uh 0 to one right so in this case I'm just getting that Z axis can't stop won't stop and I'm going to go ahead and use that as a way of kind of adding that kind of a little bit of Darkness down the bottom of her and I'm going to set a color there we'll change that in a sec and I'll use that to kind of control what she looks like so the fun part of that is you know I can just go to here and I can use what is called a curve I'm going to make it a linear color and I'm going to call this character lighting curve all right and within this we can set this up to be what we want her to look like whenever it's touching the ground and what it looks like up top right so I'm going to get you and maybe set you to like a dark green we don't want this to be white I'm going to kind of go for like a darker gray I feel let's curve that and I might push this up a little bit further that probably looks okay okay so when she's in Shadow this is what we want her to look like now unreal has a little optimization in it called atlasing and what it does is it lets you bundle a bunch of Curves together into a texture so I'm just going to call this like stylization Atlas and I'm going to add this curve to it you can see that other curves that have been made for skies and stuff are in there but I just need this one anyway back in my overlay material instead of being just darkness here I say hey I actually want you to look up the color from a curve and it'll be like well which Atlas and I say that Atlas which curve and I say that curve and when I pull that back you can now see that we've got that dark green here also just a pro tip if you're doing this kind of stuff um if I was to open up the curve again you can actually edit this in the window which is really handy like if I looked at that and they wanted to pull that down or pull it all the way up it's a really good way to kind of change these things in place and really dial in stuff so don't use it for just this like using this for the Horizon skies and stuff like that could have been a really good way to just stylize the guy as well curves are really powerful and no one seems to know about them okay so we'll Pretend This is what she looks like when she's in darkness we jump back to where we were and as I said we want to have a version of her that is in the light which is just going to be that but um how do we find out her lighting data so this is the part that the rendering engineers get angry at me for but let's do it um and that is that if you find out what um if I know the base color okay and I know the final color of the scene I'm actually able to divide the final color by the base color and it will give me this uh oop sorry I should have desaturated that first cuz I really just want the gray scale value cool so that value there see how it looks like she's lit like any other object but she's not right like we bypassed all that so what we're actually getting there if you think about it is actually the lighting data from a 0 to one or close is to it and that means we're can have fun like if I looked at that and I was like Hey I want your shadows to be a little more interesting what if we went back to a horizon and remember that step function that I wrote just before this one where we just divided it I could drop that straight in here and I could say hey I want your shadows to be stepped let's do fewer steps because 10 is a big number and we can see how that's a much harsher line that we're kind of getting there we've kind of got that kind of slightly more stylized look to it but the fun part here is you know we can get get that and then say hey that's what the Shaded version of you looks like um I want you sorry folks it's a new keyboard that's sitting on top of a cardboard box whenever you are in darkness look like that and whenever you are are lit look like this now if you get this error it's telling you that by default this node gives you a for VC so rgba and we just want to get RGB it's a little gotcha but it's literally a check box to fix as is the case with a lot of unreal and from there we've kind of set up like a little bit of a stylized lighting for her right so this was just like a real quick thing for us to do but Let's do let's do more than her let's do the world okay so if we wanted to get this world and overlay it in such a way that it looks um like let's do an outline Shader next what we can do is I can create a material called mcore outlines and I'm going to set this to not be a surface but rather a postprocess okay and in my world when I look at the postprocess I can say hey I want you to run through a material before you before you render the scene so it actually gets the incoming image runs it through this material first at which point I can do all sorts of devious things to it and then we can move on right so if I get this mcore outlines we can access things like the scene texture right so in the same way that we had the base color and whatnot just before I could plug that in and we can see that we're getting some of that it looks a little odd here I'll get into that in a bit but we can still access all of that data now I bring this up because here's a fun little thing you can do when you spell it correctly sorry uh you can access the scene depth at any given point so what that that means I'm going to divide it by 5,000 and then explain it what that means is this so because we can find out how far away a pixel is I can look at it and I can say hey it what it says is if a pixel is touching my eyeball gross that would be a value of zero but if the thing is all the way over there like 50 m Away by dividing it by 5,000 that says that's now a value of one right because 5,000 divid 5000 equal 1 so what we can actually do to that is we can use that calculation in different ways for instance if I look at a pixel and I look at the pixel above below left and right what I'm able to actually do is say hey if the distance between you is really big that actually tells me that that pixel's on the edge of something right because if this pixel's here and the next pixel is like way off in the distance then we know that something is a foot at the Circle K so what we want to do here is is we get that value which is our SC depth and we compare it now this is a little fiddly and I know anyone in the audience that knows hlsl is like dude you could have typed that in code and you're right but we're doing it this way so I can now say hey offset it on the y axis the x axis the negative Y and negative X we're going to get the scene depth and I'm going to find just the screen position so that's the default middle cell right I'm now going to find out what is one pixel on the y axis I'm going to find out what is one pixel on the x axis I'm going to find out negative Y andx and I know that's a little involved but that's okay you can look at screenshots of this later okay so if we want to get the average pixel depth you just add them all together and divide them by the number of things right that's how you find out the average of any set of numbers we all did primary school math okay and with that said this is now going to be the average distance of the pixels around it which means this minus this will give me this all right so we're starting to get somewhere not quite there yet first thing is that is very shimmery right it's not a good time so to get rid of that shimmering what we actually have to do is tell this hey when you're doing the postprocess can you do it before you run anti-aliasing because it would really be nice you know so like let's kind of smooth that thing out and you can do that in a post process by just saying Hey I want you to do it at this point during the pass which is looking a little bit nicer but you can now see Bloom actually kicks in over the top of it as well which is a funny Quirk so we can see that that's what's going on there um if you want to Value to not go above one or below zero you can use a saturate it's basically a clamp um and I can flip it and when I flip it we've got this if we wanted to include her by the way in the overlay material you can literally tell her to process at a different point and she would now be included in the postprocess as well so it's up to you whether you want her to pass out uh pass before after it right but the sky is obviously still a problem fortunately I can fix the sky which sounds more impressive than it is I literally just say is Sky and that will remove the sky from depth tests so we're starting to get somewhere here that's kind of interesting we're getting some nicer visuals together the next thing that I'm going to do is quickly throw in a thatching effect so if I wanted the world to look like it's been sketched um that sounds like a nice thing for us to really add to these outlines right so let's go ahead and do that I'm going to get um the you do it using a really common node most people that have used unreal materials for a while are familiar with World aligned textures it just projects a texture along this axis and this axis X Y and Z and blends them together I need a texture object which I'll put in um I feel like it's called scratch no just played too much Alum wake uh textured paper okay and we can see that that's projecting a texture into the world there but it's stretching along here and it's stretching along there because there's a little bit of a Guta but you basically need to tell the thing hey look at the direction that the world normal is facing that's a definite gotcha but when I plug that in uh it may be kind of hard on that screen but you can see that that's all wrapped in scratches yeah all right so if that's wrapped in scratches what we're going to do here is we're going to do the exact same thing we did on the overlay where we we find out what the scene texture is we say to it hey what is the current color which is called the postprocess input and we're doing the exact same logic we did moments ago in the other one right like I desap that I divide it by um the color and if I do that on here that tells me I'll fix that in a sec that tells me where the shading is so what I'm going to do is saturate it flip it and if I do this what we're now left with is a white mask wherever the Shadows are do you see that and if I was to multiply that against the scratches just going to grab the G Channel what we're left with is only the scratches in those locations and when I flip it back we've now got that okay so we've now got that kind of like shaded in effect looks a little bit weird on such a bright screen but we can multiply that together to say hey what does the shading look like now the last little thing I'm going to do there's just a couple of minutes left in this presentation last thing I'm going to do is what I've done ahead of time um is I've made a very easy little simulation stage and what it does is this see this texture this texture is a render Target and wherever she is in the world it paints her position to that texture do you see that so if I wanted her her to blend the world back into herself by the way making that effect is 4 minutes but I couldn't fit it into my 30 minute slot for this talk I tried um if I wanted to blend between the two I can actually do that really easily in the post process because what I can say to it is I can say hey find out where that find out where that is in the world the pixel that we're looking at and if I divide it by the size of the map which is the size of this texture shrunk down and I add 0. five this will actually give me that will actually show me where she is see how that texture is now being projected back onto the world now a cool thing that you can do in unreal that a lot of folks aren't aware of which I'm just going to clamp this so it doesn't repeat into Infinity um a cool thing you can do in unreal that a lot of folks are una aware of is we have a height lurp which says using a height map like blend those things together and I'm just going to say hey this represents what is and isn't colored the height texture is going to be some random brush Strokes that are look good so I'll just drag in some brush Strokes um here and I'll shrink you down a bit height texture and I'm just going to say to this thing Hey whenever you are Darkness Be the outlines and whenever you are fully lit uh the youth um I want you to be this colored version and what that will do now is that'll paint that kind of effect in instead accidentally plugged in Alpha but now wherever she is in the world we've got this and as I run through the world we're going to kind of blend between those postprocesses okay now I'm all out of time I hope this was useful thank you all very much I'm going to stick around for you to chat if you want to uh talk shop at all thank you we've got another session coming up [Applause] next

Channel: Unreal Engine

Views: 40,983

Keywords: Unreal Engine, Epic Games, UE4, Unreal, Game Engine, Game Dev, Game Development

Id: exMzwH7EJUY

Length: 29min 12sec (1752 seconds)

Published: Mon Apr 29 2024