Face filters are all the rage with Gen-Z. In fact, face filters are responsible for increasing Snapchat’s DAU by 6-7 million users in Q2 of 2019. With so many teens flocking to use filters, it’s only a matter of time before we start to see more apps including them as a feature.
Create your own face filter app with Unity and ARCore.
In this tutorial, we’ll create a Android app that lets users search for a face filter and try it on using ARCore. ARCore is Google’s AR tracking software that allows you to track a user’s face and place 3D AR objects on it.
To power our search and face filters, we’ll use the Svrf API. Svrf is the first search engine for AR and VR content, and provides the 3D face filters we’ll need to create an experience. Without Svrf, we’d have to create our own 3D models, which is a lot of work. Svrf has removed this layer of work for us and has even licensed content from major brands like Nicki Minaj and Katy Perry that we can include in our app.
What we will cover:
- Create a search interface with a search bar and results.
- Installing and setup the Svrf SDK for Unity plugin.
- Search and load face filters with the Svrf SDK.
- Install the Google ARCore SDK.
- Setup face tracking with ARCore.
- Apply Svrf filters to your face.
You will need:
- Unity 2017.4.26f1 or later with Android Build Support selected during installation.
- The Svrf SDK for Unity plugin and Svrf API Key.
- An ARCore supported Android phone.
- A USB cable to connect your phone to your development machine.
- ARCore SDK for Unity 1.10.0 or later.
- Android SDK 7.0 (API Level 24) or later, installed using the SDK Manager in Android Studio.
Building the interface
Setting up the Unity project
First, let’s open Unity and create an empty Unity project. Here I’ve named the project svrf-unity-example and selected the 3D template. Now click the Create project button.
Since we are building an Android app, we’ll adjust the Build Settings to support Android devices. Go to File > Build Settings and select Android from the platforms list. Then click Switch Platform.
Now, click on the Player Settings. Open the Other Settings section and set Minimum API Level to the version that you have on your computer. You can also modify the Package Name. Here we’ve set it to “com.svrf.example”.
Open the XR Settings section and check ARCore Supported checkbox.
Adding the Event System
Right click on the Hierarchy window and select UI > Event System.
This is required for handling user input events. We just need to add it.
Setting up the UI elements
The first thing we’ll set up are some basic UI elements. Let’s start by creating a search input so users can query for a face filter.
Right click on the Hierarchy window and select UI > Canvas. This will add a Canvas element in your Hierarchy window. Next, we’ll add UI elements to the app’s Canvas.
- Right click on the Canvas and add a Panel.
- Then, right click on the Panel and add an Input Field.
- Again, right click on Panel, but this time add a Scroll View.
Users will use the Input Field to enter a search query for finding a face filter, while the Scroll View will show the search results.
Once we add these components, they will be listed under the the same Panel in the UI menu. Next, we’ll remove the Scrollbar Vertical child of the Scroll View. Select and delete it since we will not be using it. Now, we should have a game objects structure that looks like the image above.
Open the Panel in the inspector and set its alpha color (A) value to 0 so it won’t overlap the loaded 3D face filter model.
Now we are going to position the Input Field. Open the Input Field in the inspector and select stretch-top alignment first. Then, enter the positional values shown in the image above. This will place the search input at the top of the screen.
We can now customize the Text in the Input Field. Open the Placeholder and adjust its font size and alignment. Also you can change its default text. Here we’ve set the default text to “Search filters”.
Now, we’ll move the Scroll View into position. Open the Scroll View and copy the transform settings shown above.
We also need to position the Content inside the Scroll View. Open the Content settings which can be found nested under Scroll View > Viewport. Copy the transform values shown above.
Now that we’ve got our basic UI elements setup, let’s launch the application for the first time. You should see something like this. The top input will be used for searching for face filters. The bottom scroll view will contain previews of the search results.
This looks like it needs something more exciting. In the next part, we’ll add face filters from the Svrf API. Click to the next page to see how it’s done!