Unity Shader Graph - Sci-Fi Barrier / Shield Tutorial

today we are going to see how to create a sci-fi barrier [Music] hi guys i'm gabrielle gear currently developing rabbids tale links below for more and i'm going to show you how you can create a simplified version of these barriers from mesh to shader and how to use it in vfx graph it may also interest you that i once recreated the barrier from overwatch's character reinhardt and i left a link in the description in case you are interested there's plenty of cool techniques to use it there this entire project and many many others are awaiting for you on my patreon's page in case you want to get your hands on it i left some links below so without further ado let's jump right into this and a very important part of this effect is a mesh a proper 3d object as this one so you can apply our shader too and to create this 3d object we are going to use blender because it's free and it's easy to pick up i am using blender 3.1.2 and the first thing we can do is select everything with a and press delete so we can have a clean scene from there we can press shift a to add a plane and press 7 in the numpad so we can go to the top orthographic view and from here we can enter in edit mode by pressing tab because we want to add five segments to this with ctrl r you can scroll up or down to increase or decrease the segments once you have five you can press enter and then escape so let's stay in the right position and we are going to create a round barrier at least the corners and for that we can select the four vertices by holding shift and by pressing shift ctrl b from here you can move to the sides and then scroll up or down to increase the smoothness of this curve it will add more vertices as you can see once you have this aspect you can press b to select d's right side of the mesh and by pressing g and then x you can lock it in the x axis and move it a value of 0.8 and do the same on the left side select bit b move with g lock it in the x axis by pressing x value of minus 0.8 great it started to look like something now we just need to add another segment right here with ctrl r enter and escape so it stays in the right position and do the same on the right side fantastic now let's get out of the top orthographic view and if we select these two vertices and press g to move and lock it in the z-axis as you can see we only move these two verses as you can see we only move these two vertices so let's press escape what we need is proportional editing you can press o for the shortcut or go up here and once you press g and then lock it in the z axis as you can see you can scroll up or down to increase the influence but if you look closely it is moving in a very strange arc we can switch it up here and say we want sphere then it's only a matter of increasing or decreasing the influence and pushing up in the z-axis to create this arcade barrier and here we go looking good if we want this to be smooth you can press space bar and search for shade smooth or you can go up here to object and select shade smooth let's rename this object i'm going to call it the barrier tutorial now this is basically a piece of paper let's add some thickness to this we can go to modifiers and by selecting solidify we can increase or decrease the thickness i'm going to set it to a value of 0.04 so it has a little bit of thickness as you can see and there's another cool trick we can do which is adding a bevel modifier so you can have some very smooth edges around our barrier here we go looking very good that's pretty much it i'm gonna drag a new window now to take care of the uv maps up here i'm gonna select uv maps and then enter in edit mode select all of the vertices with a and as you can see this will distort the texture that we will apply to this fortunately it's super simple in this specific case to create the uv maps we can go to the top orthographic view by pressing 7 in the numpad and then with the u key you can select project from view bounds and here we go we have some pretty decent uv maps for this object and it was super quick so that's it our barrier is ready to export in file fbx make sure to turn on selected objects and in my case i'm going to export this directly to my project to the models folder i'm going to rename this to barrier tutorial once again and export back to unity now we already have the mesh so we can drag it to our scene let me just place it in the right position and from now on we are ready to work on the shader with right click let's create a shader graph you can either start with an unlead shadow graph or start with a blank shadow graph i'm going to go with blank shader graph rename this to barrier shader underscore dots i will explain it in a moment and the score tutorial double click to open this up and in the graph inspector since we have selected a blank shadow graph we need to say the target in this case it's going to be for the universal beta pipeline which is the one i'm using and i'm gonna say the material is unlit which is not influenced by lights i don't think this barrier needs to be influenced by lights but if you think it does need then make sure it's lit i'm going to turn on allow material override so we can control all of these parameters directly in the inspector without opening the shader and i'm going to switch this to transparent and say the blending mode is alpha for now but we will switch it to additive right so a very important part of this comes from a very small sample that unity created you need to go to the package manager and in unity registry in shadowgraph you have here samples drop down menu you want to install procedural patterns they are extremely useful and so cool we don't need to reinvent the wheel but i highly recommend it to once you have downloaded to check out the notes to see how it works under the hood because there is some really interesting stuff inside here and once you have downloaded procedural patterns we can go back to our barrier shader which is empty and by pressing spacebar we can search for dots you want to use this one you can try different patterns later on but for now the dots super cool to play with we can play with the size the tiling those two values are going to be extremely useful so let's create a float for the dot size and a vector2 property for the dot styling with a default value of 8 by 8 and for the dot size default value of 0.8 let's connect this to the proper inputs of the dots and connect to the base color save the assets save the shader and create a material we'll right click from our shader drag and drop it to our mesh that we have in our scene and as you can see it's ugly we just need to adjust the tiling of this i found out that 25 in the x and 16 and y are good values and we are going to use the additive blending mode by the way so that's a great start as you can see the dots are intense they are continuous as they should but in our case for the sci-fi barrier we want to break this pattern a little bit we are going to multiply this with a simple noise with a scale of 30. it's an interesting value to control in the inspector so let's create a float dots noise scale default value of 30 connect it down here and connect to multiply replace the connection to the base color save this and as you can see we have broken the pattern a little bit at least the intensity of the dots so let's create a group from this right click dots pattern this is the dots pattern we are going now to add something to this and that something is going to be a gradient noise scrolling gradient noise let's create a float property for this a noise scale default value of 10. it's useful to control in the inspector and if we want to scroll this through time we are going to need a tiling of set note it will look awesome so let's create one of these notes and as you can see the offset will scroll up or down our texture and to animate this through time it's not that hard we only need a time node a multiply and a vector 2. we can create a property for the noise speed with a default value of 0.2 in the y and connect this both to the multiply and to the offset of the tiling offset node and here we go it's scrolling before we add this to the dots pattern we need to clamp the gradient noise so the values that go below zero or above one so we don't have any strange artifact and before we connect this to the base color there is one thing we can do which is add color to this it will look awesome so let's create a color property and call it the dots color the color it's going to be in hdr mode white and alpha to 100 connect it here and replace up here the base color input and we can group this and call it the noise once we save this as you can see we have some dots with a scrolling noise texture procedural noise oh and we can play with color by the way for example select a blue like this one it's starting to look like something but it's a little bit too intense overall so what we can do instead is create a mask for this we don't want this to be so intense in the middle for example so up here we can start with a polar coordinates node it outputs two values x and y are r and g and r if we connect to a power node it's a black dot we can control the size the radius with the b value i'm going to leave it at 3.7 for now and if we multiply this with what we already have before the dots color and then save it as you can see now this is starting to look like a barrier sci-fi shield something of that kind very good looking we can create another group call it mask for example and that's a very important value here which is the mask power we can create a float default value of four more or less and if we save this now in this you have control over the mask power as you can see which is quite useful now another thing we can do is add a border to these i light the edges just like this and the quickest way i've found to do it is to use the texture for example if you go back to blender enter in edit mode select all of the vertices with a up here in the uv window in this uv drop down menu we can export uv layout make sure it's 2048 by 2048 export as a png and then i'm going to use krita for this part i'm going to drag and drop the exported uvs create a new layer select the white color for this i'm going to use this brush by the way with these settings and then with the polyline tool make sure you have the tool option and if you don't see it you can go to settings and in dockers you can turn it on down here make sure the fill is not filled and outline is brush oh and for the brush size 80 pixels should be enough by the way it depends on how thick you want the outline of your barrier to be now it's all a matter of clicking one time and then creating the contour of this line we are going to pass on top of it everywhere all of the corners just like this until we close it and once we close it we will have this white border and you can add the background and if you want with right click on the new layer you can turn on outer glow and add even more glow that's really up to you i'm going to leave it as it is without outer glow and export this without the background as a png to my project to the textures folder if you want you can turn on alpha's transparency in unity now how do we use this well it's not that hard let's create a texture 2d for the border texture and and the color for the border color i'm going to push both up here the color it's going to be in hdr mode white and alpha at 100 first we need to sample the texture and then we only need to multiply this with the border color and that's it we are going now to create a group for example call it border what's important is that we add this after the dot color and then connect this to the base color that's really important in this order specifically let me just rearrange this so you can have a better understanding of how this is connected and once you save this it will become white because the material that we have applied to our barrier doesn't have the border texture so let's select our barrier assign the border texture and now we can select any color we want i'm going to go ahead and choose an orange color and look how awesome it is now this is a sci-fi barrier by the way i have a global volume with bloom just so you know and in case you are wondering i can quickly show you how to use this with vfx graph just make sure that in package manager you have visual effect graph installed and that in a detailing preference in visual effects you have experimental operator slash blocks turned on and then you and then we right click you can create a visual effect graph in a folder and drag and drop it to the scene after you have renamed it all we gotta do is press the edit button to open vfx graph and from here now as you can see we are outputting a quad and in our case we want to put a mesh so if you drag a line from here you can search for mesh you can choose if you want this to be illuminated or not i'm going to choose delete version because it has a very cool feature by the way where you can cast shadows among many other things you can delete the quad output and as you can see we have a bunch of capsules in our case we only want one mesh at a time so happier we don't want the constant spawn rate we want a burst with only one particle we also don't want this to move so let's delete set velocity and the lifetime is going to be constant you can turn off randomness for example like five seconds this is where you decide how much time the shield will be up and then down here as you can see we can assign our barrier we cannot see it because it's probably very small so let's use the set size to increase the size to 100 and now we can push the vfx graph up so we can see the wall thing and from here it's actually very simple all we got to do now is assign the shader we created you probably won't see it because in the shader graph you need to tell this shader to use vfx graph to support the effects graph in the graph inspector once you turn it on and save it if you go back to vfx graph now you can find the shader you created and from here it's a matter of copying the values you use it for the mesh basically the values of the material which is what i'm doing right now once you copied the values now you can do a bunch of things oh it's probably black in the center because this output mesh is in alpha mode but also because we didn't connect anything to the alpha input it's very simple at the end the last node you can split it and use the a channel which is the alpha channel and connect it to the alpha input of the fragment function save the shader and here you go you no longer have the black values in the center now it's a matter of doing whatever you want for example a very usual thing we would see is the barrier growing can you use the set size of our life for example and we must set the composition to multiply instead of overwrite any previous value and in this curve now you can control the motion the scale for example you can use the line with right click add a few keys and create something similar to this where it bounces a little bit in the beginning and towards the end it will shrink cool right you can do many more things i suggest you check out my channel where you will have plenty of tutorials about vfx graph you could as well fade these in fade this out and many other things so that's it now you know how to create a barrier how to create the mesh for the barrier the shader and how to use it in vfx graph this wall project is available at patreon's page any support is very much appreciated guys and i want to say thank you to each patron that supported in the last month and a quick shout out to the top tier patrons which are 3d sorcery alperarichai achilles federico gill's walter goblin black guillerm trinidad casey miller kenny ansel mark adam mattis braganza michael radioactive bullfrog revenant games vel verisuta victor roman will hughes will paulian champion link myeong and in good that thank you all very much for your support it's super much appreciated i hope you guys have enjoyed this video and to anyone watch this i hope to see you in the next video thanks bye [Music] you

Channel: Gabriel Aguiar Prod.

Views: 33,925

Keywords: Unity tutorial, vfx, unity, visual effect graph, unity visual effect graph, unity vfx graph, visual effect graph tutorial, unity visual effect, tutorial, shield particle system, scifi shield, shield, unity shield shader, shield shader, shader graph shield, visual effect graph shield, unity shield effect, unity shield tutorial, sci fi shield, unity shield, unity force field, shader graph tutorial, shader, unity sci fi barrier, unity sci fi, scifi, sci fi, scifi barrier, barrier

Id: rB4YMQmO8Mw

Length: 21min 6sec (1266 seconds)

Published: Tue Sep 06 2022