Unity Shader Tutorial (Object Outline)

hello my name is Morgan James and this is my tutorial on how to use unity shaders leading up to a shader that when you hover over a shape it will outline it with a blurred and distorted border great so let's get right into it with a new unity project now that we're in a new unity project I'm going to show you how to create a simple shader that puts on a material to an object so the first thing you want to do is go over to the project and create a shader and you could just do an unlit shader and then we're gonna name it apply texture then you can go ahead and open that up in Visual Studio by double-clicking it okay now that we're in our shader we can go ahead and delete everything because we're gonna remake it ourselves so you can keep this because that's saying that the shader is a shader and it's going to be saved in unlike apply texture but we can actually change unlit to custom custom apply texture Oh custom okay so now if we save that and go back into a unity project if we go to if we make a new shape so we create 3d object cube I mean go to the cube the default material will be there so if we create a new material create material I'm gonna call it texture and then we can change the shader to our custom which is the folder we made and then I apply texture but right now it's not going to do anything so you just put that on there it's just gonna put pink because that's like the default color alright so let's go back in and set some stuff the second thing is shader needs is properties so if we go ahead and define the properties like this and now properties are basically variables that we can change inside of the editor so we can define a texture to put on it so main text then we can go this will be the name of the thing main texture and we can say that it uses RPG then go ahead and say that it is a 2d texture like that and then you can default it to white so if there's no texture it'll be white and then what this does is that it allows for a texture property and so now if we go back into unity we can see that you can now add a texture to it but if we add a texture like this they just won't do anything because we're not using the texture for anything we're just saying that it uses one alright let's go back into the code we get to find a couple more things we can define color this is going to be the square eager to call it color in our code and it's gonna be a color and then we can set the default to one so it's gonna have to be white as default so this allows for a color property and then we can go ahead an inline because there's no intelligence on us all right so now if we go back into unity we can see that there's also a color but again changing the color won't affect the texture as we're not using the color or the texture on the actual shape not telling it what to do with it let's go back into the code and we're actually gonna do something with it let's go down here make a sub shader like that go ahead and then inside of the sub shader we want a pass like that a pass is when something is shaded once so inside of this sub shader we can have multiple passes and still be rendered multiple times like that but right now we're just going to stick with one thing in our purse we need is a CG program statement and then also an end CG program statement and so what this is going to do is gonna allow for two different languages to talk to each other the first is the shader lap which is the unities version of shaders and then the CG program which is Nvidia C for graphics so we just type that out you I think we're gonna have to define is the function definitions for the program and every shader contains a vertex function and a fragment function so if you go ahead and define the vertex function like that and then what this does is it is a define for the building function so a vertex basically gets all the information about the shape and tells the program how to build it and then the other thing we're going to need is a fragment shader pragma and then you can just call that frag and then well this does it is how it how it comes it in basically so define for coloring function so this this one tells it how to build it the shape like what shape to build it in and then this one tells it what its gonna look like so what color and what how the alpha or everything like that fun cool the next thing that this shader needs are includes and so we're gonna include so hashtag include and then unity CG CG Inc now what this does it is a library of built-in functions for shade of writing built in shader functions and so this just includes a bunch of different functions that we can use to make our different shaders cool great now that we have our includes we can start to define some structures on how things get data so the first structure we're going to define is the app data updater basically says how the Thea Tex function is going to get its information so if we go ahead and define that updater like that and then float for for the vertex and that's gonna be its position and this is a semantic position and then we have a float to UV and that's gonna be at X 0 it's gonna be the coordinates of it go ahead and inline that there we go and then the second thing we're gonna need is a structure for how the fragment gets its data the fragment function we're gonna need a v2 F for vertex to fragment and then we're gonna need again a float for for position just call it pause then we're gonna need that as position but if you just have position like that it won't work on certain platforms like ps3 and some other platforms so you're going to have to include SV underscore position and then that will just allow it to work on the other platforms as well and then you can have flow to UV 6 X 0 again great so this is how the vertex gets this information and then this is how the fragment gets its information nice thing we have to do is get the import so what this is basically is we're getting the properties again so the main text and the color and since this is in the shade of lab like language we're gonna have to put it back into the CG programming language and we're gonna have to re-import it in so this is how you do that you just define what it is float for okay and then you can have color just like that and then you're gonna get a sampler 2d and we'll call that main text that's what it's what we're reading so they have to have the same name as above here and so that will reinforce oh we can use it in our vertex and fragment path functions great on to the vertex function which builds the object so the first thing we're going to say we want to return is what goes into the fragment shader or the fragment function which is going to be V to F so if it takes two frag and then we're gonna say the name of the vertex function which we put up here which is vit so I'm gonna call it vit and then we're gonna see what it goes in so the app data and then we can just call this in so the information that's going in then we're going to need to find a new v2f structure I'm gonna call it V 2 F out so what it's going to output and we're gonna say out pause is gonna equal to unity object to clip pause and then we're gonna get the in vertex and what this is going to do is gonna take the object from the object space and put it into the camera clip space so it's gonna allow it to appear on the screen and then we can go ahead and set the out UV equal to the in UV so just change swapping the movies to the out series and then we can go ahead and return out so we put in the app data into here into N and then we've converted it into a vertex to fragment and so it returns that awesome to the final part of the shader the fragment function on which cars are doing and so we have to say what outputs and it's gonna be a fixed four and then we're gonna name it the same thing for egg as up here and so now we're gonna say what goes into it so a vertex to fragment and we're gonna call this in and then we gotta say there it outputs as an SV target like this so it's basically saying the color of the final thing you can also have like SV target one and two and three and four and so on and it just says the different like output colors and then we're going to need a flow for for the text color text color equals text to G and then we can get the main texture so this has to be capital main text make it says in UV so what this basically does is it gets the texture and wraps it around the UVs of the objects so it gets the texture and it just wraps it around the object and then we can return the text color times by the color we put in at the top and that we imported so this color which we can change in the editor so it will get the texture wrap it around the thing and wrap it around the object and then you can return the color times by the color so you can like take ten two different colors so this should work now if we save that go into our unity project and then we can select the color Oh it says main Tex is not done because I forgot to capitalize the T here Oh press ctrl T ctrl shift T there we go and save that go into the unity project there we go it's working so if you see you can go into the shader and you can select the texture you select anything and you can change the color to whatever you want and that's basically what the unlit shader is but not the not including the lighting and stuff like that and the surface shader so that's the basic shader done the next thing we're going to go through is how to create an outline around the shape and so we're gonna make a new shader so create you can just duplicate this one so ctrl D and we're gonna call this outline and then go ahead and open that and we could change it strong not from custom but from apply texture we can call its outline cool we're then gonna need to add some more variables for the outline so if we go ahead and make an outline material so outline text for outline texture and we could just call that texture and then we can make it a 2d and we could just equal it to white again and then we're also gonna need an outline color and one and then the last thing we're gonna need is an outline width so how big the outlines gonna be I just call that outline width and then this is gonna be a float so we can have a range and we're gonna have a range of one to let's say 10 and we can set the default value of this to be let's say one point one I could close it off so that it starts a bit bigger than the actual shape okay cool that we have our variables we're gonna need to set up another pass for the outline so this will this normal pass will set up the shape that just the normal shape and then we're gonna need another pass to render the outline by itself so you have to render it twice once for the full shape and once just for the outline so if we go ahead and copy and paste this pass and then I'm gonna reformat it because it moved all the tabs around so one sec now that we've were reformatted the new pass we can go ahead and give it a name so just call it name and then we're gonna call this outline you can give it full full caps outline and then that it's gonna name the pass if we ever want to use it in a different function and then we can also name this pass and we'll just call it object because it just renders the object by itself nice and then we can go ahead and change the imports for the outline so instead of using color and main text we're going to want to use outline texts so if we go here outline Tex outline color copy these over the top and then we're also gonna want a normal float for the outline width with our new imports we can now actually set up the outline vertex function so the only thing different in this is that you're gonna put in dark vertex and XYZ then times the outline width so as x equals the outline width and what this is going to do is going to get all the vertexes of the shape and it's going to times it by the outline width and so it's gonna make it either the same size if it's 1 or bigger if it's more than one so it's gonna make the shape it's gonna get the shape and then it's gonna increase it a bit bigger than the actual shape size then the actual object will also render but this will just be the same size and then one more thing we got to do in the fragment shader is change the main text to outline text so it's replaced the main texture with the outline texture and then the outline color replaces the normal color so now this should work apart from one thing which I'll show you in a sec so if we go ahead and run the game now you can see inside of unity we have the apply texture on so if we go to custom linker to the outline now you can see that there's a box and then inside of this box is actually the original box but you cannot see it because Z writing still on so if we go back into the shader nice the name you can go ahead and turn Z right and then you can just write off and you don't need a semicolon and then we're also going to add a we're also gonna add tags like this and what this is gonna do it's gonna be some predefined things so we can say Q and then equals trance and I'll show you what that does inside of unity so if we save that out go into unity now I've click on our object we can see at the bottom it says render queue from shader and if we click on transparent it equals 3000 and from our shader it equals 3000 so this is just what like basically what when it when it renders so if you go ahead and duplicate the cube and move it behind we can see that since this is transparent it will render above the other anything behind it so I'll render like closest to the screen so that we have a nice border effect now cool so now that we've made the border we're gonna go ahead and make a blue shader to add to this boardís border shader later on so if we go ahead and we can actually duplicate the outline it's a control D again and we'll just call this blue and we're going to be using a Gaussian blur now that we're inside of a player shader we can rename it to blue and we can get rid of these variables and replace them with a intensity so we can call this blur intensity and a range from zero to one and we could set the default to zero point one and then we also need letter radius so you can call this radius and it's also gonna be arranged but from zero to 20 and we could set the default this to one and then the sexual change this one to 0.1 0.01 cool go ahead and change the name of this first pass and we call it our our is blue because we're gonna do two passes on this blue we're gonna do a horizontal pivot so going across then we're gonna have a vertical blur going up and down okay so we could take Z writing off I need to add a grab pass here just above the actual purpose and what's gonna do it is gonna get the object everything behind the object is gonna render it and send it through down to this pass the horizontal blur to start off we're gonna need to change the input so you can get rid of these and replace them with blow radius and we can copy that one put it here and get the intensity and then instead of sample a 2d outline text we're actually gonna get a grab texture and this is gonna be the texture that's comes from the grab pet so everything that is behind the object and then we're also gonna need a float for and this is gonna be grab texture underscore Texel size and we'll get to what this means in a minute the s actually has to be capitalized like that and so this imports the stuff we actually need into this then we can actually get rid of app data because basically what this contains can also be inputted into the vertex by going app data underscore base because this is included in the built in shader functions so we don't actually need app data but with the v2f stroked we want to change this to vertex position of vertex and then UV to UV grab and also change it to a float for down to a vertex function we can get rid of the amplification of the shape because this is just gonna go on the actual shape itself to get rid of that we can change the our vertex to be equal to the cameras clip so like it gets the object and puts it into the cameras perspective and that's right and then we can go ahead and so that's almost right but there's one thing wrong with it when it when we go like this it's gonna change the whole camera it's gonna put the whole cameras perspective onto each face of the shape and so we need to add this so out the UV grab dot XY equals float to out vertex dot X and then out top vertex dot y x scale which will define in a second and then plus out o vertex W and what times all that by not point five and that will make it so that it only gets what's behind the actual object instead of the whole screen projected on to each face of the object and they've been get UV grab duh ZW and get rid of this and then we're gonna define this scale and we define the scale because on certain processes like if someone's using Direct X or some other platforms the UVs on materials and textures read upside down just because of the differences in the hardware and software and so you need to put this statement unity UV starts at top and then float scale equals negative one and then if it if it isn't using it then because she's the default way real reads scale I could just replace scale equals one and then we can end it and if and typify it in and then this should be good for the vertex function and we're just gonna remake this so we could change it to a half half four and the name of the fragment function for AG v 2f and then what's going into it and then this is going to output the color so the color of the actual shape an object and then we can make half four four and then there's going to be a text call so your textures color in the end and this is equal to at X 2 D and grab texture prash under school code then in UV grab and I should be good apart from text 2d should be with a project the end of it so that we'll get the everything that is behind the everything that they grabbed the grab pass got us so everything behind the shape it will put into this material and put it into here okay and then right at the end we can say return right turn text color so change the text just color but we want it blurred so this is it not blurred and it returns it not blurred so if we go ahead and add a new version of it so have four texts some and we're just gonna equal it to nothing right now so have four zero initialize it to just that color and then at the bottom so when we change text um in a second we can say text Carl equals lip and then checks car text some and we can lip it by the intensity so underscore so what this is gonna do is it's gonna lip between the no color so no blur and once once we set this to be a blurred vision of this it's gonna live between no blur and blur by the intensity so for the intensity is one it's gonna be all the way to text some so all the way all the way blurred and if the intensity zero it's just gonna be a default of text call alright now we can go ahead and start the add the half of the Gaussian blur which is the horizontal pass of the Gaussian blur there's an algorithm for Gaussian blur I'm gonna put in the the notes and so you can look at that of how it works but right now I'm just gonna define a like a small function define grab the pixel because how gullible it kind of works is you have multiple pixels so say if there's like you have the one pixel in the middle and to blur it you want to get the color of all the pixels around it and take different values of that color and combine it and average it out and make the pixel that we're talking about that color so it's basically an average of all the different pixels colors around it and this this pass only does the horizontal so only pixels that are to the left or to the right and so to start we're gonna say grab pixel and then we're gonna say wait so that's how much percentage of the pixel it's going to take of the of its color it's gonna take so the way and then kernel kernel X so this is going to be what pixel on the x-axis is gonna take and then we can go ahead and say we could put it right next to it text 2d 2d brush and then in the UV grab dot X + grab texture underscore texas-sized that's how big the actual texture is times the kernel X and then times by the blue radius so it's going to move the kernel along so instead of getting the pixels directly next to the first pixel that we want to change the color for it's gonna go like depending on the blur radius either 2 or 3 or 4 depending on the blur radius pixels away and get that pixels color so blue radius and then I'm gonna get in the UV grab Y and then the same for Z and W and then we're going to times all that by the way got one part at the beginning we want grab texture then comma unity crush chord and then at the end we want then we want all of this in a flute for and then right at the end mean another bracket so this is the function of getting a pixels color and by how much weight you want of that color so it picks a pixel depending on the kernel away from the pixel that we're currently on and the blue radius R then depending on the weight grabs that amount of color from it and then we're gonna use it in a sec to add it to the sum so we can go ahead and do that now so if you do checks some plus equals grab pixel and then we just start with 0.05 0.05 and then negative 4.0 and so this is the way and this is the kernel we're going to copy this a couple times so 1 2 3 4 5 6 7 8 so we want nine of these all together 1 2 3 4 5 6 7 8 9 okay and then we're gonna change these numbers so it's gonna be something to be 3 and 2 1 so 1 is just gonna be 0 and then we're gonna go back up the other way so 1 2 3 4 and then we're also gonna change the weight so this is the furthest point away from the furthest pixel away from the pixel currently on depending on the blur radius is how far it actually is away so it's gonna have the least amount of weight and then three is a bit closer so we're gonna do a bit more weight so nine and then this one's a bit more close to the net so get 12 and so on so 15 and then 18 and then we go back down the other way so 15 12 9 and 5 and so now this should go through all the pixels on the horizontal axis on the further the externals and add up their colors so it gets one big color and then it's gonna be a blur so it loops through no blur and some blur depending on the intensity now we just need to do the same thing but on the vertical axis so if we go ahead and go down or forget the imports go down to the vertical and we call this vertical blur and we want to change the imports to the same but just before the pass we want to do another group pass so that this grab pass here will grab everything behind the object and then it's gonna blur on the horizontal and then this grab pass is going to grab that blue that just happened and put it into this pass and then we're gonna need to change this stuff to match the one above so you can get rid of app data data however you want to say it change that to base and make a change V to earth again and then the vertical function or they are yeah the vet functions going to be exactly the same the VIX function so we can just copy out the contents of this and stick it into this one reach out a fire so that should work and then we can go ahead and copy this frac but we're gonna change it a bit so that it works so just replace this one with that and then we're gonna need to change this kernel to a wide kernel so kin or Y and then I'm gonna just put this down here for a sec so it's easy to read and then we can move this to here like that remove it from here and times that by Y king of Y and then grab Texas that's why and now this should work for a blue it's just tested it should move this back yep I accidentally typed another underscore yeah so delete that and I didn't type four here put that in spelt kun all wrong so let me replace that and go down to here and replace that also kernel why there we go forgot a semicolon here at the end of the lip functions and double underscore and the other half for accidentally left a camera in after the end UV grab y for the grab pixel in the vertical blue I thought we got of those areas fixed which is kind of bound to happen with no intellisense we can go ahead and open the unity and we can put the new shader on I wish make a new material create material I'll call this one blue and we could just drag this Blair on and custom blur and we should just make a default texture as well so material we'll just call this textured cut custom and then apply texture let me just put just a checkerboard pattern or something on it gonna put on cube one oh yeah cube on I'm gonna put the normal texture and on cube so the one that's in front I'm gonna put the blue so right now you can just see directly through the cube but that's because we need to set our blur intensity up and then you can see everything behind the cube is getting blurred you can change the radius as well so great we made a blur shader now to make it distort shader so what the distal shader is basically going to do is you can be able to see through it and put a color on it and you're also gonna be able to apply it a bump map so that we can when we combine the two the blur and the distort it will blur things in a certain way and it will also distort them using a texture map so let's go ahead and copy the blur and get on with it so ctrl D on the blur and we call this distort and we can open that change blur to distort and we only need one pass for this so we can go down and tell the other pass like that great and then we can rename this to this and then we can delete these properties and replace them with distort color so just old color and we can name it to stop color and it says the property of color okay set the default and then go ahead and make a bump amount for how much distortion that's gonna be yeah we just named that Distortion and we want to set that to a range of zero to say 128 and we can default it to you Ted then we're gonna set the actual distortion texture so distort X and then this will be the the map that goes onto it or the texture that goes onto it so we'll call it just total texture and the RGB and then this has to Detex Chur close that off and default this to be white and then the last thing we need is a bump map so the actual distortion or noblemen and this will also be a 2d texture and wholly defaulted to bub and I don't like that go down and recreate app data for this and then we're gonna need a float for full vertex and that will be position and then we're also going to need a float to for a text code and text code 0 let me put that again and then with the vertex to fragment we're gonna need to change this up a bit so this is right and then this is right but we also need two more things we need to float to UV balm and that's gonna be the second text code so Xcode one then we also need a float to UV main that'll be tix color - okay so you save that need to change the inputs should go ahead and delete these and we need a float for the bump amount and we also need the flow for for the bump map oh man and then underscore st and then we also need the float for underscore just talk text underscores t and then we need fixed for just color and then we need sampler to G grab texture and then we need float for grab textures texercise and then we also need simple 2d bump map and also the distal texture down to the vertex function and remove the under scope basics we're gonna use our own updater and we go down this is all good apart from at the bottom we're also gonna need to add information for the bump map and the distortion texture so we can say how the UV bump equals transform underscore Tex and then in the decks code and I'll just go bump map and then we copy this put it here and then for the UV mean we want distort text drew so this and that should be it for the vertex function so this should go ahead and apply all the positional data and build the object in the right way scroll down to the Franklin function and go ahead and delete this and then we're gonna need information for bump so make a half two for a bomb and then we're gonna unpack the normals for text to ye and then under school welcome mat and then you get the in the end you've use for the bump and then our G and then we're gonna need float to offset equals bomb times bump amount times the graph texture texas-sized X&Y and then we're gonna need to actually offset it so we calculated the offset due to the bump map and then now we can actually do a set the actual colorization by setting the the in dot grab you are a UV grab so x and y equals offset times in the easy grab dot z and then also add the in the you grab dot x and y so that's gonna offset the actual texture and then we need to set the color so have for call equals tex 2d approach other school grab texture and then unity must approach underscore cold open bracket in the you the ground and then we can also need to set the tent so half so this is for the texture you want to put on the distortion and then this will be for the tint you want to put on that some call it tint equals takes 2d then underscore just torqued texture on the school a comma in the UV mean we're gonna times that by the distal color need to capitalize that D and then what we're gonna return is is the call times the tin so the color times the 10 so this is gonna do is gonna offset the material by the bump map depending on the amount and the actual text you put on it and then it's gonna get the color of the the distort color from the texture and then it's gonna times it by your tint you put on it and then it's gonna return that actually made a mistake up here and I didn't name it bomb and Obama so also I named it transform instead of I'm just transform this often property is added an extra bracket Oh misspelled grab here at the bottom and the fragment function also in the fragment shader and the fragment function misspelled bump in the when I set bump and I forgot to capitalize the Jian grab texture there we go I forgot the be in grab down here and the fragment function and I also forgot to capitalize the tea and takes also in updater I forgot and OH to make it text cord serve text cord again there is no intellisense so you're gonna make a lot of mistakes if you're not careful but now now that everything's cleared up we should go in back into unity and we should be able to see this distal at action so if we make a new material a material I'll call it distort and we can drag the distort shader onto it and then we go ahead and apply this to the normal cube the one in front it's gonna look like nothing's changed but we can change the distort color like that so it changes everything behind it and if we just move the camera real quick see Jakes you see it in the game should make it bigger move this around alright now we can actually set a uh so this is the distillate texture so this is like if you change the distortion all the way up also and we change the color you can can I see that that's like the UH the texture of the thing but then if we go ahead and go into the bump map it's gonna distort it based on the bump map also it looks different with different normal Maps and distort textures so you'd have play around without yourself and then the last thing we're gonna need to do to make it all come together is make one final shader that combines all of them but to do that we're gonna need to make a new folder we're gonna need a two different blue and distil shaders that are a bit different so that they actually scale to the size of the outline so if we call this final shader and we duplicate the distort put that in there and we duplicate the order put that in there we can substract the outline straight into there actually we don't need the outline we can use the apply texture instead and we rename this to outline blur and this to outline just till oops and then we go ahead and open these up so I outlined blue and we just add the outline to the thing and we rename this to outline in front of it just copy that go down to the vehicle blue and then you can go into the distal as well add outline now to actually make these different we're gonna go back into a normal outline shader go down to the top layer Texas where we actually make the outline and we're gonna copy this little line that times is everything about the outline width and I mean go into outline blue again and just add this to the fit both of you Texas so we get that vertex oh yeah 30 X function so these two that we get us to put it in the outline 100 outline distort one so put that there and then we're also gonna need a um was it called outline with its a copy there put that at the song both of them and then we're gonna have to also import it so we get his copy the import text from here so outline with put it into the blue put it here also in this shader and then we're gonna also need to put it in the other part of the blue and then in the outline blue we'll also want to add plus zero point zero mm-hmm what should we want so if it can scale from their intensity from their faking scale from one to ten we want to add zero point one to it so that it Blizz the whole thing so you see what this does in a second so we can add this to the other one all right and now we can create this final shader so if we go back into unity and in the final shader folder we can create a shader well we can just we can just copy the apply texture one it's a control D and we'll rename this final outline yeah we'll just call it a order yeah picolet final that way let's open that up rename it go ahead and delete all the entire path and then we're gonna need to add the properties of all the different shaders we've made so the first one we want to get is the default not not the outline path of the outline but the actual object path so every all the information that goes into there so these two properties will put into our final shader and then we're also gonna need the outline width because that goes into the two shaders we made and then the girls are gonna need the all the properties so if you're gonna blue get at the top grab the blue radius of intensity but that here and then we also need the distortion outline just stop and then we can put that at the bottom now that we've made all the shaders we can actually call the passes in this one shader so we're gonna get the grab pass of just everything behind the shape and then we're gonna below it so we can go ahead and say use pass and then we're gonna call custom and then we have outlined below and then outline I would just copy this so go to outline blue go to the top copy that and then copy the outline horizontal blue and then put that on the end so it's gonna use the passage get a horizontally blur everything behind the object and then we can copy this and do it again but with the vertical blur so replace horizontal blur on the next line with vertical blur and then we're gonna need to distort it so we got to grab it again so this grab is not that this grabs everything behind the object this blows it and then this grabs the horizontal bullet and then adds a vertical blur and then this grabs both of them together and then this will blur it again but we need to go to the outline and go to the outline just don't you put this in the whole wrong thing once a controls get okay accidentally hoping the wrong one so we need final online here we go the custom okay [Music] yeah I mean we need to get the distal shader so you can go ahead and outline distal put that instead of that line blue and then we're gonna grab the paths which is outlined distort and put that pass here and then instead of getting another great pass we're actually just gonna want to draw another shape on top of this one so we're gonna need to go to the Atlin shader go down to the object and then we can use it so use as custom slash outline slash as an object so now this should work let's just try it out if you save it and then go into unity just before that we're gonna want to add Z right to both the outline just still on the outline blue so turn it off for me it's a Z right off and we're gonna add that to the blur as well so Z right also need to add it to the second pass of the blue to see right and we're also actually gonna want to change the the positioning of the distal we want to change it so that that happens first so it distorts everything so it grabs everything behind the shape it distorts it and then it blaze it because if you have the blue first then the distortion doesn't get good and so you can see the edges of it really well and you don't really want that and then you add the object in the end so let's go ahead and try this in UV okay now that we're in unity we can create a new material and we call this final outline and will add the custom final outline and we could select the default texture make the cut cut like that the width is okay blade radius is it okay I set it to 1.1 the intensity we could turn all the way up the distortion color will set to like a red and the distortion we want all the way up and then you can set these yourself but right now I'm gonna play that and then you see we have the outline and if I move the other cube you can see it behind it like that and it blaze it and also distorts it if you put on a bump map onto the actual material so onto here and then you can also change the width and anything all the settings you can change and then one last thing is I'm going to show you a script on how to make this border appear once you hover over an object so go ahead and make a final make a script so c-sharp script and call it on other folder and then open that up and once it is open you can delete these two usings statements because we don't need those then just formatting okay we're gonna need to public materials so we call this order and probably material I'll call this northern border and then we can delete these two as well we don't need those and we can have a void on mouse-over so on my service one of us is over the object in the game view do you get component then renderer and then we can have the material of the renderer and then equals order and then we can have on mass exit exit we can have the same thing but we can change it to non Builder and then that should work let's go try it out let's go set up a scene in you do okay so we have the final outline material it may also have the textured material so if we go ahead and click on the cube and put the normal textured material onto it you can also add this script on to it by just dragging it on and then we can have the two materials in here so we can have ordered which is the final outline one and then we can have the non boarded one which is the textured and then we can set up an S seen by make this visible delete this other cute and you just duplicate this a couple times so duplicate and it's like both of them duplicate move it out then we could duplicate all four and then we could duplicate a little bit and then move it all and then we could set up camera to see them all moved around okay and then when we press play when the mass is over it it sees the material and it puts a border around it but if we want to change it so that the final outline color is white so it doesn't look like it's changing now when we hover over it just look like it's a border around the shape great I hope you enjoyed my tutorial on the introduction to shaders and have fun using the outline shader that you just made

Channel: Morgan James

Views: 24,965

Keywords:

Id: fp89rfT4tqI

Length: 75min 6sec (4506 seconds)

Published: Wed Jan 10 2018