Unity VFX Graph - Shield Effect Tutorial

what's up guys welcome back to gabriela abroad and as usual we got something crazy and today it's a sci-fi shield [Music] i'm recreating this tutorial that i made a while back but this time we go more in depth this is a hard one but i'm gonna try my best to explain you how you can achieve this that you are seeing we are going to need the mesh text or a shader and some code i hope you enjoy it and if you want to get access to this project and many many others that you can use in your games it's all available in my patreon page and without further ado let's see how to create a sci-fi shield [Music] and by the way guys i'm using udt2021 udt2021.2 because there is a special feature that we are going to need in vfx graph oh and in the package manager make sure you have visual effect graph installed and shade a graph and then go to edit and in preference in visual effects you have experimental operator slash blocks turned on so you unlock some extra features of visual effect graph and would you look at that this is what we are going to create something similar a sci-fi shield and the first thing we need is a mesh a 3d object in my case i use blender and i can show you how you can do it we can start by selecting everything and delete so we can have an empty scene and then press shift a to add the nikon sphere in this left bottom panel we can increase the subdivision to 3 that should be enough and now the trick is to add a subdivision modifier and if you look closely we got the pentagons and hexagons going on but we have a few vertices that we don't need so let's apply this subdivision first modifier and now we tab we can enter an edit mode and with control tab you can choose vertex for the select mode and we simply need to select one of these vertices and then with shift g we can say select similar amount of connecting edges all of the similar vertices are selected now super useful we can press delete and choose dissolve vertices nice you can do the same for the pentagons select one press shift g amount of connecting edges press delete and select dissolve vertices great let's do the same for these vertices as well we don't need them we have our mesh at least the beginning our next step is the uv maps it's super important otherwise it will not work properly i'm going to drag a new window down here and up here i'm going to select uv editor press tab to enter an edit mode and you can press u to select unwrap you will get something like this that is not what we need the trick here is to go to the uv tab and in the uv maps drop down menu we can delete this uv map and then press u again and select unwrap and this time it will unwrap properly but they are overlapping so we need to separate them press ctrl tab to select faces select one pentagon and then use the same technique with alt g but this time we are going to say select similar area and it will select all the pentagons super easy and so useful and now with g we can drag them to more or less around here and now it's simply a matter of fitting both the hexagons and the pentagons in the uv area okay once you got something like this i'm actually going to save this directly to my unity project rename this to shields save okay let's just rename this mesh shield01 for example and lastly we need to separate all of these faces in edit mode let's select everything press alt m and we can split faces by edges great exactly what we need so we can play with this in the shader that we are going to create in unity and yeah we need the text for this so let's go to uv hub here and down here export uv layout for the size 2048 by 2048 is more than enough and then you can save this png now we can go to an image editing software this time i'm going to use krita so this is the uv layout we get we can drag this image to krita or to another image editing software now the idea is to create a new layer and in this new layer we are going to create an highlight for the edges in krita it's done by selecting the brush first adjusting the brush for example i'm using this one which i think is in the paint section yeah the first one and i'm going to decrease the fade to zero so it fades nicely and for the size around 140 pixels 180 along those values it's enough now the trick is to use the polyline tool now we simply a matter of highlighting these edges of the hexagons and then of the pentagons once you have that done you can actually create a new layer decrease the brush size to 20 30 and on the new layer we are going to highlight once again the edges i'm gonna add the other layer first okay so i like this the idea is to create a brighter edge and then in the first layer we created with the big brush size i'm going to decrease the opacity to around 50 60. and that's it we get a nice highlight of the edges by the way you can also leave the uv layout texture but decrease the opacity to 20 something super low but that's basically it now let's export this as a png file i'm going to save this to my unity project directly and here we are in unity now so we have the mesh and the texture the shield we can drag it to our scene we're going to push it a little bit up and we can start working on the shader finally so with right click i'm going to create in shadow graph you can create a blank shader graph or elite shader graph rename it to shield shader double click to open it up in the graph inspect for the targets you can use visual effect and set the material to lit so you can have shadows but this will not work with vfx graph if you are using a lower version than this one which is 2021.2 because now in vfx graph we can use lead objects in the universal runner pipeline and we also don't need to say visual effect now we simply need the universal target and then down here we can turn on support vfx graph pretty cool now make sure it's lit we are going to need this to be transparent and in additive blending mode and the render face it's basically if it is two-sided or not and yes we want both faces to be rendered the front one and the back one we are going to create a nice effect for that in fact we are going to create two colors one for the front faces and the other color for the back faces so front collar and back collar and then we need the texture to d for the main texture basically the text to be created with the pentagons and hexagons so for the colors we can set them to hdr and choose a white color with alpha at 100 that's the default value we want to start with and the main text we can select the text that we just created right first we want to multiply the main text with the colors but we need to sample the texture first and we can actually only multiply with the front color and connect this to the base color and let's see this in action already let's save this shader press save asset button and then we right click in our shader we can select create material and simply drag and drop this material to our shield 3d model and would you look at that we are starting to see something and that's it guys no just kidding so we need to distinguish between the front faces and the back face it's very simple we got a note called ease front face it's basically a boolean with this we can use a branch basically a nif if it's front face then we can connect this multiply if it's back face you can multiply the back color with the main texture and connect it to the false and this is going to be connected to the base color let me make some room okay so if it's front face render the front color if not render the back color once you save this if for example we choose a blue color from the front color and now we are able to for example say that the back faces are red why not let's just take care of the alpha we simply need to multiply these two multiply nodes from the front and the back color split this and connect the a which is the alpha to the alpha input of the fragment function save it and we get transparency this now allows us for example to increase by a lot the intensity of the front collar while the back collar can have something less intense great now another thing i use it for the shield shader is a flannel node so let's add a final color hdr white opacity at 100 and the float for the fresnel power default value of 2. down here with spacebar we can search for fresnel effect connect the power and multiply it with the final color this right here can be connected to the emission and if we save it we can for example choose a purple but what is happening now is that we are adding fresnel to the front and the back faces and we actually don't want that we just want to add to the front faces otherwise everything will be emissive so let's use the is front face boolean connect to a branch and well if it is front face then add the fresnel if it's not leave it as it is connect from this multiply node and this is going to the emissive save it and here we go this allows us now to play with this color and with the final power create a nice shield a really cool futuristic shield you know just play with this it's awesome let's just create a group for these nodes and call it fresnel because now have here we are going to take care of the vertex animation we are going to make this breathable like it's breathing for that we need the position note but in object space basically each phase position and to that we are going to add a value something what we are going to add here is information from the normal vector which is a perpendicular vector from each phase and we can slide each face along that normal vector but we need to say that the space of normal vector is object once again and then we can multiply this by a vector3 basically a vertex amount how much we want to offset this and connect to the add and connect to the position of the vertex function of the shader if you save it go to the inspector and play with this you will notice that we are able to indeed offset each face according to their normal vector but this is manually we need to animate this throughout time so it looks like it's pretty so anytime we need something animated in shadow terms we need the time no basically so let's go get it and multiply this not by speed but by vertex frequency a float default value of 1 because we are going to connect this to a sine wave looks like this this sine wave as you can see it is blinking slowly because the frequency is only one we can multiply our normal vector to this and replace the connection to the add let me just organize this a little bit okay so now once you save this and once you increase the vertex amount you get a breathing shield it's magic and it's awesome you can also increase the frequency so it breathes a little bit faster but now let's have a quick overview of how you can use this with visual effect graph for those who want to know how to use it in the particle system the shuriken i made a tutorial a while back that will certainly help you links in the description so right click create visual effect graph rename it drag it to the scene and open with the edit button and the cool thing with unity 2021.2 is that down here in the output part we cannot put lit mesh which means we can create effects influenced by light effects with 3d objects in fact if you select this output in the inspector you will notice we have a cast shadows in our case we don't need this because we have a shadow graph that we created and in there we told it to receive and cast shadows alright so the idea now is to copy the values that you created for the other shader the values from this material once you have copied those values there is a bunch of things that we can do for example we don't need velocity the lifetime can be five seconds and and we want the burst of only one particle instead of the constant spawn rate and it's useful to use this in vfx graph because now down here we can control the size with the set size set to 1 and then animate how it grows with the set size of our life just make sure the composition is in multiply mode and now you can literally use this curved control if the shot grows in the beginning if it bounces and so on and you get something like this you want to fade it towards the end you can use a sample gradient for the time you can feed the edge of the particle and then simply create a gradient where for example the last key is black so it fades out you can do the same for the fresnel color and you get this interesting effect there's many things you can do obviously now to detect collisions the complicated part in the shader you need a sphere mask with these three properties multiply it with the alpha and then connect it to a branch so you can choose in vfx graph if you want or not to use the sphere mask then you can duplicate the existing vfx graph because this one is for the ripples the collision effect which means you need to turn on use sphere mask and you need a vector3 property for the sphere center leave the shader with the same settings same size do not use the size of our life and use a shorter lifetime oh and use a color different from the shield color in my case an orange to contrast with the blue then create a prefab out of this vfx graph simply drag and drop it to a folder add a rigid body with no gravity and in this case i turn on constraints we also need a sphere collider with more or less the same size of the shield and the script to spawn the ripples this script right here it will detect if an object with a bullet tag hit the shield and then it will spawn the ripples prefab get the visual effect component and assign the collision point to the sphere center property which means now you only need to create a prefab out of the shield ripples and assign it to the script of the shield and now basically any object with a bullet tag will spawn the ripples and set the sphere mask center to the collision point and that's how you create a sci-fi shield or any other shield actually this was an art bun i hope you guys have enjoyed it if you want to get access to this project and many others you can support me my patreon page which is very much appreciated i actually want to thank every patron for supporting me and as usual a special quick shout out goes to the top tier patrons which are elac frost bradford airman david cru david might lars derek benson donald thampson edward chai goblin black josh mccormick jules claim la kim fung maxim madhav gupta mograph tech nat sims oitzke ovi sans playermon space radioactive bullfrog revenant games roger powers ryan stefan zarkov on enigma very sooth zarat reading and ingu das really appreciate your support guys it really helps to keep the channel going i hope everyone watched this video enjoyed like subscribe thanks for watching and i hope to see you in the next video thanks bye [Music] you

Channel: Gabriel Aguiar Prod.

Views: 94,877

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

Id: IZAzckJaSO8

Length: 18min 10sec (1090 seconds)

Published: Tue Oct 19 2021