Spark AR: Particle System Masterclass
Learn hands-on about Spark AR Particle System
Spark AR has opened up Augmented Reality to a wide segment of creators from designers to developers. Launched in August 2019, Spark AR enables anyone to create AR effects using a minimal amount of coding, and these effects can be rolled out in the form of Instagram and Facebook Filters. The easy-to-use templates and asset libraries, to advanced customizations and controls, Spark AR Studio has all of the features and capabilities you need.
Another interesting thing about Spark AR is: it offers two ways to add interactivity to the effects i.e. using the patch editor or using the scripts. Throughout this tutorial, we would be using Patch Editor to demonstrate Spark AR particle system.
Particle Systems let us display and move a large number of objects called particles. We can apply basic physics like force and gravity to these particles. We can use particle systems to produce all kinds of visual experiences like rain, confetti, smoke etc.
Let’s Begin
Open Spark AR Studio and click on New Project (“+” sign) on the left bar and select Blank Project. It would take about half a min for your project to initialize and load in the window like in the image given below.
After the project is loaded, click on the +Add Object button located at the bottom of the Scene area in left, and select Plane Tracker and click Insert. We require the Plane Tracker to detect the planes on which we would be executing our particle system effect.
Now we would like to add yet another object i.e. Particle System under the Camera object. For that, we would select Device in the Scene Panel and click on the +Add Object button again and select Particle System. We can now see the emitter0 object.
Let’s play with the emitter0 object in the emulator provided. We select the Simulate Orbit option from the Emulator Settings and try to move our emulator device in the environment by dragging the mouse over it. We can observe the stream of particles moving with our emulator, this due to the fact our emitter0 object is a child of the Camera object.
To get a hang of the properties of the Particle System, select the emitter0 object from the Scene area and head over to attributes section on the right. Here we observe the following properties:
- Birthrate: It controls how many particles are emitted per second. It is set to 20 per second by default. The percentage option allows us to make the particle generation variable. We set the Birthrate to 40.
- Spray angle: The emitter angle can be changed using the x, y and z values and the volume of emission along these axis’ can be changed by changing the values in the adjacent boxes. We set all the values of Spray angle to 0.
- Speed: Changing the speed at which the particles move at. We set the speed values for our effect at 0.3 and 40%.
- Shape: To change the shape of the particles emitted, it can be set to Plane, Cube, Sphere, Torus, Cylinder, Star and Triangle-based Pyramid. We want our particle to be a Sphere of Radius value 1.
Inside the Particle panel, we see the following properties:
- Scale: To change the size of the particles. We set the scale values at 0.025 and 0%.
- Lifespan: It controls how long the particle would appear in the effect. It is set at 400 sec and 0%.
- Billboarding: To set or remove animations. It is left unchecked for our effect.
Adding User Interaction
We would be adding interaction between the Particle System and the user by using the Patch Editor. To open it select View in the menu bar at the top and then click on Show/Hide Patch Editor option.
Now we will delete all previous patches from the Patch Editor and after clicking on Add Patch enter Screen Long Press and add it. Similarly we will add the If Then Else patch to the editor. We also select emitter0 in the Scene and click on the arrow located before the Birthrate property in the Attributes section, to control it using user interaction.
Connecting the Patches
Before connecting the patches set the Birthrate property of emitter0 in the attributes section to 0. We will change it using interaction logic.
Finally, let’s connect the State output of Screen Long Press Patch to the Condition Input of If Then Else patch as we want to change the effect on Screen Long Press State which turns on whenever a long press is detected.
And then we set the Then parameter of If Then Else patch to 40, and connect the output to Birthrate input of the emitter0 Birthrate patches respectively.
Modifying the Material Properties
We can also add a material to the particles by clicking + next to the Materials section in the emitter0 attributes panel. This would create and add materials to the particle system.
We will select this material from the Assets section on the left, and try to modify some of its attributes. Keep the Shader Type to Standard, and set the Color property to Green. You can modify as many properties of the shader as you like, to change the appearance of the particles from metallic to rubbery.
Testing the Effect
To test out the effect you made, connect your mobile device to the PC, and open the Spark AR Player in your mobile device. Then click on Test on Device option located on the bottom of the left Toolbar as shown in the picture. Then you can select the Send to Connected Device option.
We can see in the picture above, that we are able to initialize particles system on long press and able to generate on detecting a plane. The stream of particles has been customised to suit our preferences. More interesting effects can be created using the same.
Do remember the Sky is not the limit, Imagination is!
Wow! We made our first effect using Spark AR Particle System and got to know about in detail in minutes.👏😉
Feel free to check out the Github Repository for any help you require with the project or you want to clone the source project. Keep following me for upcoming tutorials on Spark AR, Happy Learning!
