A guide on how to start building AR filters for various Social Platforms

So recently my Snapchat filters have crossed more than a million views 🥳 🥳. In this article, I would be sharing my views and experience on various AR platforms and also we would be building Hashonde filter in the end.

- What is an AR filter by the way?

well Augmented reality (AR) filters are basically various graphical effects are superimposed on Real Images. After seeing these effects you will argue about things that are not present in the Image.

for example:-

Some Instagram / Snapchat filters make you look so good that you argue in your mind.. is that really me? 🃏

or you ever met someone who looks completely different in their social media profiles as compared in real life and that completely creates an argument in your mind about how is it possible ? that is the magic of AR my friend.💔 😢

Does it really need to learn to code for creating Filters

Well, no most of the time.. in case if you are creating a complex filter you might need to write few lines of code (in case if you are building an ar based game or something like that .) but 99% of the time you don't need to code to make a filter for Snapchat or Facebook.

How to get started ?

Well there are various tools out there if you want to make Ar cool experiences but as a beginner, you need to be careful about what you choose well in my case I found Spark AR 😃

Spark ar is the tool by Facebook it allows you to create awesome filters and effects and then publish them on Facebook and Instagram the best part is you can even use your AR filters in a Reel, in a Video call (while using ig or messenger) Lens Studio 🥰

Lens Studio is by Snapchat it allows you to create filters and effects for Snapchat. The best part is using a Snap camera you can use this effect on a video call while streaming or doing anything.

These two are the best for getting started as an AR creator as you can directly share with your friends what you are building and they can try it very easily. plus you will get all that swag to brag about on social media.

SparkAr vs lens Studio

Spark Ar is quite cool but the updates are too fast as compared to the lens studio. Plus in lens studio, your effects are published in 15-30 min.😃 (yes your effect will go live in just 30 min) but in spark ar, it will take around 14-15 days to publish a filter. 🥺 That's why I prefer Lens studio.. but you can go with whatever you want. (why do I sound like my parents)

but in this blog, we would be going through how to publish filters on lens studio....(i have planned to write a detailed blog on Spark ar .... )

building a Hashnode lens

via GIPHY

so hash node doesn't have a filter so let's make one ... you can use this on pc using lens studio.. or on Snapchat.

Firstly Install and Open install lens studio. Lens Studio 04-04-2021 15_20_48.png

Now just look at the Right side of the screen you will see an inspector panel. you can choose the type of Segmentation you want from here. Segmentation_ - Lens Studio 04-04-2021 13_44_40 (2).png I am going to choose a portrait background since I am going to make a background segmentation here.

Now look at the left corner of your screen .. click on the segmentation controller Segmentation_ - Lens Studio 04-04-2021 14_21_02 (2).png

now from here, you can see various options to make changes

Segmentation_ - Lens Studio 04-04-2021 14_30_44 (2).png I would be changing the image from heart to hash node logo. and voila it is done. Now publishing this lens is quite easy. Just to the publish lens section on the top corner of the lens studio. but before publishing make sure you fill in the project details in the project info section.

Well scan this to access the lens we just created.

Well by the way I am looking for ideas to create more Snapchat filters and tutorials if you have any ideas or query feel free to leave your comment. In case you like my work:- https://www.buymeacoffee.com/tewarig

A guide on how to start building AR filters for various Social Platforms

Comments

More from this blog

Say Hello to anonmsg.fun - an Anonymous Feedback platform

JavaScript Bazzi : Promise.all()

Building A QR code scanner and generator in Next.js

JavaScript Baazi: How to flatten an array in javaScript?

Introducing MeowForms 🐈 -Build Custom forms with no backend code for free 🐱 (my first SaaS product)

Command Palette

Comments

More from this blog