Shader - Blending textures - [Tutorial][C#]

hey what's going on guys Welcome to our very first Shader that we write together this is part of the Shader tutorial and today we're going to be doing something super simple we're going to be blending a texture over time but we're also going to be looking at other cool stuff so just stay tuned for that there is some very nice um very nice values we can use in that Shader so without further Ado I am going to get rid of this Shader right here that I've made and we're going to rewrite it together so as always if you want to render something on the screen you need a material right now our object doesn't have any material because I just deleted the last one and it was referencing to it so I'll be going right here create and we're going to start today with a simple um blending Shader so on the material I'll just call this blending to texture and then I'll create a unlit Shader which I'll also call blending to textures I'll put a s that makes a little bit more sense now let's go ahead and drag and drop armor to on top of our plane or any object in the scene really and this is now our plane okay and on it we have the standard Shader this is not what we want but we still don't know where our new Shader is stored let's double click on it and have a look what kind of default value they gave us so by default we're under unlit and blending to texture let's change that for n3k or you know whatever really and this is going to be our blending two textures super simple simple if you guys remember last episode we went over to properties this actually defining a texture you can drag and drop so if we go on number ta real quick find our Shader here it is if we open it up we have the texture here the main texture it's right here and the reason it appears it is because it's under properties for this we're going to need two textures so I'll duplicate this and I'll actually call this one secondary text so secondary texture it is our second texture still of type 2D because we're working with a 2D image and by default it could be white okay if we go back now we now have two slots for texture I'm going to choose something in my uh in my folder so I have this blue texture right here it's basically just a grid and then um I could use the red one or I could use the lava like you saw in the preview really doesn't matter all we're trying to do today is to blend them together so just pick to texture and then you're going to realize that it doesn't work obviously we haven't told the Shader to make it work yet so if we go back real quick if you followed last episode every time we actually declare a property at the top here and we want to use it in our pass we have to declare it again over here so basically I put it in between the structure and also the vertex and fragment Shader now if we just copy over what the main texture has so sampler 2D oops simpar 2D here we go this is going to be secondary texture it has to match the same name so this is actually quite important it needs the same exact name especially for texture because you can actually add some more parameter by adding a underscore St at the end the underscore St is actually and I figur it out um yesterday I think it's actually the tiling and the offset value here so you have it in x y z and that's W right here all right so now we've declared our texture in the properties it has a another reference here in the pass do we go in the vert Shader or the fragment Shader we don't go in the vert Shader because this is to actually modify the uh the position of say every single Vertex or something like that we want to go inside of the fragment Shader or the pixel Shader because that's the one that's going to be putting color on top of our pixel so since we're trying to blend to texture together all we really have to modify is the color of the pixels now let's actually get rid of this part here the fog and let's have a look at this one right here we declare a fixed four which is a vector four and then we sample a pixel from the main texture at the position i. UV so i. UV is basically just uh the UV information you input in your 3D software today our goal is to actually have two colors so sample from Two and actually do a lur in between in fact what we could do right here is to put this in between parentheses like this and actually type in lurp at the beginning so like in unity the lurp function is going to take in three parameters so the first parameter is the first texture well actually the first color the second one is let's actually use the second color so we're on secondary texture and we want to be sampling at the same UV so i. UV and then finally right here is going to be a floating between 0 and 1 that is going to give you um the ratio in between so right now I put it on 0.5 so we should have half and half let's go and have a look we have a issue so what is our problem right here let's have a quick look I actually forgot one set of parentheses right here so let me just put that right there back in the game we have a unexpected token return so that's not cool what's going on here oh I forgot a semicolon okay sure we still do rookie mistake here all right so we got a uh we actually got this texture which is blending in between these two but now it's kind of the same texture it's hard to see so I'll swap over to the tune lava as you can tell right now we have a blend of the two texture now what if we could actually control this from the outside that would be quite amazing let's go back and actually change this boot right here by some kind of slider if we head back at the top right here we can declare say a lurp value that would be the transition float and we can put that in between uh zero and one so we'd have a range in between 0 and one and that's going to return us a float you can also add a default I'll just put mine on 0.5 again so since we're declaring in property we have to go down in the pass and actually match it like this this is a simple float it's not a vector or anything so we just type in float and then lur value let's copy this over to our 0.5 our hardcoded value we had and now if we head into the game we have our slider we can play around with it and as you can tell we can get the full second color or the full first color so this is actually How We Do blending now since this is a property on the Shader it's something you could be changing in the code so from anywhere really if you just type down a c script call it test I'm going to drag and drop the test say on the plane oops you could technically just go in it find that Shader so I'll just do a public material mat and then in a private void update you could go right here say Matt set property or actually is it set property let's do set float so set float the name because we can use the name is underscore lurp value and the value can be something like um Matt f. sin which is not going to be in the range because mf. sin actually goes up and down so it goes up to one and down to minus one so what's going to happen right now is the value the lur value is actually going to go down to minus one and then go back up to one so if I save this and I start the game technically we should see this being animated and we don't right now let's see what's the problem oh we don't have a reference on the material let's actually drag our material right into the test field and let's see what happens as you can tell our value is actually being animated and it goes down to minus one so you get these kind of glitches here while we're at it just notice that as soon as you start going on the other direction in this lurp because the lurp is not clamped so it can go beyond uh zero and it can go beyond one as soon as we enter the below zero we have the secondary texture but it's actually inverted so that's something quite cool to know could be useful later on and let's actually have a look what happens if we go beyond that if we go beyond one so what I'll do right here I'll do a one plus Matt f. sin so now our value are going to be in between zero and two there we go so value in between zero and two now that's quite interesting we can see the color being a little bit more red it kind of looks cool of course really depends on the texture you're using and also you know what kind of effect you're trying to achieve I like that though it's pretty cool now what if we actually don't want to be using a c script what if we just want to get get rid of it totally but we want this to be animated on its own this is also possible because we get some awesome built-in values we can use let's actually drag this in here and um under the under the documentation I know this this is the version 4.6 but it basically works the same if we go down right here we have a bunch of actual float we can use so this one is a float 4 float 4 float 4 until yeah they're all Vector four basically and they all work differently so we could actually be using the same exact thing as we've done in C but only using Sy time so I'll be taking this value right here I'll go back in my Shader and instead of us us lurb value I'll use Sy time now I'll get rid of this and I'll also get rid of the property at the top but is that going to work let's give it a try H so it kind of works but at the same time it gives us some really weird color as you can tell we're swapping from a huge range of color which again could be a very nice effect but this is not what we're trying to achieve so let's have a look at what is going on here right here I'm actually using a vector 4 so that's definitely not something we want to be doing we want to be using a single float value now why is this a vector 4 this is actually a vector 4 because it's because it holds more than just the mf. sin if we head over to the x value this is actually 18 of the mf. sin this one is actually 1/4 of a mf. sin this one is half of it and this one is like a normal sin so what we could do is actually use this Vector 3 and bind ourselves to the last value since this is a vector 4 we're going to be doing x y z and W if we want the last value we can say send. time. w and it's actually going to give us the same effect we had earlier so we're going to go down to minus one but as you can tell it works on every second if you want to make this go super slow you can put it on X and it's going to be every 1 18 of the second so guys that's it for the very first Shader we write together it's a really simple one but I hope you picked up some tricks maybe how to declare stuff at the top maybe just some nice value you can actually use some built-in values you can use and uh yes so that's actually where I'm going to be ending today thank you so much for watching and I'll catch you guys in the next one

Channel: N3K EN

Views: 27,808

Keywords: unity tutorial, unity, unity 5, unity 3d, 3d unity, unity 5 tutorial, unity mobile game tutorial, unity android, N3K, N3K EN, N3K tutorial, shader, shader tutorial, c# shader, unity shader, shaderlab, unity shader tutorial, unity 5 shader, unity 5 shader tutorial, writting shader, shader in c#, hlsl tutorial, cg program, math, vert, frag, vertex shader, pixel shader, grament shader, fragment shader, v2f, appdata, unity 2018 shader, unity 2018 shader tutorial

Id: 3Fr1ztJ1rHY

Length: 11min 57sec (717 seconds)

Published: Wed May 24 2017