How to Make an AR Fashion Filter for Instagram

Published

December 4, 2019

Difficulty

Beginner

Posted by

Rik Lomas

Topics

In this tutorial, we'll talk about how to work with Spark AR, Facebook's tool for making a fashion-style filter mask for Instagram and Facebook camera. No code needed!

View demo
Share this post

Transcript

00:00

(upbeat music)[Rik] So what I'm gonna show how to makeis something that looks like this.It's kind of almost like a fashion Instagram filterusing some kind of lights and kind of flashy look.So we're gonna be using a program called Spark AR for this.You can download it from the Facebook sites,sparksar.facebook.comIt's free, you can use it to make any kind ofFacebook or Instagram filter.So what we're gonna talk aboutis how to make this from scratch.Kind of the steps to do this.So, the first thing I'm going to do isactually just close down this demo one,and I'm gonna make a brand new one from scratch.So, the reason I'm doing it from scratch isagain, I'm gonna make it quite custom.It's not too tricky to make this stuff,but I'll talk through it.Again, I'm just going to make this a little bigger.Just to show all the features of Spark here.So, the first thing we have is our guy in the corner.I'm gonna call him Ted, just cause I want to give him a nameWe see Ted is moving his head around, at the momentit's just showing exactly what is on the camera.Now we can see in this sidebar here over on the leftwe have a device and camera with some thingsin here like microphone.Most of the stuff is notthings that we're gonna really work with.There's other things that we can start at and intoour camera that is built a part of Spark.So what I can do is actually change the video as well.If I want to try with different people, I canshow off different people, it's always goodto try with different skin tones anddifferent types of people in general.There we go, go through.One thing you do, is you can set it up to actuallygo on webcams and her we go,here's me, kind of trying it out from scratch.And again it's just showing off my camera at the moment.So for now, I'm just gonna switch back to Tedjust cause we've got a bit more of atest subject we can use.So for now, gonna switch back.So, what do we want to do here?Well what I want to do is add on almost like a maskon top of his face, so how do Igo about starting to do that?Well the first thing that I can do is actuallyright-click this panel and click Add.Now in here, there's a few things we can add in.The first thing we want to add in is a face tracker,because you want to track the face.And that can make sense, and here we can see herethat we've now go this kind of axes come out.What we can also do within this face trackeris add in a mesh.Now a mesh is basically, kind of like a maskthat goes on top of the face.But as you can see here, this is moving up and downas he changes his head around.Again, if I just right-click on face tracker now,I can do add, and I can do a face mesh.And what we have here is basically a meshthat is tracked through his faceAnd as you can see as he moves aroundIt looks like that.Now the moment this is used in the moment this is usedin the default material, it's used in this kind ofchecked pattern that we have here.So how do we go about making something that isn't,looks like this?What we can do is when we select face mesh,let's call this one maybe something likeFashion Mask, we can kind of rename this to make surewe're talking about the right thing.So on Fashion Mask, what do you want this to look like?Now if you've done any kind of HTML/CSS,HTML is kind of the content, CSS is the style.Here we've got our content, but we need some style on this.So here what I'm gonna do is add material.I'm gonna click materials and click the plus icon.And as you can see here, it's given us a default materialcalled Material Zero.Now if I double click this, I can open it upto kind of see all of the properties of this.Now I'm just gonna rename this to Fashion Material.Just to know which one is which.Fashion Material Zero doesn't really make any sense.But as you can see here, we have different kind of thingsthat we can change, we can change the color of this maskpretty easily, to be whatever color you want to be.We can actually change a lot of this stuff in general.The tiling options, and there's a lot of thingswe can actually do to this.We can also add textures in here as well.So if you want to put an image on top of this maskwe can put it in pretty easily.But what do we actually want to do here?Let's look at Shader Type, we've actually got a fewdifferent options of what I can add.I can add in a flat mask, which looks like this,basically it's not ignoring any of the lighting system.I can change his color and it's flat, of course.What I can also do is change something like Physically Basedwhich kind of adds a bit moremetallic and roughness to it as wellThere's other things in here like Face Paintso this is on top of his current face, of course.It's the white area we're changing on top.So there's a few things we can add in the Shader Type,there's also things that we touch in,so we can add that in, things likeskin smoothing, just kind of smooth his skin,kind of mass fashiony, kind of beauty effects I suppose.What we want to add in, is actually a kind ofshiny effect on the final one.So we're gonna use Physically Based material.As we can see here, it's kind of removed his eyes fromthis when we changed it to skin smoothing,it does that by default.So how do we get the eyes back?Well again this isn't how it looks, it's how it actsIf I go to Fashion Mask, it's already turned off eyes,there's his eyes, and his mouth. It's back,so we just add in some holes in this mask.So again, I kinda of wanna change how this looksso I'm gonna go into my materials.So here what I'm gonna do is actuallyincrease my metallic surface,as we can see as we start to increase this up,this changes the color of the mask,just making it more reflective.Now, the things I can start to add into this are things likean environment, so if I click Environment,it's currently not turned on, it I turn on Environmentwhat I can also add in is a texture.Now I don't have an environment texture at the moment,but what I can do is add one to my project.If I go to Add, Environment Texture,I've got some presets.So in here I've got a few I can add in.Maybe a sunrise one, we can see the sunrise effectin here, and I've added this to my project.But what I can do now is set the Environment to the sunrise.And we can see here, it's given us an almost metallickind of effect. It's almost reflects in thisgeneral environment because it doesn't know aboutthe context around this, the camera is only seeingwhat is currently on screen. Now we're not gonna beusing the environment in long term,So we will be turning it off a little bit later.But for now, we can see kind of what's going on.Now what I'm gonna do is actually just increasethe roughness and we can kind of see that thisroughness of the material kind of increases to almostlike a flat metal, almost unreflective metalas we kind of move this up and down.Now I'm gonna put mine to about 30-ish now,so it's not too reflective in terms of the surfacearound it, but it is very metallic.You can see here if I turn the metallic down or upit reflects the surface around it.So I'm gonna do 130 here.I can also change the render options as well,to say at the moment this is giving mean alpha channel, which is sayingmake the mask exactly as it looks.What I'm actually going to change this to is Addition Blend.So what this is going to do is add it on top of the facewhich is kind of what we want it to do with our Fashion MaskSo if I click Add, what we'll see is thiskind of adds on top of the skin,it kind of looks a little bit see-thoughif we kind of zoom in on this bit.Kind of a little bit see-through.Now what I'm also gonna do is remove this environment.Because I don't really wanna reflect the sunrise around thisI just want to reflect the general scene,so I just remove this for now, we kind of get thisshiny mask on top of this. I can start to changethe opacity to make this fit, but what we have is thiskind of reflection of the two lightsthat are a part of this scene.So the two lights that are a part of this sceneare the ambient light, which is currently not that strong.We can kind of increase it up and down it doesn'treally make too much of a difference.But the directional light is actually just above thisSo we can see here, it's kind of reflecting downwards andstraight forwards, but if I just start to reduce thisup and down, we can kind of see the light turn up and down.Now I'm gonna make this intensity something around30-ish percent as well, which is not too strong.But what I'm gonna do is also add two different lights.So I'm gonna add in another here, just gonna be anotherdirectional light. Now I'm gonna move this over.So I'm just gonna kind of make these together.I'm gonna move this position, now if I increase this panelwe can see this is in a different place.So I'm gonna move this in the X directionby maybe a little bit, maybe 0.1and that's gonna move it over here.We can kind of see the scene going over.Maybe I'm gonna change his color to something like pink.We can kind of see the pink light coming in.Gonna turn the intensity down a little bit,so maybe 30 as well. Maybe I'm gonna increase thisa little bit more, -.2, a little bit further away.I'm gonna keep that Y position, keep the X position as well.But most I'm gonna rotate it so this lightisn't just facing away from this.I'm gonna turn it towards him a little bit.So this is gonna turn this in which direction.And while X, Y, and Z direction I want to move itin this angle, so I'm gonna twist it around the Y direction.So I'm gonna move it for 45 degrees, maybe it's -45 degreesit's facing away, so this is facing towards him now.I'm also gonna do this with a green light as well.So I'm gonna do the same thing again.I'm gonna add another ambient lightand this is currently up here, it's in the wrong position.This is because I've nested it inside this light,so I just want to kind of, redo this based on the wholefocal distance, and here what I want to dois something let's just rest it for now,maybe this is .2, and this one is, what is this other lightgonna be? This is .25, so this is maybe .25 as well.This is .3 and the rotation is all messed up, soI'm gonna make this one row 000 for now,just to reset it. And where is this first one, the oneover here, this is -45, -45 so I want this one tobe on the other side, which it is, butfacing in a different way, sogonna make this one -45 point downand +45 to turn back the other way.I'm also gonna make this light green,just so we can see that in there as well.And maybe just turn the intensity down a little bit moremaybe 30% as well.So what I have now is basically this shiny mask thatkind of starts to appear and I can kind of playaround with this a little bit more.Maybe what I want to do is increase this a bit wider.Maybe on light number 1 gonna increase this onea little bit wider as well.So what I have now is basically a shiny metallic mask,that's added on top of the face, in this blend mode.But you might notice here, there's this kind of area aroundthis edge which we don't really want to appear.So how do we get rid of this edge?What I'm gonna do is add another maskon top of this mask, that only showsthe middle of the face, the middle of this mask.So basically what I'm gonna do it blend inthis edge around his face.So, I'm gonna add into our face tracker,I'm gonna Add another face mesh. Face MeshWhat I'm gonna do is I'm gonna add a new materialfor this, so the material I'm gonna addfor this one is gonna be, maybe let's call itsomething like, Cut Out. As you can see herethis is having the stand-in mask on here,it's not shiny, but it's kind of the standard lit maskso it's got a little lights on there at the moment,but what I can do is actually change this to a flat mask.Again this now white. But what I want to do isshow my face, well show his face on this mask.How do I do that?What I can do is part of the Face Tracker is I can extractthe face behind the mask. So if I go into Face Tracker Zero

11:53

I can click Texture Extraction, andwhat it's gonna do is it's gonna makea Face Tracker Zero texture.Now what does that even mean?Well if I click here it doesn't show anythingso I'm kind of at a loss at the moment,but this is dependent on the Face Tracker,and what is underneath that Face Tracker.So almost, if I remove these two meshes at the moment,now again, I'm just gonna rename this one Cutout Maskjust so I can see the difference between the two.And on this material, what I can now change this tois this texture, it's gonna be this new texturecalled Face Tracker, so I've basically got my faceas you can see in this middle bit,over my face, which means if I click on Cutout Mask,I can do a lot of things kind of weird with this.I can increase the scale for instance, makemy face a little bit bigger on my facewhich kind of looks a little bit strange.Now of course what I don't want to do is,I kind of want to keep it normal, so I'm justgonna make this 1, 1, 1 again.And what I actually want to do is, I want tocut out this middle bit of my mask soI show through, if I just kind of hide this onethe mask underneath, how do I go about that?What I need to do is add a texture, an alpha textureto this cut out mask to just show these edges.I kind of wanna show the middle bit of this face.How do I make that texture?Well what I'm gonna do is, I'm gonna quickly jumpinto a different program, I'm gonna jump into Figma.Now Figma is just a kind of graphics editor.I'm just gonna quickly create a new artboard.So in here I'm just gonna create a square,this one is gonna be, I think I'm gonna make it 1000 by 1000I'm just gonna make the background for nowsomething like that red.Now what we want to do is basically have somethingthat cuts a hole in the middle of this whole mask.So I'm basically gonna make a rectanglethat covers this whole area, 1000 by 1000and what I'm gonna do is add a new radial gradient.Now what I want to do is basically, have the edgesbeing dark and the middle bit being empty.So at the moment, this is kind of gonna go toa white color and the white color around the edge,I can start to play around with this,maybe I just want to show the very nose areaor maybe the eyes area for instance.Maybe I want to increase this a little bit so it shows morein the middle, so there's a few thingsI can actually do with this, so I'm gonna changethat to make it a little bit wider in the middle.So I've got this kind of see-though area,pretend there's a face in the middle of this,and I want this white area to cut out.So I'm gonna basically save this whole thingby exporting this, I don't want to show this red areaso I'm gonna get rid of that.And I'm gonna export this to my home called Cutout-Texture.

14:48

Now what I'm gonna do is add that cutout texture tothis page, well to this project. How do I do that?Well again, I'm just going to go into my FinderI'm gonna go to desktop and add this to my project.See here, we have a white area that's cut out in the middle.So now what I wanna do is on my cutout maskI want to go into my material becauseit's how it looks, a little double click.And I can add in an alpha channel to this.So if I open this up, I'm gonna click check,I'm gonna add this texture, Cutout Textureto the middle, so we can see now thiskind of middle area is the only thing that gets cut through.I can turn this up and down, kind of see these edgeskind of fade in and out up here, that kind of increasesit's very subtle, but it just removes this kind of edge areamaybe I want to it a little further in,so I just go back into my Figma file, maybe it'stoo close to the edges, I'm gonna change my fillso it's more in the middle, there it isand I'm gonna re-export that,again, Cutout-Textureand instead of just dropping this in again,what I'm gonna do is actually right click this and replacebecause I don't want to keep just adding more and moretextures onto this, just one at a time,then we're gonna add this in andyou can see now this kind of edge doesn'tgo right to the end, it kind of feelsa bit more natural now. And again if I kind ofstart to change this and see how it looks,and if I kind of have that area,you can see that on his forehead, for instance,this line disappears where the edges are.What if you want to test this out?So again, I can go to my video up here in the cornerI can test with different people, see how that looks.Looks pretty good, looks pretty good there.And I can also test with my webcam,there I am! Again if you do go to webcamyou might notice that sometimesit might mess up a little bit,what you can actually do is press restartand it should fix it a little bit, there we go.There is some edges to this, againit's not perfect because my microphone iskind of in the way at the moment,so I'm just gonna ignore that for nowyou can see it in the background there,but what I have is some kind of Fashion Filters donepretty quickly. Now how do I test this on the phoneso that other people can do this?Well there is an app that you can use calledSpark AR and basicallyyou can download it for iOS and Androidand what you need to do is almost likeplug your phone in, there it is,and what I'm gonna do is, I can clickthis Test On Device and I can clicksend to Rik's IPhone. And now,what I'll get on my phone issomething that looks like that.So there we go, you can test it pretty easily,looks pretty good, pretty quickly.And once I'm done with this, what I can do isclick Upload and once that's done I can goto Facebook and actually upload this from scratchand basically deploy this once I've tested it,once I've made sure that everything looks good,I made something pretty quick that pretty decentin a very short amount of time.

Published

December 4, 2019

Difficulty

Beginner

Posted by

Rik Lomas

Topics

More videos

Beginner

23:17

INTERVIEW

Planning, Designing + Coding Your First iOs App with Lou

Beginner

13:53

TUTORIAL

How to Make a Javascript Accordion

Intermediate

17:52

TUTORIAL

How to Add International Times with Timezones to Your Website

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration!