Dissolving Particles with Custom Vertex Streams

Here’s a quick little tip/idea to demonstrate using custom vertex streams and custom data in your Unity3D Particle Systems to create some pretty interesting VFX such as dissolving particles. Doing some googling, there didn’t seem to be a lot of information out there about custom data in particle systems, so hopefully this will help out a little.

From a high level, what this entails is creating a particle system that will automatically send some data to the shader of the particle material via the shader’s vertex stream. So, as you might guess, the first thing we’ll need is a shader that will be able to handle the data sent. Even sooner, though, let’s get a couple textures together. For the particle we can just use a basic particle png that has a radial gradient that goes from white in the center to full full alpha along the outer edge. We’ll also need a dissolve texture, which in this case can just be some quick perlin noise. You can make both in Photoshop or Gimp in about 5 minutes or just nab them here if you’d like to just try this out quickly.

Of course, since the effect we’ll be looking at here is a dissolve effect, we’ll need a dissolve shader. Let’s start by making a very basic one that doesn’t work with the particle system, just to see what I’m talking about by a dissolve shader.

You can check out the shader below. I won’t go into a lot of detail, but it’s an unlit shader that allows transparency and uses an alpha blend mode. It has two textures – the main texture and the dissolve texture. The real magic happens with the step() operation. In CG, step() is essentially a boolean operation. Which is to say, step(x, y) will return either a 1 if y>=x or 0, otherwise. So, in this basic dissolve shader, we are multiplying the output alpha by either 1 or 0 depending on a comparison between the red component of our dissolve texture and a _Cutoff value.

If you attach this shader to a material, add the basic particle image as the main texture and the dissolve .png image as the dissolve texture, then slide the Cutoff range slider back and forth, you’ll see something like this in the material preview:

That then is the effect we’ll be seeing in our particles. For the shader used by the particle system though, we’ll have to make a few changes. Remove the _Cutoff property from the shader and, for now, just comment out the line that uses it in the fragment shader.

Because we are reading the vertex stream from the particle system and the particle system will supply the particle color, we’ll add a fixed4 color : COLOR; definition to both the appdata and v2f structs. Now create a particle system using the material that is using that shader. I just made a simple one using a cone shape with a small radius and angle, an emission of only 5 and a start rotation that ranges between the 2 constants -180 and 180. Here’s the important part though – under the Custom Data module set Custom 1 to be a Vector type with 1 as the number of components and set its value as a curve that slopes upwards from 0 to 1. This is now our cutoff value in the dissolve shader. Finally, in the Renderer module of the particle system, tick the box to activate Custom Vertex Streams. If you take a look at the info box you can see the vertex stream data being sent to the shader. Our shader isn’t using the normal data, so, if you’d like, you can highlight that bit and use the minus button to remove it (not necessary, but it keeps it a bit cleaner). The important thing to note though is that Custom1.x (the custom data we just set a second ago) is being sent to TEXCOORD0.z. If we go back and look at our appdata struct we’ll see that TEXCOORD0 is our uv property and is only a float2 data type. If we want to have a z component, then, let’s set that to a float3 data type and rename it to something more meaningful, like uvAndCutoff. In the v2f struct, we’ll leave uv as a float2 property but add a new float property named cutoff. The line we commented out earlier can be added back, but the _Cutoff property can now be replaced with the i.cutoff property.

Now in the vertex shader we’ll set the v2f properties which will get passed to the fragment shader from our appdata properties from the vertex stream as usual. The final shader used for the particle looks like this:

Assuming all went well, you’ll wind up with a particle system that now looks something like this:

So what could you do with something like that? Well, explosions, rocket streams, sparky fires, and even liquids seem like prime candidates. Really though, the cool part is just being able to send particle system data to shaders which really opens a huge world of possibilities in the vis fx realm. Hopefully this can at least provide an idea as a starting point.