Stylized lines and outlines - Unreal Material

[Music] hello everyone i'm kamin hepner and welcome today i'll walk you through how you can add lines to your stylized renders as you can see i've added them here to our previous hatching shader so if you are new you know follow up with the tutorial about the hatching and we will pick up from there and add the lines right now as you can see the lines added extra dimension to our render which make it looks super nice and stylized and enjoy watching [Music] all right before we jump to unreal and start working on the shader let's have a quick breakdown of few line drawings and see what basically is a line and what kind of properties our line shader should have let's maybe start with this part here to add depth into drawings one of the technique is to draw lines closer to the camera or viewer however you will say it thicker and the lines of objects much further are thinner so this is really important that's something which will replicate in a shader so when the object is closer to us the line is thicker and when the objects are further away lines are thinner or they even disappear right another interesting thing is that the lines kind of go around the contours of objects or we can say features like for example here on the ellipse we already implemented that part where the cross hatching lines kind of bending around the surface to add this three dimensionality to it we did that in a hatching shader tutorial but we can see here that the line goes around the lips um you know we just have a brief look the line is a little bit irregular this is super cool and i think that bring us here to this drawing that lines are quite irregular we can see that the color sometimes go outside of the line contour and that's basically it i think this is good place to start with so we will try to get the line thicker irregular and see how does it look okay [Music] all right so this is a final result of our shader and i'm using here a static version of a hatching shader you can find on my youtube how you can convert that one where we move the camera the hatching texture was changing and if you want to grab the files you can grab it from my coffee page as well if you want to follow up and you don't want to redo everything by yourself you know and there's also a hatching textures and etc but let's go back to our lines as you can see here for example we have the lines closer to the camera much thicker lines further thinner and as well we have a little bit of a squiggliness in the lines just have you know a little bit of a randomness to it right i make it more like a drawing so the whole thing based on simplified version of edge detection algorithm i can say before we stop jumping into a material builder and show you how you can build this material it's basically post process materials so let me just maybe show you uh step by steps what's happening here so here i have a post process volume and i'm gonna turn off the paper i'm gonna turn off the hatching lines as you can see this is the lines which we are been talking about this is what we're gonna create and let me just hide the the squiggliness and we will start with that we're gonna first create the lines like this okay so how we can detect those lines it's pretty simple let's jump to and let's talk about edge detection and how there is a very simple algorithm to do that here i just have a screenshot of all what we need to do is basically shift the picture by one pixel in every direction so it's a left right up and down and subtracted from the original picture so first of all this is our original render right and then i have a version shifted by one pixel to the right you can see right it's just shifted by one pixel cool and when we have that version shifted by one pixel all what we need to do is just subtract it from the original picture and let me show you what's happened when you just go and subtract it so this should be subtract somewhere here here you go you see it starts kind of just picking up the edges and we do that for every direction we're doing for right left top and down you can also do it in 45 degrees but to be honest it's not really necessary in our case because we just want to do a simple case and you can always extend it right and that looks like a little bit of an edge detection algorithm now let's say because you can see a colors we work in the colors but we can do we can also desaturate original image and desaturate that one which been shifted and now you can see we start getting some sort of lines right the thing is we're not gonna work on the image like that with all the shading and everything what we will do will take the deep buffer and we'll shift the d buffer okay left and right up and down by doing this we basically gonna get the edges and we can actually simulate it why not let's just go back here all right so this is our deep buffer the same thing let's just grab a screen and let's bring it there so this is deep buffer now duplicate the layer shift it by one pixel to the right and subtract it and here you go you can see here we got the edge so we're gonna do it in every direction okay [Music] let me turn up the debuffer visualization good i have adjust the details on the separated panel um okay let's start clean all right let's just remove all the materials from post process and a hatching post-process material you have in the latest video and from the youtube which you can watch as well if you don't recreate the whole look you can grab the files from my coffee page if you like to all right first let's start by creating lines just to detect all the lines all right let's create a new material will call it pp lines video let's change our material domain to the past process and we can change before tone mapping so as i said what we do we operate on a d buffer so let's get the scene texture and let's get the deep buffer okay here you go let's connect it to emissive color so if you haven't follow a previous tutorial just to let you know the adaptation is turned off for this project because we want to have a control um about the lighting so the eye adaptation is turned off and the outer exposure etc is turned off so watch the previous tutorials if you're curious how to do it if you want you can grab the files from a coffee page if you don't want to recreate everything okay cool so this is our deep buffer here and it's very bright we can multiply by some small numbers so you can see it a little bit better it's just a visualization thing again is the small volume and let's connect it to emissive color and yeah then you can see so this is our d buffer and we want to desaturate it some sort of way so because d buffer is black and white anyway so we're just gonna operate on a scalar values let's use a mask to mask it component mask here you go and let's use the red channel here and as you remember we will subtract it from shifted by one pixel the buffer right and we're gonna get to this shift how to do it in a second let's just subtract one from another so now when we subtract the unchanged but when we subtract one from another obviously you will get zero right there's nothingness because we subtract the same one now we need to modify the uuv for this one so we'll basically shift it only by one pixel no matter the size of the window and etc there isn't a way in unreal to just simply say shift this buffer by one pixel and always pretty easy but sometimes confusing for people let me just show you as you know we can query the information from the buffers based on uvs right my uvs are from zero to one starting with upper left corner this is a zero zero and here is like one zero here is one one and here is a zero one right so we need to know the value of the shift in uv no matter how big is the size of the image to shift it just by one pixel right and luckily we have already here very easy access to this information of what's the value what's the uv value for one pixel shift and that gives us the inverse size inverse size is basically one divided by the size of an image in the x and y direction right awesome so let's start with the up and down section first okay we have an inverse scale here let us just the y direction positive one from it multiply it and just one thing let's say i will show it to you debug scalar values and we can just put the inverse size and connect it to emissive color all right i need to be um sorry that's a vector because it's x and y so we can debug two float values fantastic and let's connect it to the emissive color okay so this is uv values to shift a picture by one pixel and then you can multiply as many pixels you want to shift it it's multiplied by one two three or four okay and those values change depends on the size of the pics of the picture right so if i just go back here and if we just go to nice pause process volume and we started clean let's add a lines here remember it was called lines video yep and let's just get back here let's save it and we go back here cool we have a different values here and different values here because it's a different size of the windows great so no matter what the size of the window will be we can also do play in editor window and i think that's now being pretty clear that those values change and now we know if we wanna just shift it by one pixel we know exact value of the uv great let's get back to our shader let's remove the debug so now we just want a one direction and it's a positive y and let's just add it to the texture coordinate okay and we'll plug it into the second one as you remember this is the original one and this is the shifted one right and now if we display the emissive color we should be able to see something and let's just have a check inverse size all good all looking great let's get back here and it's fantastic so it actually does what it's supposed to do it's shifting and shifting images and we are detecting now the faces facing up let's just repeat the same thing let's just clean up a little bit make it a little bit more spacious and let's just duplicate the same thing for the minus y direction okay we go and we just need to change here to minus one great and since we are subtracting those two as well i know i did not copy those two notes here you go we'll connect the colors here okay and we'll just add great and let's have a look let's connect it to an emissive color great as you can see we start getting some edges here when we're shifting image up and down we start getting see some edges and let's just save it let's get back to the hatching video yep we start see some edges and we currently see only like top and bottom edges we don't see it left and right so the next step is just to add left and right and as you can imagine is very simple we basically change the value of this vector from zero one to one zero and then minus one zero okay so i'm just gonna do it and we add all of them together all right and this is we can say this is the basics of the edge detection based on a debuffer so you're getting outlines of your objects and it's really cool it doesn't need to be included in your shaders in your materials for objects you can just use as a post-process material so it's really powerful very easy to set up and it's it's global thing now as you can see there is our sky sphere it's visible it has the polygons from the sky sphere are basically visible so what we will do we'll deal with it a little bit later okay we're just going to remove it from the d buffer it's easy to do now what we'll do with will deal with the thickness of lines we want the lines closer to us to be thicker and lines further away to be thinner [Music] we will use the buffer to change the thickness of lines right so let's copy our d buffer notes in texture depth and let's copy the mask now this is mask so we want to work on a scalar values not only vectors because that's returned as a vector even if it's black and white and let's just connect this one to emissive color and just for visualization let's just multiply it for a second and let's just multiply it by some smaller value the reason why it's white if you don't know the thing is it gives us if i just gonna just say emissive color a little bit too big volume so everything you know in unreal which is which makes sense everything what is above value one will be white right so if it's two it's going to be wide and et cetera et cetera and the deep buffer the way how it works pixel has a value of how far from a camera it is right so you can imagine we are like if we are that close we are almost like you know let's say 80 units right and if we are like that far which is like 2 000 units right so you can imagine why everything is white and just to bring it down we just divide it by 100 or multiply by zero zero one okay cool and i just just just for visualization so we're gonna use these values to to multiply our line thickness okay and control it so let's just do some measurements maybe should we let's just jump from the top i just let's just hold the middle mouse button and i can see okay i can see that the house or whatever is seen i'm working and is like 1000 units depth right so that kind of gives me indication that i like the lines if camera is here i would like these lines to be thicker and this line to be thinner so like everything happens to like in a 1000 or maybe 700 units okay this is like a first measurement to know how much depth on on on what scale of the depth you will like control it good we can keep multiply just for visualization but first thing what we want to do we want to clamp it okay we want to clamp our the buffer value so let's clamp it and we want to clamp it from let's say so the closest value will be 100 so that's when the lines will be the thickest and the thinnest line will start happening at 600 okay just for now and then we can expose as a parameters and we can adjust it so the lines if there is a distance 700 or 800 they will just stay the same okay they'll just be the thinnest line and the thickness if we are like at the distance of 800 units like super close to the object it's still gonna be the same thickness okay right now we would like to remap those values so we will get the value from something as we can use as a multiplier so let's do it and let's type remap remap value range now i'm going to disconnect this guy here okay and as a mean law we can use the same values here and target low and high let's set it to 1 for for time being okay so you plug both those values to low and high and now we can use as a multiplier to define how thick the line will be and the way how you do it you just multiplied basically the shift of how many pixels the buffer been shifted so it was just shift by one pixel the lines are one pixel thick but when we multiply it by four and the pixels it was like a four pixel shift the line will be four pixel thick okay so we need to inject it in those places here so that's pretty easy let's just add one multiplier here to just show you how those work okay and we just put that out from this range here so i'm gonna quickly redo it for all of those great so let's save it and let's have a look how does look okay just be sure that we have it connected to emissive color great and let's have a look let's just go back to our perspective of the alt g so now you can see that let me just double check if we are using our video for to be sure of course it does okay so now you can see our lines and because we didn't change the value yet so all the lines are one pixel thick but let's just zoom in here on the stairs so we can see that effect and now if you increase the value of of low so what is closer to us to let's say six right and let's just save it you will see a nice effect here that the lines here closer to us are thicker right and to disable this glowing bloom effect it's pretty simple we just select our post process volume go to details and type bloom yep here you go and you can just leave the method as a star that doesn't matter but we're just gonna put the intensity to zero okay great and now you can see closer to the camera we have our lines thicker and further it goes we have our lines thinner so according to water according to our basically a research which we did in the breakdown of the style let's give a nice depth to our render there's a few more interesting things which we need to do as you can see here we have a box and box have an edge here obviously but there is no line created on the edge so generally speaking we have outlines created right now but we do not have visible very well the lines or changes happens only objects like there is a box here and i would like to see a little bit of a line here and here as well so there is a way to do it we basically do the same thing we search for edges but we search it on normal basically normal buffer let me just show you how those look war normal displays basically the value of which direction the current pixels are facing and we can use this buffer to get some extra lines like you see there will be are some variations here between those values here and there will be some extra lines showing up to give a little bit of a definition in our picture so let me show you how to do it [Music] it's pretty simple to implement that part we just need to copy that all three here i mean the whole graph maybe not the tree and just move it down a little bit we will use the same logic of multiplying by a distance so that's that's we're gonna keep for sure we just need to plug it back here and the wine difference is that instead of using deb buffer here we're gonna use the world normal so we can select all of those nodes which using scene depth here you go and switch it toward normal and you can see all of them now are switched toward normal and we can have a quick debug view how does it look and let's connect it to emissive color save it yep so that gives us more of a polygon outlines right it looks pretty cool so yep we save this good good oh we just need to go to lid mode great as you can see now we're getting uh some polygons visible and when we combine it with our original lines outlines that would give us more of a nice definitions here so that's super awesome let's just add those two together actually there's one mistake here when i'm looking at it as you can see what's happening here we're using a mask for wall normal so we only working with the red colors that's why when we looking we don't see from polygons from every angle i could say what we need to do we need to change those masks to basically rgb yep yes we're gonna work with the rgb edge detection right now then we're gonna desaturate it and then add it back right so this is important step which we just skip okay let's have a look and this is invert size that's okay so rgb rgb rgb all of those looks good yeah we're adding them and now you can see we are detecting much more edges yeah so this is the save and let's go back here yep now you can see we're detecting edges here and here which is awesome and you know that could be your stylized look for example if you going for some sort of cyberpunk neo synth wave looking and you know you can go and explore it much more it actually looks pretty cool but while we we're going for more like a cartoony hand drone style so the next step for us to do is basically desaturate it when it comes out from here we could we could we can't grab just r volume or g or something because they're different values so the saturation is the best business best way to go great and we plug it to the add and we're connecting this one to emissive color and save it the bloom is visible here that's all right but when we go back to our view yep let's save once again yep here you go now we can see the edges showing up for example here in the box you can see that the edges are showing up here we can crank it up those values so they're the much more pronounced than just like a gentle indication what i also like to do i like to just increase the contrast between the lines so the reason behind that is if you have um objects with lots of normal changes like rocks or something like that that could be quite handy if you just increase the contrast so we just only see the strongest line not all the lines and you know what just the last thing to do let's just clamp it just in case it'll be from zero to one and then we'll connect it to emissive color save it so the previously was bloom here so pronounced because we use a super high values above the one and now we just like get everything nice from zero to one great have a look at our box yeah we can see some lines there and let's just also do the power on our lines from from on the outlines lines it just cleans up some [Music] lines which are not really important basically increase the contrast between them great let's save it let's have a look here yeah there's a little change here like in the inside a pot there's only important lines now visible and also you can see whoa as also you can see that now we can see more of a definition of those lines on the box and the cool thing is as you can see here the lines these lines closer to us in the camera are thicker and lines further away from the camera are thinner this is still one of an issue when there's a few lines overlapping they still become quite thick but that's okay that's just more we can look at it as some sort of like a shadow areas and things like that so that's okay but generally speaking the further you look the lines are thinner closer you looked as thicker and that's great so this is our basically line rendering right and now what we need to do i would say squigglify those lines make them just more irregular okay and that will be done in another post-process material and i will show you how you can do it because we need to do it all over the whole picture okay it's pretty simple [Music] let's start by creating new post process material which will basically squiggly find the lines and we go create a material let's call it pp let's call it lines mix makes video great let's jump inside set it to post process material and change it to before tone mapping we need to have some sort of noise texture world align noise texture so i will bring texture object here not the sampler you will see in a second why it's a texture object and i'm gonna use one of my pearly noises when i just generated by the way if you would like to get some some noise textures generated by me just jump in this lick i have a few cool textures over there for you to just get literally of a price literally in a price of a coffee so it's really warm there's a few pearly noises some other algorithms unique like they're not you can't google them i just generate them so it's a good thing that you have something more unique than everyone else and we're gonna create now world align texture the reason why we are using word align texture is that when we moving camera in a scene we don't want the lines to just change completely to move all the time that's a little bit too much for our look so that's why we're using war online texture and also as you know because we are using a static version of of a hatching shader which is using world aligned textures as well so if you haven't followed the video about the hatching shader take a look there and there's also somewhere a video here about a static version of it cool and let's connect this one to output let's save it as you can see here we're having this pearly noise here in a world align fashion right let's apply a shader here you go let's add another one i'll be on top asset reference line mix video cool just save it and uh you can see here we have that noise we need to first of all change the size of the noise so it's much bigger not just this very grainy one we can do it very easily just by changing the texture size let's go with value 200 for example let's make a vector out of it make float three that's fantastic let's obviously plug all of those three values and let's plug it to a texture size by the way by the default some people miss that the texture size is 64 by 64. it's not one by one so just as a reminder and now save it and yeah i think that that's where we're gonna start i test that value before and was okay you can always adjust it as you like to but this is where we'll start and we use this noise to squiggly file the lines and how we do it it's pretty simple first of all we're gonna get the result from the previous post process material so scene texture great and let's choose here the post process input zero and if we plug into the color we save it and we go to the hatching of cross video this is the line so great and now we're gonna use this noise to offset the uvs and that gonna give us nice like squiggly lines okay so let's mask just one value let's say we'll choose the red so we use a component mask and we're gonna use a constant bias the reason why i'm gonna explain to you in a second by scale sorry constant best scales the reason why because the parallel noise which i generated the values go from zero to one and i would like to have values going from minus one to one because sometimes how like offset if is in the one direction sometimes in another direction right this null will do that's for us first of all what we'll do from the current value we're gonna subtract minus zero five so the first when we subtract it minus zero five we have a values going from minus zero five to zero point five all what we need to do at the end is just multiply it by two and this node does that for us in a one in one node right you can do it separately or you can just use this now so it does first operation which is just addition and second operation is multiply multiplication right so we just subtract 0.5 and then multiply it by two and now we're gonna have a values from minus one to one okay and now it's super simple as you imagine we just get the texture coordinates here you go we add it together and we plug in it there you go and now you can see a freaky image you can see right yeah it's crazy yeah the reason why it's like that because the offset is too big we can also just use this by one and minus one it's a huge value what is happening is like literally shifting the whole picture over right so we need to just at the end just multiply it by smaller value and that will be like value defining how much the lines are squigglified i would say okay let's see 0.1 let's plug it there let's save it as you can also see here we can have this kind of little bit kind of underwater look something like that which is if you animate it looks pretty awesome let's go back here and voila we have our squiggly lines and the cool thing is like when we are moving camera because we're using waterline textures the lines are not changing that much they just change a little bit but not too much not to distract the viewer great and if you want you can change the type of noise to get different patterns more aggressive you know like much sharper turns or things like that super good or you can just change the multiply value just you know make it less quickly or much more skilly it's totally up to you so this is how we do that now what i like to do when i'm working with the post process materials and i'll give you that trick is basically setting up priority let me just select the material output here you go and let's type priority this basically defines which one is the first one material in the chain which one is the last one i like to control it by these values it's totally up to you so i like i know that the lines are the first one so i leave it zero then i know that the mixed lines is the second one so i give it value one so higher the value the later in the chain that material will be post processed so i'll give it one here okay and i like to control it explicitly like that just to avoid any issues and any problems with it later since we have that that's super awesome and now all what's left it's basically combining with a hatching shader although there's last thing is that annoying sky sphere in the background we can just get rid of it very easily [Music] this here is pretty far from a camera it's like 8 000 units or even above that and let's just go back to our lines and we can just get rid of it just by adding a if statement i know not that many people use the if statements but actually very powerful and quick let me just connect them okay now actually i don't wanna connect it from here i wanna connect it directly from here i wanna know the clean value of a distance right i wanna just this no and just cut it out at some point so if the distance value is and let's say b will be 8 000 because we want every anything of above 8 000 we just want to be black okay cut out completely zero so if a is greater than b so the distance is greater than eight thousand we just want the value to be zero pretty simple if it's equal or lower we just want our calculations for the line thickness and we have a line thickness between one and six so it's not a zero and yeah that's it you can save it now and you can even see here in the in a preview that the sky sphere is not visible anymore and it depends on your project you know but at some point you will cut off the lines because if the objects are very very tiny the background yeah they'll be just thickness of a line at the end of the day so you just want to cut it off at some point [Music] all right so now we just need to combine it with our hatching texture and that's pretty easy to do let me just open the the hatching shader before the changes so you can see how was it it was basically taking a post process input zero whatever there was i think that was a the paper as far as remember in that case and prob and just blending it with a black color and we need to change that part here if you want to know how to build this shader have a look at my channel i just explain it over there okay let's close this one let me just show you the modify one and we're just gonna look at it cool yep and it's it's pretty it's pretty simple i'm gonna explain it to you so as you can see here what we do we have a static version of our hatching shader let me just show you how those look if we just plug this part here um now actually let me just plug this one here so i'm not getting any post other post process materials that just the hatching part and let's just go to the post process volume and just one last thing what i like to do is like slide the materials go to priority and yeah the priority priority is three i would set it to two because zero is the is the lines lines mix is a one and this one will be two we are adding it to our list here as a reference let's add the hatching video this is that one which we just modified and it doesn't matter what we're putting on there on a stack right now so this is rem as you remember this is our hatching texture i can say a mask right and what we need to do now we just need to add the lines to this that's pretty simple and that's what we're doing here we are bringing a previous post process which is squiggly lines right we adding them together here and we can just display this one here save it let's have a look yep you can see we now we have it with the lines and looks super nice great so since we are have that the last thing what we need to do is just apply our paper shader and a paper shader it just got modified a little bit comparison to previous videos let me just show it to you and as i'll just walk you through it's pretty simple i'm not gonna recreate it from a scratch because you watch the previous videos but let me just show it to you let me just show it so we're getting a texture coordinates here we have our paper texture which you can get from coffee page we just multiply by 0.5 so it wouldn't be that pronounced we just use a cheap contrast to just get like less contrasty we just want to have a little bit of a feeling and now we are bringing all of those black and white lines basically white lines and we're using that as alpha to mix it with with a black color and the paper that's it and i just set it up priority to to the highest one in this one and what we do here we just add our shader here paper video i like to put it on top here you go and yep voila that's our lines it looks super awesome and if you want to have a more squiggly lines or less you can just now expose some parameters here like for example if you want the lines to be thicker closer to the camera you can just change these values these values here allow you to define when the lines will become a thicker when the lines will become thinner and squiggliness we can control it here how we can just do multiply we can just increase multiply and that would just make the lines more squiggly let's have a look you see like the lines are like much more squigglier it depends what kind of look you are looking for that could be it's more of your like artistic choice but it could be something that you what you want if you want to have a more frequency you can just change the size of the texture that's that's totally up to you but that's how you can add some outlines and lines to our stylized looks to just give it more of a depth to it thank you for listening i hope you enjoyed this short video [Music] you

Channel: Kamil Hepner

Views: 43,911

Keywords:

Id: pJ42ylVyDpc

Length: 46min 47sec (2807 seconds)

Published: Wed Mar 02 2022