Bonjour, Habr! Je vous présente la traduction de l'article «Créer une expérience audiovisuelle VR sur le Web avec A-Frame et Tone.js» de Sean Sullivan.
A-Frame est un cadre de création de réalité virtuelle sur le Web. À l'aide d'un simple lien, toute personne possédant un casque VR ou un smartphone compatible VR peut s'immerger dans l'espace 3D. Tone.js est une bibliothèque JavaScript pour créer des sons. Voyons ce qui se passe s'ils sont combinés.Pour commencer, nous allons créer un environnement, avec A-frame c'est très simple. En utilisant uniquement du HTML de base, nous pouvons créer un espace 3D entier, pour cela nous avons besoin d'un composant environnement-cadre . Voici le balisage de base pour nos besoins.<!DOCTYPE html>
<html>
<head>
<title>Basic Scene with Environment - A-Frame</title>
<meta name="description" content="Basic Scene with Environment - A-Frame">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"> </script>
<script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene environment="preset: starry">
<a-camera>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-camera>
</a-scene>
</body>
</html>
Faites attention à l'élément:<a-entity cursor>
C'est à l'intérieur de notre cellule. Un peu plus tard, il vous permettra de communiquer avec notre synthétiseur. Mais avant de commencer, vous devez vous assurer que le projet est correctement chargé.En ouvrant la page, vous devriez voir un ciel en trois dimensions, des étoiles et une grille sur la terre. Tout cela a été créé par aframe-environment-component lorsque nous avons défini l'environnement:<a-scene environment=”preset: starry”>
Si vous le souhaitez, l'environnement peut être modifié, ajoutez simplement un autre modèle. Au moment d'écrire ces lignes, il existe 16 modèles d'environnement différents de votre choix.
J'aime que notre synthétiseur soit dans l'espace, l'espace est cool. Rendons notre environnement plus semblable à la surface d’une planète.Tout d'abord, nous allons supprimer la grille et ajouter la texture de la terre, en changeant:<a-scene environment="preset: starry">
sur le<a-scene environment="preset: starry; grid: none; groundTexture: walkernoise">
En lançant la page maintenant, nous verrons que notre planète est encore trop sombre pour voir quoi que ce soit sur terre. Corrigez cela en ajoutant une source de lumière à notre scène.<a-entity light="type: ambient; color: #CCC"></a-entity>
Avec cela, la scène devrait ressembler à ceci:
maintenant que nous avons compris l'environnement, commençons à développer un synthétiseur.Création de composants
A-Frame est construit sur un système de composants d'entité . Il vous permet de créer des composants et de les ajouter aux entités de notre scène.Créons un fichier synth.js pour notre composant.AFRAME.registerComponent('synth', {
schema: {
},
init: function () {
},
update: function () {
},
remove: function () {
},
tick: function (time, timeDelta) {
}
});
Comme vous pouvez le voir, les méthodes de cycle de vie sont intégrées dans A-Frame, ce qui facilite l'ajout d'interactivité à nos projets WebVR. La base des composants est prête, regardons le processus de création d'un synthétiseur avec Tone.js.Tone.js
Tone.js - un cadre pour créer de la musique interactive dans un navigateur, est un wrapper pour l'API Web Audio. Créer un synthétiseur avec tone.js est simple - il suffit d'écrire une ligne:var synth = new Tone.Synth().toMaster()
Mais nous allons créer un oscillateur et ajouter plusieurs paramètres pour simplifier davantage la personnalisation:const synth = new Tone.Synth({
volume: -15,
oscillator: {
type: 'triangle'
},
envelope: {
attack: 0.05,
release: 2
}
}).toMaster()
Ajoutez ce code directement au-dessus de notre composant dans le fichier synth.js . Nous avons maintenant un synthétiseur, mais nous devons fournir à notre composant un moyen d'y accéder. Vous vous souvenez du <curseur d'entité> que nous avons ajouté à la caméra? Ce curseur a un paramètre fuse = "true" . Cela nous permettra de garder une trace de la façon dont le curseur interagit avec les entités. Ajoutez un EventListener au composant pour le fusible.Nous allons créer un EventListener dans la méthode init du cycle de vie et créer une nouvelle méthode appelée trigger qui déclenche Tone.js....
init: function () {
this.el.addEventListener('fusing', this.trigger.bind(this))
},
trigger: function () {
synth.triggerAttackRelease(this.data.note, this.data.duration)
},
...
Ajoutez un composant synthétiseur à la scène.
Nous avons créé le composant, il est temps de l'ajouter à la scène A-Frame.Pour commencer, j'ai ajouté Tone.js et un composant synthétiseur à notre balisage. Faites attention à l'ordre de connexion des fichiers - synth.js est chargé après Tone.js....
<script src="https://unpkg.com/tone@13.8.25/build/Tone.js"></script>
<script src="synth.js"></script>
</head>
...
Nous avons également besoin de plusieurs entités auxquelles nous attacherons le composant. Ajoutez des formes A-Frame standard pour une utilisation dans notre scène.<a-scene>
...
<a-box synth="note: E4" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere synth="note: C4" position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder synth="note: G4" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
...
Notez l'attribut synthé . C'est le composant que nous avons créé. «Synth» est le nom sous lequel nous nous sommes enregistrésAFRAME.registerComponent ('synthé', {})
et nous avons déclaré «note» dans le diagramme des composants. Il existe également une propriété «duration» - nous pouvons l'utiliser pour modifier la longueur d'une note. Par exemple:synth = "note: E4; durée: 8n »
jouera 1/8 de la note entière, pas le 1/4 standard.Maintenant, après avoir ouvert la scène dans le navigateur, nous verrons nos figures, et lorsque vous les survolerez, la note de notre composant synthétiseur devrait être jouée.
Utilisation du contrôleur Oculus Go
Maintenant, notre scène fonctionne comme ceci - le curseur est fixé au centre de l'écran. Sur les casques VR, cela s'appelle le contrôle «visuel». En tournant la tête, le curseur se déplacera dans le sens du mouvement de l'utilisateur. C'est une expérience tout à fait normale et fonctionne bien pour de nombreux projets. Mais que se passe-t-il si nous voulons contrôler le synthétiseur à l'aide d'un contrôleur VR? Déplacer vos bras et rendre la musique amusante, alors changeons notre scène pour utiliser le contrôleur Oculus Go.Tout d'abord, ajoutez quelques entités à notre scène - le contrôleur et le diffuseur de rayons....
<a-entity oculus-go-controls>
<a-entity laser-controls raycaster="far: 200; interval: 100"></a-entity>
...
Ici, nous avons notre propre entité pour contrôler Oculus Go, ainsi qu'une pour Raycaster, qui fonctionnera toutes les 100 millisecondes.Modifions maintenant le composant synthétiseur pour contrôler Oculus. Nous le faisons en ajoutant raycaster en fonction de notre composant.AFRAME.registerComponent('synth', {
dependencies: ['raycaster'],
...
Ensuite, dans la méthode init , changez EventListener - il devrait suivre l'événement:Raycaster-intersection
init: function () {
this.el.addEventListener('raycaster-intersection', this.trigger.bind(this))
},
...
Le début de la scène dans Oculus Go devrait maintenant montrer votre contrôleur - et le contrôle laser devrait démarrer le synthétiseur en jouant des notes lorsque vous survolez les figures.
Si vous voulez voir de plus près le projet, vous pouvez l'exécuter et voir le code source ici - glitch.com/~space-synth-vrEn garde à vue
Nous avons maintenant une scène simple avec un synthétiseur VR et il existe un grand nombre de possibilités pour l'améliorer. Nous pouvons ajouter plus d'objets pour l'interaction, plus de synthétiseurs et d'effets pour le composant. Nous pouvons animer des objets en fonction de certains événements. Au fur et à mesure que la scène grandit, vous devez penser aux performances. Heureusement, A-Frame possède de nombreuses fonctionnalités intégrées qui peuvent aider à résoudre ce problème.Voici quelques liens utiles raycasterComposants Interaction et contrôle Tone.js projet de code source Nous vous remercions de lire.