Ce tutoriel est la version en Français de mon entrée à la compétition: 2020 Developer Circles Community Challenge organisé par Meta.
Regional Winner 🏅
Bienvenue dans ce nouveau tutoriel pour Meta Spark Studio . Dans ce projet, nous allons apprendre à faire un visualiseur audio en utilisant les fonctionnalitées Audio de Meta Spark AR. Ceci est un tutoriel destiné aux débutants.
À la fin de ce tutoriel, nous saurons comment faire un visualiseur audio comme sur l'image :
Ce tutoriel couvre :
- Importer l'objet 3D
- Faire intéragir l'objet 3D avec l'audio
Dans ce tutoriel j'utilise la version 99 de Meta Spark AR Studio.
Avec plus de 400'000 créateurs dans plus de 190 pays, Spark AR est la plus grosse plateforme de Réalité Augmenté sur mobile . Plus de 1,2 Millions d'effets AR ont été publiés sur Facebook et Instagram.
Nous sommes encore dans les prémices de ces technologies. Chaque mise à jour est une surprise de nouvelles fonctionnalités.
Avec ou sans connaissances en programmation, Meta Spark AR Studio élargit vos champs de connaissances et d'experimentation dans vos compétences en création digitale. Un logiciel puissant pour créer des effets en Réalité Augmenté.
Voici une Walkthrough Vidéo du tutoriel.
La vidéo suivante est une vidéo étape par étape du tutoriel. La vidéo contient tout le processus de création de ce tutoriel.
Pour ce projet nous avons besoin de :
- Télécharger Spark AR
- modele 3D dans le dossier 3D-model lien du modele
- Avoir Spark AR Player installé sur son téléphone lien pour Spark AR Player
Pour commencer ce tutoriel il faut télécharger le logiciel Meta Spark AR Studio puis l'ouvrir . Nous avons aussi besoin du modele 3D 'audioBar.fbx' dans le dossier '3D-model'. Nous allons voir les éléments audio et comment les utiliser dans le Patch Editor.
Commençons par :
- Ouvrir Meta Spark AR
- Nouveau Projet
- Choisir Plane Tracking
Une fois le projet ouvert. Glisser l'objet 3D (audioBar.fbx) dans le projet puis Glisser sous 'Placer'.
Selectionner audioBar dans la scène puis changer la valeur 'scale' à 0.1 sur la droite de votre écran.
Image de référence :
Une fois effectué, dupliquer audioBar et changer la valeur 'position' du second audioBar à 0.2 sur l'axe X .
Image de référence :
Maintenant passons à la création du Material que nous allons appliquer au modele 3D (audioBar) . Pour ce projet je vais créer 8 materials avec des couleurs différentes.
Pour appliquer un Material :
- select the cube inside the audioBar
- on the right, create a material
- select your material on the left side of your screen
Image de référence :
Une fois que nous avons notre Material, nous pouvons l'améliorer en :
- changer le 'Shader Type' et choisir 'Physically-Based'
- changer la couleur
Importer une image 'environment texture' :
Le material devrait ressembler à :
Les fonctionnalitées que nous allons utiliser ne sont uniquement disponible pour la platforme Instagram. Nous devons désactiver Facebook comme plateforme. Pour se faire : Project > Edit Properties > Uncheck Facebook
Image de référence :
Maintenant que notre scène est en place, nous ouvrons le Patch Editor : | View > Show/Hide Patch Editor
Cela va ouvrir le Patch Editor.
Dans votre scène :
- glisser le Microphone dans le Patch Editor.
- Click droit dans le Patch Editor et choisir sous Audio lélément Audio Analyzer
- lier le microphone à Audio Analyzer ( Microphone à Audio)
Audio Analyzer est un élément qui nous rend possible de séparer le son en 8 channels différents. Les fréquences vont de 0Hz à 12'000Hz.
Informations sur l'élément Audio Analyzer :
Selectionner audioBar, à droite de votre écran et nous devons activer le 'scale' en cliquant sur la petite flèche :
Ici :
Clique droit dans le Patch Editor et ajouter un élément Transition. Changer les valeurs de l'élément Transition comme ceci :
Lier : Audio Analyzer > Transition > audioBar '3D Scale'
Nous devons ajouter une sortie audio (Speaker) pour l'utiliser comme output audio. Dans la Scene :
- cliquer sur 'Add Object' et ajouter Speaker
- selectionner le Speaker
- cliquer la flèche sous Audio
Image de référence :
Lier le premier output du Audio Analyzer au Speaker output (élément jaune) :
Repeter cette étape avec audioBar2
Repeter cette étape pour tout vos objets audioBar .
Votre Patch devrait ressembler à :
Maintenant que nous avons fini ; nous pouvons voir l'aperçu du fichier depuis l'app Meta Spark AR Player envoyer sur votre profile Instagram :
Nous somme prêts à publier !
On bottom of your screen :
- cliquer sur Upload and Export
- suivre le process de publication du fichier
En apprendre plus sur Meta Spark AR :
Télécharger Meta Spark AR Studio ici : Télécharger Meta Spark AR
Lien du projet Github : https://github.com/RobbieConceptuel/spark-ar-tutorial-audio-visualizer
Lien pour en apprendre plus : https://sparkar.facebook.com/ar-studio/learn/
Rejoindre Spark AR Francophone
écris avec 💖 par Robbie Conceptuel - 2020