FORCE FIELD in Unity - SHADER GRAPH

in this video we'll use shada graph to create a cool-looking forcefield and then you should have something that looks like this I'm sure Winston would be proud notice how the effect takes advantage of a new node called scene depth to show where it intersects with other objects this same effect can easily be applied to create other cool effects like foam in water or a sci-fi scanner but before we get started this video is sponsored by skill share skill share is an online learning community with more than 27,000 quality classes on game development tech and more if for example you don't have any prior experience in unity but really want to make your game idea come to life this course teaches you the basics of unity without having to write any code at the end of the course you will even have created to gaming classics breakout and doodle jump skill shares the perfect platform to keep learning and thriving and ask OCR membership gives you unlimited access to all classes for less than $10 a month join more than 7 million credits by simply clicking the link in the description and the first 500 people will receive their first two months for free also special thanks to infinity PPR for his support on patreon and with that let's get shading so first of all you want to make sure that you're using unity 2000 19.1 or later and share the graph now works with both the lightweight and the HD render pipeline but no matter which one you're using you should go to window select the package manager it's like the render pipeline you're using in this case I'm using lightweight and make sure it's completely up to date if you don't know how to set up your project for a lightweight I'll make sure to have a link on how you can do that in the description now in order to create this force field effect we of course need to create an object that will have our material so let's go to the hierarchy right click go 3d object and let's select a sphere let's also scale this up and I'm just gonna put it next to the wall here something like that notice how I'm making sure that this object is intersecting with other objects so that we can see this part of the shaded working as well and now we're ready to create our shaders let's go to the project he create let's go to shader and here we want to select PPR graph let's call it forest field and we don't want to create a material from this shader so we can just right click on it go create and then material and it's then gonna automatically create a material with the Shadid selected i'm just gonna call this material forcefield as well let's then take this material drag it in and apply it to our sphere and now it's almost time to jump into shader graph but first we need to go and find our lightweight render pipeline object so in my case I'm using the high quality one right here which is what it's using by default when you set up a new lightweight template project and we want to make sure that under general we have depth texture set to true that's because we're going to be using this scene depth node to create this effect and that requires a depth texture otherwise that node is just going to give us a gray output and now we're ready to jump into shader graph so let's double-click on a forcefield shader and it's going to open up in a separate window I'm just going to full screen this and at this point it's shader time now I would say this effect can be split up into three main parts the first one is the intersection so we want to create kind of a glowing effect wherever this object touches of the objects the second one is just a general glowing outline for the parts that aren't touching anything and the third one is a scrolling pattern that we can kind of overlay so let's start with the hardest part of this shader which is the intersection so the first thing that we're going to need is to access our scene depth so to do this we're going to go and create a scene depth node and this is going to get the camera step buffer and we can choose how it's going to sample it we are going to choose eye which means that it's going to be converted to eyes base units why this is important it's a bit difficult to explain for now just go with me we are also going to access the screen position so let's go ahead and create a screen position node and here we're going to set the mode to raw and basically what screen position does is it accesses the mesh vertex screen position and why is this useful well it's useful because we can know how far a way a vertex is and then compare that to our scene depth buffer and in fact if we subtract this vertex distance from our scene depth we're going to get a cool intersection in fact so to actually do this in practice we want to split up our screen position so we'll input it into a split node and we only want to use the very last component here so the Alpha value and we're going to simply take that and subtract it from a scene depth so let's go from scene depth into a subtract node and let's go from our alpha of a split into that subtract node and that should in fact already be working in theory so what we can do now is take this entire thing let's plug it into the emission of our PBR master node this is just temporary but it should allow us to see kind of what's going on I'm also going to go to a PBR master node and change the surface type to transparent because we're going to be working with transparency and now if we save this asset and go into unity voila we can see kind of what's going on here we have this fading gradient wherever this object intersects with the wall now it looks a bit weird from the other side here currently but we can see kind of the same thing happening and the main reason why this is currently looking weird is because our sphere is also casting shadows and we really don't want that for this effect so let's select our sphere let's go to the mesh renderer and set cache shadows to off and right away you can see that looks a lot better the gradient isn't as clear here because the light is hitting it from the front but it is still there so the next thing that we want to do is allow ourselves to kind of control this gradient and we do that really easily by simply offsetting our screen position so to do that let's go up here and let's create a vector one let's call it offset and let's drag it in to create a node out of it and to use this offset we can simply remove this connection from a split node to a subtract node and instead put it into a separate subtract node and we'll simply subtract our offset there and I'm just going to default this to a value of say 0.6 we then take the output of this subtract node and put it in to this one so we've just added a tiny step here where we subtract a value from our screen position and then we put it back in and subtract it from our scene depth and now if we save that and go back into unity we can see that we can start to control this gradient that happens at the intersections you see that simply by adjusting the offset we can make that more or less apparent pretty cool but of course we don't want to add this to the emission of our PBR masternode instead we wanted to change the alpha of our material so let's remove this from the emission let's plug it into the Alpha instead and if we just say that and have a look at what's going on it's going to look really really weird and the reason for this is that currently this value isn't clamped to go between zero and one which is what the Alpha expects whenever we go below zero on the Alpha or above one things start to get wacky so what we want to do is first of all we want to reverse this because the Alpha works in such a way that white values are non transparent and black values are transparent and currently we have black values near the edges which means that we should probably reverse what we have going on here so to do that we simply plug it through a 1 minus node and that is basically going to do exactly what it says here it's going to multiply everything with minus 1 which of course is going to reverse it and then in order to clamp the value between 0 & 1 we can output this into a smooth step node we're going to take the Ln input here and it's going to go between as you can see 0 and 1 and this is both going to clamp the value to make sure it doesn't go under 0 or above 1 but it's also going to use a smooth hermite interpolation to create kind of a nice smooth gradient so let's output this directly into our alpha and I'm also just going to collapse this and make some room here and if we now save this asset we should see and it's not very visible right now but we should see that we have this outline near the intersections of our material really really cool and the reason why these aren't very clear at the moment it's because well we're just using the default albedo of our ppm master and we haven't applied any emission and I think if there's anything that deserves emission it's a force field so let's fix this right now in fact let's create a property in our blackboard said plus let's select color and this is going to be the emission as the mode here we'll change it to HDR which allows us to in here not only define a color I'm gonna set mine to some kind of light blue but we can also define an intensity of our glow so I'm gonna set that to something like 2.6 let's drag it in to create a node out of it and it's dragged that straight into the emission so now we can control the emission of this effect through the editor and let's save that asset close it and now you can see kind of what in effect we are starting to get here and just to make this a bit prettier I'm gonna go into my post-processing profile and add in some bloom and that is really going to help sell this effect in fact why don't we go ahead and make it just a tiny bit more intense there we go so that concludes the first and hardest part of the effect which is adding the intersections the next part is actually fairly easy here we want to add the glowing outline to the rest of our model and if you watch the videos for a while you might know that I'm a big fan of fernell so that's exactly what we're going to be using here that's adding a final effect let's set the power to something like 5 and we should probably make this adjustable from within the editor so let's go ahead and add a setting for that as well a victor 1 let's just call it for nil power and its default that to 5 drag it in and hook that up and there we go and all we are going to do is simply add this on top so let's take this entire thing here remove this connection and for our fernell let's go ahead and plug this into an ADD node let's also take the output of a smooth step and plug that in and now we should pretty much be ready to just take the output of all this and wired into the Alpha oops there's a note behind here and as you can see in our preview the Fornelli effect immediately shows up and if we save this asset and go back into unity we can clearly see it working so that's really really cool and I'm actually going to go ahead and bump down the intensity again because that is a bit too much there we go that looks really really cool that is the first two parts of the effect and the final part is also fairly easy that is adding a scrolling pattern across the force field to do this that's open up shader graph and of course in order to define a scrolling pattern you could use some kind of noise or generated texture but I'm just going to go ahead and use a texture that I found so I'm gonna hit + here create a texture 2d property and it's called this one pattern as the default texture here I'm gonna input the texture that I found I found this really cool looking hexagon grid and let me just show you this real quick it's basically just there we go it's a hexagon grid there's not much to it you can use any kind of grid light structure just make sure that it tiles seamlessly so with this pattern I'm going to drag that in and of course whenever we are working with a texture we want to output this into a sample texture node and that is going to display it and what we want to do is basically multiply this together with the output of our outline so to do that let's take this entire thing here so let's take all these nodes not including that one let's move them over let's remove this connection here and let's go ahead and multiply this texture so we'll take the output of the texture here put it into a multiply node took a do with our outline and let's take the result of that and plug it in to our alpha and as you can see right away this is going to add the pattern to our outline and that already looks really cool but I would like some control over this pattern in terms of tiling so let's go ahead and drag from the UVs here out and create a tiling and offset node and I'm just gonna tile this in say 3 by 3 just to make them smaller I think that looks much cooler and it's also try and offset this over time to create that scrolling effect so to do that we want a time node and we just use the standard time here let's multiply this by some value in order to be able to control the scroll speed so let's go ahead and create a vector one scroll speed and let's default this to something really low like zero 0-5 drag that in two hour multiply node and hook this up to the offset and you could of course use a vector two to control this on the x and y individually but I'm just gonna go ahead and make it scroll on them both simultaneously and with that in our preview here you can see that our texture is indeed scrolling and I think that looks really cool wrapped around a sphere so I'm just gonna take all of this and move it down and save the asset and in unity here we need to go ahead and hook up a texture to the pattern I'm gonna choose the same hexagon grid and voila we have a really cool scrolling pattern the very final thing that I want to do I didn't include this as part of the three steps it's because it's so small I just want to fill in a tiny bit of blue on the inside of the circle as well and in order to do this I'm gonna remove the connection from a multiply node here and instead just add in an add node along with some kind of vector one so that's create a vector one here let's just call it feel and let's set this value to point zero one it's dragging a fill here and that's all we want to add on top just to add in a tiny bit of extra so now inside of our alpha here you can see that there's a tiny bit of blue in there and you can of course go ahead and play around with how much you want that to be but for now I think that is pretty good and that concludes our shaders let's save this go back into unity and there we go now we have a really nice looking force field we can adjust the for nail power the offset on the transition we can adjust the pattern texture the scroll speed on that texture I'm going to just fill in order to kind of fill in on the power shield here and we can even go ahead and adjust the color to anything that we'd like so really a lot of options on this and it's just a really fun and cold effect yay that's pretty much it for this video if you want to see more videos on shady graft that need let us know in the comments until then you can check out some of our other shader graph videos and if you like this video consider supporting us on patreon patreon is a great site that allows you to make a monthly donation you're choosing and you can cancel it at any time by supporting you're helping us to continue to make these videos in the future and not only that by supporting you also get your name read aloud in the videos for that month and you get to join our discord server as a supporter mmm mr. supporter joins the chat a huge thanks to all the people who have supported so far and if you want to support simply go to patreon.com/scishow simply click the link in the description to get started on that thanks for watching and I will see you in the next video I'm sure Winston would be proud thanks of the awesome picture and supporters who donated in March and a special thanks to infinity PPR Sybok mummy Dennis Sullivan Kris Shane Cleveland face America Lincoln Chang Liu descent ruining furniture to Sonic constantinos currents us now k Vaisakhi Craig refused rock burn dr. poon moon Erasmus and cures Valesky you guys Rock

Channel: Brackeys

Views: 458,626

Keywords: brackeys, unity, unity3d, texture, textures, material, materials, easy, how, to, howto, learn, course, tutorial, tutorials, fix, tip, game, development, develop, games, programming, force, field, force field, shader graph, shader, graph, depth, scene, scene depth, foam, water, lightweight, intermediate, fresnel, overlap, intersection, intersect, glow

Id: NiOGWZXBg4Y

Length: 16min 35sec (995 seconds)

Published: Sun Apr 28 2019