Everything you need to know to create an interactive augmented reality experience.
In this effect, when the camera detects a surface in the real world and the screen is tapped, a rotating gold hand will appear. You'll also see particles and hear a sound:
In this guide you'll learn about:
To build this effect yourself, open the unfinished effect in the sample content folder. We've imported the assets you need, to help you get started quickly.
First, add a plane tracker to your scene. Any objects that are children of a plane tracker will appear or respond when the camera detects a real-life surface. In this effect, all objects will be children of this plane tracker.
You'll use two null objects in this effect. One to manipulate the transformations of the hand and particles at the same time, and the other to add secondary animation.
To add the first null object:
You'll use placer to manipulate the position, scale and rotation of the hand and particles.
Now insert another null object, as a child of placer. Name it rotator. You'll use this null object to add secondary animation - making the hand spin.
In the Scene panel, the objects should be listed like this:
There are two 3D objects in this effect:
Both objects include an animation. The hand is animated to move upwards, and the portal is animated to open.
To add these objects to the scene:
Your project will look like this:
This effect uses layers to make sure objects lay over each other in the right order. It's a good idea to set them up now, so the effect appears to work correctly as you're building it.
In the Layers tab, click + twice, to add 2 more layers.
Rename the layers, to help keep track. Rename:
Move occlusion_layer to the bottom of the list, so your layers tab looks like this:
In the Scene panel, assign the objects to the layers. For this effect, only the mesh that make up the 3D objects should be assigned to new layers.
Expanding the 3D objects in the Scene panel will show the mesh. In the example below, portal is one of the mesh that makes up the origami_portal object:
Everything else in the scene will be assigned to layer0 by default. Keep them assigned to this layer.
At the moment, the portal object is visible. It should be invisible, but still hide the hand underneath it.
Achieve this effect by adjusting a material applied to the portal - so it becomes an occluder material. To do this:
You should now no longer see full object - just the outline of a hole:
In this effect you'll use the Patch Editor to add an animation. The hand will move up through the portal when the screen is tapped once. It'll move back down when the screen is tapped a second time.
The simplest way to animate an object is using an animation playback controller.
However, this effect uses the Animation Player patch instead. The Animation Player patch gives you more control over animations - in this effect, we'll use it to reverse the animation - so the hand goes back down again.
First, create patches to represent the animation property of the origami_hand and origami_portal objects:
Two patches will be created and the Patch Editor will open.
Next, create patches to represent the animations in each object:
Right-click in the Patch Editor to open the menu. Select:
In the Transition patch:
The first section of the graph will create a switch, to turn the animation on or off when the screen is tapped. Connect:
Here's how the graph will look:
To join this part of the graph to the Animation, Transition and Animation Player patches, connect:
Your graph should look like this:
To finish up, connect the animations to the graph. Connect:
In the Animation patch, change the duration to 3 - to slow the animation down.
This section of the graph should look like this:
Command-click in the Simulator to simulate touch and see how the animation looks.
This effect uses a physically-based material to give the hand a realistic appearance.
Physically-based materials allow you to add multiple textures. You can then change the properties of the material to make it look more or less metallic or rough and adjust occlusion strength. You can also add realistic lighting using environment textures.
First, create a new material for the hand:
To edit the material, select origami_hand_mat in the Assets tab. All the changes you'll need to make can be made in the Inspector.
Start by changing the Color and Shader Type:
The hand will have a dull, yellow appearance:
Environment textures simulate the lighting in a real place - like a beach or a park. There are several included in Spark AR Studio.
In the Inspector:
The hand will now have some light and shadow:
Use an ORM texture to control how metallic or rough an object looks and its occlusion strength.
Apply origami_hand_mat_OcclusionRoughnessMetallic next to ORM Texture. The appearance of the hand won't have changed yet - we'll use the sliders to do this.
Under Surface Parameters, set:
The hand will now have a metallic appearance:
The final step is to add a normal map. This will add a bumpy look to the surface of the hand:
To add a little more pop, select the Ambient Light in the Scene panel. In the Inspector increase the Brightness to 100%.
The finished material should look like this:
In the finished effec, a particle system causes small yellow particles to emit from the portal, alongside the hand. In the Scene panel:
Because the particle system is also the child of the plane tracker it'll appear when a real surface is detected.
We'll use Spark AR Studio to add a material and color to the particles - you don't need any custom textures.
First, create a material for the particle system:
To add a color to the material:
Here's how the particles will look at this stage:
Next, make some changes to the particles themselves. Scroll down to Particle in the Inspector. Change:
This effect uses the Patch Editor to control the Birthrate property of the particle system based on the screen tap interaction. As a result, the particles appear when the portal opens.
Here's how the section of the graph will look:
The particle system should now be visible, but only one particle is emitting. You can scale the birthrate to a higher value using the second value of the Multiply patch. By setting this value to 20, the Birthrate will go back up to the same level as before.
This effect uses patches an audio playback controller to play a sound when the hand appears.
The audio clip has already been imported into the project - it's listed in the Assets panel as hand_reveal.m4a.
To render sound in the scene, first add a Speaker:
It'll be listed in the Scene panel as speaker0.
To create the playback controller:
Select speaker0. In the Inspector:
Use the Play property in the playback controller to make the sound play based on a trigger:
Use the Pulse patch you created earlier to make the sound play when the hand appears. You'll also need to add a Delay patch. The values you'll set in the Delay patch will mean the sound plays at about the time the animation completes:
Here's how the section of the graph will look:
In the finished effect, the hand rotates continually.
The rotation property of the hand is already controlled by its animation.
To add an additional animation we'll use the null object you added earlier. By making the hand a child of the null object, you can adjust the rotation property of the null object - instead of the object itself.
To create the patches, select rotator in the Scene panel:
Set the Duration in Loop Animation to 3.
Your graph should look like this:
And your effect should look like this:
This effect uses interaction patches to change the scale, position and rotation of the hand and particles.
Find out more about adding interaction to your effects:
We've added some instructions, to help people interact with this effect:
Because the effect includes a plane tracker we've added an instruction telling the user to flip the camera - if they're using the front camera. Once the user is looking through the back camera they'll see an instruction saying 'Tap'.
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community