Shader Tutorial: Animated Glitch UE4 - Meshingun Studio

hi my name is ali reza i'm currently a senior artist at microsoft accolation and i'm also head of machine gun studio for today's video i'm planning to show you guys how to create this glitch effect and apply it to any texture you like for the duration of this video we are going to learn few things first of all we are going to learn how to distort any texture by manipulating the uv input and next we are going to learn few things about basics of sine node and how to get the result we are looking for and lastly we are going to learn how to combine both methods to achieve our glitch effect we want so before getting into any details i want to explain a little bit what is happening inside this shader okay i'm going to zoom in a bit more here for better visibility not much happening here most of the job is being done back here i'll get back to that later but all you need to know now is that all those functions are manipulating the uv of this texture to achieve the glitch effect and the texture i'm using is one of the textures we have used in our cyber sound pack i will post a link to that pack if you want to check it out however you don't really have to use this texture the good thing about this workflow is that you can hook this up to any uv and you get your glitch effect right away about this multiply node that i have here this is really something optional i'm using this just in case if i want to change the color of the texture or if i really want to increase the intensity of tms if usually what i do instead of using another constant and multiplying it by that constant number i'm just increasing the value here which is doing the same thing or if i really want those blooms to pop out more i can give it a crazy number let's say 2000 there's no limit really to this number now that i'm inserting this material from scratch the first thing that i'm going to make going to be that glitch distortion that's a simple thing to do i need to manipulate the uv of this map by a noise map that i already have in my content browser already there are two ways i can either drag and drop this map into my shadow graph or selecting it and then hold down t and then press left click button to bring it into my graph okay now if i simply just connect this to my uv any of this if a red channel green channel you'll see i'm getting a crazy distortion to tone down the distortion the first step is to add this noise into a uv coordination instead of connecting it directly to the uv and now after getting that uv chord i want to blend this noise by adding into my texture or uv coordination okay all right this is a still too strong so let's use a multiply node to reduce the intensity of this distortion so let's say let's put the number of 0.1 um okay this looks better but let's work a little bit more on this i think we need a uv chord for this uh noise texture let's try something like squeezing it to eight yeah it looks good let's try 10. yeah 10 is too much we go with 8. now this starting to look a lot more like a glitch now we can try animating the noise let's bring a banner i hold down p on my keyboard and click this should go between the texture cord and the uv input to see the effect of this panner on my noise texture i really like to start previewing this note a panner will allow me to pan my texture along y or z axis this is too slow let's try minus 0.3 yeah this is better to see the final distortion let's stop proving this note all right so now that we have this distortion ready uh the next step is to create some function that triggered this distortion on top of our texture randomly during the time that would be how we get that flickering glitch that we are looking for okay before starting the next stage i've done some cleanups i have placed some comment box around the main areas and here it is the glitch distortion effect we have created earlier i have made some a small adjustment behind the scene which i will show you real quick right now the first thing was i increased the speed of the banner from minus point three to minus one and the next thing is i place this intensity parameter so it would be easier to control the distortion intensity later on from our material instance so the next thing i'm going to create would be that trigger function which will keep triggering this distortion effect on top of the texture so at some point of time this texture should look completely normal and for fraction of time the glitch should happen and for the next 3 seconds it will stop happening and happens again by the way keep in mind that the sign node needs a time node attached to it otherwise it's not going to work now that we have our sign node let's preview it and see what is happening so a side note on paper let me bring up this uh photoshop file i have here what this sine wave is giving us is a value bouncing between one and minus one in a repetitive wave motion through the time but what we need instead of a fading and fade out that what we have right now is on and off behavior that is why i'm going to stop previewing this and i will introduce a new note to this calculation which is a seal now if i preview the seal again you will notice that we are getting more or less what we want so what what a seal does is taking your value and rounds it up to the next integer i can show this on the paper again think about this so as soon as 0 becomes 0.0001 what the seal does it takes it and stick it up to the next integer which is 1. if you like to see what a sine graph is going to look like after seal this is what it is so for the whole portion of the sine wave being a value bigger than zero the seal is returning us the value of one and for the whole portion of sine wave being a value below zero we are getting a value of zero just keep in mind there is a small fraction of time that the value is hitting minus one but i'm ignoring it because at the end of the day i'm going to clamp all the values between zero and one let's jump back to our shader graph so the first problem i have with the current flashing is that both white and black are getting equal display time to change that i need to bring a subtract node between our seal and sine node okay so the subtraction number should be something really close to one but not one itself because that will stop the flashing completely and i will show you why later on so let's try 0.8 all right so now you can see we are getting a lot more time between each flashing now if i try a number closer to 1 like let's say 0.95 you'll see we'll get even bigger gap between each flashing okay going back to the sine graph i want to show you why we use the subtract by subtracting a value of 0.8 what we did basically we pushed our whole graph down by this much now the top of our sine graph is only reaching to 0.2 you can imagine what will happen to the sine graph after feeding it to the seal node see how we are getting more gaps between each flashing and by knowing all of this we understand that subtracting a value of 1 will push the whole graph to zero and below it and making flashing to stop completely the next thing i like to do is to increase our wavelengths there are two ways to do that the first method is to use the period number inside our sine node a bigger period number is equal to a longer wavelength however there is a problem with using this method now i have no way to control the wavelengths through a material instance by parameter i'm going to set back my period to its default number and use my second method i will bring in a divide node by holding down d on the keyboard and clicking and placing it between our time and sign by doing that we are getting the exact same result as the previous method with the only difference that now i'm able to use a parameter in my divide node to control this in our material instance i'm also going to create another parameter naming it flashing gap for the subtract node that we have created earlier all right now i'm going to put whatever we have talked about on the sine graph into the test by placing a debug scalar value node a debugger basically is showing us the value we are outputting in numbers as you can see we are getting flashings of one few minus ones few zeros as well and this is really matching with whatever we have talked about here we are getting ones here we are getting zeros and also down here we are getting few minus ones so this means our calculation we're correct so i'm going to delete this debugger and get rid of all those negative numbers by placing a clamp in front of this calculation and now if i debug it one more time you can see that we are only getting ones and zeros all right so now that we have our glitch uh trigger ready i'm going to get rid of this debugger and fit this into our distortion to do that i'm placing a multiply node and multiply the trigger we have created with the distortion map we had earlier and then connecting it to the multiplayer for the glitch intensity and now you can see we are getting this glitch effect happening every now and then but the only problem i have with this is that this is happening in a really predictable manner to to get rid of that what i want to do is to duplicate this whole calculation one more time and try different numbers for each of these parameters that we have already created so this way each of these are giving us different length wave and by combining these together we are getting more chaotic manner out of them now that we have two sets of each of these i'm going to label them by different numbers so this sets gonna be zero ones and the next set is going to be wavelength 0 2 and flashing gap 0 2. now let's add them together and i'm going to preview this to see what is happening so of course nothing is happening because we have the same numbers for both but if i for example change the wavelength for this to 1.3 and change this gap to let's say 0.9 you can see we are getting more chaotic manner out of this flashing light okay so let's connect this here and stop reviewing this ad all right you can just leave it here if you want but i'm gonna do something that i call it cherry on top here so as you can see this glitch is keep just pushing upward every time it's happening that would be really nice if one of the glitchs keep going down and the other one goes up that is really simple to do i'm gonna just put the multiply node here and use a minus one okay all right there we go there we have our glitch effect all right guys i hope you guys enjoyed watching this video please do let me know what you think about this in the comment section below and don't forget to subscribe to machine michigan channel this was our first tutorial but this is not going to be the last one i promise do let me know if you guys have any requests for tutorials especially shaders and lastly thank you for watching

Channel: Meshingun Studio

Views: 10,199

Keywords: shader, ue4, unrealengine, material, glitch, neon, cyber, scifi, meshingun, tutorial, ue5, animated, guide, sine, node, shader graph

Id: NHmbKyLuq3g

Length: 14min 6sec (846 seconds)

Published: Mon Dec 20 2021