Create your own Instagram Filter and share it with the world.

Build your first Augmented Reality filter and publish it on Instagram.Photo by UNIBOA on UnsplashI’m excited about Augmented Reality because unlike Virtual Reality, which closes the world out, AR allows individuals to be present in the world but hopefu…

Build your first Augmented Reality filter and publish it on Instagram.

Photo by UNIBOA on Unsplash

I’m excited about Augmented Reality because unlike Virtual Reality, which closes the world out, AR allows individuals to be present in the world but hopefully allows an improvement on what’s happening presently.

~Tim Cook, CEO of Apple Inc.

Last week I was testing some features of Instagram and I came across some amazing filters and effects. To be honest, I knew these filters existed for a long time, but I never tried them for myself. After trying them, I thought it would be fun to create these filters by myself and show them off to the world.

I did some googling as I normally do to search for some new stuff. Then I realized that these filters use Augmented Reality (AR) to apply these effects in real-time. You can also do some serious business out of it and earn some pretty penny as well just by doing some crazy stuff. But I won’t be talking about monetizing your AR projects in this story since I am also new to this world of AR.

What the heck is AR anyway?

AR is the short form of Augmented Reality. In Layman’s terms, it is a way of placing virtual or digital objects into the real world. In a sense, we are not placing objects in the real world — they are virtual we can’t feel them but we can see them through the lens of our cameras. They utilize the power of the hardware available on the device to make some real-time computation to make such stuff happen on the fly. In a way, this technology saves money and time to visualize physical objects in the real world without actually crafting or buying the object in the real world.

What’s the point of using AR?

Virtual reality and augmented reality will change the way we shop.
~Michio Kaku, Theoretical Physicist

One beautiful implementation of AR is the game called Pokémon Go. I remember back in 2016 when it was launched, it took the internet by storm. It brought a new kind of immersion in the video game industry. Unfortunately, it was so popular that led to its downfall. But it proved something significant that AR brings to the table — the next level of user experience and immersion.

Not only games but the shopping industry can massively benefit from this technology as well. Imagine you are trying to shop for lipstick and there are 40 shades of colors available. Without trying them, you don’t know which shades will look the best on you. But with the help of AR, you can try each and every shade and choose accordingly without ever applying it physically. And the experience applies to all the things you can shop for like apparel, shoes, wristwatch, and so on.

In fact, there’s a company called Lenskart, they sell eyeglasses. In their mobile app, you can visualize yourself wearing the frames before purchasing them. You can also choose the size of the frame and check if it fits on your face or not.

These are some implementations of AR and surely there are lots of other uses as well, and it deserves a separate article in itself. Possibly it’s obvious by now, why it is so trending in the industry nowadays.

Let’s make our first Instagram Filter

Spark AR studio homescreen.
Spark AR Studio

A software named Spark AR Studio lets us create lots of amazing filters and effects in AR. We will use this particular application to create our basic AR filter and publish it to Instagram for free! Download Spark AR Studio.

To begin with, we may need to sign in with our Facebook account because this program is owned by Facebook aka Meta. After signing in we can see the home screen of the app to be something similar to the image above. Choose the Blank Project Card from the Experiences tab.

We will be greeted with a blank project along with a device simulation playing some demo video. We can change the device by clicking on the three bars in the bottom right corner of the device. We can also change the demo video by clicking the camcorder icon and selecting from available videos or capturing the webcam.

Spark AR Blank Project

Now we can add any type of object from the ‘Add Object +’ button inside the Scene panel. Clicking the button will pop up another window with various options like Face Tracker, Plane Tracker, Hand Tracker, 3D Object, and so on. The options are pretty self-explanatory and there’s documentation available along the side as well.

For our purpose, we will insert the Face tracker object into the Scene since we need to track the face of the user. We will add another 3D object inside the Face Tracker object by right-clicking on the Face Tracker object — choose Add Object — and 3D Object. Then we need to choose an obj file containing our 3D model of a sphere. The 3D sphere is available in the GitHub repository — inside the objects/Sphere directory.

GitHub – ankanbag101/Demo-AR-Filter

After adding the sphere it might be too big for the whole screen of the device so we need to change the scale of the sphere. We can change the scale of the sphere by selecting the sphere object and changing the scale option from its property on the right-hand side of the window. I found setting the scale of all the three axes to 0.025 looks good enough. We can also change the color of the material to Red from the property of the Default Material inside the Sphere object asset in the Assets panel.

We can also check that the sphere is moving along the face of the person. This is because we have added the object inside the Face Tracker Object which already tracks the head of the person. The Final Result will look something like the image below. You can also test the filter for yourself. Now we can publish it on Instagram by clicking the publish icon in the left bottom corner of the application. The publish criteria requires us to record a short video of ourself then the team of experts will review the filter and it will be available to everyone to use, usually within a day.

Finished Project

We can do a lot more complex stuff than this. Scripting is also available with JavaScript for developing some complex features and logic. You can learn all of this from their official courses. You can also get a Professional Certificate from Facebook by completing their 90 Minutes Examination as well.

Final Thoughts

Creating AR experiences was never been that easy before. Sharing them with the world is a lot more fun and you get to make a lot more friends as well. Using AR enhances the experience of the product for the end-user.

AR is still in its infancy though, and there are not a lot of developers out there creating AR experiences, so the potential is really high.

🎉A Big Opportunity for Indian Students!

If you have enjoyed creating your own Instagram filter and you are Indian by residence, then you can participate in a hackathon, organized by ReSkill in collaboration with Spark AR. They will guide you to create your first AR effect and provide you with the resources that you might need. And by participating you get to earn a Backpack and a certificate of participation for free from Spark AR itself. There are $300, $200, and $100 prizes available for the top 3 performers as well. The registration to this hackathon is open till 30th November and you can submit your first Instagram filter before 2nd December.

You can register for the hackathon from this 📍link.


Create your own Instagram Filter and share it with the world. was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Ankan Bag | Sciencx (2024-03-29T06:39:06+00:00) » Create your own Instagram Filter and share it with the world.. Retrieved from https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/.
MLA
" » Create your own Instagram Filter and share it with the world.." Ankan Bag | Sciencx - Friday November 19, 2021, https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/
HARVARD
Ankan Bag | Sciencx Friday November 19, 2021 » Create your own Instagram Filter and share it with the world.., viewed 2024-03-29T06:39:06+00:00,<https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/>
VANCOUVER
Ankan Bag | Sciencx - » Create your own Instagram Filter and share it with the world.. [Internet]. [Accessed 2024-03-29T06:39:06+00:00]. Available from: https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/
CHICAGO
" » Create your own Instagram Filter and share it with the world.." Ankan Bag | Sciencx - Accessed 2024-03-29T06:39:06+00:00. https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/
IEEE
" » Create your own Instagram Filter and share it with the world.." Ankan Bag | Sciencx [Online]. Available: https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/. [Accessed: 2024-03-29T06:39:06+00:00]
rf:citation
» Create your own Instagram Filter and share it with the world. | Ankan Bag | Sciencx | https://www.scien.cx/2021/11/19/create-your-own-instagram-filter-and-share-it-with-the-world/ | 2024-03-29T06:39:06+00:00
https://github.com/addpipe/simple-recorderjs-demo