Unity Shader Graph VFX - Bubble Shield (Tutorial)

welcome today i will show you how to create this bubble shield effect using unity's shader graph and a little bit of code to start open the universal render pipeline asset you're using and activate the depth and opaque texture i set the down sampling to none so that your fake texture doesn't lose any quality next for this effect we will need a sphere with modified uvs i'm using maya but you can use any 3d software for this this is how the base sphere's uvs look like but we want our uvs to be planar like a circle to do this just do a planar projection on the sphere using the z axis and this is how we want our uvs to look now import the new sphere into the project this is the main shader graph for the shield effect but don't worry to show you how it's made we will create a shader for each group to understand what's happening first let's create our twirl distortion create a shader and the material for it and apply it to our imported sphere open the shader and assign the scene color node to our base color then set the shader settings to unlit transparent we can see our sphere became invisible then we will create a twirl distortion with a warning noise using the twirl node to make it more dynamic we will also add a rotation over time and move the warner's angle offset over time as well [Music] then we will remap our result to go from -1 to 1 and multiply it by our new property distortion strength next to apply the distortion we need to add the result to the screen position node and assign it to our scene color node we can now see that world distortion in effect but if we rotate the scene a little bit we can see it isn't quite right to fix this create a script called look at camera which does exactly that it gets the main camera then calculates the direction it needs to look at and assigns it to a transform forward when we enter play mode we can see our twirl distortion is always facing the camera now in order to mask out the center of the twirl we need to use the uv node remap the node to go from -1 to 1 and get the length [Music] now we apply the smooth step note to our length to get to the desired effect let's create a new property for a smooth step so we can control it from the editor [Music] now just multiply the smooth step with our remapped twirl [Music] and add it to our distortion strength multiply node that's it for the twirl we can see how it looks in the editor next we'll create our zoom effect create a shader and a material for it and create a new sphere object and assign the material [Music] [Music] in the shader set it to unlit transparent and assign the scene color node to our base color then create the tiling and offset node and assign it to our scene color then let's create a property called zoom and assign it to our tile link and use the screen position node and assign it to our tiling and offset uvs next let's create a gradient noise just so we can see if our zoom effect is working correctly to correctly zoom it's not enough to modify just the tiling field we need to also modify the offset of our uvs we need to move the offset in our opposite direction of our tiling but it's not enough just to use the one minus node we also need to divide it by two but dividing by two only gives us the option of zooming the center of the texture we need the option to be able to zoom to any point in the texture let's first invert the zoom so the higher the value the greater the zoom and then let's add a property called object screen position this will be our coordinates of where the object is on the screen it will go from 0 to 1 in both the x and y axis for example if the x axis is 0.5 and the y axis is also 0.5 the object is in the center then we will multiply our zoom by our object screen position since multiplying by 0.5 is the same as dividing by 2. [Music] we can see now that by changing the object's screen position we can zoom to any point in the texture [Music] now change the reference of the object's screen position to underscore obj screen position so we can reference it later in the code now to modify our object screen position create a script called the magnifying object this script gets the screen point using world to screen points then it normalizes the coordinates to go from 0 to 1 and sets the object's screen position in the shader in the play mode we can see our zoom working correctly but since we only want to zoom the part of the shield where we hit it we need to implement the sphere mask node in the chords field input the position node with the space set to world position that's the coordinates of our vertex we want to affect next for the center field create a property called hit position this is the world position of the mask sphere [Music] and let's also create the properties for the radius and the hardness [Music] now let's assign the sphere mask to our base color to see how it looks like you can see that by changing the hit position radius and hardness we can change what vertices are affected to see the results better set the hardness to 1 and the radius to 0.5 this is basically the area where the invisible mask sphere overlaps with our object we can prove this by creating another sphere and setting its position to the hit position and the scale to 1. we can see that the new sphere overlaps the exact area that our mask sphere affects back in the shader graph let's multiply our sphere mask with the zoom property and reconnect the nodes in the editor we can see how our modified zoom looks like now for our fresnel and depth outline let's also create a material and shader and assign it to our new sphere and open up the shader graph set the shader to unlit transparent and assign the fresnel node to the alpha also let's create a property called fresno power and assign it to our fresnel node now for the depth cross section we'll use the c depth node with the sampler set to i and subtract from it the alpha of the screen position node with the mode set to raw but first subtract the alpha with our depth offset property the depth offset will give us an option to modify the thickness of our cross section now invert the result and smooth snap it and then add it to the fresnel node and input the result to our alpha we'll also add a color property set it to hdr and input it in our base color in the editor we can see if everything is working correctly [Music] now for the vertex displacement also create a material in the shader and assign it to our new sphere in the shader graph let's first create a simple displacement multiply the normal vector set in the object space by our displacement strength property and add it to our position node also set in the object space this will affect all the vertices on the object but we don't want that [Music] to displace only a part of the sphere we'll use the sphere mask like we did in the zoom shader let's create all the same properties for the sphere mask like we did in the zoom shader [Music] then multiply our sphere mask with our normal vector set in the object space and reconnect it to our multiply node with our displacement strength in the graph settings set the shader to lit so we can see the effects better in the editor we can see how changing the properties affects the sphere [Music] now for the final part let's create our dissolve shader for start in our graph settings activate the alpha clip and the two-sided fields to create our dissolve we'll use the world vertex position and get the y position this will give us a nice gradient always going from low to high since in our sphere model the vertices are going from -1 to 1 we can remap this to go from 0 to 1. then we can add a slight gradient noise to the height gradient and input that in the smooth step node when we change the edge one field of the smooth step node we can see the dissolve but we only want the edge of the dissolve to fade to do this create a float and add a small value to it then input the original float to edge 1 and the added value to edge 2. now we can control how big and faded the edge is let's just invert our height gradient because we want our dissolve to go from bottom to top let's input the result of the smooth step node to our alpha and let's create a dissolved property and a dissolved edge thickness property then we can replace our float with the dissolved property and our added value with the dissolved etched thickness in the editor we can see that the dissolve isn't going all the way this is because we're using the world vertex position to fix this let's add a new property called dissolve start height then add that to a vector going from -1 to 1 and assign the result in a remap node in the in min max fields we'll change the shader to lit so we can see the results better now with the dissolve start height set to 1 we can see that the dissolve is almost fixed but there's still these small parts of the sphere which don't get dissolved to fix this just increase the range of the dissolve slider the next problem we'll need to fix is that if we increase the scale of the object the dissolve still won't go all the way through to fix this create the object node and use any value from the scale for example the x value then negate it and create a vector going from minus scale to plus scale and then replace our minus one to one vector with our new vector we can also remove the dissolve start height and use the object's position y value now the dissolve is working correctly next we want to highlight the dissolve edge to do this we'll branch another smooth step node but this one will offset by our dissolve edge thickness then we will subtract this node from our main smooth step node now just to represent it better we'll add our edge to our scene color and then put that in our base color we'll also add a color property so our scene color is not completely transparent [Music] we can now see the whole dissolve effect in action [Music] now that we covered all the parts of the shader separately all we need to do is combine these different effects now as we did for the previous shaders let's create our main shader a material for it and assign it to a sphere now all we need to do is copy the shader code from all our other shaders into the main shader let's start with the twirl distortion and implement the same properties we have in our twirl distortion next copy the zoom graph and implement all the properties and in the twirl graph replace the screen position with our zoom result [Music] next let's copy the fresnel outline graph and also implement the properties [Music] for the fresnel we'll multiply the result by a fresnel color and then add that with the scene color now for the dissolve graph copy everything except the scene node and color and implement all the properties [Music] and in our shader graph settings set the surface to opaque and activate the alpha clip and two sided fields now input our main smooth step dissolve node to our alpha then multiply the dissolve edge by our dissolve edge color and add it to our main color nodes [Music] and finally let's copy the vertex displacement shader let's implement the properties and use the same properties for the sphere mask as we did in the zoom shader finally assign the result to our position field in the shader graph sensor graph has two phase rendering enabled the fresnel node will show up incorrectly to fix this let's make our fresnel node render only on the front faces [Music] now let's set the references for our properties so we can access them through the code we'll set the object screen position the hit position the dissolve and since we want our dissolve to go from 0 to 1 we'll need to fix the problem we had earlier we'll solve that by multiplying the scale value by 1.2 next we can delete the zoom property completely and use the displacement strength instead and also set the reference for the displacement strings now in the editor i set all the shader properties to these values and especially remember to set the render query to 3000 we're finally finished with the shader graph now it's time to create a script to control the hit effect at the top we have some properties to control the values of the various effects and in the update we raycast and if we hit something we call the hit shield function in the heat shield function we set our hit position in our shader to our hit position returned by our array cast and then we animate the displacement strength by going through a curve and setting the values to our shader we also do a similar thing for our dissolve now in the editor for the displacement curve i created this simple shape and we set the values for the displacement magnitude lerp speed and the dissolve speed [Music] and finally we'll need to add a sphere collider so we detect our ray casts that is it the effect is finished you can play around with the values or just poke it with your mouse as a bit of a bonus i created this projectile controller which fires from the various points and this projectile script where it has an interesting collision prediction where each projectile is moving forward by a set delta and raycasts in front if it expects to hit something then if the heat distance is smaller than our delta we say the projectile has hit the collider this is a very good system for fast moving projectiles since when using the unity's collision system it often fails on fast moving projectiles and the projectiles fly through the target but if you have hundreds of projectiles on the screen i wouldn't recommend it thank you for watching this video i hope you liked this effect the link to the project is in the description and if you could like this video and subscribe to the channel it would be a great help and i'll see you next time

Channel: A Bit Of Game Dev

Views: 45,939

Keywords: unity, shader, #gamedevelopment, vfx, sci-fi, space, effect, particles, shield, spell, magic, spellcast, fantasy

Id: jdAbVkre8cw

Length: 19min 19sec (1159 seconds)

Published: Wed Sep 08 2021