Finding Your Way Around the Interface

Welcome! In this guide you'll learn your way around the main areas of the Spark AR Studio interface.

You'll also import a 3D object and position it in the scene. You'll make the object appear when the back camera is pointed at a flat surface in the world, creating a simple world effect.

Download the sample content to follow along. The folder includes a 3D object that you'll use to try out the main parts of the interface.

AR effects made with Spark AR Studio can be used in the Facebook and Instagram cameras. To create a frame for a Facebook profile picture, use Frame Studio


Building and visualizing effects

To get started, open a new project in Spark AR Studio. First let's take a look at the Scene panel:

Spark AR Studio's interface, with the Scene panel highlighted.

This panel is where you'll add the objects that will make up your effect.

There are already objects here:

  1. An ambient light and a directional light. These give 3D effects realistic lighting. You can remove them for effects with 2D objects.
  2. The Device and Camera represent the device the effect is playing on, and the camera the effect is viewed through. They can't be removed.
  3. The Microphone captures sound detected by the device’s microphone and plays it back in the scene.

Next to the Scene panel is the Layers panel, where you can create and configure layers. Layers are used to place scene objects in front or behind each other.

Adding objects

You can add an object to your project in two ways. Either:

  1. Click the Add button in the Menu bar.
  2. Use the Add Object button at the bottom of the Scene panel.

When you click either of these you'll see a list of objects available in Spark AR Studio:

Spark Ar Studio's interface. The Add Object button has been clicked, and a face tracker has been added to the scene.

Use these to make all different kinds of effects. For example, the plane tracker will detect a real world surface like a table. The face tracker will detect the movement of someone's face.

If you're following along, insert a plane tracker:

  1. Click Add Object.
  2. Select Plane Tracker.

The plane tracker detects flat surfaces in the real world. Use it to place objects on surfaces like tables or the floor, so they're visible through the back camera. You'll see it's listed in the Scene panel, as planeTracker0:

Plane tracker 0 can be seen in the Scene panel.

You'll notice the video in the center of the interface has changed, too. This area is called the Viewport - it's where you can see your effect as you build it.

The video has changed because effects that include plane tracker can only be viewed through in the back camera in someone's mobile device. A blank video gives you a clearer view for building effects that work in the back camera.

You can change the video if you want:

  1. Click the video recorder symbol in the toolbar.
  2. Choose from a selection of preset videos, or view the effect on yourself by selecting your computer's camera:
The user is selecting their Simulator video.

Adding your own objects and assets

Next let's add a 3D object to the project. There are a few different ways to do this. Like with other objects, you can use the Add button in the menu bar, or the Add Object button.

You can also use the Add Assets button in the Assets panel. Using this option will add an object to your project, but not directly to the scene. Every object and asset that you add to a project will be listed here.

So, click Add Asset:

The Add Assets menu has been opened.

You'll see a few options - you can use this button to create materials, scripts and playback controllers for playing animation and audio in your effects.

To add a 3D Object:

  1. Select Import from Computer.
  2. Find the sample content folder on your computer, and select origami_diamond.fbx.

In the Assets panel you'll now see:

  1. The 3D object itself - origami_diamond.
  2. The material and texture that are included in the object - diamond_mat and Texture 0:
Assets listed in the Assets panel.

To place objects from the Assets panel into your scene, simply drag them into the Scene panel. This will create what's known as an instance of the object.

For this effect, we want the object to appear when the plane tracker detects a surface. This means the object needs to be a child of the plane tracker.

To create this relationship, drag the object directly onto planeTracker0 in the Scene panel:

An object being dragged into the Scene panel, where it becomes a child of the plane tracker.

The object will appear in the Viewport.

Because it's a child of the plane tracker, it's nested underneath planeTracker0 in the Scene panel, with a slight indent:

The nesting in the Scene panel is highlighted.

Editing objects and assets

When an object or asset is selected in the Scene panel or Assets panel, you can use the Inspector to make changes to its properties:

The Inspector, on the right of the screen, is highlighted.

For example, selecting the mesh that makes up the diamond will show options to:

  • Change which layer it's on.
  • Adjust whether it's visible in the effect, or not.
  • Change its position, scale and rotation.
  • Apply a material to the mesh, or create a new one.

The options you'll see in the Inspector will depend on the object or asset selected. A material, for example, has different properties.

Changing scale, rotation and position

At the moment the diamond is really small. Let's take a look at a quick way to experiment with its size - the manipulators.

The manipulators are at the top of the Viewport:

The manipulators are highlighted. They can be found at the top of the Viewport.

They're a super useful and quick way to experiment with a 3D object's:

  • Position - to move an object around.
  • Rotation - to rotate an object.
  • Scale - to make an object bigger or smaller.

Changing the scale

Let's change the Scale. When the scale manipulator is selected, just adjust the blue, red and green lines in the Viewport.

To make the object bigger, adjust the lines until the Scale is around 5 on the X, Y and Z axes. You'll see the scale changing in the Inspector as your do this:

A 3D object being scaled in the Viewport.

Changing the position

Try bringing the object a bit closer to the camera:

  • Select the Position manipulator.
  • Drag the blue arrow forward.

You'll see the Position values changing in the Inspector, too.

With plane tracking effects it's a good idea to give users the ability to move, resize and rotate objects using taps and swipes on the device screen. Learn more about adding touch gestures

Using the Simulator

Let's take a quick look at the Simulator. It represents a device's screen. Use it to preview how your effect will look on different device types:

The Spark AR Studio interface, with the Simulator highlighted.

You can click and drag the corner or side of the Simulator, to make it bigger.

To change the device type, click in the Simulator. Use the dropdown menu to choose a different device.

You also use the Simulator to switch between viewing your effect through the front or back camera, and change the rotation of the device.

By default, the Simulator is set to Simulator Orbit. This simulates what the camera can see. You can click and drag your mouse to move the camera and change the view.

Selecting Simulate Touch will simulate someone touching the screen of the device - useful for testing interactive effects.

Textures and materials

You'll use textures and materials to build the build the appearance of objects in your scene. The diamond object in our effect already has a material applied to it. It's listed in the Assets panel as diamond_mat. Select it to view its properties in the Inspector.

So let's take a quick look at how materials and textures work in Spark AR Studio.

You'll start with the Shader Type. There are several different Shader Types to choose from. Which one you'll use depends on the effect you're creating - you can find out more in our learning center.

For this object keep the Standard Shader. This shader is great for making 3D objects look realistic because of the way it mimics light on an object.

Let's change the color though. Click the square next to color, and pick an option from the color wheel. I'm going to go with pink:

A color is being applied to a 3D object's material.

There are other options you can experiment with. For example, to create a shiny effect, check the box next to Specular. Specular defines the shine and highlight color of a surface. Adjusting this can make an object more realistic:

The Spark AR Studio interface, with a materials specular value highlighted.

The effect is a bit strong, so use the slider to adjust it. I think about 30% works well.

Opening the Patch Editor and Console

Use the button at the top of the toolbar to open the scripting console: A closeup of the show and hide patch editor and console controls. The console will appear automatically when a script is running.

You can also use this button to open the Patch Editor. The Patch Editor is the Spark AR Studio visual programming environment. Use it to add interactivity, logic and animation to your effects, without needing to know JavaScript. You can also use it to create textures, and make complex changes to materials.

Previewing effects

You can easily preview effects made in Spark AR Studio.

To see an effect on a device and find out how it's performing, use the Spark AR Player app. It's available on the app store and play store. When you've connected a device to your computer with a USB cable, you'll be able to click this button and select Send To Connected Device:

The preview effect UI.

You'll see the effect working in the Spark AR Player app.

Or, select the Send to App option to quickly preview how your effect would look in the Facebook Camera.

Exporting effects

When you're happy with your finished effect click the Publish button at button in the toolbar to export it and begin the publishing process in Spark AR Hub:

The Publish button, next to the Assets panel.

You'll see a summary of the file size and options to either Publish a new effect or Update existing effect:

The publishing summary UI.

Spark AR Studio will let you know if the effect is too big. It's worth reading up on our file size limits before you start building.

Before exporting, it's a good idea to experiment with different compression settings for textures. This will help keep the size of your effect as small as possible.

Once you've exported your effect you can submit your file to the Spark AR Hub, to be published and shared. It'll be reviewed to make sure it meets Spark AR Policies.

The estimated time to review effects is 5 days. See our tips to make sure your effects are accepted.

Was this tutorial helpful?