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 your scene.

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.

First, open a new project in Spark AR Studio.

Building and visualizing effects

Let's start by taking a look at the Scene panel. This is where you'll add the objects that will make up your effect.

There are already 2 objects here - an ambient light and a directional light. These give 3D effects realistic lighting. You can remove them for effects with 2D objects.

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.

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

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

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

For now:

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

So now you can see the object itself - origami_diamond, and the materials and textures that are included in the object, all 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. The object will appeared 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.
  • 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. 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.

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.

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.

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.

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 a light pink.

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

You'll see a summary of the file size. 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 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:

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.

Read FAQs
Was this document helpful?