Unity Shader Graph - Portal Shader Tutorial

hey what's up guys welcome to tutorial number two of the series unity shader graph and today we are going to see a fantastic way of creating portal effects that's right the portal efforts were seeing are mostly done with gel graph and with a bit of help from the particle systems shaders and particle systems complement each other very well by the way guys all of these shaders are available in my patron including listen with the portals in case you were interested to have access you can get some great effects package and shaders as well go check it out it's really worth anyway let's see how we can create this portal effect by the way guys in case you need to know how to set up shell a graph in unity you can watch the introduction video of this series and learn how to install it links in the description in case you are interested now the first thing we need to do is start by creating a PBR shader we can press right click and rename it to port or shader for example and double click it to open in shader graph or press this button right here now once Telegraph it's open and in case you hadn't noticed Chris portals have a twisted effect in the middle and we can achieve that with the twirl node we can press spacebar to search for it world node and as you can see one of the prompts that comes with this node is the strength parameter which will let us control how much distortion we are going to output in this case and we can already start by creating a vector one to control the strength in the inspector just like these I'm gonna set the value to around ten and now we can right-click it and convert it to a property just like this and I'm going to rename it to 12 strength all right cool now there's different ways to approach this effect obviously but I like to use a Voronoi node which creates an awesome effect when distorted with the twirl and we can connect the output to the UV of the Voronoi nodes just like this and as soon as you connect it it will twirl our Voronoi texts and we can decrease it if you want but there is also any twisting parameter in the Voronoi annoyed which is the cell density and we can go ahead and create a vector one to control these cell density publicly in the inspector I'm going to set it to two and a half and connect it to cell density am converted to a property which I'm going to be named to scale it would look very much like a scale parameter all right so now once we have these two nodes you can go ahead and connect it to the emission and I actually don't like this fear to preview this shader so I'm going to right click it and change to the quad and as soon as I start rotating this quad I'm noticing that it's only one sided which is not really good for a portal effect if you think about it and to make it double sided we can click in these settings icon and just check two sided just like this and now if you rotate you will notice that it's two-sided which is what we want and we can go ahead and actually connect the Voronoi to the Alpha just like this no problem and it will notice that nothing happens because these shaders is set to an OP back surface and we can actually change it in this setting icon to a transparent surface just like this and you may notice it's looking different but we can't actually really see it so let's press save asset and go to this actor to unique and create a material out of this shader just like this and our create a quad or a plane and let's drag and drop our new material to the material slot just like this and now we can see the transparency taking effect which is great which is what we want if it was a pack we would see anything behind the portal shader basically anyway now as you may notice our porto shaders is also moving around and it's rotating around actually and we can achieve that effect with time note time nodes are extremely useful to make things move around or rotate around and it's an important part of many shaders and we can actually create a vector one it should be enough for this portal shader I'm going to set it to 0.5 and create a multiply node so we can control the time with our vector one and connect the output of 2 multiply to the offset twirl and as soon as you do it you will notice in the preview of our Voronoi that it's taking effect which is awesome which is great and let's actually convert this vector 1 to a public property and rename it to speed yeah just like this great they started to look like something and we can take a step further by creating a texture 2d in our property panel and rename it to mask because it will be really useful to apply this shader to a mask to a certain part of a texture for example instead of a buying the wall quad or the wall geometry surface I'm going to push it right here to the top and create a sample texture 2d node and now we can basically drag and drop our mask property just like this all right great and let's assign a texture and I'm gonna choose one that probably everyone has in their project because it comes as a default texture in unity and default particle and of course you can use another mask which I will demonstrate in a few moments anyway now what we want to do is create a multiply node connect the sample texture 2d and the output of the Voronoi and as you can see we are basically only applying the Voronoi effect to our texture and we can connect the output of the multiply node to the emission input of our PBR Channel and also connect it to the Alpha property as well all right great and in the preview it may seem like it's really small but we are going to see how to fix that and now to maximize this effect in just a few moments let's just save this asset go to unity and he now required in our material we want to select a texture for our mask and I'm going to basically select the same texture they have selected in shader graph which is the fourth particle and yeah like I said it's looking really small but before fixing that let's add some color to this and we can add color in our property panel just like these I'm going slightly purple for now you can push the color to the top just like this and let's actually switch the color mode to an HDR mode and drag and drop to around here and now again we want to multiply this color with the output of our multiplier so we are going to use another multiply node and connect the call and multiply just like this great and great we have color right now awesome let's again replace the emission and alpha with this new multiply node now we can press save asset and go back to inspector because now with the HDR color we can increase the intensity and therefore make the portal more visible and for those who saw the last tutorial you also know there is another way of controlling the color brightness okay now let's increase the twirl strength to around 30 yeah that looks fine alright so wouldn't be cool to control the dissolve amount of our portal well we can do that with a simple power node and we can connect the Voronoi to a and create a vector one to control the power strength just like this now let's just convert this vector one to a property and rename it to something like this off amount for example and then we can replace the multiplied with the power node all right cool let's save this and add back to unity and now as you can see we can adjust the dissolve amount to around two depending on the effect you are trying to ship of course and it's starting to look really great alright so now I have just adjusted the quad to the portal that I created just to show you how we can apply some quick particles and make this a little bit more interesting of course and I'm gonna choose a greenish color and increase the scale to 3.5 and we can also increase the intensity by the way all right it's looking good so let's create a particle system and simply rename it to particles and now we can set the duration to 1 and it's going to loop the start lifetime is going to be between 0.8 and 1.6 should be enough let's give you a tiny amount on it start speed between 0.2 and minus 0.2 nothing really special and the size it's going to be between 0.1 and 0.4 maybe a bit less maybe a bit more it really depends on what you're trying to achieve as well anyway the color in my case it's going to be between a vivid green and a yellowish green now the shape the shape is going to be a circle and I'm gonna increase the radius until it touches the inside of the portal cool now let's leave it at fading and a fade out in the color of lifetime and the size of a lifetime can go from big to small and you can also increase the rate of the time if you want and to give some more randomness to the particles if you want you can turn on noise and set the strength Grenda between 0.2 and 0.8 increase the frequency to around 0.8 as well and set the scroll to 0.2 yet that's looking fine it gives some more randomness now in case you are in a 2008 in unity version we can turn on velocity over lifetime so we can set Z of the orbital x2 around - it's a cool trick to make the particle seem like they are rotating with the portal a really awesome feature actually now it's looking good and if you have made it this far there's only one last quick trick we can use which is adding a black circle behind the portal and we can do it with another particle system rename it to dark beam with the duration of one second which will also loop and we'll also have one second for the start lifetime and in my case I'm gonna set five to the start size and the call is going to be a full black or a dark green as well it may go well and we talked each shape so we can disable it and set the rate over time to zero because we are going to use the burst of one now down here in the renderer let's just set the revenge alignment to local so we can control the rotation and the max particle size to tree and we can also control the order in layer for example my case it's going to be minus one so it renders behind the portal and yeah that's looking really cool now of course you can add a crazy amount of stuff to these portals you can make them look really cool for example I have added some electricity and it gives a really nice touch you can see my tutorial on thunder and lightning if you are interested in creating electricity in case you are also interested everything is available my patron page depending on the pledge you will get some awesome rewards there's shaders there's effects are really cool amount of stuff go check it out is really worth it links in the description and that's it guys I hope you have enjoyed this tutorial stay tuned it for the next one it's also going to be about two shader maybe the water shader maybe the flame share we will see but that's it guys I hope you have enjoyed and see you in the next video

Channel: Gabriel Aguiar Prod.

Views: 134,799

Keywords: Unity tutorial, unity effects, unity special effects, game effects, unity particle system, unity particle system for beginners, unity particle tutorial, unity game effect, unity vfx, vfx for games, unity shader graph tutorial, unity shader graph, shader graph, shader graph tutorial, shader, unity shader tutorial, shader graph portal, unity portal tutorial, unity portal effect, portal shader, shaders unity 2018, shaders unity download, unity shaders, shader graph water

Id: w0znZIuvQ2I

Length: 12min 47sec (767 seconds)

Published: Tue Dec 04 2018