Dissolving Ground Trail Effect in Unity using Shader Graph

hello everybody and welcome to another shadow graph tutorial in this one we are going to look at this effect and how to create it using shader graph and a unity's particle system and as you can see the effect is that the each piece would scale down it will rotate and the it will have emission as well as a random position so if you don't mind hitting that like button for the algorithm and subscribe if you are not yet subscribed so you don't miss my other tutorials so let's just jump into it and let me show you the setup first so we have two cameras the main one the normal one which doesn't really render everything in the culling mask it doesn't render the water but you can call whatever you can create whatever layer you want and put it in that layer but i just used this one right which will have our particles right so this camera the main camera is not going to render our particles which are uh in the water layer and there is a separate camera the transform has to be like this um so that it's the same as the first camera right and whenever you move the the first one it will be aligned with the second basically and obviously the second one is going to only render the particles and it's going to be rendering to a render texture i call it particles and the the make sure that the dimensions of this texture are what the ratio between x and y are the same as the ratio of your resolution and if you have a dynamic resolution so something that changes based on the the screen that you are running on then you will have to write a script that recreates the render the texture render on the fly basically um but as you can see you don't need to do the full resolution like the the aspect ratio for example that i'm using is uh 1920 by 1080 and i just divided by i think eight which i ended up with these numbers all right so we have our particles in this guy in this texture and our shader is going to consume this texture to know which pieces should have the effect on them right now this particle system obviously is on the water layer so that it only shows up for this camera now in your scene window you are going to see everything which is why you see all these particles right so let's just jump into the shader then and i called it scale down whoops it's full on zoom right so our first part is um getting the position of each object in screen space and what i did to get this stuff i i don't understand it completely but i'm going to try to to describe it a little bit a little bit is that you can um create any of the nodes right so i used the screen position which is basically transforming the vertex position into screen space and any node you can right click on it and show generated code and thus you can see the code generated and if you scroll down you will see this is part of it and the other part is here where it gets transformed to world right and then transform world to clip and then that is uh sorry here uh get uh world matrix so this is going to transform from object to world and then from word to clip and then using this compute screen position function uh to uh to change it to screen position right and you can see it's kind of the same thing here uh i am getting it instead of the vertex position i want the object position and the uh whenever you want to multiply by a transformation matrix then it has to be vector 4 and the w has to be of value 1. and so this is going to be this is the view projection which is uh find or sign correctly is the same as from world to clip space and then after that i am feeding it to this custom function which is again the same thing it's compute screen position function and it takes this the x of this projection params which is basically the near plane and then you have to divide both x and y on the w which will end up with our correct values basically and um yeah so this is this is the um the position of each object in screen space which means if the object is in this corner for example then it will it's going to be 0 0 and if it is on this corner here it's going to be 1 1 and in between it's going to be half half right so we are going to use the position in screen space of the object to sample our render texture the particles basically right and i am using the lod sampler so i think the normal one does not allow you to use the value in the position output at the end so and i also have three the value three for lod you can play with that to see what what's the difference but this will make the texture kind of blurry and then i have this uh branch which uh uses a boolean parameter reverse which can reverse the effect meaning if you go back here and if you select on this material and click on reverse everything will disappear and i have a separate particle system for the reverse effect and as you can see here it will uh like it's the reverse of that effect basically right wherever you go wherever there are particles then the pieces are going to appear otherwise everything uh is not there and the difference is um in the the particle system i have another particle system which spawns over time right instead of the other one which uh spawns over distance which means when you move it and there are some changes in the the color over lifetime and the color over lifetime is what defines the fade in and fade out of each uh piece basically right obviously you have to change um you have to create your own particle material and it's using the universal render pipeline particles unlit um it's additive transparent additive and i'm using this default uh texture that ships with unity yeah and for the other one it's uh this sharp circle for the one that you are uh staying in your place right you can try with different textures and but yeah so going back here you can see that the reverse is going to give us 1 minus our value from the render texture while the normal way is the normal value right now this value is going to be used for a couple of things the easier one is lurping between for the emission lurping between zero or um yeah lerping between zero and the color multiplied by five so that it uh glows more and the albedo is just the color and color is a parameter that we have here so that's the first part the second part is the random position and i am using this uh sub graph vik3 random which i created and let me show you how it looks like save it takes a seed and it takes minimum and maximum the seed is a victor 3 and i just add up all the elements of that vector3 and then i use that as the seed of random range and seed plus whatever number you want so that is a different seed for the second one and another one for the third one right and i just use the parameters of min max for the min max for all of them and then i combine them to a vector three and output them right so it's uh it's just a sub graph that allows me to create vector3 randoms easily and so what i'm doing here is that i am getting the uh position of the object again not the vertex not not the vertices and uh adding some random number just to have a different seed from the other places that i'm using this and i am using the position offset as the maximum and the negative of that as the minimum and then i'm adding this value to the uh to this height basically right so it's it's um one on the y so that's a vector which goes just to the top and then i am transforming that from world object because y is up is in a world object scenario right i'm transforming that to object space and then i multiply this vector by the height uh parameter and then i'm adding both of these which are the random positioning and going up basically the height right you add up both of these and then you add these two to this other stuff which are basically um the rotation as well as or actually it's it's the uh the vector from the uh from each vertex to the center so let me let me come back here uh and then this will make sense the random rotation i have another um vector3 random which is for the axis uh the axis on which uh the the vertices are gonna rotate about and uh you can give it a minimum minus one maximum of one and normalize it because it's just a direction right um and again the seed is uh the position of the object plus whatever random value you give it and that's our axis and the amount of rotation is the value from the render texture multiplied by a random value right which means that each object is again going to have a different rotation and then to transition that rotation to have it like rotate in real time i am multiplying the value of the particle which is between 0 and 1 by the random rotation for this object right and then connecting it to rotation and i'm using degrees you can use uh red hands if you would like and then the input whatever we want to rotate is the position of uh the vertices basically the vertex position right so that it rotates this will result in rotation in its uh in its place basically right now out of this rotation we can construct a vector in which if we add it to this rotated object it will scale down to the center so what i'm doing is that i'm getting the position of the object which is the center transforming it from word to object space and then if you subtract it by the object in the the position in object space right this is going to give us a vector such that if you add it to this stuff it will be scaled down to the center right and so this is what i'm doing here basically i am lurping between this vector and nothing zero using again the same the the value of the render texture right and so this is going to result in a vector that if this is one and we add it to this we are going to scale to nothing right it's going to disappear and if it is zero we will have the original scale right so we are just adding these two to have the scale effect and then uh just connected to the vertex position right let me just go through the parameters just to show you uh the difference and obviously this doesn't work again in the scene view you will have this effect because the render texture is being unwrapped based on the viewport right anyways so let's remove the reverse and disable the sky enable this guy instead and do play do some of this stuff pause and now if we change the maximum rotation you can see what's going on you can change the position offset which is how random of a position to add you can also change the end height right and you can obviously change the color too and um yeah that's it for uh this tutorial thank you so much for watching and hope you like it and uh smashed that like button already if you didn't and have a nice one

Channel: AE Tuts

Views: 21,954

Keywords: Art, Development, Game, LWRP, Tutorial, URP, Unity, VFX, dissolving, effect, glow, graph, shader, trail

Id: hXg9MxIMolE

Length: 16min 53sec (1013 seconds)

Published: Sun May 09 2021