Finding Your Way Around Spark AR Studio

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.

Something Went Wrong
We're having trouble playing this video.

We'll talk about:

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:

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

There are already several objects listed here:

  • ambientLight0 and directionalL0 are lights. They give 3D effects realistic lighting. You can remove them for effects with 2D objects.
  • 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.
  • 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 opitions you'll see a list of objects available in Spark AR Studio:

Use these to make all different kinds of AR effects. For example:

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:

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 the plane tracker can only be viewed through in the back camera in a 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:

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 at the bottom of the Scene panel.

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. You'll see a few options:

You can use options in this list to create materials, scripts and playback controllers for playing animation and audio in your effects.

To add a 3D object:

  1. In the Assets panel, 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:

  • The 3D object itself - origami_diamond.
  • the material and texture that are included in the object - diamond_mat and Texture 0:

To place 3D 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:

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:

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:

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

  • Change which layer it's on, using the Layer option.
  • Adjust whether it's visible in the effect or not by checking or unchecking the box next to Visible.
  • Change its position, scale and rotation using the options under Transformations.
  • Apply a material to the mesh, or create a new one using the options under Materials.

The options you'll see in the Inspector will depend on the object or asset selected in the Scene panel. 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:

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.

Change the scale

Let's change the Scale. This is the third manipulator icon. 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:

Change the position

Next try bringing the object a bit closer to the camera:

  1. Select the Position manipulator.
  2. 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 to effects with a plane tracker.

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:

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.

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. I'm going to go with pink:

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

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

Opening the Patch Editor and Console

Use the Workspace button at the top of the toolbar to open the scripting console:

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 the Test on Device button and select Send To Connected Device:

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 Upload button at button in the toolbar to export it:

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

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 our review policies and guidelines.

The review process usually takes a couple of days, but can take up to a week - excluding weekends.

Learn more

You've completed a quick tour of the Spark AR Studio interface! If you're ready to learn more: