Article original : How to wish someone Happy Birthday using Augmented Reality

J'ai une amie dont l'anniversaire approchait, alors je voulais faire quelque chose de spécial pour elle. Comme elle est une TechGeek tout comme moi, je ne pouvais pas simplement lui offrir un cadeau d'anniversaire simple comme un ours en peluche ou des chocolats. Alors, j'ai commencé à chercher des moyens uniques de lui souhaiter un joyeux anniversaire sur le Web.

J'ai fini par regarder une vidéo où un homme faisait sa demande en mariage à une femme en utilisant la VR. Alors, j'ai décidé — c'était ça ! C'est comme ça que j'allais faire. Pas la partie demande en mariage, bien sûr.

Alors que je contribuais à Mozilla, j'avais créé quelques petits projets VR en utilisant A-Frame — le framework web de Mozilla pour construire des expériences de réalité virtuelle. Et croyez-moi, même si vous ne connaissez pas beaucoup la VR ou la RA, vous pouvez facilement créer une scène VR en utilisant A-Frame. Le seul prérequis est HTML, que vous pouvez apprendre facilement ici. Pour une meilleure compréhension, cependant, je vous recommande de parcourir A-Frame School, qui est une grande collection de tutoriels destinés aux débutants.

J'avais donc décidé que j'allais utiliser A-Frame, mais je voulais plus qu'une simple scène VR affichant « Joyeux Anniversaire ». À la fin, j'ai choisi de créer une scène AR. J'ai trouvé un excellent projet appelé AR.js. Si vous voulez commencer avec AR.js, voici un excellent article pour débutants.

Construire une application Web AR de base

Image Scène AR, créée en utilisant AR.js

Pour regarder la scène AR, vous devez :

  • Ouvrir cette image de marqueur HIRO dans votre navigateur de bureau.
  • Ouvrir cette application Web AR dans votre navigateur de téléphone, et la pointer vers votre écran.

Lorsque vous scannez un marqueur (ici, un marqueur HIRO), il affichera une scène AR sur votre téléphone, comme l'image ci-dessus. J'ai utilisé un marqueur HIRO simple, mais vous pouvez créer votre propre marqueur également.

Donc, après avoir ajouté toutes ces bibliothèques, mon code ressemblait à ceci :

Image _Application Web AR de base [ [Démo](https://hackyroot.github.io/A-Frame-Examples/Happy_Birthday/Basic.html" rel="noopener" target="blank" title=") ]

Veuillez noter que lors de l'accès à une application Web AR, si vous obtenez une invite demandant la permission d'accéder à la webcam, veuillez l'autoriser. Sinon, l'application ne fonctionnera pas.

Ajouter des modèles 3D et des polices

Donc, maintenant nous avons une application Web AR simple fonctionnant sur notre appareil. Mais qu'est-ce qu'un anniversaire sans gâteau ?! Heureusement, A-Frame supporte trois types de modèles 3D : glTF, OBJ, et COLLADA. En savoir plus sur les modèles 3D dans A-Frame ici.

J'ai téléchargé quelques fichiers de modèles 3D de gâteau depuis Google Poly. Vous pouvez importer n'importe quel fichier d'actif dans A-Frame en utilisant la balise . Vous pouvez également importer des polices séparées, au cas où vous souhaitez utiliser une police différente.

J'étais assez convaincu qu'A-Frame ne pouvait pas être plus génial. Mais, attendez...

Ajouter de l'audio

Les anniversaires ne sont pas complets sans la chanson d'anniversaire, n'est-ce pas ? Et A-Frame supporte également les fichiers audio. Vous pouvez utiliser la balise pour importer vos fichiers, sous la balise .

Image Importer des fichiers d'actifs

Ajouter des particules

Quelle est la chose qui vous vient à l'esprit lorsque vous entendez parler d'un anniversaire — après le gâteau, bien sûr ? Une fête, n'est-ce pas ? Alors, ajoutons des confettis à notre scène AR, en utilisant le composant Particle System d'A-Frame.

Image Ajouter des bibliothèques pour les confettis et le texte 3D

Mettons tout cela ensemble

Modèles 3D

Ce code affichera le modèle 3D du gâteau. Mais comme vous pouvez le voir, j'ai ajouté quelques valeurs dans les champs rotation et scale. Alors, discutons de cela. Selon la page GitHub d'A-Frame :

  • Rotation : le composant de rotation définit l'orientation d'une entité en degrés. Il prend le tangage (x), le lacet (y), et le roulis (z) comme trois nombres séparés par des espaces indiquant les degrés de rotation.
  • Scale : le composant d'échelle définit une transformation de rétrécissement, d'étirement ou de cisaillement d'une entité. Il prend trois facteurs d'échelle pour les axes X, Y et Z.
  • MTL : signifie Material Library File (.mtl) Les fichiers de bibliothèque de matériaux contiennent une ou plusieurs définitions de matériaux, chacune incluant la couleur, la texture et la carte de réflexion des matériaux individuels. Ceux-ci sont appliqués aux surfaces et aux sommets des objets. Les fichiers de matériaux sont stockés au format ASCII et ont l'extension .mtl.
  • OBJ : un format de fichier qui a été créé comme un moyen simple d'importer et d'exporter la géométrie depuis différentes applications 3D. Il s'agit d'un type de fichier courant utilisé par de nombreuses solutions de conception 3D.
  • Suggestion : Si vous ne voyez pas votre modèle, essayez de le réduire. Les modèles OBJ ont généralement des échelles extrêmement grandes par rapport à l'échelle d'A-Frame.

Si vous vous demandez comment je connaissais les valeurs exactes pour la rotation, eh bien je ne les connaissais pas. J'ai utilisé un outil incroyable créé par l'équipe Mozilla appelé A-Frame Inspector, construit à cette fin seulement.

Pour en savoir plus sur , visitez ce lien.

Image Afficher le modèle 3D du gâteau

Particules

Eh bien, ce code peut sembler écrasant à première vue, mais croyez-moi, ce n'est pas le cas. Nous avons discuté de la Rotation plus tôt, mais parlons des autres champs également :

  • Position : place les entités à certains endroits dans l'espace 3D. La Position prend une valeur de coordonnée sous forme de trois nombres séparés par des espaces.
  • Preset : configuration prédéfinie. Les valeurs possibles sont : default, dust, snow, rain. Ici, nous avons choisi default afin d'afficher des étoiles.
  • Color : décrit la couleur d'une particule. Cette propriété est une propriété « valeur-sur-la-durée-de-vie », ce qui signifie qu'un tableau de valeurs peut être donné pour décrire des changements de valeur spécifiques sur la durée de vie d'une particule.
  • Acceleration Value : décrit l'accélération de base de cet émetteur.
  • Particle Count : le nombre total de particules que cet émetteur contiendra.
  • Direction : la direction de l'émetteur. Si la valeur est 1, l'émetteur démarrera au début du cycle de vie de la particule. Si la valeur est -1, l'émetteur démarrera à la fin du cycle de vie de la particule et travaillera à rebours.
  • Rotation Axis : décrit l'axe de rotation de cet émetteur. Les valeurs possibles sont x, y et z.

Pour en savoir plus sur le système de composants de particules d'A-Frame, visitez ce lien.

Image

Texte et Audio

Eh bien, vous pouvez utiliser également, mais j'ai décidé d'utiliser le composant Text Geometry pour plus d'options. Il est utilisé pour générer du texte sous forme de géométrie unique.

  • Material : Le composant de géométrie de texte définit uniquement la géométrie. Nous pouvons appliquer n'importe quel matériau three.js à la géométrie.
<a-entity text="value: HELLO" material="color: red; src: #texture"></a-entity>

Pour plus de détails, visitez la documentation de three.js.

  • Text Geometry : valeur de la chaîne et de la police. (vous devriez modifier le texte dans cette partie, sinon vous finirez par souhaiter un joyeux anniversaire à mon amie ??)
  • Sound : définit l'entité comme une source de son ou d'audio.
  • Autoplay : décrit si le son doit être joué automatiquement une fois défini.
  • Loop : décrit si le son doit être joué en boucle une fois que le son a fini de jouer.
  • On : un événement pour l'entité à écouter avant de jouer le son.

Image

Ressources :

Oui, vous l'avez fait ? ? ?. Vous avez créé votre première application AR. Si vous avez tout fait correctement, vous devriez maintenant voir quelque chose comme l'image ci-dessous :

Image Finalement, Joyeux Anniversaire Krupa !

Si vous aimez mon travail, veuillez me suivre sur Medium @Pratik Parmar ou m'ajouter sur LinkedIn. N'hésitez pas à me contacter sur Twitter : Pratik Parmar ou commentez ci-dessous, au cas où vous auriez besoin d'aide.

En plus des contributions open-source chez Mozilla, je suis un Microsoft Student Partner et membre de la communauté chez GDG Baroda. Je tiens à remercier Mozilla et la communauté MozillaIN pour m'avoir donné une chance et les ressources pour apprendre sur la VR/AR et l'Open Source.

C'est moi, Pratik Parmar, qui signe jusqu'à la prochaine aventure technologique. Fin de transmission...

[ Modification : Merci à Vikranth Kanumuru d'avoir attiré mon attention sur le fait que l'URL du code source était cassée. Elle a été mise à jour maintenant, veuillez essayer maintenant. Continuez à coder, continuez à assurer ]