Post Processing in UE4: Cel-Shading | Live Training | Unreal Engine Livestream

hi and welcome to the Unreal Engine news and community spotlight so first of all we have a wonderful article celebrating an unreal 2017 if you didn't catch our livestream on December 21st with Tim Sweeney and Joe Kramer you should definitely check that out and Daniel did a wonderful write-up of all the things that we had going on last year with a numerous events were d3 PSX Gamescom all the outstanding games that came out and were released last year if you missed any of that it's all well documented and definitely well worth the read additionally though we had a number of deaths in Indy beat DBS top 100 of 2017 including titles like absolve er a hat in time goblins of elder stone islands of nine we had over 20 entries and so we're really proud of the Unreal Engine development community and just all the great work that they do so rock on guys additionally we have a couple of multiplayer courses available so Sam patootie petuzi today getting started as Unreal Engine multiplayer in C++ he has a nice introductory tutorial on our blog and then he has an additional course that you can go check out and really dive a little deeper into multiplayer we also have a course published by Tom lumen that is a create multiplayer games with C++ it's a UA for mastery course so that's C++ and blueprints for games with AI elements and that's a wonderful course it's just kind of right now and udemy definitely recommend going and checking both of those out so this week's top karma earners these folks are always jumping on helping their partners in or their community members by answering questions and jumping in and we really love and appreciate that so we want to give you guys a huge shout out so there's Florida gin ve vision every none shadow River dart onla flu flu one one one Mackay girl VR Marco and evil fishy you guys I amazing and thank you thank you so much for all that you do for us on to our weekly spotlight our community spotlight so the first project we have this week is a project called repulsion so it's a classic first-person shooter roguelite it's available on Steam early access that's very much that fun like doom retro doom feel you're know going around shooting these awesome monsters and so it's it's by username castle and he's got a lot of progress and walkthrough he's got a couple different episodes and just really excited to see the game progress and what he's working through and it's just it looks like a lot of fun and I'm excited to to give it a shot our second community spotlight is a project called future mine so Denis Rutkowski developed this scene and he just made this really beautiful futuristic environment as a number if you go to the art station page he has a number of 360 screens that you can actually look around and check out this futuristic mind the textures are amazing the models look really wonderful I love the lighting and it's just he did a really great job putting it all together and I look forward to seeing work with him our third and final community spotlight it's a project called Tookie they just released in December and it's a fun little puzzler game this guy it's he's an average type of guy who likes having a few carrot beers and playing video games and he receives a stress call from his TV and it's a linen advanced alien bunny and she needs your help and you come through and you're going through solving these puzzles it just it's a fun quirky I love the environment and the design and the puzzles look really interesting and challenging and they've got a lot going on here there's I think there's 125 puzzles there's five different levels and beautiful world so really looking forward to seeing this and it's just it's just fun guys alright thanks for joining our news and community spotlight [Music] hey welcome to the Unreal Engine livestream I'm your host Amanda bot and with me today I have Tom Shannon one of our technical artists on the education team and senior technical writer Sam titer which we're all very familiar with so before we dive in I wanted to give a warm welcome to Tom you've recently joined epic and tell tell them a little about what you've worked on oh my well I've been in the games and visualization industries for the last over a decade I've been using Unreal 3 & 4 for eight or nine years I recently wrote a book on using unreal for design visualization so again welcome and thank you so much for joining us so today you're gonna go over post-processing a little bit do some introduction or introductory a little bit get into using post-process materials and getting a cool stylized look all right sounds good all right do it diamond all right so I think a common question I hear is how to do cell shading and non-realistic look in unreal for unreal for uses Unreal Engine 4 uses a PBR shader and it strives to get a very realistic rich look but often times that's not what you want so what is tuned shading tuned shading is a combination of an outline shader and a cel shader and you combine those together and it looks kind of like a cartoon or something like that you know ink and paint you've got a posterized color and then I've got a really thick defined outline that you know shapes everything up and gives it a little volume right that kind of avoiding soft gradient yep making it look more illustrative so there's a bunch of different ways that we can achieve these looks some of them more complicated than others the most common one that's that's been used in the past is the inverted hulls you take a mesh and you flip it inside out and you color that mesh black and you overlay it and it creates an outline it's really easy to do you do it on your art package it gives you a lot of flexibility because it's just part of your art pipeline but it's hard to tweak doesn't look good on a lot of models doesn't deform very well for skeletal meshes and it's fully on the art side you know the tech artists all of us engine people can't really do much with it but it works on mobile it works pretty much on anything because it's just the way the mesh is made so I'll give a quick demo of how to do that here see if I can get max up here's our cattle and he doesn't come in with textures unfortunately because he's using a mask so we'll just pretend like he's got a face so this mesh the first thing I'm gonna do is turn on the backface cull by default max likes to display the inside and outside faces and that's not going to work for us so we simply duplicate this guy or clone him as they call it in Max and then a couple of modifiers we just take this guy and we put a normal modifier on him so with the normal we're just going to flip the normals there which of course we can't see because the other toy cow is there but how oh my god inverted cow it's horrible and then we're gonna put a push on that these pastures me and push takes the normals the each vert and pushes it in and out base that's normal so you know if I do it extreme it's really horrible but we can just push it out just a little bit this way and so why do you want to push the why do you want to push the flipped one back out so get this guy back on and the push what that does and I can just tell this in an app is it gives us the outline so now of course we also have to go in and take that outline guy and put a different material on him outlines or black I forgot how to use Max's viewport controls cuz I've been in before press P real quick there you go now if you were in a camera before oh that's why I would explain all of my problems here so yeah you can see you get a pretty good outline effect it's really good you know you get some errors and corners and stuff another issue with this one is as your object gets further away the outlines disappear so do you want it to have an exactly one pixel outline for everything it's gonna be hard to achieve and of course when you get close your outlines are gonna get bigger but like I said this will work on any platform and you get outlines basically for free hey that's the demo I just did so the most so that's the most simple way and the most complicated way would be to write a custom shader in the engine using usf going and being really complicated we're not going to do that today this would be something if you were doing something that required absolute highest performance or you had a very large project that you wanted to implement this on a very basic level you if you're playing it to like your whole game that way you're gonna get a native implementation you can do a combination of call between USF and C++ so that's gonna give you something that's wickedly fast right especially when you get into stuff like the Sofia legit detection it running all of that per frame and then running everything else on top of that it's gonna end up eating processing power so implementing something like that if that's what your game requires if this is just like he goes to the dream sequence and the dream sequence happens to be and you know this patch posterized looking you know world then setting up like a post process or doing that simple tune shading when we flip the holes around is a better approach and also those other techniques can be used as a prototype and then if you get to the point where you know your game needs that extra 1.2 milliseconds that are getting eaten up by the post process you can go this route too you can also modify the the entire shader pipeline that way to solve some of the kind of edge issues we're gonna be looking at using post process mostly we're gonna take a look at the post process material pipeline and how that works in unreal so post process gives us it's a medium tech it's not high tech it's not low tech you need some skills you need to know how to use the material editor all of its done in ue4 so you can tweak it in the editor a lot it's very flexible and it has a really predictable performance cost the flipped whole method for example if you have a very high polygon model you're doubling the polygons so scene by scene and frame by frame you can have very different performance issues because of that whereas post process is fixed performance cost per pixel so of course as your resolution goes up it'll cost more just like most things but it's very predictable once you implement it you know that that's what it's gonna do it's not low-tech so you do have to have someone write a shader and maintain a material and everything and then in VR and mobile there are some limitations because we'll be relying very heavily on the G buffers which are part of the deferred rendering process and the G buffers give us information like the scene normals and the depth on the base color and some other things VR and mobile depending on the platform or if using forward rendering might not have access to those so you're limited and you have to find some more workarounds so how to do this really it's called a Sobel operation Sobel is just really comparing one pixel to its neighboring pixels and finding out what the difference is so if there isn't much of a difference you don't get a very big number but if there's a big difference you get a big number and so you can just throw that in and it creates lines and we'll see that in a minute we'll get into the editor so this is a diagram showing and you can see our center pixel here which is the pixel that renders and then we're gonna ask each of these four pixels for their values too and we're gonna ask for their their depth value find out how far from the camera they are and then we're also going to ask their surface normal and we're going to compare those so if there's a great the greater the difference the brighter the line will be or the brighter the pixel will be so let's see how that works not there here we go so here we are none real with a nice little scene I've made from the example content content I love the cow - I like this little little spaceship - and the conceit of the spaceship picking up the cows so let's let's get started here the first thing we're going to need to do is drop a post-process volume into our scene we already have one it's our global post process it's handling the bloom and the look and the color grading I'm going to drop this one in which will add on to that so I'm going to first check on the infinite extent or the unbound make sure it's enabled and now I have a place to drop a post process material so in the rendering features in the details of the post process volume you'll find this post process materials array you can have as many as you want of course each one will add its performance cost so we added one to the array and then you can choose between a light propagation volume which we won't get into and an asset reference which we will an asset reference is just that it's just like a reference to any other material or asset in the editor so now we have a place to put our material let's make a material so a post-process material is just like any material in ue4 it's made with materials in the material editor there we go I'll drag this over so we can see it here so to get a material to be a post-process material and access the g buffer we just set the material domain into those process you'll see right away that the only input we get is emissive color and that's all you and pipe through so if I were to take this guy and of course apply and hey I don't need that I don't need that I didn't want that and put that into this this post-process material array you'll see everything turns black unfortunately which shouldn't be unexpected since nothing's in the emissive color so of course we could pump in a vector and you know make a make the whole thing one color our whole scene is red pink not terribly interesting so let's get the so to get the actual scene to come through because we'll want to add stuff to it we use the scene texture node right here and in the scene texture node in the details we've got a list of where we can our source for our scene texture and normally in a regular material you would use scene color to access the scene color with pixels behind the translucent object but in post-process we have to use post-process input zero and that just means it's the pass-through scene texture that goes into the post process pipeline and if we connect that to the emissive color and hit OK it'll be equally unimpressive I just love it just really want it to do that each time you can see it's it's our scene so we are just passing the scene right through so now our material we've got our scene we can start to modify our scene and add stuff to it we can tint it can distort it but what we're going to want to do is start to pull some of the buffer data and do that Sobel operation and get the pixels so our first one is going to be the depth I've seen that and so instead of our post process input 0 we're gonna look for seen that easy enough and if I hit this now it would just totally blue mout because you know these are all very very high numbers the scene depth I can quickly divide by five hundred div or frak this will just help us visualize this make some stair steps a little bit more information in the world so yeah exactly that so the frack just it kind of makes it loop so once it hits 1.01 it's it removes the integer from it so you're always between one and zero so it'll create banding but it as you get further you can see it that's that cool so that's an a very basic example of using that data to then push it to the scene and be able to render that you could use that to create fog or something like that so we're gonna and we're not going to need to do that but we are going to need to sample so this returns that center pixel the zero zero pixel from that diagram from before and we need to sample the one above below left and right so to do that we have to modify the UV coordinates going in here and we want to do it by exactly a pixel and there's some math involved here so don't get scared because there's a cheat you used to have to do like one divided by the scene size and whatever but then some smart graphics engineer put this little node here for us all to use and this is the inverted size of the scene pixel which just gives you the fractional size of a pixel so that you can pull it out and we will multiply against a two vector and then add to our texture coordinate so a texture coordinate in a post process is really just the pixel that it's ad on the screen from 0 to 1 0 to 1 just like a texture map would be except your your texture quad is the rendered scene is it still instead of it starting like what is it the upper left-hand corner doesn't start in the center no I believe it starts in the upper left-hand corner I think you have to ask me that kind of question man that's hlsl init Bo get into that so we've got our texture corn so that'll be our Center pixel and so we won't just want to simply add to there so now we're not adding anything so we need to do so we are now gonna look just to the right to one pixel to the right and then this is well let's I'm gonna name this because otherwise I'll keep losing it center pixel and so this is the right pixel because it is one over on the on the X and then we can take the the value of this which will have to mask out because we only want one of the grayscale value of this we don't need RGB for this and in fact it can cause some errors because this will return the RGB a which is too much for most math things in unreal so we will take our right pixel and subtract that or I should say we will take the depth value of the pixel to the right and subtract that from our center pixel and we should actually I'm just this get some edging so you can already see some lines starting to develop in places and of course some gradients because we're only going in one direction here so it catches gradients going to the left and lines going to the right totally you can actually kind of do fake lighting in post process by doing this sort of thing of course you got to be all sorts of fancy to get shadows and so we need to do this four times thankfully we've got copy paste so I'm just gonna take this whole thing I'm gonna copy it up here and I'm just gonna change this guy to be our left pixel so it's negative one rename him left these are just labels these don't do anything they're just so I can see it and when I come back I know which one I'm I'm looking at so again we're gonna subtract excuse me our center pixel value with our left pixel and then we add these two guys together now we should get even more lines oh look at that so let's just do that for our other two just take the whole thing just copy that guy down there same thing we'll do zero one and that'll be the down zero negative one and that'll be our up pixel and then we've already got we just need to throw in the center pixel value into each of these subtracts and then let's add our ad so we've got the left and right the x value and the y's and they combine and then we need to combine each of them so we'll just add them all together ad ad ad now everything went right we've got lines lots and lots of light so this is the most straightforward way of getting your lines and and I'm gonna take a little quick moment to make an adjustment you can see we're getting a lot of jitter everything's dancing all over Unreal uses temporal anti-aliasing which you can see it in action here and literally just shakes the screen around constantly and then averages those values to just smooth out pixels and that looks beautiful and gives it a great look but when we're doing stuff like this you it becomes really visible post-process lines but we can fix this so the post-process material can take place at several points during the rendering pipeline we'll come on down here to the post process material so the default is after tone mapping so that's after bloom and ambient occlusion and everything else in the post it's the very last step so it'll take your your raw fully not raw your fully HDR scene and use that so if you you know want your blooms and stuff to be affected that's where you would want it there's also before tone mapping and before translucency and really both of these happen before tone mapping which is before all those effects and you can decide whether you want to include translucency in the process or not if you do prefer translucency the translucence the translucency will be layered on top of your effect if you do before tone mapping the post process material Wolverine after the translucency has been added so it will affect the translucency okay so we are gonna do either one in this case I'm just gonna go before tongue having you'll see right away not only our lines less jittery they're also thicker and this is because as it does that jitter that one pixel kind of exists in a few places so everything just gets a little thicker can be down here a little bit you're getting the average of where all the pixels are right and these lines are pretty bright so they show up really well and they kind of catching all those pixels so we probably don't want our just I'll just keep doing it windows we probably don't want such thick lines so we can do a simple image manipulation to these lines by adding a multiply and a power basically so that we can control the contrast and brightness of the lines so if we just run a multiply and I'm holding down ass and clicking to create a scalar magic and we will call this line depth line slightly closer and we'll default this one to one and then we'll put a power on here and I'm thinking I might have these backwards I can never quite remember if it's multiplied first or power and again default value and we here's another good trick so you can take a note and right click and just connect straight to emissive rather than having to drag up each time and that's really helpful when doing these post process materials because you can just see how good one they can get really really really good really big really quick so now we can modify these guys so if we lower the weight or the multiply you can see where we start to get rid of a lot of those extra lines those interior lines and all this extra stuff out here that's probably showed it really well on that fence post right there if you put it back to setting up one and you believe one yes you see the edge line pitch right there and that's just because the depth there has a little bit of a bump due to the edges it's amazing how much detail you can especially I'm round object you can see like this guy here look we're looking for so we can go it's like point one and then add a little bias let's see if this is in the right spot it seems to be something good so now now that's pretty good and that's actually a really nice outline shader really good it's got some issues that I don't like one of them being that doesn't have the inside lines you know I can't see anything of the detail in here I can't see the cows eyes or his face or where this meets the ground and those are really key lines so the depth gives us stuff that's far away from other things which is important that's you know that it's another object and you would draw a line there so the other thing we can do is so to get those inside lines instead of comparing the depth we can compare the normals because let's say the fence post is looking straight at you if you sample this pixel and then sample the one on this side and we'll see a pretty big difference if we sampled the depth we wouldn't see a big difference because those two pixels on that corner are super close but their angles are very different so we can find some information that way so again I'm just gonna take this big messy beast just drag it a little bit cuz I'm sure some people are screaming at my spaghetti these could all be coming off of one node and yet this this network is a little spaghetti ish I would normally do things a little cleaner but I just want to make it really clear yeah lots of constants and no I said add some comments oh yes well I'm gonna do a comment right now this is going down yeah so I did that by selecting them all and hitting the C key and it makes a comment box so I'm gonna take all of the depth lines copy paste poof we're gonna call this our mole so this only takes a couple of adjustments the first thing we obviously have to do is go through all of these guys these guys go through these guys and switch them to the scene normal it's a world normal just holding down control and he clicked every single one in the node since it's all the exact same node a table he's a little able to mass edit everything at once just in case anybody was wondering what he was doing there find which one are you looking for normal that's ambient occlusion real normal there you go everyday it's there an alphabetical order or not because you know that's how words work so now we're we're sampling the world normal we don't just want the grayscale and I'll show you here if I just connect to emissive color show real quick it's not all the information we need where a normal will have is a vector so it's three value XYZ this is more what we want so we need to compare the X Y Z so I have to adjust these math select all of them same way holding down control and selecting them and modifying them all at once so now we're doing the same thing we're taking that center pixel and we're subtracting them out and we're combining ad ad ad I think if I go right here connect color now we have our normal lines and you can see they're colored based on the normals and so the normal lines almost do the opposite you get you don't often you can often lose the outside edges like right here because this normal is the same as the ground they both face straight up so you're not gonna get that nice thick line like right here you can see it really well and so they work well together but those aren't the ones we want right we want the actual interior lines right so now we can see we can see the cows eyes we can see these inside edges nostrils yes nostrils of course we've got you know some of the same issues with the biasing and the multiply but that's easy enough to take care of and we also want to get rid of the color we just want it to be light there's a nice node that I discovered which is add components and this takes a vector and just adds the components together so we have a float 3 so I've moved it from the float 2 to the float 3 and I'll output out to the float 3 and we should see so we've just added each of those channels and returned a single grace gave out grayscale value ah the other thing I need to do is change the name of these normal normal lines bias and we can connect these to the emissive color and there's our lines and of course I think they've been a little overly biased maybe I'm just biased there's a joke there doing do-it-yourself jokes yes I've provided you some funny words you put them together yourself so then we we need to combine these two so that we get depth and normals and the way I you can add them together but you might get you know a lot because it'll add past one you can clamp them and then add them whatever I finally settled on a max node so I max node will take whatever the highest value if you pass it to pixels it'll take whatever the biggest one is so it'll just always take the brightest so it's kind of like a overlay mode not quite sure what that would be in Photoshop I missed that's why I do this now you see we've got inside lines we got outside lines we have some extra lines out here but of course we can tweak those and you'll see in a second when we make those into black lines and most of that will disappear so let's get the lines onto our scene instead of this this mask so this is our mask our line mask we can say stuff that's white will be lines and stuff that's black will be seen and to do that we mean that once again one of our scene textures is we need to sample the scene texture and that again is the post process input zero and just as an aside if you were to leave it on scene color and tried to do that it would give you an error and let you know same color lookups are only available in surface domain you must use post process and put zero so if you do it wrong it'll tell you what to do and your error disappears so we want to take this guy and I am going to lurk one of my favorite nodes the linear interpolate linear interpolate takes two inputs and then takes an alpha and blends between them so you can pass a pretty much anything into these guys and passive textures and learners like your material editor crutch pretty much use it for everything pretty much it's it's super great and so we're gonna use the lines that we made as our alpha before I do I know that I need to clamp this because the lerp doesn't clamp and values over one will just you know if your it'll just keep multiplying and multiplying and values under one will keep going so we've got to clamp these lines because they're probably really bright but we don't know it and we're going to combine so the a input is the black in our image here so we're gonna all the stuff that's black should be the scene and all the stuff that's white and our masks will be black here and I'm actually going to make a vector and call it lime color because I like to be a little add a little flexibility and there's an empty node here that's just I've found an error and this is a common one when working in post-processing you will see this error float 3 and float four not defined and I hit on it and really briefly earlier with these masks the post process or the scene texture returns a vector 4 out of here and most colors are a vector 3 so it can cause some some errors so we just go and put a mask what he means by that is it's gonna return the RGB and the Alpha which would be this yeah and normally that's disabled because you know you don't use the Alpha very much we can save an extra channel that's gonna be saving us some performance see our error disappears just with that little mask so if you're getting that error you probably need to put a component mask on your scene texture there we go Hey sumon it see some outlines there's some outlines that's super sharp so I also want to hit on of course as we move into the next part of this which is the cell shading part is that source art is a huge part of this still you can't just take any content and throw a cell shader on and it's gonna look good if your textures have a lot of noise and a lot of normals in them you're gonna get a lot of noise and it's not gonna look good you need basic shapes and basic colors and so there is an art pipeline it's not just a magic make your game look like a cartoon which is why I'm using these cartoonish accent assets you know I tried it and some of the more realistic ones and it looks cool but it wasn't really the look I was going for so I really want to get a a cartoon look so we've got our lines and you know we could go in and tweak them feel like the inside lines need a little there we go now our inside so we can see around his eye and everything a lot better it looks pretty good of course if you wanted to make your lines thicker you could go in and modify these and push them out a little further if you wanted to make your lines thicker you would simply sample another pixel out in each direction so you could modify each one of these vector values instead of instead of using one you would just use two and two and to note you can't you have to use an integer so you couldn't do 1.5 you can't do 1.5 unfortunately there's no pixel there and that makes the the G buffer can't return a filtered pixel unfortunately so you just get kind of noise and it doesn't quite work maybe one day so yeah so that's that's our lines so let me return to this guy here demo so now we've got our lines now we want to you know right now everything in here has nice gradients and shiny reflections and it doesn't really look too in shaded people might not even notice that it has outlines yet so let's add that here we are how do we add that so there's a couple ways to go along with the hole where we duplicated the cow and flip dish is normals to create a shell you can also create a cel-shaded look through the objects materials can paint things to look totally 3d you can even do some nifty math with vectors and create banded looks in there but again it's it's a per object thing it's a per material thing it might be hard to maintain through an entire big project but it'll give you a lot a lot of fine control but I wouldn't say that it's an easier way to go about it it really depends on what your goals are if you really need a perfect you know cartoon look that matches you know the TV show cartoon you're probably looking at a usf thing anyways this is kind of an old-school way of doing it I'm not even gonna demonstrate it because I don't think many people will be doing it that way it also doesn't have a lot of access to the scene lighting data so you'll be kind of overwriting but all the Nifty PBR and shading stuff that unreal is doing it sounds like you're gonna kind of be fighting unreal a little bit you're kind of fighting unreal you know unreal will still be running its full renderer in the background full PBR and you'll just be covering it up so maybe not the right way but a it could be the right way for your game or if you just need an object that needs it so we're gonna look of course at the post process so what are the same pros as before same performance profile you know it's global it covers your whole scene it's easy to tweak because it's in ue4 we also can get the lighting and shadows because we're dealing with the actual rendered scene cons it can look bad posterization you don't have a lot of control over what colors are being presented so you have to control your lighting and your materials and everything much more deftly to avoid kind of colors you don't want if you don't want that weird pink band you're gonna have to go in and make everything fine tune it fine-tune it again it can't just like throw it at at you know the showdown demo and have a cartoon version of it and it requires art support asterisks because you do have to kind of design your art pipeline in your look to support it so that it looks its best the assets I'm using of course are straight out of the content browser or the content examples so they weren't authored for that so they have some of those issues but they will still look pretty good and fortunately this is actually a very easy thing to do posterization is like HLSL 1.0 the first thing they teach you on a videos website it's just a couple of math nodes and we're gonna take that and combine it with a little trick I figured out to make it look a little more Tunney and we'll see why we're gonna have to do that so I'm gonna move this guy over give us some room I'm gonna start posterizing so I'm gonna take our scene texture here because I want I want to post her eyes it I'm gonna bring them down here we can all see what I'm doing as well get rid of that sky - all right so we've got our seen texture and - poster eyes all we're gonna do is now I have to remember the order of operations here we're gonna multiply it by a certain amount and then we are going to floor floor is like a round it rounds down so if you've got one point six you get one if you've got two point two you get two so it just rounds down there's also a seal sealing which rounds up and I think there's a round now I think there is a round out so but there wasn't for a while but now there is but we're gonna use floor you could use anyone it'll slightly change the way it looks and then we are going to divide that by a single amount and we are going to call this number of colors and it's really not the number of colors but it is the number of bands that you'll get through each color range connect this guy and we're gonna add more than zero here we're gonna hit apply so now we've got that posterization so we've really just kind of expanded the image out really far and then averaged out all of those colors and then shrunk them back into the view space if if that makes any sense so then the the more colors that we asked for the more bands we'll get up until the image just looks smooth again so we can go all the way down almost like you're making the sunset right dude I'm so really this is this the value of this is up to you where you want things but you'll see right away that we end up with a lot of black and that's just kind of par for the course for how this works if you've got any contrast in your scene you're gonna end up with a lot of black so I I've fought it and I fought it I just couldn't get it to look right until I kind of accidentally discovered oh you can see base color is the unshaded colors so it's all the stuff all your Obito's right it's the base color from each of your materials and I'm like well that looks like a cartoon what would happen if I overlaid this on top of it remember the mask so now we hold on just a sec twitches Oh am I live - anywhere you're twitch folks are having issues I'm sorry everybody what did he discover what did I break I have that do y'all still hear us my phone YouTube it's like one of them's like this dream ended right exactly before he explained what I wanted to know put up the technical difficulty signs like the puppy playing with a record the one from The Simpsons mushiya alright we're back up on twitch sorry about that folks it's cold out here alright twitch is being grumpy am i live again I'm alive alright well I'm not quite sure where twitch cut out there um I think I should go back it'll probably cut out when you were starting over where everything was black alright so yeah hopefully how how did you solve the excessive black alright so yeah too salty excessive black thank you and you can see I've done it here so yeah I took out just go back so I was digging through trying to figure out a nice tune look and I was playing with the scene seen textures and just going through each one of these thing what they are and I hit base color base color returns the base color of all your materials with no shading so this is before any lighting has been applied and you can see it looks like a cartoon so I'm like well that's a good start now if I could just get that lighting on top of it and that's super easy lighting is really just an additive process so let's take that lighting that we had and add that here's our I'm sorry our seen with our posterization and we'll just add that to the base texture and apply here we go so now you can see we've got some nice color banding we don't have a lot of strong smooth gradients and stuff maybe the background is a little too bright that's really easy to fix I just threw a multiply and I'm holding down V and clicking to get a vector parameter which I will name and I'll multiply that and then send that into that add operation and we're back to black I can edit this guy and bring in I could even like bring in a little bit of blue nice look so yeah just a couple couple nodes you've got a pretty okay and this is nice because it's using the full scene render so you still get reflections and shadows and lights and all of that stuff the full Unreal pipeline is is being used and modified so gives you the tune look with all the flexibility of the renderer right right so yeah you'll get to shooting on reflections and stuff that you may not want but you may want it so it's really up to you artistically so let's go ahead and add our lines back on here and we're pretty much done so to do that we're gonna use another alert because I love lip and I hold down L and I can make one of many chords and so one of these the the black it's going to be the scene while the white or yes the black is the scene while the white is you know what I already have this set up don't I so really I just need to take this little thing I have here so we've got our lines coming in combining getting clamped to 0 to 1 so that we don't have any negative data or any like super crazy got our line color and then this is our scene so instead of our regular unprocessed scene we will go and take this guy and replacement hmm then we'll connect that to a mess of color look at that spaghetti somewhere someone's screaming apply here we go just like that 16 minutes later you've got a two-hitter in ue4 so there's the one last thing I did was I was like this looks too flat now it's just too flat it's got no depth I can't there's no contact shadows I need to bring back step so again I was playing with this the scene lighting or the scene texture and I copied this again and I discovered look I have access to ambient occlusion so of course I can just take ambient occlusion and multiply that on top of everything and now I'll get the oh man I did it again it's almost like I've every time I do this I have to make this mistake never learn never learn I never will I refuse dad you might not be able to see it because it hasn't been tweaked but now we've got some shading and a little bit of roundness around our characters see if I can learn how to use this keyboard and find our post process we'll go and add some ambient occlusion crank it now you can see that that exists right on there just adds a little little extra and you know of course you probably tweak it to not look so absolutely terrible in your own projects but just want to give it an example of somebody you can continue to add and create something back you know maybe you mess with the roughness or the metallic or something like that is something that's gonna give you the look that you want to go for for your project right and it's fun to just go through the seen texture node and you have access to all of this stuff so you can do a lot of really fun masking and make everything with the metallic property do something it's really really an interesting way of experimenting with post-process just kind of see what's in here because it gives you access to a lot of fun stuff yeah so I think that's I think I've got some other slides here real quick let me see add screen space ambient occlusion we've talked about the limitations of doing this briefly VR and forward rendering I've tried it obviously posterization works but you don't have access to that base color man so you can't do that add-on so you have to find some way of getting rid of those really deep blacks you also don't have access to the normal G buffer you have only have access to the depth in the base color so you can get the outlines but you can't get those inside outlines nice so there's some trade-offs there there also wondering about some performance - like how does it affect performance in VR versus it's pretty low performance it doesn't do a whole lot of math operations and mostly just accesses what's available already in the rendering pipeline but again it's gonna be something that you if you are using this for VR it's gonna be something you're going to pull up the profiler check it out right sure that you're within your your budgets and then you're gonna want to crank down on things that you don't use so say for example you don't use any metallic you know you maybe you want to pull out talks not the best example let's say from your post process you don't end up using maybe some depth of field or something else like that's you're gonna want to crank that stuff down so that you then have a little bit of extra processing power for the tomb shading or things like this and then use a combination of stuff maybe maybe you set it on a distant space so from 0 to say a thousand unreal units ouch you have the post process material than anything passed that uses the the first trick that you showed us with just a hole yeah flipping the normal you know so you get this very very cheap mesh based effect you know it's coming up with little trade-offs like that which is going to affect performance more than anything else but also a lot of this is unlit stuff so really really really cheap whose processing so this shader at 1900 by 1080 is 0.27 milliseconds so it's it's pretty darn cheap of course you know it scales up pretty linearly with your resolution so you're gonna get twice as much as that VR yeah b-bow about twice about twice two of those yeah give or take there's probably some optimizations there so it might not be but I would count on it being about twice that much for VR and 0.0 point five point six milliseconds in VR is actually someone was asking me about like looking at his phone reading about questions and Sam's just he's easily distracted at all any other question could you do a variable thickness so a lot of this is pretty straightforward but they were talking about for instance like Okami has a variable thickness around a lot of the assets or the items in the scene you could yeah like I said you can so right now we're sampling just one pixel over you could sample two pixels to the right and get kind of a bias you could sample two pixels everywhere and get a much thicker line you can you could have a different thickness for the normal based line so your inside lines are finer and your depth baseline most are gonna be uniform like left right as opposed to like a brushstroke kind of shape or something like that yes ish unless you do that like an offset where you're sampling more in one direction but not so I I'm not sure how Okami manage there's I think it's a combination of particle systems along with post-processing to get that effect to work right Mori inking you can paint technique right and that that's something that you would need to probably dig into the usf to create something that could you know stretch an image long kind of a pixel vector path or something right is it is it can you smooth out the line between colors to make it look like it was done more with markers or is that gonna again be more like a usf yeah I mean you might be able to but thinking about it sounds like a blur operation in that case you might be better off and it sounds like for the gradients you might just be better off kind of you know if you were to take this technique you try and pull our material editor is my poster I've seen so if we were like to crank the number of colors here so that it's not really posterized anymore you know this is a more tune like look because we're adding it onto that base color is washing out all the shadows so you could get something like that but it would require some art direction so here we've got you know much a much softer more gradient look kind of looks like marker so yeah I'll say yes you and they they kind of assume you can make this a material instance and edit it in real time right and that's one of the great benefits is that it's uses the Unreal material pipeline it's just a material so material instances work parameters switches you can also have because it's a material and it's based on these post process volumes you could have it change values as you move from one place to another so one place might not have an outlining another place does or you know one place has more banding and one place is smoother so and it'll actually interpolate between those as you move between the volumes and the different settings in your instances okay would it be possible to make the outlines the same color as the mesh but darker so can you sample like the color and the scene that it's on you can yeah so you could so right now we've just got a color or line color somewhere here's our line color so if you wanted to rather than the line color you could probably just a take this base color let's give it a try Oh one day I will remember to ask that one day and then they'll fix it so I don't have to be nice to me just like do you want alpha right on the node like right in there yeah all right so so yeah here you can see like our lines here now based on the mesh we've got white lines on our towel and now a yellow line around him but you can see his white lines it's pink in here we've got green on the trees it's really good on the side of his mouth over there yeah right there yeah you've got his white line there his white lines around here you could and then of course tint that as well so your lines were maybe a shade darker than whatever there were sampled from who it worked their honor with this work on particles and voxels as well it'll work on anything in the scene so think this guy Scott oh look he's got some particles off off his bow port I don't know why I'm using nautical terms I don't even know him and you can see right here his effects are getting posterized so if we didn't want that if we wanted the translucent particles and stuff to not be affected to sit over it we can change where this blends yeah that was actually one of the other questions is about excluding things from the effect and how to and so that's a good way of doing translucent objects to get them so that they're not which will be most of your effects you know fire and whatnot you'll probably typically you want those to not be effective they're kind of unpredictable with all the other colors right and then you can use if you want to just limit the effect to individual objects you can use the custom depth buffer and mask out this effect so that you're only getting it on things or not on specific things well I think that's about all of our time for today I wanted to thank you both again for joining us also if you have additional questions feel free to jump back in to the forum post where we made the announcement and I'll direct I'll send that link over to you all if you're willing to answer your questions and we can follow up to some of the things that we were weren't able to get answered today for you as always please please please submit your projects to the NVIDIA edge program we're always looking to give you amazing ten atti so you know you make awesome projects we're doing some sick hardware you can't argue with that right I also dropped a link into the chats about our live stream survey let us know how we're doing what topics you'd like to see in the future and then we can keep doing more in these days well any of you do this topic here's the list you pick from the list this is what they watch welcome to epic I want to be on TV but again thank you both so much for joining this is a very useful thing for our community and knowledge or didn't thanks for having me thank you all have a good week next week we are going to be talking about copyright and Trademark because it's a important thing so we'll see you next week bye bye everybody [Music]

Channel: Unreal Engine

Views: 109,917

Keywords: Game Development, Shaders, UE4, Unreal Engine

Id: cQw1CL0xYBE

Length: 70min 49sec (4249 seconds)

Published: Fri Jan 12 2018

Reddit Comments

[u/cesarmac]

Games work on simulated physics abd physics is math so yea. Many big time tech firms like for their programmers to be proficient in math it possible.

[u/demien88]

There is way much more to it, its good to know these things if you are making games to know what kind of behavior to expect and how to avoid problems. Math is good part of it thats why you have several stages of it

[u/[deleted]]

It’s kind of cool knowing how games work because you can understand what developers actually mean