¿Cómo crear filtros para Instagram? Spark AR Paso a paso
Articles Blog

¿Cómo crear filtros para Instagram? Spark AR Paso a paso


Hi! Welcome to Emiliusvgs Today I have a tutorial for you, who wants to learn how to create augmented reality Instagram filters from scratch. Here, I’m teaching to create a filter to surprise your friends. If you are a person that doesn’t know very much about programming and design, then this video is for you! Let’s start! First we need to install the platform that will allow us to create the filters. I mean Spark AR from Facebook. The use of SparkAR allows the diversification of augmented reality, in addition to using it through social media allows viralization. Several filters have exceeded one million views. Can you believe it? the next one can be yours … SparkAR is available to everyone. Enter your website and install it…. One of the most used elements in augmented reality filters are 3D objects and one of the usual questions is: where do I get 3D objects? You can find then in this list: We have Sketchfab where we can see several free 3D objects, just keep in mind the use licenses and also the weight of the files. I recommend that such files do not exceed 3 megabytes maximum… Turbosquid is also an ideal platform to meet 3d objects of various formats. Free3d is another platform to get 3D objects for free. For example, if I enter the FBX files, I will find many materials … Finally, I introduce you to CGTrader. Another great platform to find 3D files for free. Once we are in SparkAR, there’re some basic elements that you should know is that in the “Scene” part you’ll find all the files worked as are the trackers and the file hierarchy. In “assets”, we can locate files as objects, materials and textures that will be used in the scene. It’s as if we had our file box ready to use. In the center we will find the work view, And the corner screen will be the video preview that we will constantly see in real time our filter. There we can see how our work is going. Well, now we will start with the tutorial… for the filter we want to create we need to have a visual guide, a graphic reference to paint the lips, we click on “help” and then “download face assets”. We will open an official Facebook page where we will have references for the facemesh in fbx, dae and obj format … and to create makeup effects we will use jpgs and pngs files. we download it and that’s all! As you can see, here are the files in the different formats. Now we have to use a graphics editor that can be photoshop, but not all of us have that tool, I recommend GIMP. It’s an Open Source editor, this works with layers and that we can export the file in PNG format with transparency. That is ideal for working on augmented reality filters. The first thing we need is to import the jpg file. If you are wondering why that face is stretched, it is because it will act as a layer inside the 3d face and you must capture all its edges into a 2D plane. We will create a new layer that is transparent and we’ll work any design there. Now we are going to paint the lips, we choose the brush and use a suitable size and we will also choose a red color that is not so strong, something lighter … We paint the mouth without leaving its edges. When you think you’re done, lower the opacity a little to have a more “natural” effect. Now that we have our lips painted, we will remove the first layer that is the reference… Everything is ready … we will export it in PNG format … Now we are missing a last file. The emoticon that will appear when we open our mouth. There are several pages where you can get quality pngs. I recommend Iconfinder. Here we will find many pngs and icons. Now we look, always in “free” version, the word “emoticon”. I like this one, it has a great smile, as if it doesn’t matter to anything. We download it … Always remember to know the distribution and usage policies of each file. Let’s go back to Spark with all the files to work. The first thing we need is to set the model that appears in the video preview. Click on cameras and we can choose different faces. Once chosen we will create our first face tracker. As the name says it is a face tracker. Our face will be the marker or anchor where the augmented elements will appear.

Then we will add the face meshes. It is there where the textures and materials will be applied … This mesh can act on the eyes and mouth. Then we will add the face mesh. It is there where the textures and materials will be applied. This mesh can act on the eyes and mouth. Now to see the painted lips we must click in “material”. A file called “material0” will be created automatically. We change his name. Now we go to texture and add a new one. We look for the file created in GIMP and import it. Ready! we already have it … If you like you can make several variations taking into account the “render options”. Another way to apply lip color is to modify the “shader type”. We change from standard to face paint… We modify here its “render options”. We already have it! But that’s not everything We will use a visual element that I like very much: the particles. This element must be within the hierarchy of “face tracker”, so we drag it inside Now we are going to change the scale of the particle. We must also put this element near the mouth. We use the “spin” element to experiment. At this time we are going to rotate the use of the particles to give the effect as if it came out of the mouth. In emitter we will change the type and change it to “line”. In space we will change from “world” to “local”. Now let’s click on “material”, we change the name to “emoticon” and import the texture found in iconfinder. If we want to adjust a little more, we will reduce the birthrate…. We will continue making shape changes. As a final step we will use the patch editor, right click on “face tracker” and we click on “create patch”. We automatically see a created window and our elements already linked. Our filter will work when we open our mouth, therefore we look for an interaction called “mouth open” and as a final step we go to the particle called “emoticon” and click on the arrow that appears in the “visible” option. We link everything and it should be ready … Now to test it we will click on “test to device” and send the example to Instagram. As you will see, it has been quite simple to make this filter if you have any questions or suggestions, write it in the comments of the video. Support me by subscribing and giving me a great like. This is all for now, Emiliusvgs says goodbye. Byeeee!

4 thoughts on “¿Cómo crear filtros para Instagram? Spark AR Paso a paso

  1. ¡Felicidades por tu trabajo! He visto la mayoría de tus vídeos y has progresado exponencialmente. Tengo una duda / sugerencia que quizá puedas ayudar a no solo a mi, si no a varios. ¿Podrías hacer un tutorial de, cómo colocar un .fbx, .obj o cualquier modelo 3D (como una mascara)?, ya que solo se limita a el área a trabajar por el "Face Reference" con elementos 2D y no he podido encontrar alguien que lo explique bien. Un abrazo! 🇲🇽

  2. Conoce más de este tutorial y descarga el archivo png "lips" aquí -> https://emiliusvgs.com/como-crear-filtros-instagram-spark-ar/

  3. Hola! Tengo una pregunta, yo creo el filtro paso a paso tal cual lo describis y como vi en otros videos, y en la aplicacion Spark Ar se ve perfecto pero cuando lo subo a Hub y veo el demo en mi instagram mi filtro se ve completamente borroso y pixelado, sabes como solucionarlo? Saludos

  4. Hola, todo muy bien explicado y me ha salido a la primera, es muy facil de entender, pero al pintar los labios(en mi caso verde) cuando abre la boca se ve verde tambien, que podría hacer para que reconozca solo los labios?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top