How to make a Point Cloud Renderer using Unity VFX Graph

hey guys in this tutorial I will show you how to create a voxel renderer using particles with the unity VFX graph be aware the unity VFX graph utilizes shaders heavily so this solution is not likely to work with WebGL for the time being you can accomplish the same thing much easier with unities shuriken particle system which is also compatible with WebGL but the VFX graph is generally a much more powerful tool so we'll be using that for this tutorial so to get things started you'll want to navigate to window package manager and locate the High Definition rendering pipeline in the list of packages once you've found it click the install button in the bottom right corner and wait for it to be added to your project Unity's High Definition rendering pipeline comes with a VFX graph which we'll need for the voxel renderer once the package is installed close the package manager and right-click on your assets folder and go to create visual effects a visual effect graph name it what you want and then create a new visual effect in the unity hierarchy now move over to the inspector for your visual effect and set the asset template to the VFX graph you created just before you'll see the default particle system activate for your visual effect double click on the graph to see the VFX graph editor open this overview can seem daunting at first but don't let it scare you away now select everything in the editor and hit delete we want to replace the default particle system with an empty particle system so now right-click and select create node system empty particle system we want to render cubes instead of quads so delete the default output node and create a new node by right-clicking and selecting create node context output particle cube hook this up to the rest of our particle system and set the blend mode to opaque we'll also change the main texture to something other than the default particle now let's go to the spawn node and select it then press the space bar and select spawn single burst since we want all our particles to spawn at once the property we're interested in here is the count property move to the plus button in the top left corner and select a u int from the drop-down rename it to particle count and drag it into the graph now just hook it up to the count property and that's done now let's move on to the particle initialization here we'll set the capacity to something a large for this tutorial I want to be able to render about 5 million particles so I'll set it to that next select the initialize particle node and press spacebar then search for the set position module and select it with this we can set the individual positions of every single particle we spawn add two more modules the same way we added the set position one this time we want to add set size and set color once again these modules work per particle so at the moment all our particles are spawn at the zero coordinate with the size of 0.1 and a white color we need to change that and add some variation go back to the plus menu and create one you end and name it resolution we're going to store our particles in a texture format so we need this variable for some math operations we'll be performing on them now create two texture two DS from the plus menu and name them text pause scale and text color respectively finally expand all the variables and make them exposed so we can access them outside the graph environment now let's set the position scale and color per particle to do this let's first create a know to reference the current particle id every particle receives a unique ID one spawn starting at zero next I'll drag out the resolution variable and create a multiply node to square the resolution value this represents the maximum amount of particles that can be represented with the chosen resolution since on occasion the particle ID can reach values beyond the maximum particle count I'll have the particle IDs stay within the bounds with a modulo operation what comes out of here is now our actual particle ID and what we'll use to traverse the past in textures now we'll create two new notes a modulo node traverse the x axis of our textures and a division no to traverse the y axis the modulo node increments by 1 for every particle to the resolution bounds and restarts at 0 once it reaches the end the division node increments by 1 every time the modulo node resets so we basically create a line-by-line scanner for our textures this way we can apply this by now creating two texture loader nodes which read out a single pixel from a texture given the X&Y coordinates for this we'll drag in our two texture variables and insert them into each corresponding texture loader then for each texture loader hook up the modulo operation to the x axis and the division operation to the y axis finally let's hook this thing up to our particle system drag the S note from the text pause scale loader to the position module to set each individual particle position and drag the W component to the size module since we're going to store the size of each particle here next drag the s node of the text color loader to the set color module this completes our work in the graph let's have one last look at the whole thing before we move on to admire our work okay that's enough close the graph and go back to the unity editor select the visual effect from the hierarchy and add a new script I'll call mine point cloud renderer this script will be responsible for populating our visual effect with particles and initializing the visual effect open it up and let's add some variables to texture 2d variables for positions scale and color data a visual effect for the particle system a variable resolution to define the texture resolution and a maximum amount of particles a public float particle size with this we'll be able to change the size of individual particles as opposed to the scale of the entire system then a boolean to update to check whether we need to reinitialize the particle system and finally au int particle count to determine the amount of particles in our system in the start method will initialize the visual effect and that's all for now in the update method we check if an update is due and if it is we unset the boolean and then we reinitialize the visual effect we do this so that the existing particles are erased and the new particles are spawned then we'll initialize the variables we created in the graph we use shader dot property to ID to get the property ID from the variables name the second parameter sets the value for that property you see in the last line that I'm setting the value for the property dimension this is a typo and it should say resolution that's it for the update method finally we need a method to populate the visual effect this method will take in an array of positions and an array of colors I'm going to set a uniform size for all particles in this example but you can create whatever kind of method you like in this method we need to initialize our textures for the text our width I check if the amount of particles to be rendered exceeds our resolution or maximum width if it does the texture width will be set to the maximum resolution otherwise the texture width will be set to the particle count the height of the texture is just going to be the particle count divided by the resolution clamped to the range of 1 and the maximum resolution this way if the particle count takes up less than a full line we still get a minimum of one line in our texture and if the particle count exceeds the maximum resolution we just erased the excessive particles the texture format has to be set to RGB a float this is important for us to pass in full floating-point values to the VFX graph lastly write false and that's that for the first texture for the other texture the initialization is identical so you can just duplicate the line and change the variable name now we'll create two integer variables text width and text height for ease of use and set them to the width and height of our textures now we have to loop through our textures and set each individual pixel with the passed end data to do this we first calculate the index for the past and arrays by writing X plus y times text width this is basically the reverse of what we did in the VFX graph with modulo n division here we're taking x and y coordinates and compressing them down to a single value then we can use that index to set the current pixel in our color and position / scale textures keep in mind textures only accept colors as input so you need to put the position and scale data in a color object before inserting them into the texture let's close the loop now and apply the textures so the changes we made are saved then we can set the particle count to the length of either passed and erased and tell our update method that we made a change and the visual effect needs to be reinitialized and with that we're done I'm going to make a quick example for this tutorial just to test the functionality of the renderer as you can see after fixing the issues I noted in the code you should see something like this just a big bundle of particles levitating at their designated positions for a final demonstration I downloaded a mesh with several million vertices and rendered it with this system it didn't come with color data so I had to generate some random colors for it it stands to show how many more particles can be rendered with this system as opposed to the shuriken particle system that'll be it for this tutorial I hope you learn something new and enjoy this video if you did please consider subscribing and of course alike is always appreciated with that said have a great day and I'll see you next time [Music] you

Channel: Sam Schiffer

Views: 21,840

Keywords: unity, C#, indie game, indie, game, unity tutorial, ios game, mobile devlog, ios, android, app game, video games, physics, rope swinging, 2d game, game development, procedural, unity game, C# Game, C# programming, unity c#, c# game development, game programming, gamedev, programming, unity 2020, unity 2019, orenge devlog, orenge, orange devlog, orange, devorenge, vfx graph, unity vfx graph, point cloud, unity visual effects, visual effect graph

Id: P5BgrdXis68

Length: 9min 22sec (562 seconds)

Published: Sat Jul 11 2020