0 0 votes
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:

  • Blender pour générer l'animation du texte et l'exporter plan par plan.
  • Inkscape pour tous les dessins vectoriels.
  • Spark 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
  • /Spark AR Business Card Tutorial
    • /Source files - les dessins vectoriels utilisés pour les textures.
      • Animated_text.blend
      • Animated_text.svg
      • Moth_business_card_AR_mockup.svg
      • Moth_business_card.svg
      • Spark_AR_business_card_icon.svg
    • /Spark AR Studio Project files - les fichiers du filtre AR complet tel que sauvegardés par Spark AR Studio.
      • /textures
      • SparkARBusinessCard.arproj
    • /Textures - à proprement parler les seuls fichiers nécessaires pour compléter le tutoriel.
      • /Text animation Frames
      • Background.png
      • Body.png
      • Business_card_target_image.jpg
      • LeftWing.png
      • Moons.png
      • RightWing.png
      • Stars.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é Best practices for target tracking in 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 Create New -> New Project -> Target Tracking.

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.

In the Assets panel on the bottom left corner of the window, click on Import From Computer and load all the files in the Textures folder of the Google Drive repository, except the content of /Text animation frames (for now).

Then select all the newly imported textures except for Background and Business_card_target_image. On the Texture panel to your right in the Compression sub-panel, set all three compression options to None. We do this because the images are already lite enough, and the program’s compression module has a tendency to get stuck forever using way too many CPU and GPU resources for no clear reason.

Now to import the frames of the text animation. Once again I have to use a workaround to avoid getting stuck waiting forever for the compression module to (not) do its work. At the bottom right of the Assets panel, click on + Add Asset -> Import -> From Computer. Load all the images of the /Text animation frames folder, one half at a time. I have to do this to avoid crashing the program…There is a Texture Animation import option which would be more convenient to use if it didn’t… crash the program.

Once the 50 frames are imported, select them all and change the Type to Texture Sequence at the top of the Texture panel.

Set the compression to None for all three compression options as we did with the other textures.

Finally we need to create another type of object to work with our animation. In the + Add Asset menu, select Animation Sequence. In the panel that opened on your right, click on the drop-down arrow in front of Texture and select the texture sequence that we just created.


Création des matériaux

To create the required materials, click on + Add Asset -> Material. We’re going to need 7 of those so go ahead and duplicate it 6 times with CTRL + D.

Give all the materials a more meaningful name. Now we have to set a few parameters on each of them.

Select all the materials except for the Background.

On the Material panel on your right select Double Sided in the Render Options sub-panel. This is so that our textures are visible if viewed from the underneath as well – something that will be especially relevant for the wings and the moth’s body since they will be hovering in the air.

In the Advanced Render option sub-panel, untick Write to Depth. This will allow the transparent background of our textures to really disappear and not interfere with each other when we will be working with planes later on.

Then select the relevant Texture for each material in the Shader Properties sub-panel.


Ajout des textures au traqueur de cible

Now we need to give a target to our Target Tracker – the module of the program that is in charge of locating the real world object that will trigger the animation and give it information about the plane it should be oriented on.

Select fixedTargetTracker0 in the Scene panel at your top left and in the Target Tracker menu on your right select Business_card_target_image as the Texture.


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

The first thing we’re gonna do is to switch from a 3D to a 2D view of our scene by changing the Mode.

Next Right Click on fixedTargetTracker0 to Add a new Plane to the scene.

Use CTRL + D to duplicate this plane 6 times in order to end up with 7 planes.

Rename the planes reflecting all the elements that will be included in our scene.

In the Plane panel on your right, add the relevant Material to each plane.


Mise à l'échelle et positionnement des plans

Now that our planes have been textured, we need to adjust them to give the elements of our scene their proper dimensions and positions. To do so we are going to work one plane at a time.

So start by selecting all the planes except the first one you will work with (in that case Stars) and make them hidden by unticking Visible.

Use the target image as a reference to scale and re-position the stars until they somehow match the background. When you are done, set the visibility of the Stars plane to hidden and move on to another plane. Repeat this operation with all the planes except for the Background and TextAnimation.

Once you are satisfied, reveal all the planes you have been working on as well as the Background. Select the Background plane and scale it to the desired dimensions – ideally you probably want to it completely cover the target image.

Then make the TextAnimation visible and once again scale it back to its original proportions and position it appropriately.

The moth now seems a bit small compared to the background. Indeed, we scaled the moth using the target image as a reference but made the background bigger than the business card. Thus our proportions are not really true to the mockup anymore.

To solve this, we want to scale everything except for the background in a consistent way. We will achieve this by encompassing all those elements in a Null Container, and scaling this container instead of all the individual planes.


Animation du texte

Right Click on fixedTargetTracker0 and choose Create Patch. This will open-up the patch editor.

Right Click in the patch editor and add an Animation patch. Connect the Found connector of the fixedTargetTracker patch to the Play connector of the Animation patch. This will make it so that the text animation starts playing when the AR filter is enabled because the target image has been found.

Doing that will automatically add a Pulse patch in between. Connect the Turned off connector of the Pulse patch to the Reset connector of the Animation patch. This is so that when the camera moves out of the way of the target image, the text animation is re-set and can be played again when the target is found anew.

Add an Frame Transition patch and connect its Progress connector to its counterpart from the Animation patch. Set the number of frames = 51.

Select the TextAnimationSequence to open up the Animation Sequence panel on your right. Click on the arrow preceding Current Frame to add a new patch that will allow us to interact with the frame being shown in the scene. Connect this patch to the available connector of the Frame Transition patch.

You can control the speed of the animation by tinkering with the Duration parameter of the Animation patch.


Animation des ailes

Select each wing consecutively and make sure that their position on the Z-axis is 0.

To make the the wings flap is not difficult. We simply need to add a rotation animation in the Y-Axis on both of the wings objects. However applying such an effect on the wing object directly would not work. Indeed the center of mass of the object is located in the middle of the wing thus if we were to rotate it it would rotate from the center. What we need is for it to rotate from the part of the edge of the wing, the one in contact with the body. I hope I’m kinda making sense here…

So we need to find a way to somehow shift the center of mass of the wing objects. To do this, we are going to use Null Objects which will automatically be created with a center of mass centered on the middle of the scene. Those Null Objects will hold the wings objects and the rotation will be applied to the Null Object themselves. Let’s do it!

Right click on the Container and Add a Null Object inside it. Rename it to RightWingContainer and duplicate it with CTRL + D. Rename the duplicate LeftWingContainer. Select the wing objects and drag&drop them into their respective Null Object containers.

In the Patch editor, Right click and add a Loop Animation patch. Set the duration = 2 and tick the Mirrored checkbox (this is so that the animation loops seamlessly and doesn’t start again from the beginning at the end of a wing flap. With Mirrored on, the wing will start flapping backward after reaching the upper limit of an upward flap).

Next add a Transition patch and duplicate it. Link the Progress connector of the Loop Animation patch to their counterparts on both Transition patches.

Fill in the parameters of the Transition patches like so:

[0, -40, 0,

0, 35, 0]

[0, 40, 0,

0, -35, 0]

Select the RightWingContainer and on the Null Object panel on your left click on the arrow preceding Rotation. This will add a patch to the patch editor so that we can interact with those values. Connect the Value connector of the top-most Transition patch to the connector of the RightWingContainer patch newly created.

Repeat the operation with the LeftWingContainer and the bottom-most Transition patch.

At the point you should see both your wings start to flap! Now we just need to move the moth along the Z-axis to a position that makes more sense. Tinker with the Position on the Z-axis of the RightWingContainer, LeftWingContainer and Body objects until you reach a result that pleases you.


Aperçu du résultat

You’ll need to download the Spark AR Player app on your phone first.

When your phone will be connected to your computer, you’ll see a little blue dot added to the phone icon at the bottom left of Spar AR Studio. Click on it and choose Send to your device.

Point your camera to the business card you printed earlier and enjoy!

At that point use the App on your phone to shoot a video of the effect as we will need it for the next step.


Publier le filtre AR sur Fracebook ou Instagram

Cliquez sur l'icon en forme de flèche Publish 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 Spark AR Hub.

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 icon pour votre filtre.
  6. Écrivez une courte description expliquant de quoi relève votre filtre et comment l'utiliser pour aider au processus de vérification.
  7. Appuyez sur Submit 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
guest
0 Comments
Commentaires en ligne
Afficher tous les commentaires