Skip to main content
Version: 5.x
Lens Studio
Building Your First Lens

Using Built-in AR Effects

This is the first tutorial in the Building Your First Lens series. This tutorial series walks through all of the steps for creating your first AR project (Lens) in Lens Studio. At the end of this series you will have recreated the Birthday Countdown sample project, learning all of the steps and pieces to create your own AR experiences.

This step of the tutorial focuses on working with some of Lens Studio's built-in Face Effects. You will learn the workflow for Lens Studio and how to leverage commonly used components to create a unique Lens.

Prerequisites

Section 1

Built-in AR Effects

Lens Studio allows you to build AR experiences quickly with no-code by providing a variety of commonly used components. Let’s take a look at some of these components to see how we can augment the user's face!

Step 1

In the top left of Lens Studio, you will find the Scene Hierarchy panel. The Scene Hierarchy panel contains everything that is in your Lens.

Click on the + button to add something to the scene. In this case add Face Stretch.

Tip: You can type “Face” in the search bar to find a wide variety of effects you can add to the face!

Double click the Face Stretch in the Scene Hierarchy panel if you don’t see the Editor.

Step 2

You should now see a Face Stretch Editor which allows you to quickly stretch a face by simply moving the dots around.

In the far right of Lens Studio you will see a Preview panel, that will preview this Lens on a video to help you test how your Lens look.

Tip: If you have a web camera, try clicking on the web camera icon in the Preview window to see the effect on yourself!

Step 3

Let's add another face effect to the Lens.

Go to the Scene Hierarchy panel, press the + button, and add Face Liquify.

As we did before, you can modify the effect in its respective editor. For example, we can position the effect's center and see how the face has changed in the Preview panel.

Step 4

Let’s review the Scene Hierarchy panel to see what’s in our Lens so far.

Notice how there is a hierarchy in our panel: objects are nested inside other objects. For example: the Face Stretch we’ve added is a child of Effects, which is a child of Camera Object

Each of these items in the Scene Hierachy is called a Scene Object. Every Lens is comprised of Scene Objects which each have a unique purpose.

Step 5

You can select Scene Objects by clicking on them in the Hierarchy panel. You can also toggle the checkmark next to the object to enable or disable the object.

Step 6

As you select objects, you will notice the Inspector panel changes to show values specific to the selected object

Each scene object can have Components inside it, which gives it some special behavior.

For example, when you select the Liquify Visual object, you can see that the object contains a Head Binding component, as well as a Liquify Visual component.

Step 7

Scene Objects can contain one or more components. You can modify the values in the component to alter the behavior of the component.

You’ll also notice that each object has a Transform component. The Transform component controls the position, rotation, and scale of our object in the scene.

Summary
Finish & Review

Summary

Lens Studio is composed of many panels:

  • Scene Hierarchy displays the names of objects in the Lens.
  • Preview Panel shows what the Lens looks like
  • Inspector shows the components and values of the selected object.

Scene Objects contain the foundational pieces of a Lens. Each Scene Object can contain one more Components, each adding a specific behavior

Was this page helpful?
Yes
No

AI-Powered Search