Sample Effect: Thumbs Up

Learn to create the Thumbs Up effect.

This effect is one of our featured templates. You can find it by opening Spark AR Studio and selecting Samples, or by downloading the sample content. You can adapt any of the assets in this effect in your own projects.



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:

  1. Plane tracking - which uses the camera to detect real-life surfaces.
  2. Using null objects.
  3. Adding and editing 3D objects
  4. Adding animation - so the hand appears when the screen is tapped.
  5. Applying a physically-based material - to create the realistic gold effect.
  6. Adding and editing particle systems.
  7. Adding sound.
  8. Adding secondary animation.
  9. Using screen interactions, to make the hand rescale, rotate and move based on taps or swipes.

If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.

Using the Plane Tracker to Detect a Surface

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.

Using Null Objects

At this point, it's a good idea to add the null objects to your effect.

To do this:

  1. Right-click on the plane tracker in the Scene tab.
  2. Select Insert, then Null Object.
  3. Rename the null object, to help you keep track. We named it placer.

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 tab, the objects should be listed like this:

Adding and Editing the 3D Objects

There are two 3D objects in this effect:

  1. origami_hand - the hand that will appear when the screen is tapped.
  2. origami_portal - this object creates the effect of a portal. It covers the hand, to hide it until the screen is tapped. It also includes a portal shape - which the hand will appear through.

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:

  1. Select each object in the Assets panel.
  2. Drag them from the Assets panel, onto the null object, rotator, in the Scene tab.

Your project will look like this:

Adjusting the layers

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:

  1. The first layer in the list hand_layer.
  2. The second layer in the list occluder_layer.

Move occluder_layer to the bottom of the list, so your layers tab looks like this:



In the Scene tab, 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 tab will show the mesh. In the example below, portal is one of the mesh that makes up the origami_portal object:



Assign:

  1. origami_hand to hand_layer.
  2. door_r and door_l to occluder_layer.

Everything else in the scene will be assigned to layer0 by default. Keep them assigned to this layer.

Editing the portal

At the moment, the portal object is visible. It should be invisible, but still hide the thumb underneath it.

Achieve this effect by adjusting the material applied to the portal - so it becomes an occluder material. To do this:

  1. Select occluder_mat in the Assets panel - this material is already applied to each mesh that makes up the portal.
  2. In the Inspector panel, change the Opacity of this material to 1%.

You should now no longer see full object - just the outline of a hole:

Adding the Animation

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.

Create the patches

First, create patches to represent the animation property of the origami_hand and origami_portal objects:

  1. Select origami_hand and origami_portal in the Scene tab. You can select them both at the same time by holding down command on your keyboard.
  2. In the Inspector panel, click the circle next to Animation.

Two patches will be created and the Patch Editor will open.

In the Inspector panel, both objects' Transformations - their position, scale and rotation - have turned orange:



You'll no longer be able to edit these, because they're controlled by the animation instead.

Next, create patches to represent the animations in each object:

  1. Drag portal_anim and thumbs_up into the Patch Editor. Two orange patches will be created.

Finally, right-click in the Patch Editor to open the menu. Select:

  • 2 Animation Player patches.
  • A Screen Tap, Switch and Pulse patch.
  • An Animation and Transition patch.

In the Transition patch:

  1. Right-click, and change the Type to number - this is the patch that will be connected to the Animation Player patches, which need a number as an input.
  2. Change the Curve to Quintic Out, to set the shape of the movement. You can experiment with different values here, to achieve different effects.

Connect the patches

The first section of the graph will create a switch, to turn the animation on or off when the screen is tapped. Connect:

  1. The Tap output in Screen Tap to the Flip input in the Switch patch.
  2. The On/off output in the Switch patch to the On/Off input in Pulse.

The graph should look like this:



To join this part of the graph to the Animation, Transition and Animation Player patches, connect:

  1. The Turned On port in the Pulse patch to the Play port in the Animation patch. This will make the animation play once when the screen is tapped.
  2. The Turned Off port in the Pulse patch to the Reverse port in the Animation patch. This will make the animation reverse when the screen is tapped again.
  3. The Progress port in the Animation patch to the Progress port in the Transition patch.
  4. The Progress port in the Transition patch to the Progress port in each Animation Player patch.

Your graph should look like this:



To finish up, connect the animations to the graph. Connect:

  1. The Animation output in the first Animation Player to the Animation input in the origami_portal patch.
  2. The Animation output of the second Animation Player to the Animation input in the origami_hand patch.
  3. portal_anim to the Animation Asset port of the Animation Player connected to origami_portal.
  4. thumbs_up to the Animation Asset port of the Animation Player connected to origami_hand.

In the Animation patch, change the duration to 3 - to slow the animation down.

This section of the graph should look like this:



Previewing the effect

Command-click in the Simulator to simulate touch, and see how the animation looks.

Applying a Physically-Based Material

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.

Applying a material

First, create a new material for the hand:

  1. Select the origami_hand mesh in the Scene tab.
  2. In the Inspector panel, click Create New Material.
  3. To help keep track, rename the material. We chose origami_hand_mat.

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

Start by changing the Color and Shader Type:

  1. Change the Shader Type to Physically-Based.
  2. Under Albedo, choose a Color. We picked a yellow.
  3. Next to Texture, apply origami_hand_mat_BaseColor.

The hand will have a dull, yellow appearance:



Applying an environment texture

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 panel:

  1. Check the box next to Environment.
  2. Click the drop down next to Texture and select environmentTexture9.

The hand will now have light and shadow:



Applying an ORM texture

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:

  1. Metallic to 95%.
  2. Roughness to 30%.
  3. Occlusion to 100%.

The hand will now have a more textured, metallic appearance:



Adding a normal map

The final step is to add a normal map. This will add a bumpy look to the surface of the hand:

  1. Check the box next to Normal.
  2. Next to Texture, apply origami_hand_mat_normal.

To add a little more pop to the hand, you can select the Ambient Light in the Scene tab. In the Inspector panel, increase the Brightness to 100%.

The finished material should look like this:



Adding a Particle System

In the finished effect, a particle system causes small yellow particles to emit from the portal, alongside the hand. To create this part of the effect:

  1. Insert a particle system - it'll be listed as emitter0 in the Scene tab. You'll see a small stream of fast particles in the Viewport.
  2. In the Scene tab, drag the particle system onto the null object, placer.

The particle system will now be a child of the plane tracker, too. Like the hand, it'll appear when a real surface is detected.

Applying a material and adding a color

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:

  1. Select emitter0 in the Scene tab.
  2. In the Inspector panel, click + next to Material to create a new material for the particles.
  3. Rename the material - we chose particle_mat.

To add a color to the material:

  1. Select particle_mat in the Assets panel.
  2. In the Inspector panel, change the Shader Type to Flat.
  3. Choose a Color under Diffuse - we picked yellow, but you could choose a different color.

The particles should look like this:

Editing the particles

Next, make some changes to the particles themselves. Scroll down to Particle in the Inspector panel. Change:

  1. Scale to 0.15 - to make the particles smaller.
  2. Spin to 45 - to make the particles spin slightly.

Adding interactivity

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.

  1. In the Inspector panel, click the small circle next to Birthrate. The particle system will no longer be visible in the scene because the birthrate is being controlled by the Patch Editor - instead of the value you set in the Inspector panel.
  2. Right-click in the Patch Editor, and select a Multiply patch from the menu.
  3. Connect the Progress output in the Animation patch you created earlier, to the input in the Multiply patch.
  4. Connect the output of the Multiply patch to the Birthrate input in the emitter patch.

Your graph should look like this:



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.

Adding Sound

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.

Insert a speaker

To render sound in the scene, first add a Speaker:

  1. Click Insert.
  2. Select a Speaker.

It'll be listed in the Scene tab as speaker0.

Create an audio playback controller

To create the playback controller:

  1. Click + in the Assets panel.
  2. Select Create New Audio Playback Controller....
  3. In the Inspector panel, click the dropdown next to Audio and select hand_reveal.m4a.

Apply the audio playback controller to the speaker

Select speaker0. In the Inspector panel:

  1. Click the dropdown next to Audio.
  2. Select Audio Playback Controller.

Using the Patch Editor

Use the Play property in the playback controller to make the sound play based on a trigger:

  1. Select the audio playback controller in the Assets tab.
  2. In the Inspector panel, click the circle next to Play to create a patch.

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:

  1. Select a Delay patch from the menu in the Patch Editor.
  2. Connect the Turned On port in the Pulse patch to the input in the Delay patch.
  3. Connect the Delay output to the playback controller.
  4. Adjust the Duration in the Delay patch to 0.5.

The graph should look like this:

Adding Secondary Animation

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.

Create the patches

To create the patches, select rotator in the Scene tab:

  1. In the Inspector Panel, click the circle next to Rotation. A patch will be created to represent this property.
  2. Right-click in the Patch Editor, and select the Loop Animation and Transition patches.

Set the Duration in Loop Animation to 3.

Connect the patches

Connect:

  1. The Progress output in the Loop Animation patch to the Progress input in the Transition patch.
  2. The output of the Transition patch to the 3D Rotation input in the patch representing the null object - rotator.

Your graph should look like this:



And your effect should look like this:

Using Screen Interactions

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:

  1. Changing scale when the screen is pinched.
  2. Changing position when the screen pans.
  3. Changing rotation when the screen rotates.

Adding Instructions

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 out more about the instructions in this effect.