Adding and Positioning Lights

In this tutorial you'll learn about the different lights included in Spark AR Studio. You'll also download the sample content to learn how to add and position a light to create the effect of a flashlight shining on someone's face.

Default lights

All projects in Spark AR Studio automatically have 2 lights included in the scene - an ambient light and a directional light. This adds a realistic sense of light to your effects and gives depth to 3D objects.

The ambient light provides each object in the scene with a constant amount of light from all directions. You can make it more or less bright by adjusting the Intensity in the Inspector. You can also change the color if you want to.

The directional light can be placed anywhere in the scene. It shines on each object from a single direction, which you can change by adjusting its rotation and position. You can also change its intensity and color.

You can remove them if you want to. This can help improve the performance of your effect. It's a particularly good idea for effects with 2D objects as they won't need realistic light or shadow.

Other lights available

There are three other lights you can add to your projects - a point light, spot light and environment light.

The point light is a sphere-shaped light source. The intensity of a point light will depend on how far away it is from an object - the closer it is, the more intense the light will be.

The spot light is a cone-shaped light. It's useful for simulating torchlight or a headlight.

You can use the environment light to apply super realistic lighting effect to objects with physically-based materials - by adding an environment texture to every object in the scene.

Using lights in an effect

Now let's add a light to an effect. We're going to use a directional light to create the appearance of real light shining from a flashlight onto the face of the person using the effect.

If you open the unfinished effect in the sample content folder, you'll see there's already a 3D object in the scene. It looks like a flashlight:

A flashlight can be seen in the Inspector and Viewport

The object is a child of a face tracker in the Scene panel:

The Scene panel, showing the flashlight as a child of the face tracker.

This means it will follow the movement of the face.

There already appears to be light coming from the flashlight in the scene. The illusion of lighting is actually created by a texture, applied to a 3D object that's shaped like a cone. It creates the appearance of light, but there isn't any light reaching the face like it would in real life. Adding the directional light will change this.

It's worth pointing out the null object here - flashlightCtrl. When objects are children of a null object - like the 3D object, flashlight - they'll take on any transformations applied to the null object.

Because this null object is the child of a face tracker, objects grouped under it - like the flash light - will move with the face detected by the face tracker.

Adding a directional light

To add a directional light to the scene:

  1. Click Add Object at the bottom of the Scene panel.
  2. Select Directional Light from the menu.

This will illuminate the face, but the light isn't shining from the right direction:

The user's face is illuminated.

To fix this, start by making the directional light a child of flashlightCtrl:

  1. Select the directional light in the Scene panel.
  2. Drag the directional light onto flashlightCtrl.

As you can see it's moving with the face, but it's in the wrong place.

Positioning a light

Like other objects in Spark AR Studio, using the Manipulators can help work out the best position for lights.

You can also add these values directly in the Inspector. Because we've already experimented and decided on some specific values that work well in this effect, that's what we'll do now.

First change the light's Rotation. Go to Transformations in the Inspector. Next to Rotation set X to 80 degrees.

Next change the Position, so the light appears to shine from the 3D object. In the Inspector:

  • Set Y to -0.14.
  • Set Z to -0.03.

Your effect should look like this:

The finished effect, showing the user lit from below.
Was this tutorial helpful?