Spark AR : Créer son propre filtre Instagram

Je vois beaucoup de personnes demander comment créer un filtre Instagram. Je vais donc faire un article à ce sujet, sachez qu’il est très facile de créer des filtres sur Instagram, bien sûr, plus vous chercherez à avoir quelques choses de compliqués, plus il vous faudra des connaissances et du temps. Néanmoins, les filtres simples sont à la portée de tous, pourvu que vous ayez accès à un ordinateur, car oui, pour créer des filtres, il faut utiliser le logiciel Spark AR Studio qui nécessite un ordinateur. Le programme n’est pas disponible sur smartphone.

Spark AR Studio et Player

Spark AR Studio est donc le logiciel qu’il vous faudra pour créer des filtres pour Instagram et Facebook. Le AR signifie réalité augmentée (Augmented Reality en anglais).

La première chose à faire est de télécharger le logiciel, pour cela, rendez-vous sur le site officiel à l’adresse suivante: https://sparkar.facebook.com/ar-studio/download/ .La page est uniquement disponible en anglais pour le moment, cependant, rien de bien compliqué, il vous faudra cliquer sur « Download » dans la partie haute du site.

Un fichier va se télécharger et il faudra ensuite installer le logiciel.

Spark AR Studio, bouton de téléchargement
Spark AR Studio, bouton de téléchargement

Je vous conseille également de télécharger le Spark AR Player, qui lui est une application pour iOs et Android, qui vous permettra de tester en direct, votre filtre depuis votre smartphone, il vous sera utile pour des tests plus poussés de votre filtre avant de le publier publiquement.

Pour télécharger, cette application, toujours sur la même page https://sparkar.facebook.com/ar-studio/download/, vous trouverez au milieu de la page les deux boutons de téléchargement, un pour iOs et un autre pour Android, il vous faudra bien entendu cliquer sur ces boutons, depuis votre smartphone, car depuis votre ordinateur, il ne se passera rien.

Spark AR Player, bouton de téléchargement
Spark AR Player, bouton de téléchargement

Prise en main de Spark AR Studio

Une fois le logiciel installé sur votre ordinateur, vous allez forcément lancer le logiciel et vous tomberez sur cet écran ou tout du moins similaire, car le logiciel évolue assez rapidement pour rajouter des nouvelles fonctionnalités. Il se peut donc, que quelques captures d’écran soit un peu différent de ce que vous aurez au moment de la lecture de cet article. Je vous invite donc très fortement à faire les mises à jours dès que le logiciel vous notifiera d’une nouvelle version disponible.

Pour information, j’utilise actuellement la dernière version, qui est la version v92.0.0.16.242

Ecran d'accueil de Spark AR Studio
Ecran d’accueil de Spark AR Studio

Vous avez différent choix de projets pour créer un filtre, il y a également une section pour apprendre, intitulé « Learn » sur la barre latérale à gauche, qui vous redirigera vers des vidéos d’apprentissage, la totalité sont en anglais.

Création d’un filtre maquillage

Pour ce premier filtre, nous allons faire un filtre maquillage, qui vous familiarisera avec le « Face mesh » du logiciel. Nous allons donc choisir dans l’écran d’accueil de commencer avec un nouveau projet en haut à gauche, sans utiliser un projet pré-défini, cliquez donc sur « New Project ».

Spark AR Studio, icône nouveau project
Spark AR Studio, icône nouveau project

Cela, vous ouvrira le logiciel avec un nouveau projet, pour commencer de zéro. Votre écran devrai ressembler à cela, avec voici quelques explications clés

Spark AR Studio - Ecran Principal
Spark AR Studio – Ecran Principal
  • 1 – Votre scène, qui vous servira pour ajouter des fonctionnalités, comme pour suivre les mouvements du visage, etc.
  • 2 – La barre latérale de gauche, comporte plusieurs boutons d’actions, notamment, celui de la caméra qui vous permettra de choisir des personnages pré-définis pour avoir un aperçu de votre filtre ou alors activer votre webcam de l’ordinateur pour avoir un aperçu en direct
  • 3 – La fenêtre d’aperçu en direct, avec ici, un modèle de personnage pré-défini, que vous pourrez modifier, avec l’onglet vu précédemment
  • 4 – La barre latérale de droite où nous pourrons ajuster nos paramètres de chaque calques
  • 5 – Les boutons pour envoyer votre filtre sur votre smartphone pour le tester en direct, ainsi que le bouton pour publier votre filtre publiquement sur Instagram.

Créer la fonctionnalité pour traquer le visage

La première chose que nous allons faire, est dans la « Scène », nous allons créer la fonctionnalité « Facetracker » qui est une fonctionnalité de base pour suivre le visage de la personne qui apparaît à la caméra.

Pour cela, très simple, faîtes un clic droit sur « Focal Distance » qui est en faîtes la caméra du téléphone qui sera utilisé, ensuite on va ajouter, donc on se met sur « Add » et dans la liste qui se propose à nous, on choisit « Face Tracker », cela devrai créer une nouvelle entrée dans votre scène comme ci-dessous, l’élément « faceTracker » doit être au même niveau que les deux autres éléments « ambientLight » et « directionalLight ». Si ce n’est pas le cas, vous a raté quelque chose, repartez de zéro.

Spark AR Studio - Face Tracker ajouté dans la scène
Spark AR Studio – Face Tracker ajouté dans la scène

Ensuite, nous allons faire un clic droit sur ce « FaceTracker » et choisir d’ajouter un élément « Face Mesh », répéter l’opération une seconde fois, pour avoir deux éléments Face Mesh sous le Face Tracker, comme ci-dessous

Spark AR Studio - Face Mesh ajoutés dans la scène
Spark AR Studio – Face Mesh ajoutés dans la scène

Si vous avez bien fait les opérations précédent, votre scène devrai remplacer à cela, avec votre modèle ayant une sorte de masque en damier sur le visage

Scène actuelle
Scène actuelle

Qu’est ce que le Face Mesh ?

Alors si vous demandez ce qu’est ce Face Mesh, c’est un maillage, une modélisation du visage en point, qui permet au logiciel de savoir où se trouve chaque élément du visage.

Ci-dessous, un exemple en direct dans l’outil Spark AR où j’ai appliqué la texture de base du Face Mesh, vous voyez ainsi la modélisation à l’aide des traits noirs et les points rouges représentes des repères pour les sourcils, yeux, nez, narine, bouche et menton.

Spark AR Studio - Visualisation d'un FaceMesh sur le visage
Spark AR Studio – Visualisation d’un FaceMesh sur le visage


Spark AR est un logiciel où nous allons mettre des textures (couleurs) sous un format 2D (sans relief, à plat), sur des visages qui eux sont en 3D. Tous le secret pour faire ce filtre maquillage, va être de créer la texture du maquillage. Le fichier se présente sous un format 2D comme ceci, qui représente un visage, aplati. Les lignes et les repères rouges vous aideront à bien maquiller la bonne partie du visage désirée.

Spark AR Studio - Gabarit officiel du FaceMesh de visage pour Instagram
Spark AR Studio – Gabarit officiel du FaceMesh de visage pour Instagram

Télécharger les références Face Mesh de Spark AR

Afin de nous faciliter le travail, Instagram partage en libre service le maillage du visage qu’il utilise pour vous permettre de le modifier plus facilement. Vous pouvez télécharger la référence officielle du Face Mesh sur leur site ici: Face Mesh Instagram

Version officielle du Face Mesh Instagram pour la création de filtre
Version officielle du Face Mesh Instagram pour la création de filtre

Le fichier téléchargé devrai contenir un dossier « Mesh » et « Textures »,celui qui nous intéresse est le dossier « Textures ». Dans ce dossier vous trouverez 5 images, la plus importante pour nous est l’image nommé « FaceMeshTrackers.png », qui nous permettra de savoir comment ajouter de la couleur aux différentes parties du visage.

Spark AR Face Mesh Texture
Spark AR Face Mesh Texture

Appliquez le gabarit du Face Mesh dans notre scène Spark AR

Afin de mieux visualiser et de vous aider à comprendre comment réagit cette texture du Face Mesh, nous allons l’appliquer dans notre scène Spark AR que l’on a créé quelques minutes, auparavant.

Cliquez dans votre barre latérale de gauche sur le premier élément FaceMesh créé, qui devrai s’appelait « faceMesh0 ».
Une fois sélectionné, dans la barre latérale de gauche, il faudra cliquer sur le symbole « + » situé à droite du mot « Materials ». Cela va vous créer automatiquement une texture juste en dessous, qui devrai s’appeler « material0 ».

Création d'une texture pour le premier élément Face Mesh
Création d’une texture pour le premier élément Face Mesh

Répéter la même opération pour l’élément « faceMesh1 », une fois la nouvelle texture pour cet élément créé, vous devriez voir en bas à droite, vos deux textures.

Maintenant, choisissez votre texture « material1 » et dans les paramètres présent dans la barre de droite, changer le « Shader Type » à « Face Paint ».
Ensuite cliquez sur « Texture » et ajouter votre fichier « FaceMeshTrackers.png » que l’on a téléchargé précédemment.

Texture Face Mesh appliqué sur notre élément "material1"
Texture Face Mesh appliqué sur notre élément « material1 »

Ensuite, nous prenons notre « material0 » et pour cette texture nous allons modifier deux paramètres. En premier,on va changer le « Shader Type » à « Retouching » et ensuite la valeur de « Skin Smoothing », je vous conseille de la mettre en 50 et 100, ce paramètres, plus il est élevé et plus la peau sera lissé.

Texture Face Mesh appliqué sur notre élément "material1"
Texture Face Mesh appliqué sur notre élément « material1 »

La partie la plus intéressant, la création du maquillage

Maintenant que toute notre scène est prête dans Spark AR, il est temps de passer à la partie la plus créative de ce guide, la partie de la création du maquillage. Pour cette étape il vous faudra un logiciel photo, soit comme Photoshop ( https://www.adobe.com/fr/products/photoshop/free-trial-download.html ), ou GIMP ( https://www.01net.com/telecharger/windows/Multimedia/creation_graphique/fiches/5245.html ), ou encore un outil en ligne gratuit comme PixelR ( https://pixlr.com/x/ ).

Si jamais vous êtes en manque d’imagination, on va faire ensemble, un rouge à lèvres arc-en-ciel.

Donc il vous faudra ouvrir votre fichier « FaceMeshTrackers.png » avec le logiciel choisi, de mon côté, j’utilise Photoshop, donc les captures d’écrans que vous verrez seront issue de ce logiciel. Peu importe le logiciel que vous choisissez, ils ont tous les même fonctionnalités de bases que l’on utilisera, cette à dire le pinceau, pour peindre des couleurs.

Il faudra vous aider du maillage pour déterminer la position précise des lèvres et donc peindre sur cet emplacement. Voici mon résultat sous Photoshop

Photoshop, customization du gabarit de texture du Face Mesh
Photoshop, customization du gabarit de texture du Face Mesh

Maintenant, essayons cette texture pour voir le rendu réel. Du coup il va falloir supprimer tous le maillage, donc pour cela vous pouvez supprimer le calque du maillage et garder uniquement votre calque avec vos modifications, cet à dire le rouge à lèvres coloré dans notre exemple, ensuite il vous faudra enregistrer ce fichier en PNG afin de préserver la transparence.

Voici mon fichier PNG, si jamais, vous pouvez le sauvegarder et utiliser ce fichier pour faire un test avant de tout faire par vous-même.

Fichier PNG, lèvres arc-en-ciel
Fichier PNG, lèvres arc-en-ciel

Pour tester cette texture en réel, on retourne dans Spark AR Studio, on choisit notre « material1 » et on va remplacer la texture actuelle du maillage, par ce nouveau fichier avec les lèvres arc-en-ciel. Voici le rendu

Rendu de la texture lèvre arc-en-ciel
Rendu de la texture lèvre arc-en-ciel

Maintenant libre à vous, de rajouter plus d’éléments comme du mascara, des grains de beautés, des rides, du eye-liner, etc….

Laissez libre cours à votre imagination et pour voir les avancées de votre texture, remplacer là dans Spark AR Studio pour voir le rendu et faire des ajustements si nécessaires.

Tester votre filtre sur vous même

J’imagine que vous aurez également envie de tester le filtre sur vous-même que sur les modèles pré-définis dans le logiciel. Pour cela très simple et deux solutions s’offrent à vous.

Solution 1 : À travers de Spark AR Studio sur votre ordinateur

Dans le le logiciel Spark AR Studio, vous avez la possibilité de choisir votre Webcam comme caméra pour générer l’aperçu, de ce fait vous pourrez essayer le filtre sur vous.

Pour cela, rien de plus simple que de cliquer dans la barre latérale de gauche, sur le symbole de la caméra. Un menu s’ouvrira vous permettant de changer de modèle pré-définis ou alors de choisir votre caméra, c’est sur ce bouton qu’il faudra cliquer.

Spark AR Studio, choix des modèles pré-définis
Spark AR Studio, choix des modèles pré-définis

Solution 2 : À travers de Spark AR Player sur votre smartphone

Si vous vous rappelez, au début de l’article, je vous ai fais télécharger l’application Spark AR Player sur votre smartphone, c’est grâce à cette dernière que vous allez pouvoir tester votre filtre avant de le publier publiquement. Pour que cela fonctionne, il va vous falloir connecter votre téléphone via le cable USB à votre ordinateur et lancer l’application sur votre smartphone.

Dès que Spark AR Studio détectera un téléphone connecter, il vous affichera une petite bulle bleue sur l’icône permettant d’envoyer votre filtre sur votre téléphone. Cliquez donc sur cet icône et choisissez « Send » en face de votre téléphone. Assurez-vous bien d’avoir lancer l’application avant sur votre téléphone, sinon vous aurez une erreur.

Spark AR Studio, envoyer le filtre sur votre smartphone pour le tester sur Spark AR Player
Spark AR Studio, envoyer le filtre sur votre smartphone pour le tester sur Spark AR Player

Ensuite, vous avez plus qu’à prendre votre smartphone et l’essayer sur vous et vos amis pour avoir des avis d’améliorations.

Publier votre filtre sur Instagram ou Facebook

On est à la dernière étape, qui est la publication sur la plateforme Instagram ou Facebook afin de rendre ce filtre publique et utilisable par l’ensemble des utilisateurs de la plateforme sélectionnée.

Pour cela, on cliquez sur l’icône « Export and upload » en bas à gauche du logiciel

Exporter et uploader
Exporter et uploader

Une fois que vous aurez cliquez sur ce bouton, une fenêtre va s’ouvrir pour vous permettre de voir si vous remplissez les questions pour exporter votre filtre sur la plateforme désirée (Instagram ou Facebook), chaque plateforme a des critères différents en terme de taille de stockage de votre filtre, à l’heure d’écriture de cet article, Facebook autorise des filtres pesant jusqu’au 10Mo quand Instagram est limité à 4Mo.

Dans notre exemple comme vous le voyez, tout est vert, car nous sommes en dessous de ces limites, donc nous pouvons au choix, l’exporter et l’uploader vers Facebook ou Instagram. Vous ne pouvez faire l’export que pour une plateforme à la fois. Si vous voulez donc le publier sur les deux plateformes, il va vous falloir, refaire deux fois le processus d’exportation. Une fois pour Facebook et ensuite pour Instagram.

Il vous faudra ensuite cliquer sur « Upload » et cela vous amènera sur une page Internet pour remplir des détails sur votre filtre, comme un nom pour définir votre filtre, catégories, des mots-clés, une vidéo de demain, une image d’icône.

Page d'envoi du filtre
Page d’envoi du filtre

Il y aura plus qu’à valider ce formulaire pour que votre filtre soit envoyé aux équipes de validations des plateformes.

La validation de votre filtre peut prendre jusqu’à 10 jours et si ce dernier est refusé, il vous sera communiqué une raison, afin de corriger les éléments qui posent problèmes.

Les statistiques de vos filtres

Une fois que vous aurez un ou plusieurs filtres validés, vous pourrez accéder à un journal de bord, contenant des données statistiques intéressantes sur le nombre d’impressions, d’ouvertures et de captures, ainsi que le nombre de fois que votre filtre a été partagé, comme par exemple ci-dessous avec mon premier filtre, qui est un quizz sur des capsules Nespresso.

Statistiques Spark AR

Pour aller plus loin et continuez à performer sur Instagram

N’hésitez pas à l’utiliser et me faire part de vos retours d’expériences sur l’utilisation de Spark AR.

Si jamais cet article vous a plû et que vous utilisez Instagram, je vous propose de continuer la lecture avec cet article qui vous aidera à faire des retours à la ligne facile sur Instagram: https://fredods.com/comment-faire-des-retours-a-la-ligne-sur-instagram/

2 Commentaires

  1. Impossible d’aller aussi loin. À partir du moment où vous expliquer : « Cliquez dans votre barre latérale de gauche sur le premier élément FaceMesh créé, qui devrai s’appelait « faceMesh0 ».
    Une fois sélectionné, dans la barre latérale de gauche, il faudra cliquer sur le symbole « + » situé à droite du mot « Materials ». Cela va vous créer automatiquement une texture juste en dessous, qui devrai s’appeler « material0 ». » eh bien (je ne sais pas si vous faites ça sur une version antérieure) mais absolument rien ne s’affiche. Quand je selectionne le « faceMesh0 » absolument rien ne se passe et il n’y a pas le dossier « Materials » je peux l’ajouter… Mais absolument rien n’y est relié. Et quand je veux ajouter mon png de makeup il s’ajoute directement dans un dossier appelé « Texture » et ne se déplace pas dans « Material » donc absolument rien ne se passe

    • Bonjour Laueen,

      Merci de ton commentaire.

      L’article datant de Août 2020, il y a très certainement eu pas mal de mise à jour du logiciel depuis cette date.

      Les interfaces ont dû être changé/améliore.

      Il faut donc essayer de fouiller ou lire la nouvelle documentation officielle de Spark AR pour voir comment cela à été amélioré/changé.

LAISSER UN COMMENTAIRE

Merci de rentrer votre commentaire
Merci de rentrer votre nom

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.