Energy Shield Effect in Unity URP Shader Graph

in Ultra Nova I wanted to create a cool energy Shield effect because an AI told me that it would be pretty cool to have in a game energy Shield an energy Shield could Nova from income and get closer to enemies or protect herself while taking cover jetpack a jet but then the AI left me with no ideas on how to achieve the effect so I had to activate a few of my own brain cells see a I can't solve everything yet so I started to think I want the shield to follow the player around but I want the player to be able to leave it behind so you could clog a corridor with it not totally in like a toilet under heavy load I want the shield effect to look high-tech I was thinking cyan and magenta colors like the CJ days back in the mid to late 80s considering my brain thought that would be a high tech tells me that not all my brain cells are along me on this journey just yet I want the shield to have some hex styled panels I wanted to have some animated Cloud effects I want it to look a bit like an aura transparent I wanted the panels to animate and I wanted the shield to react dynamically and cool when it was hit by bullets both by animating the vertex positions as well as coloring the area that was hit I've done a lot of Shader work lately line where I was pretty convinced that all of this stuff that I wanted to do could be achieved by a Shader well the shield actually has some functionality too so when it's attacked by drones or enemies they are kept outside the shield by traditional Unity sphere collider so there's no shade or magic coming on there and you can even use it like a wrecking ball if you want combined with a grappling hook when I started to think about this video I was going to make it like a tutorial then I looked at my Shader graph and I realized they would make more sense to try to guide you through a bowl of pasta compared to this mess so I won't be able to make a step-by-step tutorial but I can share some key Concepts and my process to create this Shield effect so I want to apologize ahead of time if this brings you more confusion than help when I first created The Shield I used an iterative approach with a lot of trial and error I'm pretty new to Shader graph but I've worked a lot in the amplify Shader editor which is an excellent third-party asset to create shaders visually but I need to learn the native Shader graph editor which in my opinion is not as good or as fully featured as amplify Shader as editor yet so my process to create the shield was spread out over a few hours adding nodes that I thought would make sense I looked at some tutorials that I will link in the description one being the unity channels Distortion Shader in unity 2019 with Shady craft tutorial because Shader graph does not have the grab pass anymore which was a simple way to get Distortion to work in the built-in render pipeline I recommend that you look at this Unity tutorial if you specifically want the Distortion feature for a Shader as it describes it in more detail in my Shader the Distortion is just a small part of the overall effect in unity I created a spear and a set out to create my Shader graph Shader to achieve the effect with a lot of alt tabbing to look at the unity Distortion tutorial I had to create a noise texture in too and like Shader graph I'm new to after spending way too much money on Adobe Creative Cloud subscription as an indie developer I'm reverting to cheaper or even free tools so I have to re-learn to walk as I try to achieve the most simple tasks in I would do in a split second in Photoshop but I think it'll be worth it in the long run after following the Distortion Shader tutorial by unity I had a Shader with a cloud effect and a fresnel effect the fresnel effect is important here because it makes the Shader more transparent the more the normals of the surface face the camera and less transparent the more the normals are perpendicular to the viewing angle at this point I was pretty happy with the cloud effect the color effect the emissive glow and the fresnel effect and the Distortion effect but it was a lacking a lot of the features that I wanted I kept experimenting and I found a good tutorial by Gabriel named Unity shadigraph Shield effect tutorial I followed parts of that tutorial to create a sphere with hex shaped panels in blender the key to turn an icosphere in blender into the hex shape sphere is a mesh add-on called tissue that comes with blender thank you Gabriel that was a really cool tip and another important tip that I got from Gabe drills tutorial was the idea of a spear mask he used that in a particle system but I found a sphere mask node in Shader graph instead that I used I recommend that you look at Gabriel's tutorial to learn about the shield effect I think his approach mainly uses a particle system with meshes that spawn and I went a very different route by having a single mesh and I do all the effects with a single Shader itself instead including the colorized hit and mesh distortions then my work began to get the vertex Distortion for all the bullet hits and this was the most trial and error that I've done in a long time my math skills are really bad but I tend to roughly know what I want to achieve so when it comes to rotating vectors in world or object space this place placing vertices in and out along the normals or spinning vertices around their own axis I basically just use position and math nodes repeatedly and I save the Shader to observe the result so I'll try to give you an overview of the actual Shader now if you are expecting a step-by-step tutorial again be warned it is not remember how I mentioned spaghetti at the beginning well this is what the shade graph looks like and this is not even the full picture because some of the nodes here are sub Shader graphs that I've grouped out to make it less complex believe it or not at the beginning of the graph we have these sub graphs so let's start looking at them and name the subgraph shield cloud and it is responsible for creating the cyan and magenta colored Cloud effects around the rim of the Shield if I delete the connections to these subgraphs you can see what disappears from the shield and you get a picture of how they contribute to the effect each time a shield is created in the game a copy of the material is instanced because the vertex displacement effects and impacts are driven by properties of the material if the copy was not created an impact would affect all instanced Shields at the same time which is not what we want if I go to the instanced copy of the material we can play around a little bit with the parameters to see what effect they have for example if I change the cloud tiling parameter it changes the scale of the cloud texture around the rim of the shield if we change the cloud power parameter it changes the fresnel effect and brings the effect in towards the center of the sphere too I'll create a new sphere here so we can look at the shield Cloud sub graph a bit I'll also create a new empty urp Shader graph and a material I add the shield Cloud subgraph as a node and I connect the first out Vector 4 to base color of the material then I save this Shader graph nothing will change because we're still missing most of the inputs that are required first let's create the new texture 2D property called Cloud texture I will drag that to the graph and connect it to the cloud texture input then I'll add a color property with a default blue color and I'll connect that to the color input I'll also set the cloud brightness input value manually and save the Shader graph to test now we can see the changes are starting to happen in the game view I manually set the cloud power to 1 as well and I save the Shader graph this controls the fresnel effect in the subgraph as we can see now the blue is mainly showing at the rim of the sphere I'll change the cloud tiling Vector 2 input 2 and we'll see how the cloud texture appears as well I'll add exposed parameters for all of these to our new demo material so we can control them properly when the parameters are exposed we can control them on the material instead for instant results the reason why the cloud texture is tiling strangely on the default Unity sphere is because I'm using the uv1 coordinates for the texture mapping instead of the default UV 0 coordinates you can add multi multiple UV coordinate sets to meshes and blend the texturing between those sets I believe the second set of UVS on the default Unity sphere are actually Cube nut which I didn't know before this if I change the sphere to the one I created in blender for the shield the uv1 set of coordinates is more of a traditional spherical mapping making the clouds show correctly now I'll duplicate the subgraph and I'll add the two nodes together I'll change the color to Pink and the tiling so you can see how the two subgraphs contribute to the cloud-like rim effect let's look at the actual subgraph now because it's a bit of a black box at the moment in here we have more spaghetti at the beginning we have a Time node that is multiplied by the cloud Direction variable this is what makes the clouds pan across the sphere the result is connected to the offset input of the tiling and offset node the time animated offset makes the movement happen the tiling is exposed too so we can change the scale of the cloud texture as well then we see here that the UV set is uv1 which is actually the second UV set since there is a UV zero set as well in my shield mesh uv1 is the spherical mapping layout the output of the tiling and offset node is connected to the UV input node of the sample texture 2D node of the cloud texture then for no reason that I can remember I remap the values from 0.01 to 1 to negative 0.22 to 2.39 that sounds totally random to me and somewhat incorrect we multiply this by the output of the fresnel node and if there's something that you should remember from this video it is that the fresnel node creates the most important feature of the shield and that is the rim lighting effect the cloud power parameter determines how much of the rim lighting effect there should be a higher value means sharper effect and more transparency towards the center then we multiply that by the color parameter and we finally multiplied by two because values above one will automatically get a bloom effect in the default urp scene as it has a global volume with a bloom effect in my Shader graph I also have another sub Shader called Shield Distortion the main feature that this provides is the Distortion effect at the edge of the shield that makes it warp whatever is behind it to help sell the unstable energy effect we can change the exposed Distortion Direction values of the material to see how it affects the material the most important note in this subgraph is the screen color node which grabs the pixels from what the camera sees in the built-in render pipeline this was achieved by something called grab pass but that is no longer possible in the scripted render pipelines as I found out when I was making this Shader again check the unity tutorial that I've Linked In the description for the details about the Distortion Shader effect but what I will say is that for this green color node to work you must go to the urp render pipeline asset settings and take the opaque texture checkbox otherwise the screen color node will not work I also change the opaque down sampling To None because the down sample texture was too low-res and it looked too blurry inside the shield I may set this as a quality settings feature in case it has too much of an impact on performance when bullets hit the shield the vertices gets displaced and a color is applied in the region of the hit Shader graph does not support Vector arrays like the built-in render pipeline does so I had to work around this limitation a bit creatively I decided that four simultaneous bullet hits will be enough and I created 4 sets of input parameters that a c-sharp script will feed to the Shader for each hit I need a head color a vector 3 position in the world and a vector 4 data in which I use the first three values to represent the radius of the impact the phase of the impact and the force of the impact when a bullet hits the shield the c-sharp class creates an instance of an internal C sharp plus that contains the necessary information position radius Color Force duration and a timestamp of the hit since the Shader only supports four simultaneous hits I have a method that finds the oldest impact effect and replaces that with a new one if necessary in the update loop I iterate over the four hits instances and I send the parameters to the Shader this could be optimized because I'm using the string keys for the shaders instead of pre-calculating the integer hashes I calculate the phase of the hit in a variable called f basically it calculates a value from 0 to 1 during the impact duration the Shader interprets this value and indents the vertices of The Shield during the first phase of the impact and then it extrudes the vertices at the second half of the effect if f is greater than one it means that we've finished the duration of the impact so we remove this instance this actually means that the Shader plays all four bullet hits all of the time on the Shader even if there's no impact happening but the GPU is so fast that it doesn't really matter it's still much faster than any c-sharp driven mesh deformation would have been OK looking at my own Shader graph made me feel somewhat sick and I can't bring myself to leave it like this so I took a comb home and I went over my shadow graph and I untangled the nodes to get things tidied up feel free to take screenshots here is a section so you can see the main Shader and all of the nodes you might have to maximize your screen and take some screenshots pretty tiny stuff and here's the shield Cloud sub graph [Music] and here's the shield distortion subgraph and we've got the shield hit subgraph [Music] and finally we have the shield vertex modifier subcraft [Music] that should be all of them and for my beloved patrons I've added this Unity 2022 project to the Game Dev tier and up that isolates the Shader and you can click around on the shields to test them out if you do end up using it consider personalizing the Shader so we don't end up all with identical shields in every game okay that was a lot to digest especially a lot of spaghetti so I apologize for that as I mentioned this is not meant to be a tutorial I just wanted to demonstrate how I came up with a shield effect and briefly do an overview of how it works I will try to do some Shader graph tutorials to gradually go over techniques such as the fresnel effect vertex displacement and Distortion effects I hope that you still found this video to be useful if you did please hit the like button and subscribe if you haven't already I'm scheduled to hit 1 million subscribers in 54.5 years at this rate so please tell a friend and we'll cut that time in about half also consider wish listing Ultra Nova on Steam that would help me out a lot as well until next time take care and I'll see you then bye for now [Music] thank you [Music]

Channel: Imphenzia

Views: 8,992

Keywords:

Id: o4CGL2YXs5k

Length: 15min 7sec (907 seconds)

Published: Thu Apr 20 2023