Seema Saharan

Posted on Jan 2, 2021 • Originally published at bashwoman.com

Make your first Instagram filter | #christmashackathon

#showdev #challenge

This is my submission for Hashnode Christmas Hackathon, it was an interesting project, so sharing it here too.

Note: If you face any difficulty in seeing some GIFs then check the original blog here.

Final Product

Introduction

We all use social media like Instagram, Snapchat, and we must have used many filters too. And if you're in the tech industry, then you must have thought of making a filter by yourself, and you will be wondering how can you do that, right? Well, I have, and in this blog, I am gonna share how I build an Instagram filter on my own.

Prerequisites

You must have Spark AR on your PC/Mac.

That's it.

What is Spark AR?

Spark AR Studio is an augmented reality platform for Mac & Windows that allows you to somewhat easily create AR effects for mobile cameras.

Is it free/paid?

It is completely free.

Step 1: Download Spark AR

You can download the software from this website.

Step 2: SignUp/ LogIn

After downloading the software you have to log in to your Facebook account, if you don't have an account make one. Why a Facebook account?
Because Spark AR is a product by Facebook. Simple. :D

After login, you will find your screen something like this.

You can choose whatever option you like, but I am going to make the project from scratch.

So, for that, choose a new project, and then select the Blank Project.

After selecting Blank Project, it will look like this.

The screen that you are now seeing is called viewport, and you can move this by following some shortcut keys:

Ctrl (Windows)/ Command (Mac) key with Left key of the mouse: To move the whole scene.
Alt (Windows)/ Option (Mac) Key with Left key of the mouse: To move the view, where the man is visible.
Scroll bar or Ctrl+Alt (Windows)/ Commands+Option (Mac) keys: To Zoom in/out

Step 3: Applying the effect

There are many ways that you can add your desired effect:

Either search it on the AR library.
Or you can also upload any image, and use that as a filter.

For this tutorial, I am using the AR library to make you understand better, but uploading your own image is not much difficult.
So, to search in the AR library, just locate to File -> Search AR library.

After that, there are two sources for the models that you will use.

Spark AR Assets These are just 3 models.
SketchFab (for which you have to create an account) They are ready-made 3D models, which means you can just import them into your project. I suggest you use this if you are very new to this platform so that you won't get confused.

So, I will just search for heart for this project, but I will suggest you explore the library, there are 1000s of models available.
After I search for heart, it will prompt many results in front of me, choose whichever suits you the best.
I chose this.

And you can see here that there is a login option already available because it's provided by SketchFab, when you click on login, it will redirect you to the website of SketchFab, and you have to make an account.

After clicking on login.
Fill in your details, either use your Email or use your social handles to make an account. You have to choose a username too.

After doing all the above steps, you will see the login option will be changed to Download, click on that, and then Done.
Your asset is now imported to the project.

Step 4: Setting the position of Asset

Initially, it will look like this:

Now, the question is how we will show the heart in our project?
Well for that you have to understand one thing.

If you notice in this image, all the assets that will be displayed or visible on the scene are in a nested form.
Device -> Camera -> Focal Distance -> ambient light 0 and 1

All the things that you will use in Spark AR will be nested. And if you're already familiar with some programming, then it is easy for you to understand what nested means.

And if we want to show heart on the scene we have to put below Focal Distance
So, let's put it.
Before: In the asset section.

After: In the scene section.

But if you notice the whole camera is hidden by the heart, and the woman is not visible.
Now, we have to set the size of the heart.
You can move the heart like this:

You must be aware that there are 3 axes here:
X-axis
Y-axis
Z-axis
And if you've noticed here that when you're moving the heart, the values on the right section are also changing. That means you can also just edit the value from there too. Whatever method suits you the best.

I just like to move it, as guessing values can take a little more time, and time is important.

After setting the position of the heart, the next thing is to select the right color, and the heart's color is red (mostly).

You have to select materials in the right section and then select the heart. By default, it was material0.

After selecting the heart, you will see that the color is changed to red.

You can move the heart as you like.

Step 5: Adding a 2D text into the Scene

Now, if you want to add a 2D text into your project, then just right click on the scenes section, and you will see Add -> 2D Text. That's it.

The scene section is changed now. It has one more thing, i.e. Canvas. Under which it has one object called 2dText0.

And on the right side, you will see something like this.

Here, you can change the font, color, size, height, width, and many more things for your text.

First, we will change the text to Hello Beautiful People, it's the word I use in my YouTube videos. Do subscribe to my channel. :D

But after changing the text, it doesn't look good in our scene. The text is not properly written, to make it right, we will adjust the height, width of the text.

Pinning

Pinning a rectangle means it will maintain the same distance to its parent's border - however much you transform the parent.

Rectangles can be pinned to the top, bottom, left, and right.

Step 6: Testing

Before uploading the filter for the review period, you can test it out.
For that, you have to download the app, either on iOS or Android, i.e. Spark AR Player.
After downloading, go to user Spark AR on your laptop. Click on Test on the device.

After that, you will also get a test link copy that and paste it into your phone's browser.
After that, it will ask to login into your Facebook account, and it will open the Facebook camera, make sure to record that, if this is the final product, because the Facebook team will ask for a demo video for the effect.

Mirroring Effects to AR Player

Things you'll need

To preview an effect in the Spark AR Player app, you'll need:

To download and install Spark AR Player on either an iOS or Android mobile device.
To install iTunes on your computer, if you're using a Windows machine and plan to test your effect on an iOS device.
A USB cable for connecting your device.
Connecting your device

When you're ready to mirror an effect:
Connect your mobile device to your computer with the USB cable.
Open the Spark AR Player app on your device.

Step 7: Uploading and Review Period

Now, our filter is complete, and we have to upload it to either Facebook or Instagram. For that go to:

You will see this screen.

All the details must be correct, in case you have any error, then resolve it.
Now, there are two options:

Publish a new effect

That means you have made a fresh effect.
Update an existing effect

This means that you had already an effect, and now you want to make some changes in it or say you had some bugs that you want to remove.

For now, since it is your first effect, select Publish a new effect. It will start uploading.

After that, it will open a window in your browser, and you have to fill in all the details it asks for.

Final Product

So, this was my project submission for #christmashackathon.

Note: The review period is approx 10 days because the Facebook team checks all the effects manually, and if they find anything wrong then your filter will not be approved, and you have to make the changes accordingly, and again apply for the review period.

My filter will take time to get approved as I made this just now, while I am writing this blog, but after getting approved, I will update this.

Connecting an Instagram account to a Facebook profile or Page

To publish effects to Instagram, you need to have your Instagram account linked to the Facebook profile or Page that will manage the effect (the effect owner). The followers of the Instagram account linked to the profile or Page will be able to discover the effect in the Instagram camera while browsing through effects.

All Instagram account types (personal, creator, and business) can publish effects on Instagram.

Connect your Instagram account to a Facebook profile

If you just have one Instagram account and one Facebook profile, to connect your account to your Facebook profile:

Log in to your Instagram account.
Follow the instructions in the Instagram help center to connect your account.
Refresh Spark AR Hub to make sure the accounts are properly linked. If you’re still having trouble linking your accounts, try logging out of both apps, then, first, log in to Facebook followed by Instagram and repeat steps 2 and 3.

Future Scopes

There are a lot of things to learn in Spark AR, I have learned about patches, that can be really difficult to understand for the first time, that is why I tried to make it simpler, and if you want to start making any filters or effects make smaller and simpler ones because they are easy to understand and apply. There are a lot of things you can do.

Make a game, skin smoothing filter, object like you may have seen the filter with PS5, that was so real. So, you can make all of that. But as I always say, don't jump directly to the hard parts but do some basic things, and understand the concepts first. After that, you can make many cool projects using this, ad if you're interested in AR, you will find it very easy, and exciting as it's really easy.

Explore 🔮🙌

Please drop an ❤ on this blog.

Connect with me! 💻❤

🎥 YouTube

💪 LinkedIn

😊 Twitter

❤ Instagram