As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.
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.
We'll talk about:
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.
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:
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:
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:
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:
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:
To add a 3D object:
In the Assets panel you'll now see:
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:
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:
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.
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:
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:
Next try bringing the object a bit closer to the camera:
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.
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.
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.
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 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.
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.
The review process usually takes a couple of days, but can take up to a week - excluding weekends.