GPU Particle Sprite Water

What this tutorial will show you how to create.

I made this fountain for a large project I'll be doing in school, it requires a slight green tinted water fountain. As I knew nothing of particles in UE4 this was a good challenge for me to take on, and hopefully help those with as little knowledge as I had to create something similar themselves.
Big image

What you'll need

New project, or a project you're currently working in that you need a fountain in.

An FBX of your fountain mesh.

An FBX plane that fits in the base of your fountain (this will be a water shader)

This tutorial will assume you have a (very) basic understanding of particle systems in UE4.

Once you've opened your project.

Import your mesh (textures would be optimal at this point to see the effect of the water plane you'll be adding later) but not necessary.

The next basic steps are as follows.

Add a Bounding Box.

For GPU Sprite Systems you'll need a bounding box, without this when the emitter is out of view it will become inactive. To do this go up to the top shelf, and select Bounds, select the arrow beside it and select Set Fixed Bounds.

This process will need two systems, one of which will need multiple emitters.

For now we will stick to the single emitter system. For this we will only need to add a few new modules.

Adjust the Lifetime

Go into the Lifetime module and adjust the values as follows.

Min: 0.5

Max: 1

Adding a new Module.

The first module we will be adding is Initial Velocity. This will be the only step where adding the new module will be shown, so refer back to this step if you forget.

Right click under Color Over Life on the grey section, move down to Velocity, and select Initial Velocity.

Setting values.

Next we will go over the values you'll need and where to put them.

Select the arrow beside Start Velocity then select the arrow beside Distribution.

The values are as follows:

Max: X 50, Y 200, Z 50

Min: X -50, Y -100, Z -50

Next module.

Next module is Size by Speed. This will change the shape of your particle by speed, creating long particles that resemble falling water. You can find this by creating a new module the same as we just did, but instead going into Speed, and selecting Size by Speed.


For these values you cant change them to your liking but these are the ones that produced something I liked for my end goal.

Open up Speed Scale and change the Y value to 5 as well as the Max Y Scale to 5.



Go back into your scene and rotate the emitter so the particles are going in the proper direction you need them, for me this is straight upwards.

Lets get rid of these cross hairs.

The default cross hairs don't look very pretty, or show you exactly what your particles will look like. So lets make the material.


For what I'm using this fountain for, the water needs to be slightly green, for you this may be different so play around with the color nodes yourself and find a balance you like for what you need.

First nodes.

The first nodes you'll be creating are two Constant3Vectors. To do this either click and press 3 or right click anywhere on the grid of the editor and type in Constant, select the correct option.


Now we're going to turn these into parameters so you can select the colors you want.

To do this you're going to right click on the node, and select Convert to Parameter.

Once you've done that.

After you've converted it to a parameter, rename one to Dark color and the other to Light color.

After that double click on each choose a color for both respectively. Mine will be a dark green and a light green.


Start adding multiply nodes, for this entire material we will need 3. To create these click and press M, or follow the same steps above and find the multiply node. Put one near your Constants and save the other two for later.

Make some connections.

Feed your dark color node in the A of the first Multiply you put aside, and the Light color into the B. Once you're done with that, Connect the Multiply to your Emissive color on your main node.

Time to use your next Multiply.

Create and Constant node, this can be done by clicking and pressing 1, or the same as before, right click and search (I will not be showing this step this time). Now to test your memory, turn this into a parameter (refer back if you forget). Name this Opacity and change the value to 2.


Connect this constant to the A input of another one of the Multiply nodes you made before. Connect the output of the previous Multiply above into the B input of this Multiply and connect the main output of this node into the Opacity input of the main node.

Last Multiply.

So you should have one multiply left. So what you'll need it for is the Refraction. Create another Constant like you did before and convert it to a parameter name is Reflectivity. Set the value to 0.25 the same way you did before.

Lets finish this off.

Okay, now that you have all that done, we are going to duplicate your Light Color constant that you made at the start. To do this, select it and then press Ctrl+W. This will be put into the B input of the Multiply, and the constant you made in the last step will be put into the A input. Last step, take the output of the Multiply and put it into the Refraction input of the main node.


You're material is now done, save it out. Now apply this to your particle system. It should look a lot better than the default cross hair texture from before. To do this drag and drop the material from your content browser into the appropriate section on your particle system as shown in the image.


Now your size will be a little larger than it should be. This will be something you want to adjust yourself which is why I waited till now to adjust it. To do this go into your Initial Size module and adjust to your liking, for mine I chose the following.

Max: 2 for all

Min: 1 for all

Spawn rate.

Spawn rate is the next you'll adjust. Now that you know what it looks like, you can determine how many you want to spawn from this point. Since a lot of water will be coming out I chose to go with a high spawn rate. You may choose differently. To do this go into your spawn module and change the number accordingly. I chose 3000.

Done! You should have something that looks like this.

Big image

Time for the spray.

As with most fountain the water will eventually fall, after this point, so that is now what you're going to create. First off create another Particle System like you did for the last one.

Getting a little faster now

You can either duplicate your last system, or start fresh, up to you. However all the modules you used before will be needed again. As well as a few others. So add those now. They are listed below.

Initial Velocity
Size by Speed

Lifetime again

Go into the Lifetime module and adjust to these settings (if you duplicated adjust accordingly)

Min: 2

Max: 3

New modules.

The first new one you will want to add is the Collision module. To do this, repeat the same as before however selecting Collision from the list instead. These values are as follows.

Resilience Constant 3

Resilience Scale over Life Friction 0.5

Set the Response to Bounce.

Next up Constant Acceleration

Set up a new module, go down to Acceleration and choose Constant Acceleration. Set the values as follows.

X 0 Y 90 Z -980

This is how you fake gravity on your particles and have them "fall" from the emitter.

Initial Location

Set up your Initial Location now. Go into Location and choose Initial Location. Set the values as follows.

Max: X 2, Y 2, Z 2

Min: X 1, Y 1, Z, 1

Initial Velocity

You set this module up in the last system, so create it again for this one with the following values (if you duplicated your last one, adjust accordingly.)

Max: X 100, Y 200, Z 100

Min: X -100, Y 100, Z -100


Change the Spawn settings to 500 (this will look very bare at first but that will be adjusted in a bit)
The rest is the same as the previous modules so refer back to the last emitters values if you need a refresher on those settings.


The next step is to duplicate the Emitter within the Particle System. NOT the system itself.
To do this right click on the emitter and select Emitter, Duplicate. Do NOT duplicate and share as you will be changing one of the modules.

Change the Velocity.

The only thing you'll be changing here is the Initial Velocity. The values will be as follows:

Max: X 100, Y 100, Z 200

Min: X -100, Y -100, Z 100

The reason you're do this is to have a more bloom effect of your system falling "off" of the first system.

To complete

To finish this off, duplicate your system 3 times, each time rotating 90 degrees in the Z axis, this should now cover the entirety of your fountain.

One last thing before the water is done.

So I lied, there is one more thing to change to complete it but it isn't in the system editor, it's your material. Duplicate the same material as before and open up the material editor, we need to change a few things.


Since you're just duplicating the previous material you made above, I'm not going through the whole process, the changes you'll need to make are to the Opacity parameter, and the Refraction input. Follow the picture below.
Big image

As you can see

You change the Opacity value to 1.2, and delete your Reflectivity node as well as the third multiply and only input the light color.

You're fountain is nearly there but...

Although you particles should be colliding with your mesh, bouncing, and leaving some trails that look like water falling, it isn't going to fill up the base of your fountain, so you need to make a water plane. So get out that second FBX I have written at the very beginning, and get ready to use that.

What you'll need

You will need 2 texture maps for this, two normal maps of water ripples, specifically one larger and one smaller ripple pattern.

If you don't know how to make these, go into Photoshop, Render clouds, apply an Ocean Ripple filter, and save out. Do this again but with a larger Ocean ripple filter. Generate Normal maps from these two images. As this isn't a tutorial to show you how to make these, but how to use them if you need more clarification you can find various other tutorials online to clarify that process.

Place your Plane into the Fountain.

After you do this create a new Material (this is the last one, but it's a long one). Since this one is a lot larger than the others, I will be explaining each section, and then posting a large picture of the completed editor for that section, if you don't understand something in the written explanation refer to the picture.
Big image

Base Color

The same color Constants as your Particle Systems. Create those and set them aside.

Next create a Lerp node. To do this Click and press L.

After that create a Fresnel node. Right click on the grid and type Fresnel.

After that Create and Constant node and Convert to Parameter, rename as Fresnel Parameter. Change the value to 1.

Connect the Dark color to Lerp A, Connect Light color to Lerp B.

Connect the Fresnel Parameter, connect to the ExponentIn input on the Fresnel node.

Connect the Fresnel node into the Alpha input of the Lerp.

More Multiplies...

and a Depth Fade, to do this right click and type in Depth Fade.

Create two Multiply nodes.

Connect the Lerp to the first Multiplies A input, and the Depth fade into B.

Connect this Multiply to the second Multiplies B.

Create a Constant. Convert to Parameter, rename Diffuse Multiply. Change value to 1.5.

Connect that to the second Multiplies A.

Input all of this into the Base Color input of your main node.


Comment your sections as you go, to do so select all of the nodes you're using for one of the main inputs, in the last instance it was Base Color. Each of the sections I will go over for the next steps will have what I commented each section as the first title before the picture. Name as you wish however make sure you do as it will make it easier to go back in and know what each set of nodes do for you to make adjustments.
Big image

Opacity and Refraction

Create your Depth Fade and Fresnel the same as above.

Create another Constant node, Convert to Parameter and name it Opacity Fresnel Exponent.

Connect this Constant into the ExponentIn input.

Create a 1-x node. To do this right click and search either 1-x or one minus.

Connect the output of the Fresnel into your 1-x.

Create a Multiply.

Connect the Depth Fade to A, and the 1-x to B.

Create another Multiply, and another Constant.

Convert the Constant to a Parameter, and rename to Refraction. Change the value to 3.

Connect the Previous Multiply into the B of this Multiply, and your Refraction constant into A.

Connect the output of this Multiply into the main Opacity input.

Connect the first Multiply to the main Refraction input.
Big image

Ripple Sizes controlled by Normals.

Getting a bit bigger now but don't be intimidated, I'll go over everything.

Create an Absolute World Position node. To do this Right click and type in World Position. Select World Position under the Coordinates heading.

Create a Constant, Convert to Parameter, and name this Overall Wave Size. Set value to 1200.

Create a Divide node, to do this click and press D.

Connect the WorldPosition node to the A, and the Overall Wave Size to B.

Create a Mask. Right click and type Mask.

Create two Panners, to do this, click and press P

Also create two constants. Convert both to Parameters. Name one Small Ripples, name the other Large Ripples.

Connect the mask to the coordinate input of both Panners.

Set the value of Small Ripples to 0.75, and the value of Large Ripples to 0.25.

Create two Multiplies.

Connect the first Panner to the A input of the first Multiply, and connect the Small Ripples to the B.

Connect the second Panner to the A input of the second Multiply, and connect the Large Ripples to the B.

Bring in your Normal Maps, connect the first multiply to the input of one Normal Map.

Connect the second multiply to the input of the other Normal Map.

Create an Add node, to do this Click and press A. Connect the first Normal Map to A, and the second to B.

Create a Constant3Vector, Change the color to off white. Not completely white, and not into grey.

Create another Multiply node. Connect the Add node to the A of the Multiply, and the Constant to the B.

Connect the main output of that multiply into the main input Normal.

Big image

Wave Speed and Surge Height

Create a Time node, to do this right click and and type in Time.

Create another Constant node. Convert to Parameter, rename Wave Height. Change value 0.5.

Create a Multiply node, input the Time node into A, and the Wave Height to B.

Create an Absolute World Position. Just like you did before.

Create another Constant node, convert to Parameter and name it Speed and Surge Divisor.
Change the value 20.

Create a Divide node. Input the World Position into A, and the Speed and Surge Divisor to B.

Create two Mask nodes. Turn one to just R channel, and the other to just G channel.

Input the divide node into both Masks.

Create two Add nodes. Input the multiply into both Add A.

Input Mask R into the first Add B, input Mask G into the second Add A.

Create two Sine nodes. Right click and type Sine.

Input one add into one Sine, repeat for the other.

Create two ConstantBiasScale Nodes. Right click and type Constant Bias and select the correct node.

Create another Add node, input the first ConstantBiasScale into A, and the second into B.

Create a Constant2Vector node.

Create an Append node. Right click and type Append.

Connect the Add into the Append B, and the Constant2Vector into A.

Create another Multiply.

Create a Constant, convert to Parameter, rename Wave Height Surge. Change value to 10.

Input your Wave Height Surge to A, and the Append to B.

Connect the Multiply to the World Position input on the Main node.

You're Done!

Make some adjustments wherever you see fit. Now that you've hopefully commented everything as you went you'll know exactly what to change and why. This process is very test and retest until you find something you like.