One of the most popular AR features are Snapchat Lenses. From dancing hotdogs to Jeff Koon’s artwork, Snapchat has delivered some of the most compelling and shared AR experiences. This article will show you how to add SnapChat-like AR Lenses to any app using Viro AR 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! Also, consider starting with our first tutorial which covers some basics of AR -> How to build an interactive AR app in 5 mins w/ React Native & Viro AR.**

This tutorial is a step by step guide for adding AR features like animated characters and effects into any app. Our goal by the end of this tutorial is to:

Add an animated 3D character (Ice Cream Man) to the scene Add a shadow to the character to give it depth and realism Add a particle effect to the scene Add a filter to the scene

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 res folder at <path_to>/ViroSample/js/ .

Adding animated characters

Create a new folder <path_to>/ViroSample/js/Snapchat and a new JS file <path_to>/ViroSample/js/Snapchat/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 dancing Ice Cream Man in front of you. Tap on the character to pause the animation and drag the character around to re-position.

Dancing Ice Cream Man

We add the dancing Ice Cream Man by adding a Viro3DObjects into our AR Scene (lines 34–47). 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 position [0,-1,-2] and scale [.5,.5,.5] the object so it appears correctly in our scene. In order to enable dragging of the character in the real world, we added (line 42):

dragType="FixedDistance" onDrag={()=>{}}>

FBX models can contain animations. In the Ice Cream Man model, the dancing animation is named “02”. To enable the animation, we added (line 44):

animation={{name:"02", run:this.state.runAnimation, loop:true,}}

To make the animation pause and unpause on tap, we added an onClick event (line 43). We set the initial run state of the animation to be true (line 24). We then set the change in state of the onClick (lines 51–56). So, we play the animation to start ( getInitialState ), when the character is tapped ( onClick ), we set the run flag to the opposite of its current state (toggles between true and false for each tap).

Note: Don’t forget to add lighting to your scene as we did in 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.)

Note 2: The Ice Cream Man model was included in the res file you downloaded at the start of this tutorial. To try other 3D Objects, check out the Free Assets section of our documentation.

Adding a shadow to your character

Shadows add depth and realism to 3D objects. They help visually anchor character in the real world and make them seem more life like. Let’s add a shadow to our dancing Ice Cream Man. 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 the dancing Ice Cream Man with a shadow. Notice how the shadow grounds the character in the real world. Shadows are created in real time with Viro, so the shadow matches the movements of the character. Drag the object around and the shadow will move with the character.

Dancing Ice Cream Man with Shadow

Viro renders shadows through shadow mapping, a technique where the silhouettes of objects are rendered to an image, and that image is then reprojected onto the screen. Shadows are particularly important for AR, in that they provide a visual cue about what real-world surface a virtual object is resting on. However, because casting shadows involves re-rendering the scene multiple times, they do incur a performance cost.

First we add a ViroSpotlight (lines 35–46) into our scene. (For this tutorial we will not dive into the multitude of parameters that can be tuned for shadow maps. Read more about Shadows in our documentation.)

After adding our shadow casting spotlight, we add a ViroSurface for displaying the shadow (lines 60–65). The ViroSurface will have no "virtual" appearance; it simply designates a real-world surface on which virtual shadows should be rendered. The spotlight will cast a shadow of the Viro3DObject onto this surface.

We place our Viro3DObject , ViroSpotlight and ViroSurface in a ViroNode (line 34 and 66) and we move dragType from Viro3DObject to ViroNode . We also change the position of the Viro3DObject as it is now positioned relative to the ViroNode . Now when we move the character, the shadow moves with it.

Adding a particle effect to the scene

Another popular AR feature seen in Snapchat are Effects. There are a variety of effects that can make either change the environment or augment the existing scene. Let’s add snow to our scene using the Viro particle system. Copy and paste the code below into your MainScene.js file, below </ViroNode> .

Save your file and reload the testbed app. You should now see snow in your scene along with the dancing Ice Cream Man. Notice how the snow is not “on the glass” but is a true 3D effect. Move around your space and you can walk through the snow storm.

Dancing Ice Cream Man With Snow

We have included samples in Github for Fireworks, Flame, Smoke and Snow. But there are many more effects you can make with our particle system. Try playing with some of the values in the particle code and see how it affects your snow. (Read more about Particle Effects in our documentation)

Adding a filter to the scene

Lastly, let’s add a simple filter to our scene. Copy the code below and replace line 31:

<ViroARScene postProcessEffects={["pincushiondistortion"]}>

Save your file and reload the testbed app. You should now see your scene warped by a pin cushion filter.

Dancing Ice Cream Man with Filter

Post processing effects or filters can be added as a property to ViroARScene . The list of post-processing effects Viro offers can be found in our documentation -> Post Processing Effects. More filters coming soon, let us know if you want any specific one supported.

Next Steps

That’s it! You can now add Snapchat AR Lenses into any app. Keep building your scene by adding more characters and objects. Play around with the shadow values to find the right balance between quality and performance. Use the sample code for other particle effects and add them to your scene. To create a complete app, check out the following resources: