Glitch Post-Process Effect + Stencil Buffers with Unreal Engine 5

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
By the end of this video, I'm going to show you how to make this post-process effect we have here. The character on the left is being affected by it. We're using custom stencil buffers to selectively apply this effect to certain things on the screen. I'm going to show you how to set that up, explain how to get stencil buffers of your own set up. By default, you won't have stencil buffers enabled in your project. To enable them, just go to Edit, Project Settings, and now if you just go down to Engine, Rendering, and now in Rendering, you want to just go down to Post Processing, and you see it says Custom Depth Stencil Pass. By default, this is set to Enabled. Just drop this down to Enabled with Stencil. To set a stencil buffer on a mesh, all you have to do is tick Render Custom Depth Pass, and then Custom Depth Stencil Value. Set that to a value between 1 and 255. To visualize what the stencil buffer looks like, if I just drop down this Lit button, go down to Buffer Visualization, then Custom Stencil, you'll see here it's outputting 001, because to show that this object has the stencil buffer of 1. If I just duplicate the object, change the stencil value to 2, it'll be clearly different on the visualization. So now I'm showing you how to do this. What's the point of it? Why would I want to have stencil buffers? So one reason I use stencil buffers is to selectively apply post-process effects to them. For example, if I wanted to make it so a certain target is highlighted in the scene, maybe with an outline shader, you could use stencil buffers to highlight that object in the scene. So what we want to do today is create a post-process effect, which makes use of this stencil buffer, and selectively turns the object that we have with a certain stencil ID. We're going to make a glitch effect that's going to apply just to that. So let's get started and create a material. So right-click, Material, Material, and let's just call this MPostProcessGillich. Now, if you double-click this, by default, the material domain is going to be set to Surface. Just drop this down and set this to Post-Process. Now, you notice the output here is black. The reason it's black is because we're not reading in any of the scene textures. We're not reading in anything. We're just outputting black as the color, because we have no emissive set-out. To quickly visualize this, what we're going to do is go to Volumes, type Post-Process Volume. If you just type in Unbound in the search bar, make it infinite extent, this means that it will apply to the entire scene. Drop down to Post-Process Materials, add an asset reference, and just grab the glitch effect and apply it. You see now that we have done that, the entire scene has gone black, because that is what our Post-Process is telling it to output. What we want to do real quick is output the screen position, the UV coordinates that we're going to use to look up the texture. We want to just output that directly to the screen so I can explain how we're going to do this pixelization effect. So just type in ScreenPosition. So it has two output pins, ViewPort UV and PixelPosition. Just drag the ViewPort UV to Emissive Color and hit Apply. So if we look at what the screen currently is right now, we can see that the top left is black, top right is red, bottom left is green, and the bottom right is yellow. If we map X and Y of the screen to red and green in terms of the values that are being output here, we can say that the top right value is 1, 0, which is fully red on the color but has 0 green, which is Y. Whereas bottom right, you could say that that is fully red and fully green, which is outputting yellow. And bottom left is fully green, which is 0 on the X axis but 1 on the Y axis. So instead of this being a smooth transition between 0 and 1, what we want to do is create a more stepped progression. So in order to do this, what we're going to do is we're going to add a few nodes here. We're going to first add a Multiply node. We're then going to add a Floor node. And then we're going to add a Divide node. And we want both Multiply and Divide to be driven by the same number. So what I'm going to do is I'm going to right click Promote to Parameter, and I'm going to call this Pixelization Amount. And let's just set that to 8 for now. And drag this into the Divide and the Multiply. And then we're going to use that to output the emissive color. So now if you look at the screen, we've set the Pixelization Amount to 8. And with this little setup we have here, we're now going to create 8 bands of color. What we want to do is instead scale this based on the screen's size. So we grab the View Size, and then we divide the View Size by the amount of Pixelization we want. And then output from that division into the Multiply and the Divide. We will get a nice pixelated progression, which is in a perfect square as opposed to a rectangle. So the reason for this is the View Size is outputting a 2D vector, which is the exact screen resolution. So depending on what you've got your screen size to, it will be a totally different value. But it will always output that value here, which we're then dividing by the Pixelization Amount. So we have a consistent output over different screen ratios. And if we up the Pixelization Amount to let's say 80, we'll see those bands that we saw just now. But they are now consistent depending on what the ratio is of the screen. So now we can see how the UVs are going to get adjusted based on that little equation we've got here. So now what we want to do is pass that UV into the actual texture that we're getting from the scene itself. So there's a really easy way of doing this. If we just right click, go to Scene Texture, and then just in the bottom left here, the Scene Texture ID, we just want to grab Post-Process Input 0. Now if we just grab the output of this Divide here and pass it into the UV lookup for this scene texture, and then grab the color, pass it into the emissive, you'll see that we have this nice kind of pixelated view of the scene. So now if we set the Pixelization Amount to let's say 6, we have this very pixelated retro kind of effect going on in the Post-Processor here. So now that we have this scene texture being pixelated by our little Pixelization UV lookup here, we want to now selectively apply this to only things that have a Stencil Buffer ID of 1. So to do this, we're going to grab the scene texture, duplicate it, go down to the Scene Texture ID, and we're going to grab Custom Stencil. We're also going to grab the pixelated UVs and pass them in to the texture for the custom stencils. See, if I was to pass this, the output of the color directly into the emissive, it would only show objects with a stencil ID greater than 0. However, I don't want this to apply to every single stencil ID. So what I want to do instead is make an if statement and then pass in a parameter where I type in Stencil ID. Now here, we're going to set the default value to 1. We want it to apply only to Stencil ID 1 by default. We have three extra input nodes here. We have A greater than B, A equal or equal to B, and A less than B. So for both greater and less than, we're going to add a constant 0. And for the A equals B, which means if the output of the Stencil Buffer is the exact same Stencil ID as the number we've passed in, we want it to output another value of 1. So now if I grab the output and pass this into the emissive color, we will see that the entire scene is now black. If I change the Stencil value on this cube to 1, it will now start showing. So why would I need to use this? So we're going to have two texture lookups. We're going to have one that's pixelated and one that isn't. And the way we're going to blend the two together is by using a linear interpolation node. If I just type in search here, lerp, the linear interpolate. On A, we'll pass in the non-pixelated version. On B, we'll pass in the pixelated version. And for the alpha, we're going to take the output of that Stencil mask that we just created. So remember we made if any Stencil ID is 1, it will output the number 1. So it will be white. If it is not the same Stencil ID, it will be black. So the way lerp works here is if it's 0, it's going to output A. And if it's 1, it's going to output B. And it will blend between the two. So now we just output from lerp into emissive color. So now we have two things. Anything that has the Stencil ID of 1 is going to have this pixelization effect on it. And then anything that doesn't match Stencil ID 1, it's going to just use the standard input that we had. So just normal textures and normal image. Okay, so now there's two other parts to this that I want to quickly just introduce. Right now, all of our pixelization is happening across the red, green and blue channel equally. In order to have it kind of glitching out, what I want to do is shift the green and the blue just slightly away so we have this sort of chromatic aberration effect going on. To do that, I'm just going to take the scene texture, duplicate it twice, make some space for myself. Just duplicate it twice. And then for the output of the color, type the word mask, which will give me a component mask. For the top one, we're just going to only output the red. The second one, we're just going to output green. And for the third one, we're just going to output the blue. I'm also going to output from the non-pixelized version of the image, the alpha. And then we're just going to type make float four. So this takes in four values. It's x, y, z and a. Think of this as red, green, blue and alpha. So red goes into x, green goes into y, and blue goes into z, and alpha goes into alpha. Now, if I just take the result, put that into the lerp, just quickly format my nodes here. So we have these three lookups. What we want to do now is take the value from the pixelization UV that we figured out, and then we just want to slightly shift it left and right. So to do this, we'll create an add node. We'll type 0.05, let's say, and then we'll drag that into the green mask. And then we'll do the same for the blue. And let's just put that as minus five. And now, if we look at the effect, our green colors are slightly shifted to the left, and the blue colors are slightly shifted to the right. And that gives us that chromatic aberration that I was talking about. Now, one last piece of this, I want to have it so it's slightly moving throughout time. To do this, I'm just going to add a time node. This is going to grab the game time as it's passing through. So I'm just going to feed that time node into a sine wave. And now we're going to use LURP once again. Feeding the sine wave into alpha, A is going to be zero, B is going to be 0.05. And then I'm just going to feed the output of this linear interpolation into this addition. So it's going to animate the UVs moving back and forth for the green mask. And then I'm just going to duplicate this LURP, grab that into another alpha. And instead of it being 0.05 this time, I'm just going to set it to 0.02, and then drop that into the blue. So now if I increase the pixelation amount by, let's say, 32, we have this very obvious pixel mask over the object. So now if I drop a character into the scene, which also has a stencil ID of one, you'll see how it affects basically every single object the same way. So that is it for this shader. It's very simple. It's just taking the image. It's just offsetting the UVs slightly for the blue and the green channel. The red channel is also affected by the pixelization, but it doesn't have any offset. And then we're applying that to anything with a stencil ID of one. So that's how you can set up post processes to read from stencil IDs and then apply effects to them. In the future, I will go over a tutorial that involves setting up blendables for cameras. So instead of setting up a post process volume, which encompasses the entire map, we'll instead directly apply the material instance to the camera, which will give us a bit more control over how we use it. Anyway, I hope this helped and thank you so much for watching. The amount of support has been great on the channel. So thank you so much for all your comments, messages, and subscribers as well. I'm going to continue doing this each week. Let me know if there's anything you'd like me to look at in the future for tutorials. I'm still working on the dialogue system framework that I was promising I'm going to be building. So the dialogue system is progressing nicely. It's taking a little longer than I anticipated because it's a fully custom graph editor within Unreal, which supports dialogue choices and branching nodes and sub-dialogue trees. And my end goal for this is to create a Fallout-type dialogue system, similar to basically any Bethesda game I've ever played. I want to have that level of flexibility and put it in Unreal for people to play with. So that's what I'm working on and that will be in the future. Anyway, I hope this helped. Thank you very much for your time. Take care. See you later.
Info
Channel: Dan Goodayle
Views: 1,966
Rating: undefined out of 5
Keywords:
Id: UWWeEwid8pY
Channel Id: undefined
Length: 14min 24sec (864 seconds)
Published: Mon Oct 30 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.