How to use Particles to enhance your AR app using ARKit & React Native
Particles can enhance your AR app in a variety of ways. They can add realism to objects you place in the real world. Or they can make them more dynamic and fun. This post will show you examples of how particles can enhance your AR app using the Viro AR platform with ARKit and React Native.
- If this is your first time as a Viro developer, use our Quick Start guide to get setup with Viro before continuing with this tutorial. Viro is free and easy to set up!
- If this is your first time developing an AR project, consider starting with our intro tutorial -> How to build an interactive AR app in 5 mins w/ React Native & Viro AR.
This tutorial is a step by step guide for using particles to enhance an AR application. Our goal by the end of this tutorial is to:
- Add a flame to a candle on a birthday cake
- Add smoke effects to an emoji
- Create a fireball emoji
PREREQUISITES
- OSX computer
- iOS Device with A9 chip or higher and running iOS 11
- Viro AR -> Quick Start guide for setting up Viro
- Assets for this tutorial (DOWNLOAD) -> click on link to download assets, unzip the file and replace the
resfolder at<path_to>/ViroSample/js/.
Adding a flame to an object
Create a new folder <path_to>/ViroSample/js/Particles and a new JS file <path_to>/ViroSample/js/Particles/MainScene.js in that folder. Open MainScene.js and copy and paste the code below. (We will explain what we are doing with the code afterwards.)
Save your file and reload your testbed app. (Make sure line 33 in your App.js file is pointing to the MainScene.js file as shown below.)
var InitialARScene = require(‘./js/Snapchat/MainScene.js’);You should see a birthday cake with a lit candle in front of you.
We add the birthday cake 3D model by adding a Viro3DObjects into our AR Scene (lines 35–37). We are using an FBX model that was converted into VRX format. (To learn more about 3D Models and VRX, read the 3D Objects guide in our documentation.)
We wrap the cake in a ViroNode (line 34 and 85) and place the node at position [0,-.5,-1] and scale [.5,.5,.5] the object, so it appears correctly in our scene. In order to enable dragging of the cake in the real world, we add dragType=”FixedtoWorld" onDrag={()=>{}} to our ViroNode
We create our flame by adding a ViroParticleEmitter to our scene (lines 41–83). Viro’s particle system enables developers to create and configure quad emitters for building complex and intricate particle effects.
A particle system is a technique in game physics, motion graphics, and computer graphics that uses a large number of very small sprites, 3D models, or other graphic objects to simulate certain kinds of “fuzzy” phenomena, which are otherwise very hard to reproduce with conventional rendering techniques — usually highly chaotic systems, natural phenomena, or processes caused by chemical reactions. — Wikipedia
ViroParticleEmitter are particle factories that create, contain and recycle a pool of particles. Let’s look more closely at our ViroParticleEmitter code and see what is happening. In this case, there are five steps to creating our particle effect:
- Provide an image source (particle_fire.png) representing the particles to emit (lines 48–53).
- Set basic emitter properties (lines 42–46) such as duration, loop and visibility.
- Set the spawn behavior of the emitter (lines 55–59). This determines how fast particles are emitted, how long they live, and the total number of particles that can be emitted at one time.
- Modify the particle appearance (lines 61–78). Because particles are emitted over time, by changing their appearance (i.e. opacity, scale, color) you can create different effects. For instance, we want our flame to have a tapered top so we scale our particles to 0 at the end of their lifetime.
- Set the movement of the particles (lines 80–82). For our flame, we want our particles to move upwards so we add velocity in the positive y direction.
For the sake of this tutorial, we will not deep dive into all the parameters and functionality of particles. Feel free to play around with the values in your code to see how they affect the flame. This is a good way to understand the different levers for particle systems. (Note: if you are using the Testbed app and your particles do not appear on reload, try restarting the app.)
To learn more about particles, read the Particle Effects guide in our documentation. We have included samples in Github for creating Fireworks, Flame, Smoke and Snow. There are many more effects you can make with the Viro particle system.
We place our flame in a ViroNode (line 40 and 84). For some particle effects, like a flame, it is easier to set the values of the emitter to get the correct look and then use a ViroNode for positioning and scaling.
Try dragging the cake around with your finger. You can see the flame lags behind as it would in the real world. (We have exaggerated this effect in our example so you can see the lag more clearly. Try adjusting some particle emitter values to shorten the length of the flame when dragging.)
Note: Don’t forget to add lighting to your scene (lines 31–32). Lighting is required to make objects visible. (Read our guide on Lighting and Materials to learn more about how lighting can enhance your scene.)
Adding smoke to an object
In the example above, we saw how particles can add realism to objects in AR. They can also make objects more dynamic and fun. Copy the code below and paste it in your MainScene.js, replacing the existing code. (We will explain what we are doing with the code afterwards.)
Save your file and reload the testbed app. You should now see an angry emoji with smoke coming out of its ears.
This example is similar to our cake and flame scene from before. We add our angry emoji by adding a Viro3DObjects into our AR Scene (lines 35–42). This 3D object has an animation, so we enable that in line 41.
For the smoke effect, we are using multiple emitters to push smoke out of each ear. Groups of particle emitters can be used in conjunction with one another to create a composite effect. For example, a campfire may include a flame emitter, a smoke emitter, and an ember or sparks emitter.
We are using the same basic particle effect for each ear, but change the position (line 44 and 87) and velocity (line 81 and 124) of each, so that smoke emerges from both sides and in the correct direction.
Try changing the values for the particle emitters to see if you can:
- Increase the length of the smoke coming out of the ears
- Make the smoke thicker or thinner in appearance
- Have the smoke tail upwards at the end
Create an emoji fireball
With the knowledge and code you now have from the two examples above, try to create an emoji fireball.
Next Steps
That’s it! Share your emoji fireball’s with us on Facebook, Twitter and Instagram. Keep play around with the particle emitter values to better understand how particle systems work.
Our next tutorial will cover, Particles Part 2: Environmental Effects. We will show you how to add fog, snow, fireworks and more to the real world with AR. Also, if you haven’t yet, check out our other tutorials to learn how to build more great AR apps:
