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

Building Effects in Your Surroundings

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

In previous tutorials you've learned how to build effects with a variety of assets and objects. All of the objects in those effects were children of the Camera node in the Scene tab. As children of the Camera node, these objects were fixed to the camera view and they followed the movement of the mobile device. This means they were in 'camera space'.

You can also move objects from camera space to a fixed position elsewhere in your scene. This is 'world space'. Effects with objects in this space are referred to as world effects. Because the camera position is a major component in interacting with these effects, world effects only work on mobile devices that have a gyroscope.

In this tutorial, you'll learn about the Camera node and camera space, how to place objects into world space, and how to simulate and preview your world effects.

Please download the sample content to follow along.

If you open the project file in the sample content folder, you'll see that the effect we're going to build is a red planet.

The Camera Node and Camera Space

To get started, open 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.

Let's take a look at how camera space is represented in the Viewport. The small rectangle that 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

Everything outside of that area is world space. If you move objects into this 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. To do this, click the Viewport button and select 2 Views Stacked from the menu. Feel free to experiment with the views in the menu to find one that works for you. To make sure you have a clear view of the area you'll be working in, zoom out. You can do this 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. Once you've done that, open planet.dae from the sample content folder. You should now see the object listed in the Scene tab. If you look in the Viewport, you'll see that 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 major 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. At this point, 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. If you look in the Viewport, you should see that the position of the sphere has changed.

Switching to Back Camera

Typically, mobile devices have front and back cameras. With AR Studio you can simulate switching between the front and back cameras on a mobile device. To do this, you can either click to expand the Simulator, then click the camera toggle icon, or you can go to the Camera node in the Scene tab and click F or B (front or back). For this project, please click B. You'll learn more about this later. The sphere should now be visible again in the Simulator.

Transforming Objects

You edit the position and rotation of objects in world space in the same way that you edit them in camera space. To manipulate this sphere, select planet in the Scene tab and go to Transformations in the Inspector panel. It's possible to click on the object itself in the Viewport to edit the position, scale and rotation but we're going to use the x, y and z values in this panel. We have a fixed position in mind for this tutorial, but feel free to move it wherever you like. To move it, go to Position and change the X value to -13, the Y value to 38 and the Z value to -26. The sphere should now be positioned at the top of the Simulator.

To make the sphere look like a planet, it needs a material. To create one, go to Materials in the Inspector panel, click the arrow next to No material selected and select Create New Material from the menu. You should now see a default material, so double-click on it to open its properties. To add a texture to the material, go to Shader Properties and then Diffuse. Click the gray box next to Texture, select New Image Texture and choose dome_layerD_planetRed_01.png from the sample content folder. Your sphere should now look like a red planet.

Setting Camera-specific Visibility

By default, every object is set to dual camera visibility when it's inserted. You can tell this is the case 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. When you're building a scene, however, you might not want every scene object to be present in the back camera (a mask, for example). To pick which camera your objects are displayed in, you need to set camera-specific visibility. We want the planet to be displayed in the back camera only.

To do this, select planet in the Scene tab and go to the Inspector panel. 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 helps 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. To do this, 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 AR Studio Player app. Doing this will give you a realistic idea of what your effect will look like.

Congratulations, you've built a world effect.

Recap

To recap, in this tutorial you've learned about the Camera node and camera space. You've also learned how to place objects into world space and how to simulate and preview your world effects.