There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Building Effects in Your Surroundings

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

If you've followed our other tutorials, you'll have built effects in 'camera space'. This means objects are children of the Camera node in the Scene tab, so they're fixed to the camera view and follow the movement of the device.

You can move objects from camera space to a position elsewhere in your scene - this is called 'world space'. Effects with objects in this space are called world effects. World effects only work on mobile devices that have a gyroscope - because the camera position is a major component in interacting with these effects.

In this tutorial, you'll learn about:

  1. The Camera node and camera space.
  2. How to place objects into world space.
  3. How to simulate and preview world effects.

Download the sample content to follow along. If you open the finished effect, you'll see the effect we're going to build is a red planet.

The Camera Node and Camera Space

To get started, open Spark AR Studio and create a new project.

If you look at the Scene tab, you'll see the Camera node. By default, every object you insert becomes a child of this node. They're automatically placed in camera space. There's always one Camera node in every scene. It can't be removed and you can't add another one. This is how you determine which objects are in camera space.

In the Viewport, the small rectangle you can see represents the mobile device. The large rectangle that's drawn on the video is what the mobile device can see. You can keep an eye on what's shown in the camera by checking the Simulator.

World Space

If you move objects into world space they'll be shown in the viewer's surroundings - they won't be fixed to the camera view.

It's easier to work with objects in world space if you add more views to the Viewport. Click the Viewport button and select 2 Views Stacked from the menu. To make sure you have a clear view of the area you'll be working in, zoom out by moving two fingers over your trackpad or by using your mouse wheel.

The first thing you're going to do is insert a sphere into your scene, so click Insert, select 3D Object and then click Insert. Open planet.dae from the sample content folder.

The object will be listed in the Scene tab. If you look in the Viewport, you'll see that Spark AR Studio has inserted it in camera space, at a fixed distance from the point of origin. This is because of the Focal Distance node. The sphere should be the largest thing you can see in the Simulator.

To place this object into world space, you'll need to move it so that it's no longer a child of the Camera node. To do this, select it in the Scene tab, drag it to the bottom and let go. You should be able to collapse the Camera node by clicking the arrow next to it, and still see the object in the Scene tab.

Switching to Back Camera

Typically, mobile devices have front and back cameras. You can simulate switching between the front and back cameras on a mobile device by either:

  1. Clicking to expand the Simulator, then clicking the camera toggle icon.
  2. Going to the Camera node in the Scene tab and clicking For B (front or back).

For this project, click B. You may need to zoom out at this point.

Transforming Objects

The position and rotation of objects in world space can be edited in the same way you'd edit them in camera space.

To manipulate the sphere, select planet in the Scene tab and go to Transformations in the Inspector panel. You can also click on the object in the Viewport to edit the position, scale and rotation but we're going to use the x, y and z values.

We have a fixed position in mind for this tutorial, but you can move it wherever you like. To move it, go to Position and change the X value to 11, the Y value to 38 and the Z value to 158. The sphere should now be positioned at the top of the Simulator.

To make the sphere look like a planet, it needs a material. In the Inspector panel:

  1. Go to Materials, click the arrow next to No material selected.
  2. Select Create New Material, then double-click the default material to open its properties.
  3. Click Shader Properties and then Diffuse.
  4. Click the gray box next to Texture, select New Image Texture and choose dome_layerD_planetRed_01.png from the sample content folder.

The sphere should now look like a red planet.

Setting Camera-specific Visibility

Every object is set to dual camera visibility when it's inserted. You can check this by viewing the object's properties in the Inspector panel - you should see that both the Front Camera and the Back Camera boxes are checked below Enable For for planet.

If you don't want want every scene object to be present in the back camera (masks, for example), you can pick which camera your objects are displayed in by setting camera-specific visibility.

In this tutorial, set the planet to be displayed in the back camera only. To do this:

  1. Select planet in the Scene tab and go to the Inspector panel.
  2. Below Enable For, uncheck the Front Camera box, and leave Back Camera as it is.

If you edit the default camera-specific visibility settings, you'll see an icon of a video camera with a line through it next to the object in the Scene tab . This will help you understand which objects will show up in your scene when you rotate the camera view from front to back and vice versa.

Previewing World Space

You can use the Simulator to simulate moving a device. Click the gear icon to check that Simulate Orbit mode is enabled. Then, click and drag the screen inside the Simulator to simulate rotating the camera.

To preview the effect on a real mobile device, use the Spark AR Player app. Doing this will give you a realistic idea of what your effect will look like.