Spark AR: lighting effect face filter
Create an amazing Spark AR Face Filter within 10 minutes.
These days you must have seen the wide variety of filters available on Instagram, using a wide variety of lighting, retouching and face distortion techniques. The filters like the one above can be classified into many categories like beauty, entertainment and adverts etc.
Today we would be creating a basic Instagram filter utilizing Retouching and Lighting properties provided in Spark AR.
Let’s Begin
Open Spark AR Studio and click on +New Project on the left bar and select Blank Project. It would take about half a min for your project to initialize and load in the window.
Now click on the +Add Object button located at the bottom of the Scene area in left, and select Face Tracker and click Insert. Make sure that the Face Tracker object is the child of the Camera object.
We use Face Tracker to create an effect that responds to or augments someone’s face. When combined with Face Mesh it creates a surface that can detect facial movements and expressions.
Now add the Face Mesh to the Face Tracker, by right-clicking on Face Tracker and then clicking on add. Create a new material and rename it as “Retouch”. We can go to the attributes section on the right and select the shader type to Retouching. Now we would set the Skin Smoothening parameter to 60%.
We would add another Face Mesh to our Face Tracker in the same way as previous and add Material “Light” to it. So let’s tweak some of the material properties.
- Set the Shader Type to Physically Based.
- In Texture, select the FaceMeshMask.png file from the Face Reference Assets Folder.
- In Surface Parameters, set the Metallic and Roughness properties at 100 and 25 respectively.
- Scroll down to Render Options, and set Blend Mode to Add, and Opacity to 23.
Since the Material Properties have been set, we would head over to the Scene Area and right-click on Camera to add a Directional Light. We would rename the Directional Lights as Left_Light and Right_Light. Just make sure these lights are child of the Focal Distance.
Directional lights shine on each object in the scene from the same direction, like the sun. It’s a good idea to have directional lights in any scene that contains 3D objects, as they give objects a sense of depth.
Click on these lights in the scene and drag the Left_Light to just outside the Mobile Screen Space on the left and drag the Right_Light to just outside the Mobile Screen Space on the right. Now we would set the Color property in the attributes section of the Left_light and Right_light to Blue and Pink respectively. Also set the intensity of both the lights to 100%.
Using Patch Editor
For adding user interactivity, animation and logic to our objects we use Patch Editor which has been made available to make Spark AR easy and accessible to non-developers as well. We can get the Patch Editor by selecting View in the menu bar at the top and then clicking on Show/Hide Patch Editor option.
Now we would delete all previous patches from the Patch Editor and after clicking on Add Patch enter Loop Animation and similarly add two Transition patches as well. Now we select Left_Light in the Scene and click on the arrow located before Rotation property in the Attributes section. This would allow us to add the Rotation patch to the editor, so we can manipulate the rotational properties of the lights through our logic.
We gotta connect our patches to provide the interaction logic for the objects. Make sure that the Loop Animation patch has Enable ✅.
The Transition patches help us convert the input Progress value to a value between the Start and End range specified through the three variables x, y and z.
For the first transition patch that we are going to use for our Left_Light we will set the Start and End values to (0,0,0) and (360,360,1) respectively as we want the Left_light to rotate on X and Y-axis only. Similarly we would set the Start and End values for the second transition patch to (0,0,0) and (360,1,1) as we want the Right_Light to rotate only on X-axis.
The different rotational limits have been set to create the effect of random combinations of light, You can set these values up the way you like your effect to be!
Connecting the Patches
Finally, let’s connect the Progress output of Loop Animation Patch to Progress Input of both the Transition patches as we want the rotation to keep going on throughout the effect.
And then we connect the Value output of the first and second Transition patches to 3D Rotation input of the Left_light and Right_Light Rotation patches respectively.
Testing the Effect
Do test out your effect by connecting your mobile device to the PC, and opening the Spark AR Player in your mobile device. Then click on Test on Device option located on the bottom of the left Toolbar as shown in the picture. Then you can select the Send to Connected Device option. Enjoy sharing the Selfies and GIFs made using the Face Filter.
Yay! So we were able to make our Face Filter using Face Mesh, Retouching and Lights within 10 minutes. 😎 😉
Feel free to check out the Github Repository for any help you require with the project or you want to clone the source project. Keep following me for upcoming tutorials on Spark AR, Happy Learning!
