Unreal Engine 4 – Particle Gradient Mapping

Hey guys,

I’ve been doing some experimenting lately and wanted to show you some of my results. Shannon Berkes comment about using the shit out of gradient mapping made me think about how to use it inside the engine with particles. I’m certainly not the first one to try this, but i’ve never seen someone post anything about it, so i made a small tutorial on how to do it in UE4. I think this is super useful and offers new possibilities color-wise. Not the best example, but you can see some of the gradient mapping in action here:

EDIT: more examples on how to use gradient mapping for different purposes, take a look at these RealtimeVFX posts.


And here are some simpler examples in which I use random gradients to change the color of each particle. It’s just two mesh particles with some noise texture panning applied to it.

*Each GIF fires several times before looping, notice the slight variations in color each time the effects fire*

Gradient - Energy

Gradient Ice

Gradient - Fire

Before i go into any further technical detail, here is a list of pros and cons of this method:

  • More color variation without the loss of detail
  • Particles not bound to one particular color texture
  • Less memory needed than with a regular color texture

  • Sometimes difficult to map the gradient colors exactly to what you have in mind
  • Particle shader is more complex
  • Color changes are not done directly inside the engine, but in photoshop, which can be more time consuming

 


Aight, let’s get started.
First, we want our textures to be black and white *doh*, with as many in-between grey values as possible. This will obviously also depend on what kind of effect you are making, but i usually like to use more shades of grey, to get more color awesomeness in the effects later on.
Depending on what you want to achieve you can minimize texture usage quite a bit here. We could for example store four different particle textures in our RGBA channels, if you are using premultiplied alpha, two textures + alpha. -> Profit.

I will just use a faded out ring texture, with some noise and blur applied to it, to get nice soft grey values. That’s all, for simplicity of this tutorial.

Ring Texture


After creating our b&w texture, we create our very first gradient map *uhhh*. Like the example map in Ryan James Smith’s gradient map tutorial (Gradient Mapping – An Awesome Way to Get Cheap Variation in Textures), i’ll go for a map with four different gradients.
So let’s create a new texture, mine has a size of 256×64. You could go smaller than this (e.g. 256×4), but we’ll leave the size like this for now, you will see later on why i prefer a height of 64px.
This is how my gradient looks like, i just went crazy with Photoshop gradients and create two different gradient maps:


Ok. We are done with Photoshop and switch to Unreal.
Inside Unreal, we will setup a basic particle material and add the gradient mapping to it (use the texture and your gradient map we created earlier here).

I’ll just set the Blend Mode to AlphaCompositeUnlit and Two Sided. I will not go more into detail here, this is basics. After your basic particle setup, add this for the gradient mapping:

GradientMappingMaterial_1
GradientMappingMaterial_2

I added some more details like an alpha dissolve, you can copy+paste my material, if you want to: GitHubGist or download the .uassets here on Dropbox.
One important side note: look at the dynamic particle parameter, which allows us to control the GradientIndex inside our particles later on.


After material compilation, create a material instance and we can already see the results of the gradient mapping by changing the GradientIndex parameter (values between 0-1 e.g. 0.7) *kazam!*

Here is another example with the second gradient map and a noise texture.


Okay, once done with the awwwmazement of changing the GradientIndex, we change it back to 1.0 and create a ParticleEmitter, adding the material to it.
I’m going for something simple here, just one particle, growing in size, with an alpha fade out. When you are happy with your emitter, add a dynamic parameter to it. Open the first section there and change the Distribution to Float Uniform between 0-1, also check SpawnTimeOnly = true.

ParticleEmiterWithGradientMapping


Congratulations! Your particles now randomly use one of the four gradients of your gradient texture each time they are spawned.
This might look strange sometimes, depending on your gradient, just adjust your gradient in Photoshop as needed. Here is what mine looks like:


The amazing thing about this: the color details in your effects will be preserved, they can have multiple complementary colors within one emitter, and can be changed to something completely different with the blink of an eye. In addition, you can have more color-variation, but use LESS TEXTURE MEMORY! How cool is that?
We can also do fancy stuff, like changing our Dynamic Parameter via Blueprints (for example using a trigger -> changes color of effects (by changing GradientIndex).


One last thing i want to show you is changing the GradientIndex over lifetime. Let’s do this by changing our Distribution in the Dynamic Parameter to Float Constant Curve, add two Points (0,0 and 1,1)
and untick Spawn Time Only. particleEmitterChangeThat’s it, our effect changes gradients over lifetime now. You will notice the sudden changes from one gradient to the next though.
What i did to smooth out the transition, was *who would have thought* to blur the gradient map. After a quick Gaussian Blur, my gradient looks like this, which results in a much smoother transition:

T_FX_Gradient_Slash_Ice_Blur3

The blurred gradient is also quite useful for smooth transitions set inside Blueprints (for example using an objects Velocity (normalized) to control the GradientIndex). Imagine a Spaceship engine-fx going from orange to blue, the faster the ship.

This is what my effect looks like with the blurred gradient and some slight curve tweaking:

 


Thanks for reading, i hope this was helpful and will spark some new ideas in the near future.

GL & HF,
Tobias

 

Spread the love

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz