0 0 voix
Note de l'article
Temps requisComplexitéOutils & Matériaux

30 minutes

Facile

Programmes gratuits

Cette idée a démarrée comme c'est souvent le cas: je travaillais sur un tout autre projet lorsque je suis parti dans une toute autre direction après avoir découvert le travail d'une artiste se nommant Catalina Villegas sur les réseaux sociaux. Elle a créé une série des filtres de réalité augmentée sur Instagram qui donnent vie à ses illustrations qu'elle vend en tant que stickers. La réalité augmentée n'est pas une technologie nouvelle. Je me souviens d'une app faisant exactement ce genre de choses en 2012 sur mon téléphone Sony. Cependant à l'époque il était difficile de distribuer de telles créations. Après avoir constaté à quel point il était facile de créer de distribuer des projets AR grâce à Instagram m'a vraiment donné envie d'essayer de jouer avec cette technologie.

J'ai donc commencé à penser à un projet qui pourrait faire usage de la réalité augmentée en lien avec mon secteur d'activité. J'aurais aimé être capable de créer de belles illustrations digitales et de leur donner une nouvelle dimension en les rendant interactives mais pour le moment je n'ai pas les compétences artistiques pour ce faire. Je me suis donc attelé à un projet plus simple: créer et publier un filtre AR sur Instagram qui déclencherait une animation en 3D lorsque l'appareil photo du téléphone serait pointé vers une de mes cartes de visite.


Pré-requis


Programmes

Les programmes suivants vont être utilisés pour la réalisation de ce tutoriel:

  • Mixeur pour générer l'animation du texte et l'exporter plan par plan.
  • Inkscape pour tous les dessins vectoriels.
  • Étincelle AR Studio pour créer le filtre de réalité augmentée et le publier sur Instagram.

Fichiers

Tous les fichiers nécessaire pour le projet sont disponible sur Google Drive.

Structure du répertoire de fichiers du projet
  • /Tutoriel sur les cartes de visite Spark AR
    • /Fichiers source - les dessins vectoriels utilisés pour les textures.
      • Texte_animé.blend
      • Texte_animé.svg
      • Moth_business_card_AR_mockup.svg
      • Moth_business_card.svg
      • Spark_AR_business_card_icon.svg
    • /Fichiers de projet Spark AR Studio - les fichiers du filtre AR complet tel que sauvegardés par Spark AR Studio.
      • /textures
      • SparkARBusinessCard.arproj
    • /Texture - à proprement parler les seuls fichiers nécessaires pour compléter le tutoriel.
      • /Cadres d'animation de texte
      • Arrière-plan.png
      • Corps.png
      • Business_card_target_image.jpg
      • Aile gauche.png
      • Lunes.png
      • Aile droite.png
      • Étoiles.png

Étapes de conception


Conception d'une carte de visite et d'un mockup pour l'animation

La carte de visite

La première tâche que vous devrez compléter consiste à concevoir votre propre design de business card.

Pour les besoins de ce tutoriel nous utiliserons une illustration de mite dessinée par ma talentueuse amie Hui Chen. Merci de nous laisser utiliser ton travail Hui!

Cet article intitulé Meilleures pratiques pour le suivi des cibles dans Spark AR Studio pourra vous aider à comprendre quels types de designs sont les plus appropriés à être utilisés avec un filtre de réalité augmenté tel que celui que nous allons réaliser.

Lorsque vous serez satisfait de votre design, imprimez le et photographiez le. En effet après expérimentation il apparaît que le target tracking fonctionne mieux à partir d'une photo de l'objet à tracker que d'une version digitale du motif imprimé dessus.

Mockup de l'animation et préparation des éléments visuels

Ensuite il s'agira de concevoir un mockup de l'animation en réalité augmentée telle que vous l'imaginez vu du dessus. Cela vous aidera à organiser et positionner les différents éléments de votre scène sur Spark AR Studio.

Organisez vos éléments principaux en différentes couches sur l'éditeur vectoriel et exportez-les en format .png avec arrière plan transparent.

Le texte animé: cette partie s'est avérée la plus difficile à réaliser pour moi. En bref: j'ai préparé le texte sur Inkscape puis je l'ai chargé sur Blender de manière à générer l'animation plan par plan. Si vous souhaitez plus de détails à propos de cette étape n'hésitez pas à me le faire savoir dans les commentaires et je vous donnerais plus de précisions.


Installation de Spark AR Studio

Rendez-vous sur la page de téléchargement de Spark AR Studiopour télécharger le fichier d'installation. Suivez les instructions pour installer le programme.

Un compte facebook est requis pour travailler avec ce programme.


Création d'un nouveau projet

Lorsque vous aurez lancé Spark AR Studio, créez un nouveau projet en cliquant sur Créer un nouveau -> Nouveau projet -> Suivi de cible.

La version sur laquelle j'ai travaillé pour réaliser ce tutoriel était encore assez instable et j'ai eu des soucis alors n'oubliez pas de sauvegarder fréquemment au cas ou!


Import des textures dans le projet

Vous rappelez-vous les éléments de la scène que nous avons sauvegardé en .png plus tôt? Il nous faut maintenant les charger en tant que Textures de manière à les utiliser dans le projet.

Pour citer la documentation du programme:

Une texture est un fichier image utilisé pour aider à définir l'apparence d'un objet dans votre scène. Vous pouvez appliquer une texture ou plus à un matériau, puis appliquer le matériau à un objet.

Dans le Panneau Actifs dans le coin inférieur gauche de la fenêtre, cliquez sur Importer depuis l'ordinateur et charger tous les fichiers dans le Textures dossier du référentiel Google Drive, à l'exception du contenu des images d'animation /Text (pour l'instant).

Sélectionnez ensuite toutes les textures nouvellement importées sauf pour Background et Business_card_target_image. Sur le Panneau texturé à votre droite dans le Sous-panneau de compression, définissez les trois options de compression sur Rien. Nous faisons cela parce que les images sont déjà suffisamment légères et que le module de compression du programme a tendance à rester bloqué pour toujours en utilisant trop de ressources CPU et GPU sans raison claire.

Maintenant, pour importer les images de l'animation de texte. Encore une fois, je dois utiliser une solution de contournement pour éviter de rester bloqué à attendre indéfiniment que le module de compression fasse (pas) son travail. En bas à droite de la Panneau Actifs, cliquer sur + Ajouter un élément -> Importer -> Depuis l'ordinateur. Charger toutes les images du /Cadres d'animation de texte dossier, une moitié à la fois. Je dois le faire pour éviter de planter le programme… Il existe une option d'importation d'animation de texture qui serait plus pratique à utiliser si elle ne… plantait le programme.

Une fois les 50 images importées, sélectionnez-les toutes et modifiez le Taper pour Séquence de textures au sommet de la Panneau texturé.

Réglez la compression sur Rien pour les trois options de compression comme nous l'avons fait avec les autres textures.

Enfin, nous devons créer un autre type d'objet pour travailler avec notre animation. Dans le + Ajouter un élément menu, sélectionnez Séquence d'animations. Dans le panneau qui s'est ouvert sur votre droite, cliquez sur le flèche déroulante en face de Texture et sélectionnez le séquence de textures que nous venons de créer.


Création des matériaux

Pour créer les matériaux requis, cliquez sur + Ajouter un élément -> Matériel. Nous allons en avoir besoin de 7, alors allez-y et dupliquez-le 6 fois avec CTRL + D

Donnez à tous les matériaux un nom plus significatif. Maintenant, nous devons définir quelques paramètres sur chacun d'eux.

Sélectionnez tous les matériaux à l'exception de l'arrière-plan.

Sur le Panneau de matériau sur votre droite sélectionnez Double face dans le Options de rendu sous-panneau. C'est pour que nos textures soient également visibles si elles sont vues de dessous - quelque chose qui sera particulièrement pertinent pour les ailes et le corps du papillon puisqu'ils flotteront dans les airs.

Dans le Option de rendu avancé sous-panneau, décochez Ecrire en profondeur. Cela permettra au fond transparent de nos textures de vraiment disparaître et de ne pas interférer les uns avec les autres lorsque nous travaillerons avec des avions plus tard.

Sélectionnez ensuite la Texture pour chaque matériau du Propriétés du shader sous-panneau.


Ajout des textures au traqueur de cible

Nous devons maintenant donner une cible à notre Target Tracker - le module du programme qui est chargé de localiser l'objet du monde réel qui déclenchera l'animation et de lui donner des informations sur le plan sur lequel il doit être orienté.

Sélectionner fixeTargetTracker0 dans le Scène panneau en haut à gauche et dans le Traqueur de cible menu sur votre droite sélectionnez Business_card_target_image comme le Texture.


Création des plans pour les éléments de la scène

La première chose que nous allons faire est de passer d'une vue 3D à une vue 2D de notre scène en changeant le Mode.

Suivant Clic-droit sur fixeTargetTracker0 pour Ajouter un nouveau Avion à la scène.

Utiliser CTRL + D pour dupliquer cet avion 6 fois pour se retrouver avec 7 avions.

Renommez les plans reflétant tous les éléments qui seront inclus dans notre scène.

Dans le Panneau d'avion sur votre droite, ajoutez le Matériel à chaque avion.


Mise à l'échelle et positionnement des plans

Maintenant que nos plans ont été texturés, nous devons les ajuster pour donner aux éléments de notre scène leurs dimensions et positions appropriées. Pour ce faire, nous allons travailler un avion à la fois.

Commencez donc par sélectionner tous les avions sauf le premier avec lequel vous travaillerez (dans ce cas, les étoiles) et faites-les caché en décochant Visible.

Utilisez l'image cible comme référence pour échelle et repositionner les étoiles jusqu'à ce qu'elles correspondent en quelque sorte à l'arrière-plan. Lorsque vous avez terminé, réglez la visibilité du plan des étoiles sur masqué et passez à un autre plan. Répétez cette opération avec tous les plans sauf pour le Background et le TextAnimation.

Une fois que vous êtes satisfait, révélez tous les plans sur lesquels vous avez travaillé ainsi que l'arrière-plan. Sélectionnez le Arrière-plan avion et échelle aux dimensions souhaitées - idéalement, vous voudrez probablement qu'il recouvre complètement l'image cible.

Faites ensuite le TexteAnimation visible et une fois de plus redimensionnez-le à ses proportions d'origine et positionnez-le de manière appropriée.

Le papillon semble maintenant un peu petit par rapport au fond. En effet, nous avons redimensionné le papillon de nuit en utilisant l'image cible comme référence, mais avons agrandi l'arrière-plan par rapport à la carte de visite. Ainsi, nos proportions ne sont plus vraiment fidèles à la maquette.

Pour résoudre ce problème, nous voulons tout mettre à l'échelle sauf l'arrière-plan de manière cohérente. Nous y parviendrons en englobant tous ces éléments dans un Conteneur nul, et mise à l'échelle ce conteneur au lieu de tous les avions individuels.


Animation du texte

Clic-droit sur fixeTargetTracker0 et choisissez Créer un correctif. Cela ouvrira le éditeur de correctifs.

Clic-droit dans l'éditeur de correctifs et ajoutez un Animation correctif. Relier la Trouvé connecteur de la fixeTargetTracker patch à la Joue connecteur de la Animation correctif. Cela fera en sorte que l'animation de texte commence à jouer lorsque le filtre AR est activé car l'image cible a été trouvée.

Cela ajoutera automatiquement un patch Pulse entre les deux. Connectez le Éteindre connecteur de la Impulsion patch à la Réinitialiser connecteur de la Animation correctif. Ainsi, lorsque la caméra s'écarte de l'image cible, l'animation de texte est réinitialisée et peut être lue à nouveau lorsque la cible est retrouvée.

Ajouter un Transition de cadre patcher et connecter son Le progrès connecteur à son homologue du Animation correctif. Met le nombre de trames = 51.

Sélectionnez le TexteAnimationSéquence pour ouvrir le Panneau Séquence d'animation sur votre droite. Clique sur le La Flèche précédent Cadre actuel pour ajouter un nouveau patch qui nous permettra d'interagir avec le cadre affiché dans la scène. Relier ce patch au connecteur disponible du Transition de cadre correctif.

Vous pouvez contrôler la vitesse de l'animation en modifiant le paramètre Durée du patch Animation.


Animation des ailes

Sélectionnez chaque aile consécutivement et assurez-vous que leur position à Axe z est 0.

Faire battre les ailes n'est pas difficile. Nous devons simplement ajouter une animation de rotation dans l'axe Y sur les deux objets ailes. Cependant, l'application directe d'un tel effet sur l'objet aile ne fonctionnerait pas. En effet le centre de masse de l'objet est situé au milieu de l'aile donc si on le faisait tourner il tournerait depuis le centre. Ce qu'il faut, c'est qu'il tourne depuis la partie du bord de l'aile, celle en contact avec le corps. J'espère que j'ai un peu de sens ici...

Nous devons donc trouver un moyen de déplacer d'une manière ou d'une autre le centre de masse des objets de l'aile. Pour ce faire, nous allons utiliser des objets nuls qui seront automatiquement créés avec un centre de masse centré sur le milieu de la scène. Ces objets nuls contiendront les objets ailes et la rotation sera appliquée à l'objet nul lui-même. Faisons le!

Clic-droit à Récipient et Ajouter un Objet nul à l'intérieur. Renommez-le en RightWingContainer et dupliquer avec CTRL + D. Renommez le LeftWingContainer en double. Sélectionnez le objets d'aile et glisser-déposer les dans leurs respectifs Conteneurs d'objets nuls.

Dans le Éditeur de correctifs, Clic-droit et ajouter un Animation en boucle correctif. Met le durée = 2 et cochez la En miroir case à cocher (c'est pour que l'animation se déroule en boucle de manière transparente et ne recommence pas du début à la fin d'un volet d'aile. Avec Mirrored activé, l'aile commencera à battre en arrière après avoir atteint la limite supérieure d'un volet vers le haut).

Ajoutez ensuite un Passage patch et dupliquer ce. Liez le Le progrès connecteur de la Animation en boucle patch à leurs homologues sur les deux Passage patchs.

Renseignez les paramètres des patchs Transition comme ceci :

[0, -40, 0,

0, 35, 0]

[0, 40, 0,

0, -35, 0]

Sélectionnez le RightWingConteneur et sur le Panneau Objet nul sur votre gauche cliquez sur le La Flèche précédent Rotation. Cela ajoutera un correctif à l'éditeur de correctifs afin que nous puissions interagir avec ces valeurs. Connectez le Valeur connecteur du plus haut Passage patch au connecteur du RightWingConteneur patch nouvellement créé.

Renouveler l'opération avec le LeftWingContainer et le patch de transition le plus bas.

À ce moment-là, vous devriez voir vos deux ailes commencer à battre ! Maintenant, nous avons juste besoin de déplacer le papillon le long de l'axe Z vers une position qui a plus de sens. Bricoler avec le Position à Axe z du RightWingConteneur, LeftWingContainer et Corps objets jusqu'à ce que vous obteniez un résultat qui vous plaise.


Aperçu du résultat

Vous devrez télécharger le Lecteur Spark AR application sur votre téléphone en premier.

Lorsque votre téléphone sera connecté à votre ordinateur, vous verrez un petit point bleu ajouté à l'icône du téléphone en bas à gauche de Spar AR Studio. Cliquez dessus et choisissez Envoyer à votre appareil.

Dirigez votre appareil photo vers la carte de visite que vous avez imprimée plus tôt et profitez-en !

À ce stade, utilisez l'application sur votre téléphone pour filmer une vidéo de l'effet car nous en aurons besoin pour la prochaine étape.


Publier le filtre AR sur Fracebook ou Instagram

Cliquez sur l'icon en forme de flèche Publier en dessous de l'icon Preview dans le coin en bas à gauche. Cela va packager le projet, le charger et vous rediriger sur la page du Moyeu Spark AR.

Suivez ces instructions pour publier votre filtre:

  1. Choisissez un nom pour votre filtre.
  2. Choisissez une platforme ou vous souhaitez publier votre filtre - Instragram et/ou Facebook.
  3. Choisissez une catégorie pour votre filtre et ajoutez quelques mots clefs si vous souhaitez que votre filtre soit facilement découvrable par le moteur de recherche des fitltres.
  4. C'est ici que la vidéo que nous avons sauvegardé durant l'étape précédente s'avère utile. Chargez la vidéo de démo de votre filtre.
  5. Choisissez un icône pour votre filtre.
  6. Écrivez une courte la description expliquant de quoi relève votre filtre et comment l'utiliser pour aider au processus de vérification.
  7. Appuyez sur Soumettre dans le coin en haut à droite.
  8. Attendez que la vérification ait lieu.

Il est intéressant de lire les conditions d'utilisation de Spark AR avant de soumettre pour vérification. Ma première tentative fut refusée car l'adresse de mon site web était visible sur la vidéo de démonstration.


Résultat final

Je termine sur une démonstration des quelques filtres que j'ai publié jusqu'ici.

Le premier est celui que j'ai créé pour ma carte de visite, le second est un test fait avec une carte postale que j'ai créé avec des pétales de fleurs séchées et le dernier est le filtre que nous venons de créer ensemble.

J'espère que vous avez apprécié ce tutoriel.

Comme toujours, n'hésitez pas à me contacter si vous avez la moindre question ou le moindre retour quant au contenu présent sur ce site.

Notes de bas de page


Le contenu en ligne suivant m'a apporté assistance technique ou inspiration durant la réalisation de ce projet:

https://www.facebook.com/sparkarhub/portfolios/ig/elenazecchin.art/
https://www.facebook.com/sparkarhub/portfolios/fb/robotnicc/
https://www.facebook.com/sparkarhub/portfolios/fb/cinqueurochallenge/
https://www.facebook.com/sparkarhub/portfolios/fb/cinqueurochallenge/
https://www.facebook.com/sparkarhub/portfolios/fb/cinqueurochallenge/
https://www.facebook.com/sparkarhub/portfolios/934869913719072/effects/292882838652535/
S'abonner
Notification pour
invité
0 commentaires
Commentaires en ligne
Afficher tous les commentaires