Procedural Particle Generation Tutorial

Release and discuss things you've made, including mods.
Post Reply
Spiney
Dretch
Posts: 30
Joined: Thu Dec 12, 2013 5:35 pm UTC

Procedural Particle Generation Tutorial

Post by Spiney »

I've been making these fire particles and people have been asking me how I make them.
Rather than telling use X/Y/Z expensive software I'd rather explain the principles, which are very straightforward.
Besides that, making these effects is very procedural and I imagine it would be rather easy to code this up in a shader.

Tools

If you want to make animated textures you can use a number of software.
I use Genetica by Spiral Graphics, which sadly is very expensive. But you can use any decent compositing app, such as After Effects or even Photoshop/Gimp, though automating things is certainly easier if the program was made with procedural animation in mind. I don't know of any decent free/open software that does this. If you do, please share it with the rest of us.

Prerequisites

The effect basically only needs 3 things to work:

  1. A seamless texture. Color isn't needed, so a single channel will suffice.
  2. A gradient texture. If you want a seamless effect this is not needed.
  3. A color ramp texture.

And depending on what you're going for:

  1. A DUDV map texture.

Let's begin by making an animated fire particle. Do note the technique can be applied to all kinds of things, so use your imagination!

STEP 1

Image

Get a nice seamless noise texture.
There is all kinds of software that can generate these.
Here I use a variant of a voronoi pattern.
The shape of the noise you use as well as the density will by a big determining factor in how your effect will look.
This will probably look a bit cartoonish, which is fine for this tutorial since it makes it easy to see how the effect works.

This page has a list of all kinds of procedural noise patterns:
http://www.neilblevins.com/cg_education ... noise.html

If you cannot generate it yourself it probably isn't too hard to find something online.

STEP 2

Image

Make it pan a single full cycle on an axis of your choosing.
Actually, you can use any transform you like on any axis you like, just remember it has to loop seamlessly.
In case of the fire, we will probably want to pan upwards.

In this tutorial all animated images are 16 frames long played back at 20 fps.

STEP 3

Image

Take the same texture and make it repeat twice on each axis. Make it pan, but only at half speed.
Since it's repeated we can run it at half speed and still be seamless.
If you repeat it three times you can pan it at a third of the speed, etc.

Incase you're worrying about seeing repeating patterns you can use different textures or flipping/rotating the texture.
In practice I haven't found this to be an issue for most patterns.

STEP 4

Image

Now, we take both panning textures and blend them together.
You generally want to use 'multiply' or 'screen' blend modes versus addition or substraction,
since the latter ones can easily make pixels hit the max/min brightness.
Here I multiply blending to make things darker.

STEP 5

Image

We probably want our fire to fade out as it goes up. To do this, we create a texture to use as a mask.
In this example I use a vertical gradient that's white at the bottom and black at the top.
When you're doing particle effect textures you probably want to fade out the edges so you don't get ugly seams at the boundaries. You can use a radial gradient for those.

STEP 6

Image

Likewise, we can make the base brighter.
I have to do this as a seperate step since my software doesn't support conditional blending modes.
If it did, this step could be integrated with the previous.

STEP 7

Image Image Image

Now we need to apply our color ramp and presto, we have something resembling a fire!
Remember, the colorizing step is always the last one before outputting the result.
Making good color ramps is a bit of a dark art. It's surprisingly tricky getting them just right, in my experience.
I could stop here, but there's much more we can do to make our fire more convincing.

BONUS: STEP 8

Image Image

So far so good. But there's one little problem with this approach.
In a lot of real-world cases, you want a effect that radiates outwards from the center.
It's impossible to do this easily with just panning textures.
Fortunately, this can easily be done by remapping the pixel coordinates.
So far, our fire is nice and bright at the base and fades out gently. Perfect for making a fireball!

To do this we need to tell our program where to put the pixels.

In a shader, this can be done by remapping the UV coordinates using a so called dU/dV-texture. Say what?
The most simple way to think about this is that a UV coordinate is the texture equivalent of X and Y in a 2D image. So just consider that U = X and V = Y whenever you're working on such a texture.

From now on I'll consider us working with a single texture with holds the data in two of it's channels.
Depending on the software you use you might need to specify these channels as seperate textures.

How would that texture look?
Well, let's first see how it would look without any moving of the pixels.
Here, the red channel represents the horizontal axis coordinates.
The green channel represents the vertical axis coordinates and we don't need the blue channel, so it is left black.

Image Image Image

We can see the R value of 0 (black) represents the X value of 0.0 (left edge) and the R value of 255 (red) represents the Y value of 1.0 (right edge) with a smooth gradient inbetween. The R value of 127 of 128 would represent a U of 0.5 (the center). The G value does the exact same but on the vertical axis.

If you want your texture to appear normal and it looks warped, make sure your texture gradients are in the in right channels and their values are not inverted (pointing the opposite way). If there's any deformations, make sure the values are in the right places. Both R and G should have a value of 127 or 128 in the center, 64 half a quadrant down from the left top corner and so forth.

Okay, I'll apologize for that bit of technical talk. Now let's turn our horizontal fire into a fireball!
To do this, we need to do take our gradients representing our rectangular coordinates and switch them for ones representing polar coordinates. How would those look?

Image Image Image

These channels transform into polar coordinates. These are what we need.
You can see the R channel has a reverse clockwise gradient that bends things around the center of the image.
The G channel specifies the distance to the center. Makes sense doesn't it?

Image Image Image

You can also transform things back into their regular coordinate system by using these channels.
I imagine these are useful when you need to animate something on a sphere and vant to avoid things getting pinched at it's poles.

On a sidenote, you can make these for yourself by taking any image and applying the 'polar coordinates' filter in Photoshop,
that's how I derived the gradients.

Fading in and out

One thing I didn't talk about is fading in and out, but that's easy enough by just scaling the brightness to 0 over time. For best results you should probably do it before colorizing. In a lot of older games they fade out the brightest part of the flame, which makes it look gray rather than the orange or red it should be, so use your color ramp wisely.

Conclusion

That's all folks! I hope by teaching everyone to fish this will let me off the hook.
Remember, these techniques apply to a lot more than just fireballs.
I also hope this shows that the techniques are well suited to usage in shaders,
which would allow for more dynamic and less memory consuming particles.

User avatar
Matth
Dretch
Posts: 54
Joined: Sat Jul 19, 2014 8:57 am UTC
Location: Germany

Re: Procedural Particle Generation Tutorial

Post by Matth »

Uh nice tutorial spiney. A simple way with nice results.
Thank you :smile:

User avatar
kharnov
Granger
Posts: 1851
Joined: Tue Mar 06, 2012 10:54 pm UTC
Clan: GT
Location: New York City

Re: Procedural Particle Generation Tutorial

Post by kharnov »

That's a very nice guide, good job! :thumbup:

User avatar
ViruS
Granger
Posts: 1020
Joined: Sun Mar 11, 2012 4:24 am UTC
Location: Antartica - West Australian Post shore
Contact:

Re: Procedural Particle Generation Tutorial

Post by ViruS »

kharnov wrote:

That's a very nice guide, good job! :thumbup:

what kharnage-kyun said :bugeyes:

User avatar
Viech
Project Head
Posts: 2139
Joined: Fri Aug 03, 2012 11:50 pm UTC
Location: Berlin

Re: Procedural Particle Generation Tutorial

Post by Viech »

I always wondered how this kind of magic is done. :cool:

Responsible for: Arch Linux package & torrent distribution, Parpax (map), Chameleon (map texture editor), Sloth (material file generator), gameplay design & programming, artistic direction

User avatar
kharnov
Granger
Posts: 1851
Joined: Tue Mar 06, 2012 10:54 pm UTC
Clan: GT
Location: New York City

Re: Procedural Particle Generation Tutorial

Post by kharnov »

Stickied this, for reasons. :thumbup:

User avatar
Tom
Dragoon
Posts: 253
Joined: Tue Jan 15, 2013 3:34 pm UTC
Location: France

Re: Procedural Particle Generation Tutorial

Post by Tom »

Thank you for this tutorial!

Post Reply