Inspiration

Since I started creating filters with Spark AR a few months ago, I've developed a whole aesthetic around neon lights. I called my style chiaroscuro cyberpunk because I like to create strong contrasts using dark backgrounds and futuristic bright lights.

For this particular filter, I was inspired by the electric effects of 80s movies. Below you can see an example from Ghostbusters.

Ghostbusters

What it does

With Neon Lightning you find yourself stuck in the middle of a neon storm. This filter adds two clouds above your head that follow you around. Lightning flashes from the clouds to strike your body, and an electric arc is forming around you. If the two lightning bolts touch each other, it creates an explosion of sparks.

The purpose of this effect is to add a touch of craziness when people record themselves dancing.

How I built it

Positioning points to create a skeleton for the lightning bolts

I started by positioning three points. The first, which is the point of origin, is located in the clouds. The second acts as a joint and is between the person and the clouds. And the third point, which is the target, is positioned on the person. Each point is animated randomly. For the first two, I put fixed values, but for the third I used the built-in face landmarks. I also created three custom landmarks located on the body. One for the neck, one for the chest, and one for the belly button.

Connecting the points with a 3D object

To connect the points, I used a 3D object with a skeleton. I calculated the distance between each point, and divided the result by the number of joints. I then animated each joint to create this electric effect. Finally, I used the lookAt function to rotate the 3D object in the right direction.

Creating an electric arc around everything

As for the electric arc around the body, I created it with an edge detector. I put some noise on it, and used segmentation to make it only appear on the person. I then applied this electric shader on the clouds and the lightning bolts using render passes.

Emmanuel Macron

Challenges I ran into

After publishing the effect, I discovered two bugs by looking at how people used my filter. The first one was very simple, some people used Neon Lightning to put an electric shader around their hands. In this case, clouds and lightning were not necessary. So I made sure to remove them if the camera doesn't detect a face.

The second bug was a little more complicated. I discovered that the face landmarks were not working properly on the rear camera. So I had to separate the position values for the rear and the front camera.

Conclusion

My goal was to create a fun filter for Instagram Reels, and I have to admit that I'm really proud of the final look. This is the first time I have to work with the whole body and not just the face or a plane tracker. Creating the lightning bolts and custom landmarks on the body was a challenge, but with Spark AR Studio you can do anything if you put in enough time and creativity. The fact that the entire project fits in less than 600KB is also something I'm happy with. I always learn new things about the software when I finish a filter, and Neon Lightning was no exception.

Links

Built With

Share this project:

Updates