|

Svrf API and SDK - Face Filters & 360 Photos and Videos

How to build a 3D face filter app for Unity and ARCore

| Featured, Tutorials

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:

Building the interface

Setting up the Unity project

Unity Hub window for creating new Unity project
New project creation with the Unity Hub

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.

Unity Build Settings window with selected Android platform
Build Settings window

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.

Android package options
Identification section should look like this

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”.

XR Settings section with enabled "ARCore Supported" checkbox
Select ARCore support

Open the XR Settings section and check ARCore Supported checkbox.

Adding the Event System

Adding Event System through the context menu
Add UI Elements

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.

Game objects structure: Panel inside Canvas; InputField and ScrollView inside Panel; Viewport and Scrollbar Horizontal inside Scroll View
UI game objects structure

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.

Setting Canvas alpha color to 0
Making the Canvas transparent

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.

Input Field Rect Transform: top-stretch; Left 50; Pos Y -130; Pos Z 0; Right 50; Height 150
Input Field settings

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.

Placeholder settings with "Search filters" text; Font Size 54; central alignment
Placeholder settings

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”.

Scroll View settings with bottom-stretch; Left 0; Pos Y 175; Pos Z 0; Right 0; Height 350; Vertical Scroll Rect disabled
Scroll View settings

Now, we’ll move the Scroll View into position. Open the Scroll View and copy the transform settings shown above.

Content settings with top-left; Pos X 0; Pos Y 0; Pos Z 0; Width 1080; Height 350
Content Settings

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.

Application screen with the Input Field and the Scroll View

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!

Next