UE4 Tutorial 101 — Occlusion Outlines

hey guys we learning here I okay so today I'm going to show you how to do outline on the polluted object so if the object are behind walls and stuff you'll see their outline if they're not they have no outline like my character here I turned on this option on him so as you see are below the ground I can see outlines behind the scene I can put my camera behind him but I can do it here so he also has outlined the only countries on this material is that if two objects that you have outlined are overlapping you don't have an outline between them oh and also object said to have outline block the outlines of objects behind them that's very hard to overcome but mostly this is a very useful effect from many things and it seems you're going to learn by for doing this effect and is very useful so let's begin so I'm here on third person template project and something we got to do for this effect to work first you're gonna go to edit project settings engine rain during post-processing and the custom deaths since you passed you gotta set it to enable withstand shoot the foe is only enabled regarding need accustomed that fast and distinction fast so both of them can close this on your object only the objects won't you have outlines on you got a turn on on their properties you go to rendering and then on advanced properties it brought it will probably be like this so you gotta expand here on the down arrow turn on reindeer custom that path and coastal they have special value set to some value that's not 0 so we can set individual colors for these objects later so I've done this in this cube on the other cubes there on the sphere that's outside my wall and on my character I had to select its mesh component to access it with rendering properties and I set them each for a one two three and four value that's because I want to have a color for each of their outline and the colors the amount of colors you have depend on how many colors you put on the material I'm going to put four colors so I can have up to number four that's it for scene setup now let's create a material because most process effect they are effects that happen on the already rendered scene so that's the texture and you can alter the sector in real you do that using materials so I'm going to create a material when I call this KP for post process underscore outline to it double click it now to use this in a post process material I have to change the material domain post process now I only have an output of a missive color so that whatever I put here will go to the screen so just to show you how it works I'm going to create a simplex you'll note here the same texture node gives you access to the buffers of a real everything is Reynders to create a scene so the same color would be what's rendered on the screen without any post-processing but you can only use this in standard material to do other kinds of effects for both process materials if you want to see in color use the post browse input so if I get this and multiply by some color for example blue [Music] I'll turn my seam into blue but I can't plug this directly on here because this is a vector three this is a vector 4 because there are values here then these the four the four parameters so and I've only won the first three I'm going to use the component mask Largey D what this here emissive color now that's all right if I plug it this here directly you can see we have an error because the for inflow 3 cannot be multiplied I'll compile my material and now to see the material here have to create a post process volume here in volume a post process volume alters everything that has to do with post-processing caller motion blur bloom for example if I come here in global and crank the saturation to zero I should be have my saturation as black and white here why is it not this is because you only see the effect when you are inside the cube the volume to see it outside the volume perfect your whole world turns unbound on so now it affect the whole world I'll turn off my saturation change here to use post-process materials you come here on rendering features post-process materials this is an array so you can use more than one at the same time I'll create one here here you have to choose asset reference because we're not doing light propagation volume blendable and on the assets choose your material 50 underscore outline good now you can see the blue effect I did on my material now let's go back to the material it is working so now I can do the outline effect to do the outline effect we're going to sample from the custom - texture let me show you how this texture work first of all it has only one value that's the distance on each pixel from the pixels of the camera so we only use the red channel that is the first value after got this channel this is the distance of each pixel to the camera so it'll Rio uses in committed practically everything here will be more than one and if it's more than one I can show you directly here because the text will be fully white cause textures are only from 0 to 1 so I'll divide this whole D and click buy some big value like 100 meters so a hug oh so this is the divider a hundred and as and reworks in centimeters I have to add plus two zeros so it becomes centimeters I'll plug here missus collar fly let's see the effect so you can see everything that's not rangering on the coastal - channel as we set them to is white this white is a very high value I don't know this value exactly I wasn't able to find it but I know it's greater than 100 kilometers so we're going we're going to consider everything that's 100 kilometers visit further is possible and as you can see my sphere is a little brighter than my character here that's because the closer something is to the camera the smaller the distance is so that what we are getting here the distance to the camera one stop dividing this here we need to recognize outlines where the background ends and where the object begins let me show you how we're going to do this suppose this is our object outline this is our background and this is inside our object when you are doing something in a material everything you do will be executed for each pixel this materials rendered see suppose process material is rendered on full screen we're gonna do math that will be executed for each pixel on the screen the text outline you read the pixel and all the pixels around it so for example we are on this pixel here we're gonna read this this this this thick so this is is and this there are several ways to calculate outline the one Riyadh's we're going to use here we take advantage of the fact that in real Reynders where there is no object with a very high value so suppose it is in high value is 100 and the object is like one for the some of these pixels to be a hundred two three four five hundred suppose this is this will be very alien see so both this is not our material this is this and this so one hundred two three four five hundred plus one two three of our material so 53 actually 553 is our final value summing all of these pixels this means the final color of this pixel if we set this result as a final color will be 503 it's a very high value now if you were on this pixel here and our grid was like this this will only give you eight times one so it's an eight and if we were a little closer to the border and our grid picks up even more pixel outside of the object a result is a very greater than 100 so like 107 if all the other seven pixels are inside the object so our border here would be rendered also with a high value that means inside of the objects up to some extent everything here will have the high value will be greater than 100 so we're gonna isolate this everything that's greater than 100 will leave as white and everything less than 100 we live as like the case of unreal we're gonna have to convert 100 kilometers in 150 meters let's first sample the pixels around the pizza we're rendering to do that I gotta get the current coordinate I'm on or that I use string position so I have the coordinates I'm on this is a flow to it has risotto and vertical coordinate and I have to know the size of which Peaks on the screen inside UV coordinate so you will go from 0 to 1 so each pixel will be something like 0.02 something like that so we're going to know this exact size pixels in textures can have varying sizes on the screen this size of the pixel relative to the texture is called pixel so we want to know the spring texture is it the X so the same syntax for files the syntax of size is also a float you it has the original vertical size of each pixel on the screen now that I know this I can offset my current coordinates by some direction with this size to get the pixels around it so to offset some card I use add a whole Cointreau and drag here to leave more to leave it more organized gift line from cross the sim to exercise as I'm going to have to sample from each direction earth ball and last ride settle I'm gonna need this size in positive and negative ways and with separate dimensions so firstly I'm going to separate each dimensions with components mask I want only the red here and only the green here so horizontal and vertical and as I'm gonna need positive and negative values these are positive are multiplied by minus one should have also the negative value same thing here so W so now let's sample the pixels around this one firstly I'm going to start with the top picture so I want to call this texture because this case is the is the more correct term so for the top deck so I need to offset this pixel by zero on horizontal I have my central pixel I want to get the top pixel so my coordinate or is only speaking is the same but vertically I walk a pixel up on screen coordinates 0 is the left of the left top corner and 1 1 and 1 add the other corner so horizontal and vertical zero we really don't know one vertical zero horizontal zero vertical while and both 1 so for this I got a subtract on the vertical to subtract on the vertical when I use the vertical negative value appended with zero I'll create an event vector note here this turn single value into flow two three etc the more you append the more floats you have on the same volume you will effectively be creating a vector so I have on horizon of the first value zero and on the second one the size of the detects on the screen negative so I have my top tack so now let's do the bottom one so I'll sum it with my screen position bottom Texel now to walk down I need a positive vertical volume let's only take note here this is V and this is U so UV now my left axle never forget to plug this on the screen position so for the left leg so the reason to coordinate I'm going to walk to the left so it's negative and on vertical are not going to change so it's zero it will be similar to the right texture but on original I'm going to walk in a positive direction and now for the diagonals I'm going to duplicate this it's a little faster I already plug the on my skin texture xa my screen position these zeros won't be needed so now let's get my top left pixel top bin actually let's name this on the correct order so you don't get confused let's stop fixing because the reasons our coordinate comes come first so left will be negative on the reasons of and top- on vertical here left bottom pixel so left is negative on horizontal and bottom positive on vertical now the right top pixel right is positive on horizontal and top is negative on vertical and the last one you left no right bottom Taksim right right right will be positive horizontal and bottom positive on vertical I forgot you but this okay everything's logging on now that we have our coordinates are offset coordinates to sample from all the pixels around the main pixel let's give these coordinates to sample from the costume - texture so I'm going to create the scene texture node here sadly - custom death and use the coordinates here I'll use my component mask to get the results of the first number only that's the only number the counts on because left and now I have to do this for all these other coordinates copied is copy these two and these four [Music] now these note here are the rattle of the Kirsten last distances at all of these coordinates now as we told before we're gonna sum these values so ad so we can check later which ones them are which of them are greater than our biggest distance which are not [Music] to create an ADD node you just hold a and click all right click inside pad now that we have the sum of all the pixels around our main page so we can know which of them are greater than a hundred kilometers and which one are not which ones are not so for this I'll subtract that distance from this value hold one click here 100 kilometers converted in meters each kilometer is a thousand years so one two three zeros now we have meters and each meter is 100 centimeters so one two zero what's going to happen here is I'm sure you actually first let me climb to this value what clamp does is everything that's less than the first number here the mean will be converted to the mean so every negative number will be 0 every positive number greater than one will become one here gonna compile now as you can see everything outside my objects the background is white and my object are black and it's hard to notice here but there's also an outline of the object now what we're gonna do is change black everything that's the background but not the object also something I'm forgetting to do here is we're counting the values between 0 and 1 with the middle values 0.5 this area here what we don't want them we want 0 or 1 you want to know when something is or not to be outlining so after subtract here I'm gonna kill the result so you round the number up so if you have point 5 it becomes 1 if you have 0 it stays at zero if it has zero point 1 it becomes 1 so CEO will give us either 0 or 1 after the claim we won't have in between values okay that's done now I want to know what is background what is not for that I'm going to sample the scene custom death again I'm going to get the first component only I'll subtract it's the same thing I've done here so subtract here I'm doing it for the mixture of all of these pixels and here I'm doing it only for the current pixel being rendered so subtract is big distance here then seal clamp let me show you what it does looks like the same thing as I've done before now but what we want is to have our background black and our objects white so then we can multiply the calculation we did before with this one and the only white thing left will be the outlines so here I have to invert this result as I have 0 and 1 it's very easy to invert I have to use a 1 minus node you can also create this node holding o and clicking so the 1 minus node does exactly what's written here 1 minus the value plug here so 1 minus 0 becomes 1 and 1 minus 1 becomes 0 that effect Lee inverted our white and black resin now if I multiply this with my previous result that is an outline kind of insects in the object the only thing left will be the outline in the object so we've created the outline what we want to do now is to have these outlines above the original texture about the original scene so I'll create here a scene texture node again but this time I want the post process input 0 to get my scene as it is I'll create alert and what we're going to do is use the lerp to mix the scene texture with some color for the outline for now let's create a simple color I'll call this color one as we're gonna have four colors later I have your myscholar I'll do my outlines a very bright blue so it's easier to see them look here all might be oh I have a problem because I forgot to isolate only the three components here from the color on mask RGV okay now I didn't I need an awesome as you remembered alert the V alpha if you're also 0 you output the a color and you sure alpha is 1 it outputs the B color or the AMD values so I'm going to put my outline they are black where they're not supposed to be outlines and white where they are supposed to be outlined so it will work exactly well as I want here file now I have my objects outlining but every object with dozen left turn on is being outline it what we want to do is to isolate only the objects which are behind something to do that let's go to our material we're going to get this thing texture goes left and the same texture seems that this is your regional depth of the scene now if I subtract let's first isolate the components you like to get this mask here the view control W if I subtract - cousin death from seeing that I only wrote object that are behind the other objects and my cousin death only Rangers whatever to be said to be Ranger on the cousin bed and my seen death Rangers everything the pixels on the cousin death there are behind object will be greater than pixels that are being rendered on the scene death because the pixels being Ranger on the scene that are from the objects that are closer to the camera so if I subtract from the cousin death might see that four objects behind normal object the result will be positive so I can do the same thing I've done here co2 have only round values and then clamp this will give me one for everything behind objects on the scene death on the normal thing and a negative value or in this case zero because of the clamp for objects that are in front of the thing that because this will be a smaller value minus this one would be negative so now I have made white everything that behind something and black everything that's not let me show you the resin here I like to show the result of these calculations because it's easier to know what's happening so black is the objects that are not behind something and white are the object to the art the rest is also white because remember because that Rangers a very big value where there is nothing so this will always be behind the scene depth but as we already have erasers that only shows outlines now we have black zero to remove from this result with a multiply the outlines that are not behind something from gonna plug this in the Alpha and this in the emissive color [Music] wait for it and now my outlines only appear on objects behind something this little outline here on the bottom of this cube is because it's a little inside the floor the rest as you can see works normally [Music] now before coloring each line according to the objects things you color let's first do something to control the line thickness because here they are only being calculated for one pixel around the pixel that is rendered let's make this something configurable let's go to our material here's where I decide how far from the current pixel we're gonna organize empal so that's where it has to change okay the scalar here and call it line thickness this gives me the size in US v of one pixel all I have to do is multiply by the thickness I want so by the Foley that you multiply and now I want to use the result of this multiplication on my own my U and V values compile here now my lines will be thicker and if I want to change this in real time I can create a material instance of this VPI for post-process instance use this instead of the original material and now if I change this line your 6:9 sickness I can change the thickness of my line [Music] also I can change the color as I created the color as a parameter okay now let's do a color for extension no material if I sample there's got some sense of value for each Peaks are not being rendered on custom death this value will be zero and also it works the same as the cut unless it's only one value the whole one scalar so everything that's not being rendered on the stance of this zero and everything that is being Ranger and you set a different value than zero we have that exact value 1 2 3 etcetera so how can we work with several colors knowing that I'll create my colors here color one two three and four let's set them to different colors yellow black and something pinkish I'll rename them color too so I remember which indexes they represent three and four books are for right I know which stenciling mix is being rendered from here I got to do something to choose a caller from bedding list for the first and second color I'll you alert linear interpolate this will be my alpha a and B actually I have to put a subtract here subtract I don't have to change by what it's exactly by one that I need how this is gonna work we know that because of the way we are choosing the pixel here to reign it offline the only people being rendered will be pixels where we have some custom sense your value unless you forgot to set it from zero on the object when this value comes through here let's suppose it's the one volume so it comes through here one minus one zero sonal Earp zero will output a that's the color for one so that correct if you current as true UV to minus one one on the left one means B so we'll have the color for two that's also correct if it comes a string will have three - one two - for the lerp gives you the very strong that's incorrect first you gotta clamp these values here so they are only 0 or 1 and now we have one even for the index of 3 so we got to do something else we're gonna do another alert here we plug the result of this learn to be dislodged zero value D a value the next color will be the B value the index 3 and if we get this resin here we know it is true and actually note this one we know it is true because of the UNIX 3 so this true we want to subtract so we have now 1 and this will mean B I'll do the same thing for the third color and it will be very clearly clear in a while we hear another subtraction I forgot the clamp I must clam [Music] all right now what happens is if I have three three come here three minus one is true so true will become 1 here and this lip will pass the yellow color because it's each one it goes to this leg now this lip will get the color that came from here yellow as its 0 value and black as its one value and it's also it will be the two that comes they came from here minus 1 so 1 alpha 1 is B so it gets the black color then it comes to here now here it again it gets the one value from here minus 1 will be 0 and 0 means it will get the color that came from here so it's gives the black color so that's how you will layer colors according to an index now let me plug this in the place of my previous color by the material and now we have a collar for each index oh yes both of these are are the same the others they are different here just one more thing I'm going to do here if you want your material to always Ranger these outline but you don't want to lose all these calculations you can do a switch to turn this function on and off on the material instance see this is why you must comment things I don't remember when I'm gone yet here ah here's where I'm calculating the occlusion so occlusion to comment you just select your note and press C that creates the comment box now I want to toggle this on and off so I think the best place to do this is here I'll create a switch parameter paddocks switch parameter call this Oh clue occluded only and put these into my Alfa so the value of the comes through here if I set this to true on my instance it will use whatever is coming here and false whatever is coming here so upload it only means that I want the calculation as it was before if I set it to true and if I set it to false I don't want to use this calculation so I will use the Rezo that comes from here a file now on my instance the Dafoe of the you can set the default hear the voice false so it's not rendered only the occluded object everything that is because in the cross less has an outline if I change this to true my material compiles again and now only my occluded materials have outlined [Music] there is a slight problem as you can see when too much two objects which are supposed to have outlines are overlapping the outline is for both of them let's because we're detecting the border between the background and the object if you want to also detect outlines between objects you would have to measure using this technique of sampling all pixels around the object you will have to measure to measure the distance between these pixels and if the distance is greater than some value you create an outline I'm not going to do this this is already a very long tutorial but when you understand what we've done here you will see that it's not that difficult to implement this functionality I hope you learned a lot from this video if you want to learn something specific leave a comment and also a video on it if you like this one click like and subscribe also share and tell your friends about it because the more people watch my you the more I can dedicate my time for doing tutorials thanks for watching until the next video

Channel: Rodrigo Villani

Views: 73,778

Keywords: tutorial, how to, unreal, engine, ue4, 4.15, post, processing, stroke, lines, outlines, occlusion, occluded, shader, effect, shading, material, instance, node, scene texture, depth, customdepth, stencil, custom, customstencil, rendering, pixel, texel, lesson, postprocess, colored, hidden

Id: rL7VUeZzRyQ

Length: 40min 32sec (2432 seconds)

Published: Sat Feb 25 2017