L’intention de cet espace virtuel est de proposer une expérience immersive, accessible et avancée. La disponibilité via le navigateur permet d’y pénétrer simplement, en accédant au site web, sans téléchargement et après un court chargement, et sans connaissances particulières. L’espace est programmé en JavaScript, à l’aide de la librairie Three.js qui permet de construire un environnement virtuel en trois dimensions, en créant des objets ou en intégrant des modèles existants. L’intégration audio s’est découpée en plusieurs étapes ou tentatives, à l’aide de différentes librairies JavaScript. Cette partie est dédiée à la documentation de ces étapes d’expérimentation.
Le choix du langage JavaScript s’est présenté à moi de manière naturelle, puis tout à fait justifiée. Mais, ce choix pose une question évidente : pourquoi choisir un tel langage, alors qu’un métavers est par essence global, et nécessite donc des ressources et des performances qui ne sont probablement pas disponibles avec ce langage seul ? Pourquoi ne pas se tourner plutôt vers des logiciels comme Unity ou Unreal Engine, qui ont largement démontré leur capacité à délivrer des applications éprouvées et exploitables à très grande échelle ?
D’une part, JavaScript est un langage particulièrement adapté à la création d’interfaces entre l’utilisateur et le navigateur. De la création d’un site web interactif élémentaire à une plateforme de commerce, de traitement de données, ou d’échange de cryptomonnaies, on peut exploiter ce langage presque systématiquement, en partie ou entièrement. On mentionne souvent deux types de rôles pour le développement d’applications : Front End et Back End ; la maîtrise du langage JavaScript permet, notamment via l’utilisation de librairies et de frameworks, d’occuper ces deux rôles, et de construire des applications full-stack. De nombreuses librairies en développement constant sont disponibles, dont certaines qui aident à interagir efficacement avec la Blockchain. En outre, je tiens particulièrement à conserver mon emprise sur le code de l’application, et cela lui offre une certaine extensibilité, et de bonnes possibilités d’adaptation. C’est particulièrement avéré pour l’audio immersif, puisque les principaux moteurs de jeu vidéo n’en permettent pas une utilisation extensive, notamment via le format ambisonique, ce qui nécessite de recourir à des outils et librairies externes, lesquels ne sont pas forcément limités à ces moteurs. Enfin, mon affection particulière pour ce langage, son évolution et sa sphère d’influence m'incitent à être convaincu que les fondations d’un tel espace virtuel peuvent tout à fait être conçues en JavaScript, sans que l'on soit restreint à sa seule utilisation pour autant.
Le code source du projet est hébergé sur GitHub à cette adresse.
/src/World → l’essentiel du code : systèmes, scène 3D, composants audio, la logique de fonctionnement ; c’est principalement ce que l'on étudiera.
/src/assets → le lieu de stockage des fichiers : audio, polices d’écriture, modèles 3D et textures.
/src/styles → les feuilles de style de la page : menu, icône de chargement, fenêtre d’alertes...
En ce qui concerne les modules principaux, ils sont situés dans les dossiers /src/World/components et /src/World/systems.
components/objects/ → les modules de gestion des objets 3D, les quatre boules situées dans la pièce.
components/camCollision.js → la gestion de la collision de la caméra avec les objets, pour permettre d’afficher des informations au clic seulement à proximité.
components/camera.js → la gestion de la caméra Three.js : angle, vision minimale et maximale.
components/crosshair.js → le mince curseur au milieu de l’écran, assez peu visible.
components/lights.js → les lumières Three.js : directionnelles et ambiante.
components/menu.js → le menu supplémentaire généré en JavaScript, par exemple, le bouton de mute de l’audio (récemment ajouté, pas encore fonctionnel).
components/particles.js → les particules brillantes qui se déplacent lentement : texture, caractéristiques, taille...
components/player.js → la gestion du contrôleur - le “personnage” contrôlé par l’utilisateur : collision avec le modèle de l’infrastructure, gravité, contrôles associés au clavier et à la souris, vitesse de déplacement, assurance qu’il ne sort pas de la “boîte” (le modèle).