Immersive Floating Particles

The effect you'll build in this tutorial uses particles and background segmentation to create an ethereal atmosphere.

You'll use the Patch Editor to add interactivity, changing the appearance of the floating particles when the screen is tapped. Two audio elements complete the effect - looping audio in the background, and a one-shot pop sound triggered when the particles change.

Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.

Adding a particle system

Open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.

We've used 3 particle systems in this effect. One particle system is in the background, and the other 2 are in the foreground.

Start by adding the first particle system. This will become the particle system you can see in the background of the finished effect:

  1. Insert a particle system.
  2. To help you keep track, rename it emitter_background.

Particles systems look like fast streams of objects when they're first added to the scene:

In the finished effect, the background particle system has been moved out of 'camera space' and into 'world space'. This means the particles are no longer fixed to the movement of the camera, but positioned in a fixed place in the environment. This is called a 'world effect'.

To place this particle system in world space:

  1. Select the particle system in the Scene panel.
  2. Drag it to the bottom of the list.

The Scene panel should look like this:

Editing the particle system

When you select a particle system in the Scene panel, you can make changes to its properties in the Inspector:

For this particle system, start by adjusting the Position. Change the Y value to -1.7. This will move the particle system to the bottom of the scene.

Under Emitter you can make changes to how the particles emit. Change the:

  1. Type to Ring - so the particles are emitting from within a circle shape. Make the ring bigger by changing the Radius. Change the right Radius value to 7 and the left Radius value to 2.
  2. Left Birthrate value to 35 - to consistently create more particles.
  3. Lifespan to 45 and 30% - so some of the particles have a longer life span.
  4. Spray Angle z axis to 30 and 10 degrees.
  5. Speed to -0.01 and 40%.

Check the box next to Warmup, to adjust when the particle system starts after the effect has been opened. Set it to 45, so it starts 45 seconds after the effect is opened.

Next, make changes to the particles. Under Particle, change:

  1. Scale to 0.12 and 20% - some of the particles will look bigger.
  2. Spin to -45 degrees - to spin the particles slightly as they fall.
  3. Tilt to 10 and 15 degrees - to tilt some of the particles slightly and add extra interest.

Finally, adjust Force. Adding force allows you to manipulate the particles as if gravity was applied to them:

  1. Check the box next to Force.
  2. Set the Y value to 0.05. This will very subtly slow the particles as they move upwards, as if there was gravity in the scene.

You should see lots of square particles, moving upwards from the bottom of the scene:

In the finished effect, we've added a texture sequence to the particles. We've used the Patch Editor to control when each frame changes. At this point, you could simply apply a material and texture to the particles instead.

We've included a texture in the unfinished project for you to try out. To add a material and this texture to the particle system:

  1. Select emitter_background.
  2. In the Inspector panel, click + and then Create New Material.
  3. Rename the material, we picked particle_mat.

To add the texture to the material:

  1. Select the material - particle_mat.
  2. In the Inspector panel, change the Shader Type to Flat, then click the arrow under Diffuse.
  3. Select firefly_texture.

You'll should see small yellow particles in the scene:

Adding segmentation and creating the background

At the moment the particles are in both the background and foreground of the effect. We'll use segmentation and the camera texture to place the user in the foreground. We'll place the particle system in the background, and create a dark colored effect to make the particles stand out.

Start by creating the rectangles that will render these objects and textures in the scene:

  1. Insert a canvas - a container for laying out 2D objects like rectangles so they respond to the size of the device.
  2. Insert 2 rectangles, as its children.
  3. Rename the rectangles user and background.

In the Inspector set the Size options to Fill Width and Fill Height for both rectangles, so they fill the canvas. You wont be able to see the particles in the effect anymore. We'll use layers to change this later.

Your project should look like this:

Creating the background

Select the background rectangle. In the Inspector click + next to Material, and select Create New Material. Rename the material background_mat.

To create the dark colored effect:

  1. Set the Shader Type to Flat - because we don't need this material to respond to or omit light.
  2. Under Diffuse choose a color. We picked a dark blue.
  3. Change the Opacity to 70%, so you'll be able to see a bit of the real world though the background of the effect.

Using segmentation to create the foreground

Select the first rectangle, user. In the Inspector:

  1. Click + next to Material.
  2. Select user_mat.

You'll apply the camera texture and segmentation texture to this material. To create these textures:

  1. Select the Camera in the Scene panel.
  2. Click the + sign next to both Texture Extraction and Segmentation.

They'll now be listed in the Assets panel, under Textures.

To finish editing user_mat:

  1. Change the Shader Type to Flat.
  2. Under Diffuse, click the dropdown next to Texture and select CameraTexture.
  3. Check the box next to Alpha.
  4. Under Alpha, click the dropdown next to Texture and select personSegmentationMaskTexture0.

Changing render order

Right now, you can't see the particle system. This is because we need to assign the objects to layers and make some adjustments to the materials, to control how the objects render.

In the Layers tab, create 2 more layers - so there are 3 layers in your project. Rename:

  1. The first layer in the list foreground_layer.
  2. The second layer user_layer.
  3. The third layer background_layer.

The Layers tab should look like this:

In the Scene panel:

  1. Assign the user rectangle to the user_layer.
  2. Assign the canvas, the background rectangle and emitter_background to the background_layer.

Now select all 3 materials. In the Inspector:

  1. In the Inspector, go to Advanced Render Options.
  2. Uncheck the box next to Write to Depth Test.

Building the foreground

There are 2 more particle systems in the foreground - positioned in the 2 bottom corners of the screen.

In the Scene panel, click + Add Object to insert 2 more particle systems. Rename the new particle systems as follows:

  1. emitter0 - emitterA_foreground.
  2. emitter1 - emitterB_foreground.

Editing emitterA_foreground

Select emitterA_foreground and go to the Inspector. Under Transformations, adjust its Position. Set the X, Y and Z values to 0.05, -0.24 and 0.

Under Emitter, change:

  1. Type to Line - so the particles emit from a line. Set the Length to 0.1.
  2. Space from World to Local - so the particles move when the emitter moves.
  3. The left Birthrate value to 1.
  4. Lifespan to 10 SEC and 30%.
  5. Spray Angle to 45 degrees and 15 degrees.
  6. The left Speed value to 0.02.

Check the box next to Warmup and set it to 40.

Under Particle, change:

  1. Scale to 0.04 and 20%.
  2. The left Spin value to -45 degrees.
  3. Tilt to 10 and 15.

Finally, check the box next to Force and adjust the X and Y values to 0.004, 0.003. Leave the Z value as 0.

Editing emitterb_foreground

In the finished effect, we've used the Patch Editor to count through different frames of a texture sequence. To see how the effect would look without the texture sequence, you can apply particle_mat to both particle systems in the foreground.

You don't need to make any changes to the layers. emitterA_foreground and emitterB_foreground will be assigned to the foreground_layer by default, because it's the first listed in the Layers panel.

Changing the texture sequence

In the finished effect, each time the screen is tapped the texture applied to the particles changes.

To do this you'll turn 4 individual textures into an animation sequence, then use the Patch Editor to set up a trigger, changing the frame in the sequence each time the screen is tapped.

Creating the Animation Sequence

  1. In the Assets panel select the 4 textures - inventory_tex.01, inventory_tex.02, inventory_tex.03 and inventory_tex.04 - at the same time.
  2. In the Inspector, change the Type from Single Texture to Texture Sequence.

You'll see an asset called inventory_controller listed in the Assets panel.

To apply inventory_controller to the particle systems:

  1. Select particle_mat.
  2. Next to Material, select inventory_text.-animation from the menu.

Using logic to change the frame

We'll use logic to change the Current Frame property of the texture sequence.

To create the patch:

  1. Select inventory_controller.
  2. In the Inspector panel, click the arrow next to Current Frame.

This will have opened the Patch Editor underneath the Viewport.

Right-click in the Patch Editor. From the menu select a Screen Tap and Counter patch. Connect the patches, so your graph looks like this:

Set the Maximum Count in the Counter patch to 4, because there are 4 textures to count.

If you select Simulate Touch in the Simulator, you'll see the textures change when the screen is touched.

Adding secondary animation

We've used the Patch Editor to add secondary animation, adding extra interest to the effect. This animation makes the particles appear to move in an oval shape and rescale very subtly.

We'll use the Loop Animation and Transition patches to create the animation.

A 2D Transform Pack patch and Texture Transform patch will pass this information to the texture and animation sequence. These patches allow you to manipulate the 2D transform of a texture, so you can move it around, rotate and rescale it.

Applying the texture using the Patch Editor

We've already applied the texture in the Inspector panel. To add secondary animation, we'll need to create a patch representing the texture and material instead.

To create a patch representing the Diffuse property of particle_mat:

  1. Select particle_mat.
  2. Under Diffuse click the circle next to Texture.

Next, create a patch to represent the texture sequence:

  1. Select inventory_controller.
  2. Drag it from the Assets panel into the Patch Editor.

Right-click in the Patch Editor and select a Texture Transform

Connect the three patches. Your graph should look like this:

Adding the animation

To add the animation, start by creating the patches you'll need. Right-click in the Patch Editor and select:

  1. 2 Loop Animation patches.
  2. 2 Transition patches.
  3. A 2D Transform Pack.

For both Transition patches, use the dropdown list at the bottom of the patch to change the data type to Vector 2 - because we're working with 2D textures.

In the Loop Animation patchesyeh:

  1. Check the box next to Mirrored. This will create a smooth transition, as the animation will oscillate between 2 values rather than start from the beginning each time.
  2. Change the Duration of one patch to 2.5s and the other to 2s. We chose slightly different values so the effect looks less uniform and more interesting.

Connect the Progress output port in each Loop Animation patch to the Progress input in the Transition Patches, so your graph looks like this:

Connect the output of this Transition patch to the Scale input in the 2D Transform Pack patch. Making this connection will mean the particles will scale up and down in line with the values we set in the Transition patch.

To pass the information from the graph we've built to the texture, connect the 2D Transform output in the 2D Transform Pack to the Transform input in the Texture Transform patch. Your graph should look like this:

The Transition patches are where you'll add information to control how the animation moves.

For each Transition patch, change the Curve to Quadratic In-Out. This adjusts the timing of the movement the particles make - you could choose another option from the list.

The Transition patch at the top of the graph will set the oval motion the particles move in. Adjust the X and Y values, so the oval isn't too big:

  1. Next to Start, set X to -0.3 and Y to 0.15.
  2. Next to End, set X to 0.3 and Y to -0.15.

Connect the outputs of this Transition patch to the input in the 2D Transform Pack.

The second Transition patch will rescale the particles slightly as they move. In the second Transition patch:

  1. Next to Start, set X to 0.7 and Y to 0.6.
  2. Next to End, set X to 1 and Y to 0.95.

The final value you'll need to change is Pivot in the 2D Transform Pack. Set both X and Y to 0.5, so the particles pivot from the center.

You've now completed the effect!

Adding audio

To complete the ethereal atmosphere you'll add a sound that plays quietly on a continuous loop. We’ve already added the audio file you’ll need - it’s listed in the Assets panel as arl_mus_FloatingParticles_lp_03.m4a.

You’ll also add triggered audio, playing a pop sound each time the screen is tapped and the particles change.

Something Went Wrong
We're having trouble playing this video.

To customize this effect and make it your own, you can choose from a range of free, licensed sound effects in AR Library.

Add the speakers

To render sound in any effect, you’ll use an object called a speaker. This effect uses two speakers:

  • One speaker renders the looping sound.
  • The other speaker renders the triggered popping sound, known as a 'one-shot' sound.

Add both the speakers at the same time:

  1. Click Add Object.
  2. Select Speaker from the menu.
  3. Repeat this step, so there are 2 speaker objects listed in the Scene panel.

To help you keep track, rename the speakers:

  1. Right-click on Speaker0 in the Scene panel.
  2. Select Rename.
  3. Name it floatingParticlesLoopSpeaker.
  4. Right-click on Speaker01 in the Scene panel.
  5. Select Rename.
  6. Name it floatingParticlesRandomTapSpeaker.

Create and connect the patches

A network of patches will send a signal to the speaker object, playing the sound. Start by creating a patch for the speaker:

  1. In the Scene panel, select loopingAudioSpeaker.
  2. Go to the Inspector.
  3. Click the arrow to the left of Audio.

A yellow patch will be added to the Patch Editor:

The other patches you’ll use are the Single-Clip Controller, Pulse and Audio Player patches. The Pulse patch will send a signal to the other patches when the effect is opened, telling the background audio to start. The Single-Clip Controller and Audio Player will connect the audio file to the speaker.

To create these patches, right-click in the Patch Editor to open the menu. Select the following patches:

  1. Single-Clip Controller.
  2. Pulse.
  3. Audio Player.

You’ll also need a patch representing the audio file. To create this patch, select arl_mus_FloatingParticles_lp_03.m4a in the Assets panel and drag it into the Patch Editor.

Now connect the patches. Connect:

  1. The Turned On output of the Pulse patch to the **Loop** input in the Single-Clip Controller patch.
  2. The output of the Single-Clip Controlle patch to the Controller input in the Audio Player patch.
  3. The output of the Audio Player patch to the Audio input in the yellow patch representing the speaker.
  4. The output of the orange patch representing the audio clip to the Audio Clip input in the Audio Player patch.

Here’s how the graph will look:

Audio will be playing in your scene. You might need to click the Refresh button in the toolbar to hear it.

Because looping audio is generally used to provide atmosphere and subtle background noise, it’s a good idea to set volume to around 50% or less. Otherwise, it can be too distracting. To do this:

  1. In the Scene panel, select loopingAudioSpeaker.
  2. Go to the Inspector.
  3. Change the Volume property to 50%, using the slider.

Adding one-shot audio

The audio file you’ll need for the one-shot audio effect is listed in the Assets panel. It’s called arl_sfx_MouthPop_os_05.m4a.

You’ll make this audio file sound slightly different each time it’s played, using the Pitch Shifter and Random patches. The Pitch Shifter patch will change the pitch of the audio file each time it plays, with the Random patch randomizing how much the pitch is adjusted.

This technique adds variety, keeping the sound interesting for people using the effect. With audio it’s a good idea to add variation when you can, as audio experiences can get fatiguing quickly.

You’ll also create a sense of space around the sound with a Reverb patch, complementing the ethereal atmosphere. Adding the Reverb patch after the Pitch Shifter means the reverb effect will be applied consistently to the input instead of pitched up or down.

Create the patches

Like before, use an Audio Player patch to connect the audio clip. Instead of the Single-Clip Controller patch, use the Multi-Clip Controller. This allows us to play multiple one-shot sounds, overlapping when triggered in quick succession.

Using the menu in the Patch Editor, create a:

  1. Multi-Clip Controller and Audio Player patch.
  2. Pitch Shifter, Random and Reverb patch.

Like before, create:

  1. A patch representing the Audio properties of floatingParticlesRandomTapSpeaker.
  2. A patch representing the arl_sfx_MouthPop_os_05.m4a audio clip.

Connect the patches

Connect the:

  1. Output of the patch representing the arl_sfx_MouthPop_os_05.m4a audio clip to the Audio Clip port in the Audio Player patch.
  2. Output of the Audio Player patch to the Audio input in the Pitch Shifter patch.
  3. Output of the Pitch Shifter patch to the Audio input in the Reverb patch.
  4. Output of the Revebr patch to the Audio input in the yellow patch representing the speaker.

So far, this network of patches will change the pitch of the audio clip and add a sense of space around it.

To randomize output of the Pitch Shifter, add the Random patch to the graph by connecting its output to the Semi input in the Pitch Shifter patch. Here’s how your graph will look:

Now connect this section of the graph to the same trigger that causes the particles to change - the Screen Tap patch.

To do this, connect the Tap output of the Screen Tap patch to both the Play input in the Multi-Clip Controller patch and the Randomize input in the Random patch.

Here’s how the section of the graph will look with the Screen Tap patch connected:

Edit the patches

To complete the effect, make a couple of edits to the values in the Reverb patch. Set the:

  1. Mix value to 20, to adjust the amount of impact the reverb has on the sound
  2. Reflectivity High value to 25, to reduce the impact of high frequency sound content within the Reverb effect.

In the Random patch, set the upper limit for the randomization. We found a value of 2 works well, pitching up the sound playback by
semitones at most. Any more and the changes become too distracting.

Here’s how the final part of the graph will look:

Like before, set the volume of the speaker to 50%.

To test effect with and without audio effects applied, use the Bypass checkbox on the audio effect patches.

Was this article helpful?