Image tracker / AR business card for Instagram + tap interaction || Spark AR tutorial

Short tutorial how i made the instagram AR effect for my business card!
This effect tracks an Image and shows 3D content on top. After a screen tap, it toggles through 3 different sssets that surround the avatar.
I show how to set up the models in Spark AR, how to manipulate the transforms and also how to trigger animations with the screen tap.
I hope you like it and let me know if you want more tutorials for Metas Spark AR or Snapchats Lens Sudio :)
Download Spark AR : / download
Follow me on..
Instagram: @cyb.rphunk
Snapchat: @www_disaster
Twitter: @InesHilz
My Portfolio: ineshilz.myportfolio.com
Contents:
00:00 - Intro
00:29 - Setup
03:14 - Animation
07:30 - Cycle through items on tap
10:41 - Particle effect

[@nerdypeachmango]

This video answered so many questions I had about approaching this type of design. Subscribed!

[@giveupndie4559]

this is exactly the type of tutorial i was looking for! thank you so much

[@JosueGrotesco]

omg this actually solved a huge thing I wanted to do thanks! I'm terrible at programming you are awesome!

[@errylcnlls]

This is so amazing! I'm glad found you! Thank you so much!

[@auwyn1]

Such a great tutorial, thank you!

[@iderayoub]

Thank you so much for this great tutorial! 🙏🙏🙏

[@Bob2000eth]

Nice Tutorial Inidewin. Thanks!

[@Seeitmove]

😃Thank you! Your time and tutorial discussion are very helpful. 👍

[@glitchysparx]

It was really cool. Great job ;) Thanks

[@JelleStalenhoef]

Cool video! Deserves more recognition :D

[@wesleybutstraen]

Great tutorial!

[@ramaniso235]

Looks really cool

[@aleksandrarudol9255]

Thank you so much!! Your tutorials are perfect

[@vups4200]

Hi, thank you so much for this tut! I know you can mke animation in blender, but can i image track 3d design there too? W that insta filter thing after?

[@ELaletheia]

First to comment.. yayyyyyyy. Thanks for this.

[@ELaletheia]

Quick question: did you also use spark AR for the filter effect on your face during the video?

[@ineshilz]

@@ELaletheia Thanks for checking it out! I hope it's helpful, it's the first tutorial i made :D I made the facelens in Lens Studio and used Snap Camera to film this :)

[@prodbyolympvs]

So cool thank you for sharing.

[@-manuterodactilo-7177]

this video is AMAZING!!!!!!!

[@ineshilz]

Thanks! :D

[@wv13]

So cool! Spark is more complex than Aero but it works with IG so it's a must

[@valeriamarquez2318]

Thank you so much!

[@tinfoilhatsarethenewblack8788]

Thank you so much :)

[@CristianLobatoMejia]

Muchas gracias por compartir tu conocimiento, eres fantastica!!

[@ineshilz]

🙏

[@aluvimax]

very nice omg

[@unoweb3]

great tutorial!

[@ineshilz]

Thank you 🙏

[@user-dd7du2yx2o]

do you need special type of paper for the print outs?

[@xingwei7716]

this is super helpful. Thank you for the tutorial. So how can I time the animation and play it once? Thanks!

[@ineshilz]

To play the animation after a specific amount of time you cat put a Delay node after the "tracker found" and then attach the animation components :)

[@anishk5572]

I dont see my linked fb account in the meta spark page for testing the file, how do i fix this, I have checked and the account is linked with meta

[@cybersteffietv]

I found that when I add the target tracker patch into the patch editor, it removes the instructions UI -- does anyone else have that issue?

[@Say_69]

very cool

[@pandawacrew]

thanks a lott ines.. i spend hour to doing patch editor but i still dont get it 😭this tutorial is very helping me.. i hope you still uploading ar tutorial in the future🤩

[@ineshilz]

Awesome glad it was helpful! Planning to do more soon :) Thank you for the nice words

[@user-ct5jt8uv5d]

Great beginner tutorial! Do you know if Spark Studio can import Blender Particle animations? Apple RealiyKit appears to not support this. I’m using Blender v4.0.1

[@ineshilz]

Not that I know of, sorry :/ spark has their own particle system

[@markmccourtie7586]

OMG this is absolutely amazing! Just to clarify once the AR design is set it will be read when someone opens the IG camera over the physical asset?

[@ineshilz]

You'd still need to open the AR effect first under the Effects tab on your IG profile (three little stars symbol). Once it is open, the image getr's recognized and the asstes appear :) You could use a QR code though that leads to the effect via URL and maybe use the QR code as the image tracker also? Never tried it tho

[@markmccourtie7586]

@@ineshilz Hi Ines thanks for getting back to me so quickly. I have downloaded Spark AR to have a go myself! Thanks for inspiring :)

[@leroijlion]

Nice tuto ! Thank you Question : how to animate the 3D hands of a watch according to the real time. Do you know how I can do it ?

[@ineshilz]

Do you want to use Spark AR (Instagram) or Lens Studio (snapchat) ? I can look into it, interesting question :)

[@ineshilz]

I made a video explaining this : kzbin.info/www/bejne/sHXWm62DjJmEi9E

[@mercerscarab4083]

Thank you

[@DavidDoesNotExist]

Thanks for the video! Question, how big can the image texture be? I mean, do you recommend it be below a certain measurement, or can they be as big as a roll-up banner?

[@ineshilz]

No limitations as far as i know :) Camera should be able to film it in good resolution, so maybe an image on a skyscraper is too big.. also too small images might also not work (under 3x3 cm would be my guess)

[@guidoparacolli4112]

But how can i import my material in spark ar?

[@ronjabenz9286]

Hey i just tried doing your tutorial and everything worked except the part when i try to scan my card nothing happens, my smartphone doesent recognise it. Could somebody please help me?

[@user-vw2mf1tx4q]

is it possible to detect an 3D object instead of a flat picture?

[@yonthroughyoru]

hello! thank you for the tutorial. i havent tried any of the steps because my pc is not available at the moment, so i'd like to ask. Is a loopable video/gif of a animated 2D that i created can be put as the object that we gonna make AR ?

[@ineshilz]

If you are asking if you can use an Animation as a tracker, that is not possible at this moment, sorry

[@yonthroughyoru]

@@ineshilz i mean, showing an animation when the tracked object on screen?

[@ineshilz]

@@yonthroughyoru yes you can :) 1. Click + at the bottom of the Assets panel. 2. Select Import and then Texture Animation. 3. Select Choose Files and select either a GIF or multiple files that make up a texture sequence. (check 2D texture Animation on their docs :)

[@user-um2dw5jq1q]

great video! can you please make tutorials for 3d design as well it'll helpful

[@ineshilz]

3D design is not my biggest strength 😅

[@sookyevista5642]

Hi, would like to know is it possible if I scan my card and random avatar will appear. For example I 1 business card and I have 3 different avatar, so when different people scan the card. Different avatar will appear

[@ineshilz]

Sure! Just choose a random avatar with a "random" node on tracker found and set that enabled :) Lmk if you need more info abt this!

[@user-ct5jt8uv5d]

Also...Do you know if Spark Studio can import Blender rigging/animations and run the named blender-originated animations?

[@ineshilz]

Yes, you can import animations with bones in spark :)

[@Mayor_Imad]

music background name? : )))

[@clipstv6229]

Miss Can you give a Video about How to upload this into Instagram and How to Use this, please

[@silviane.mrocha]

amei amei

[@chann3761]

Hello can i ask you. Please answer me😭 im stuck. I was doing barcode scan and its already show up the 3d model but how to add explanation by using object tap can u teach me in advance pls😔🙏🏻🙏🏻

[@ineshilz]

Hi Chann, you want to add instructions to the effect. Check the documentation here: sparkar.facebook.com/ar-studio/learn/articles/camera-settings/instructions/ . I can make a tutorial on it also :)

[@jonathanhalim605]

I do not know why, but when I make the target tracker it say it not supported in any platform. Do you know why ?

[@ineshilz]

Sorry, hard to tell from afar :/ Some tracking types are not working on IG or FB

[@anishk5572]

none of my accounts or devices are showing in the test on device

[@cesarsalinas7020]

Hola!! Existe la posibilidad de contratar tus servicios de AR? Saludos

[@riosandria9993]

can you explain to me is there a way to export a blender file to fbx and keep the shading and textures that have been created in blender? I've created an object with very colorful shading and textures in blender, but when I import my fbx file into spark ar, all I see is black and white... please help me,

[@DavidDoesNotExist]

Hi! Question, your textures are procedural? Or are they bitmap?

[@Spitzmaus187]

Hey, thank you for the tutorial! However i was wondering how will people get the filter so they can scan the card? like how can the filter be spreaded? (Da es scheint als ob du deutsch sprechen kannst und ich mich da ein bisschen besser ausdrücken kann: wie verteile ich den Filter sodass halt Leute die mein image sehen das auch scannen können? Am besten einfach mit Link?)

[@ineshilz]

Hi there! :) yes i speak german, i'll try to answer in english tho in case others have the same question :D After finishing your filter design you upload it to instagram, then it shows up on your profile under the filter tab :) It might be good to give some instructions on your card to check your IG profile to use the AR effect, but accessibility is still a tricky topic! I usually just explain how it works when handing out the cards 🙃(it already secured me a job in the past)

[@Spitzmaus187]

@@ineshilz Okay thank you for the fast answer! :)

[@remola81]

is there a way to "export" the AR experience so the final user only needs to turn on his camera on and start watching the AR result? without accesing to instagram? thanks in advance to anyone. And Thank you Ines for teach this and for your effort

[@ineshilz]

Unfortunately there is no way of loading up an AR effect without scanning a QR code or using Apps like Instagram or Snapchat .. 😞

[@remola81]

@@ineshilz thanks! yes, I was doing a research today and that's the limitation. But I have found Unity and an AR toolkit which aparently allows this, it's a longer path than make it in SparkAr but I will try to see how hard could be, considering I have a low level of knowledge in coding. I'll drop you an update if this works 🙂

[@remola81]

@@ineshilz And if you want to your deliver the "filter file" so they can host it on their own Meta account, is that possible? (Of course I 'm talking about working with Spark AR) thanks for taking the time in answer, your videos are incredible!

[@ineshilz]

@@remola81 yes you can go to file -> package wich will give you a .arprojpkg file they can upload themselves :)

[@remola81]

@@ineshilz thanks again for take some of your time in answer and your priceless info, have a great weekend, Ines!

[@cluedo_official]

is it possible to put an image instead a 3d And if Yes, how 🤯

[@ineshilz]

Sure thing! Instead of using a 3D Model, you can add a plane (press + in Scene panel) and create a new material for it (press + under the material section on the object). Then you can assign your image as a texture in the material :)

[@erickortiz5625]

Does anyone knows how to put a buttons to take you to a external link? like a website, instagram or a different facebook page?

[@ineshilz]

Unfortunately this is not possible in Instagram effects

[@erickortiz5625]

@@ineshilz thank you very much!

[@xrin2f]

warking but my dont work

[@s199h]

How I can make this cute model?!!!

[@ineshilz]

I made it in blender :) It just requires a little bit of box modeling

[@PRODUCT5]

Mam in which software you are making this ?

[@ineshilz]

Meta Spark Studio :) link in the description!

[@erickortiz5625]

por dios, cuanta publicidad pueden meter en un solo video!! Pero muy util el video, gracias.

[@ineshilz]

unfortunately i don't have influence on how many ads, i don't even get a share off of it :/ Glad you liked the video!

[@totorocapo]

But adding your image? I mean your card, its just an image or what? 😅

[@ineshilz]

yes you can use a jpg or png :D

[@zevvra_dm]