VFX Graph Tutorial - Magical Library

hello everyone so a few days ago i released a video that had quite a bit of success on twitter and read it and a few a few of you asked me to make a tutorial to show you how i did it so yeah that's what i'm trying to do right now before we start i just want to point out that um i'm not a vfx expert at all um as a matter of fact i've started using unity um less than a year ago and you know vfxcraft a few months ago so there's probably a few things that i could have done better and if some of you know any of these things just feel free to add them in the comments one thing i'd like to say before starting is that this tutorial is going to assume that you have some knowledge of how the effects graph works and how math works because i won't have time to go too in depth into what each node is doing to the graph so here we are that's a fairly standard um hdrp empty scene i just added a floor which is basically a plane and a shelf um it's very very basic it's just a few a few cubes now that's the book model that i made in blender it's very low poly as you can see it has an albedo texture and a normal map so as you can see it's as low poly as you can in order to because we're gonna have thousands of them so you know it makes sense to just keep them simple all right so let's just create a new uh vfx uh in our project um i'll call it magical library and then just drag it into the project let's bring it here and let's open it so one of the first thing we're going to do is to remove the default modules we're going to set the capacity of the vfx graph to 15 000 which is what i used in the video which is more than enough to get a very big shelf and we're going to change the spawning to a single burst which is going to happen when we load the scene so i'll just you know set it to 30 for now and then we're going to change the outputs from particle quad to a lit mesh which is something you have to uh you have to use hdrp in order to get delete mesh right won't work in uarp change it to opaque and then choose our book mesh let's change the texture to our texture and then it won't spawn unless i set the position first using a set position module and here we go we have a book technically 30 books at the same place now we have a few settings to change so you have to select the output particle it mesh and then go into your inspector there we're going to pick use normal map and cast shadows let's pick the normal map here you go just just lower its strength a bit because i made it a bit too strong in blender okay now we have a book uh let's try to make this look a bit more like a full shelf so first we'll create a particle index node which is basically every particle that is pawned by the graph has a unique index which is 0 1 2 3 etc and we're going to use this to actually spread the books as you'll see very simply so we create a new vector3 um and then we're going to plug the particle id directly into the z component of our vector3 and then plug this vector3 into our set position and here you go so basically each of the particle is one meter apart um because it uses the index now what we're going to do is multiply this index by some arbitrary float value and that will allow us to have whatever interval we want to have between each book okay so we have to restart the vfx graph between each change because it's actually done into the initialize function so that seems to be a pretty a decent you know interval between each book we're going to try to add some particles let's restart the graph and here you go now you have a long line of books um now we're going to add different um levels of books so i'm going to call these flaws because i'm not sure exactly what the right name would be in english as you'll see most of my variables have you know poorly chosen names but hopefully you'll it will be good enough for you to follow the tutorial so here i just set it to four because we're going to have four floors by default plugging into a modulo node which will give us basically four groups of particles and then we're going to set to plug this modular node into our y value and here you go we have different um you know levels of books however you'll notice that um the books are now much more far apart so we have to divide our initial float by this floor amount value and then we should get yeah yeah so that kind of looks like a shelf now we want to be able to control the space between each of the levels and so i just multiply this modulo node by once again an arbitrary float i'll be able to change afterwards by making it an exposed property so yeah i want you my uh variable naming is very poor now i'm just going to create an int property um that will allow us to control how many books are spawned by our vfx graph very easily from the inspector let's make it exposed now if you just change the book amount or if you change the floor amount here you go so that's your most basic um sort of procedural library now we're going to add a bit of randomness to make this more um natural looking right to add randomness the random number node is extremely useful so we're just going to create one um which we're going to set between two pretty small floats like minus 0.1 and 0.1 and we're just going to set it to the x value right so now each book is going to be offsetted by some amount on the x axis so that was a bit too strong so i'm just going to make it a bit smaller there's a lot of trial and error when you do this sort of thing so 0.02 should be fine and then feel free to you know just tweak the settings to fit your needs we're going to do the same with the size so very easily with the set size random um so we're going to put it between 0.01 and 0.11 and then we're going to add a multiply size so that we can easily control the overall size so now as you can see it looks much more natural one thing that i like to point out is that you need your the pivot of your book mesh to actually be at the bottom of the mesh so that the size is actually affected from that point the next thing that we're going to randomize is the color of the books it's going to be a very simple randomization based on you know white and some slightly darker gray because it would be actually a bit more complicated to get nice color blending with more you know with different colors like red or green or blue so yeah here we're just going to be lurping these two colors so one completely white and one not going to be sort of medium gray and we're going to use our trusted friend the random number between 0 and 1 and just set it and here you go as you can see some of them are a bit darker some of them are a bit brighter one last thing we can do is add some random rotation to the book so this one is going to be fairly subtle so it's called angle it's not called rotation for some reason and i'm just going to randomize the x component so here just trying 10 degrees it's pretty good i'm just going to do a bit in both directions now that's a bit too strong let's do minus five and five as you can see there's always a chance that two books will slightly overlap um that's something i have actually fixed in my full graph but here for the sake of this tutorial i wanted to keep it fairly simple and it's mostly completely invisible so now we're going to try and integrate this sort of shelf generator to our shelf mesh try and find the right size first okay so here one thing i'm going to do is to actually take all of the nodes that i've set up in the initialize phase and drop them into the output because that actually allows me to set up everything in real time the reason i've set it up in the uh angela's particle is that it makes just a lot more sense to me to have them initialized once at the start of the scene and then just to stay there but it won't allow me to actually edit them in real time so just to set up the library i've put them all in the um in the output section now what i'm doing is actually adding a float to control the interval between the books because as you've seen when we change the size of the books the space is not right anymore so yeah just seems easier to have this value to be exposed so that i can easily control it from the inspector so now this is starting to look pretty nice a bit more space now let's just have it tap to the mesh here let's just go all the way to the top to see yeah a bit more all right then we need to add two floors okay so what you've seen here we're going to fix very quickly okay now we're going to add a few books as you can see you have to restart the graph each time you change the amount of particles so now we have to fix the fact that the books disappear sometimes that's when the bounding box is not inside of the camera anymore so to fix it we'll create an aa box node and connect it to our bounds of the initialize um you know module and then we'll just make it property and edit it very quickly in the editor so that it goes around all of our books now we can take all of these nodes back to the initialize part you can leave them actually i think in the output particle it just makes more sense for me and it's easier to know where i'm at now let's get to the second part which is the magical floating books so to do that i'm going to learn our position using another set position in the outputs to loop between first the starting position which is the just the attribute position and then between something else which i'll have to create right now so to start i'm going to just add to the starting position a simple vector three on which i'm going to offset the z component and here you go now so that was the wrong way so let's just go the other way and here you go but we don't want all the books to go exactly at the same place right so we're going to randomize that by using you've guessed it a random number so we're going to multiply this vector that we're adding by a random number one thing we're going to want to do is to uncheck the constant boolean because um if we don't every time we ask for a random number we're going to get the same one so the one that shows what color the books are the one that shows what rotation the books are and so we're going to have only the tag books go out further or something like that and we don't want that i'm using an animation curve in order to have a bit more control over the amount of books that is going you know outwards or uh because i want them to be spread in a very specific way from the shelf to um you know the air okay now we're going to want to to add some movement to that because that's very static to do that i'm just going to add another vector3 and i'm going to use a sine node to which i'm going to fit the time let's just add in multiply notes so i can change the speed later on and just straight ahead tada magic books so that's fine but we probably want to have a bit more control over the speed we also don't want them to move exactly in the same direction all the time so we're going to use the same random number that we're going to add to the time so that each book will be offsetted in the assign function so now every single book has different um speed and different offsets now it would be nice to be able to just use the same sign to randomize every direction but as you can see it just makes just makes the books go diagonally so what i'm going to do is just duplicate these three nodes and then add another random number still no constant checked and then if we add to the z yeah as you can see it's a bit more random although i'm still going to have to multiply and i'm just going to keep the same one for the y components because yeah you know it just looks random enough in my opinion now this is still pretty rough so let's try and make it look a bit better so here i'm adding a multiply nodes on both in order to have a global speed attribute all right so now i'm going to add some you know random angles um so for the sake of this tutorial i'm actually going to keep the angles still so i'm just going to give all the books a random angle when they are out of the shelves so just like for the position i'm just slurping between the angle attribute which is set as the start of the graph and a random angle um you probably want to actually animate the angles and now with what i've shown you for the movement you could probably very easily do it if you didn't know how beforehand but here to keep it short i'll just add this random angle and call today let's make it 30 instead of 15. now the movement is still too much so i'm going to control the amplitude by adding another multiply node just after the vector3 now at this point as you can see it's starting to get a bit messy my graphs always are messy you can probably make them a bit better by using sub-graphs but you know for this tutorial this will be okay so here's a movement amplitude variable that you can control from the inspector and yeah something a bit more subtle like this i think is better let's make them go a bit further away okay now the issue is that when we look from the normal position to the magical floating position all the books move at once so now we're going to create a new function that will actually fix that so let's create a new random number and then a new float which is going to be the floating books amount right and it's going to be a value between 0 and 1 which will be basically the percentage of books that are of the shelves so we are going to subtract this floating books amount from the number one let's make it a range so that we only have values between the zero and one and then we'll subtract that from our random number then we'll just saturate that and fit it into our two loop notes one for the position one for the rotation and now as you can see as we move this value more and more books are going into their floating position the last one is going to be to have the books actually go back into the shelves when the player is getting close to them and that's actually fairly easy to do so here i'll just create an empty that will act as our player let's call it player and bring it here now we're going to have to get the position of the empty to our graph which i'll show you in a minute first we have to subtract something from our lerping factor and then saturate it again and then feed it back into the leaf nodes now let's create a vector3 which will be our player position but for now we'll just leave it as this vector3 so we're going to have to change the space because we're going to fit into the graph the world space and the graph uses the local space so we have to change from world to local and then we're going to have to calculate the distance between each particle and the player so to do that we use a distance note not this one a distance node yeah exactly just plug the two positions in there and then with a few easy math techniques we should be able to get a factor of uh how close to the player each particle is so let's just divide this distance by a factor that is going to be a property and then feed it into our subtract that won't be enough of course we have to saturate that and we have to invert it by using a one minus which is not technically an inversion i guess in math terms but okay now we're back to normal and let's just name these properties so this one is the distance from the player from which books start going back into the shelf and this one is just the player position now to actually fit the position of the player to the graph we're going to have to use a property binder pick position and then just choose player position and just drag the empty into the right slots and then yeah my empty is completely off yeah so you can see how that works already let's just add a sphere so that uh you know the empty is a bit more visible and let's just yeah okay yeah no not the sphere and here you go now the books are going back as the player gets closer to them and you also have this very easy to control you know general slider to you know decide how many books are of the shelves or in the shelves now that's really all there is to it i hope that wasn't too too boring or too slow because i'm really not used to making tutorials and i'm not planning on making like a lot of them but this was a very popular request so i thought i'd give it a try um so yeah you know just feel free to comment if you have anything that i could have done better i would love to hear about it just to be clear this is a sort of simplified graph of what i actually made so for example i mentioned that there is no rotation movement but i think you have all the techniques and information that you can need in order to make this a bit more in-depth and a bit better looking feel free to check out my twitter on which i'm releasing regular updates on my game which is called mona you

Channel: A Beginner's Dev Vlog

Views: 20,888

Keywords: Unity, VFX Graph, Visual Effects, Tutorial, Advanced

Id: h4SBACYb26k

Length: 28min 31sec (1711 seconds)

Published: Fri Mar 12 2021