Catégories
Plugin et site web

Utilisation de WebXR avec Babylon.js – Smashing Magazine

A propos de l'auteur

Preston So est un architecte produit et stratège, futuriste de l'expérience numérique, chef de file de l'innovation, défenseur des développeurs, orateur à trois reprises sur SXSW et auteur de…
Plus à propos
Preston

Dans cet aperçu des technologies WebXR et du framework Babylon.js, nous nous embarquerons dans un voyage à travers le passé, le présent et le futur de la réalité mixte à la fois sur le Web et sur des casques immersifs. Nous examinerons les fondements de WebXR et les aspects les plus importants de l'API WebXR Device avant de nous tourner vers Babylon.js, un cadre permettant de créer des applications immersives en JavaScript pour le Web, les mobiles et les casques. Ce didacticiel est destiné aux développeurs Web et JavaScript qui créent des applications Web mais qui cherchent à plonger leurs orteils dans des expériences immersives.

Des expériences immersives, en particulier celles régies par réalité mixte (XR), qui englobe à la fois la réalité augmentée et la réalité virtuelle, suscite rapidement une nouvelle attention parmi les développeurs et les architectes désireux d'atteindre les utilisateurs et les clients de manière innovante. Pendant de nombreuses années, le manque d'adoption des expériences de réalité mixte est venu au matériel – trop cher et peu maniable – et au logiciel – trop complexe et capricieux à utiliser.

Mais la pandémie de coronavirus peut brouiller tous ces vieux calculs en encourageant les types d'expériences qui se limitent principalement au monde du jeu, qui connaît une immense croissance du temps de jeu pendant la crise actuelle. Les mathématiques derrière les espaces tridimensionnels peuvent également présenter des obstacles pour les développeurs, mais heureusement, vous n'avez besoin que d'un peu de géométrie vectorielle et de mathématiques matricielles pour réussir avec des expériences XR, pas un cours collégial en algèbre linéaire et calcul multivarié.

Bien que la prise en charge des navigateurs pour WebXR s'élargisse, la création d'expériences immersives dans les navigateurs ou les casques peut être compliquée en raison de l'évolution des spécifications et des API, ainsi que de l'évolution rapide des cadres et des meilleures pratiques. Mais l'intégration de l'immersion dans votre prochaine application Web peut également introduire une nouvelle dimension et une nouvelle richesse dans votre expérience utilisateur, le tout sans avoir besoin d'apprendre un nouveau langage de programmation.

Qu'est-ce que WebXR?

En termes simples, WebXR est le regroupement de normes responsables de la prise en charge des scènes tridimensionnelles rendues en réalité virtuelle et augmentée, deux domaines expérientiels connus sous le nom de réalité mixte (XR). La réalité virtuelle (VR), qui présente un monde entièrement immersif dont les éléments physiques sont entièrement dessinés par un appareil, diffère considérablement de la réalité augmentée (RA), qui superpose plutôt des éléments graphiques sur un environnement réel.

Les appareils compatibles WebXR couvrent toute la gamme des casques 3D immersifs avec suivi intégré du mouvement et de l'orientation et des noms tels que Vive, Oculus et Hololens aux lunettes avec des graphiques placés sur des images du monde réel et des smartphones qui affichent le monde – et des éléments supplémentaires – sur leurs caméras natives.

La spécification WebXR et la prise en charge du navigateur

le API de périphérique WebXR est le principal canal par lequel les développeurs peuvent interagir avec des casques immersifs, des lunettes AR et des smartphones compatibles AR. Il comprend des capacités permettant aux développeurs de découvrir des périphériques de sortie compatibles, de rendre une scène tridimensionnelle sur le périphérique à la fréquence d'images correcte, de refléter la sortie sur un affichage bidimensionnel (tel qu'un navigateur Web 2D) et de créer des vecteurs qui capturent le mouvements des commandes d'entrée.

Actuellement une ébauche de travail, la spécification WebXR est une combinaison de l'API WebVR précédente, qui a été conçue uniquement pour les cas d'utilisation de réalité virtuelle, et du tout nouveau module de réalité augmentée WebXR, qui reste hautement expérimental. WebVR, autrefois l'approche prédominante et recommandée pour les expériences de réalité virtuelle, est maintenant remplacée par WebXR, et de nombreux frameworks et bibliothèques offrent des stratégies de migration entre WebVR et la nouvelle spécification WebXR.

Bien que WebXR soit maintenant en train d'être adopté dans tout le secteur, la prise en charge des navigateurs reste inégale et il n'est pas encore garanti qu'une application de réalité mixte construite selon la spécification WebXR fonctionnera en production.

Chrome 79, Edge 79, Chrome pour Android 79 et Samsung Internet 11.2 offrent tous une prise en charge complète de WebXR. Mais pour les navigateurs non pris en charge comme Firefox, Internet Explorer, Opera, Safari ou certains navigateurs mobiles (Android webview, Firefox pour Android, Opera pour Android et Safari sur iOS), il existe un WebXR Polyfill disponible grâce aux membres de la communauté WebXR qui implémente le WebXR API de périphérique en JavaScript afin que les développeurs puissent écrire des applications en fonction du dernier état de la spécification. Sur Firefox pour le Web et Firefox pour Android, vous pouvez activer l'indicateur de fonctionnalité expérimentale en accédant à about:config et réglage dom.vr.webxr.enabled à true dans les paramètres avancés de votre navigateur.

L'installation de l'émulateur d'API WebXR sur Chrome ou Firefox sur un ordinateur personnel introduira des outils supplémentaires pour vous aider avec le débogage et les tests.

L'API du périphérique WebXR dépend de WebGL (Web Graphics Library), le moteur de rendu qui prend en charge les graphiques en trois dimensions, et utilise donc de nombreux concepts WebGL lorsqu'il effectue le rendu, l'éclairage et la texturation nécessaires pour une scène. Bien que la portée la plus profonde de WebGL dépasse largement le cadre de cet article, ceux qui sont déjà familiers avec WebGL bénéficieront de l'expertise existante.

Plusieurs frameworks JavaScript open-source sont disponibles pour interagir avec WebGL et WebXR, à savoir Three.js et Babylon.js. A-Frame, une approche de WebXR basée sur le navigateur et axée sur le balisage, est construite sur Three.js. Dans ce tutoriel, nous mettons en lumière Babylon.js, qui a récemment attiré l'attention en raison de sa grande surface d'API et de sa relative stabilité. Mais ceux-ci ne sont pas comme les bibliothèques et frameworks JavaScript que nous utilisons pour créer des applications Web bidimensionnelles; au lieu de cela, ils jouent dans le bac à sable des espaces en trois dimensions.

Champ de vision (FOV) et degrés de liberté (DoF)

Dans cet article, nous nous concentrerons sur la création d'une expérience immersive simple avec une entrée limitée et un objet statique, ce qui signifie que notre besoin de connaissances approfondies sur WebGL est minime. Mais il existe des concepts WebXR critiques en dehors de WebGL qui sont fondamentaux non pas pour les graphiques en trois dimensions eux-mêmes, mais pour savoir comment interagir avec des espaces en trois dimensions. Parce que WebXR est ancré dans l'expérience d'un spectateur, tout tourne autour du casque immersif ou de la fenêtre d'affichage que l'utilisateur fait face.

Tous les casques et smartphones ont une caméra servant de fenêtre à l'utilisateur pour une expérience immersive. Chaque caméra a un certain champ de vision (FOV) qui englobe l'étendue de l'environnement du spectateur qui est visible à tout moment sur un appareil. Un seul œil humain a un FOV de 135 °, tandis que deux yeux humains, avec des FOV superposés, ont un FOV combiné de 220 ° de large. Selon MDN, la plupart des casques ont une plage de 90 ° à 150 ° dans leur champ de vision.

Le monde virtuel ou augmenté vu à travers le champ de vision de la caméra peut être ajusté via mouvement, qui se produit le long de degrés de liberté chaque fois qu'un appareil est décalé de certaines manières alors que l'utilisateur reste immobile. Rotationnel le mouvement se produit le long trois degrés de liberté (3DoF), qui est une référence pour la plupart des casques immersifs basiques:

  • Pas est le mouvement encouru en regardant de haut en bas. En hauteur, la tête de l'utilisateur pivote sur l'axe des x, qui s'étend horizontalement dans la fenêtre.
  • Embardée est le mouvement encouru en regardant à gauche et à droite. En lacet, la tête de l’utilisateur pivote sur l’axe des y, qui s’étend verticalement dans la fenêtre.
  • Rouleau est le mouvement engendré par l'inclinaison vers la gauche et vers la droite. En roulis, la tête de l’utilisateur pivote sur l’axe z, qui s’étend vers l’avant dans la fenêtre et dans l’horizon.
Un diagramme montrant trois degrés de liberté en mouvement de rotation, avec lacet, tangage et roulis.
Le mouvement de rotation se produit le long de trois degrés de liberté (3DoF): tangage (pivotant sur l'axe x), lacet (pivotant sur l'axe y) et roulis (pivotant sur l'axe z). (Grand aperçu)

Bien que trois degrés de liberté soient suffisants pour des expériences immersives plus simples, les utilisateurs souhaitent généralement se déplacer dans l'espace plutôt que de simplement changer leur point de vue sur celui-ci. Pour cela, nous avons besoin six degrés de liberté (6DoF), dont les trois derniers degrés définissent traductionnel mouvement dans l'espace – avant et arrière, gauche et droite, haut et bas – pour tanguer, lacer et rouler. En bref, 6DoF comprend non seulement le pivotement le long des axes x, y et z, mais également leur déplacement. En raison de la nécessité fréquente de capteurs externes pour détecter les mouvements de translation, seuls les casques haut de gamme prennent en charge les six degrés.

Un diagramme montrant six degrés de liberté en mouvement de rotation et de translation.
Les mouvements de rotation et de translation se produisent selon six degrés de liberté (6DoF). (Grand aperçu)

Modes de session WebXR

Avec WebXR remplaçant la spécification WebVR précédente, il fournit désormais une API en tant que source unique de vérité pour la réalité augmentée et virtuelle. Chaque application WebXR commence par lancer une session, qui représente une expérience immersive en cours. Pour la réalité virtuelle, WebXR propose deux modes de session: inline, qui dépose une scène rendue dans un document de navigateur, et immersive-vr, qui dépend d'un casque. Pour la réalité augmentée, car le rendu n'est possible que dans les appareils photo des smartphones et les lunettes ou lunettes transparentes au lieu des navigateurs, immersive-ar est le seul mode disponible.

Étant donné que beaucoup d’entre nous n’ont pas de casque immersif à portée de main à la maison et que le module de réalité augmentée WebXR reste en plein développement, nous concentrerons notre attention sur une expérience VR immersive qui peut être rendue dans un canevas de navigateur.

Créer une scène avec WebXR et Babylon.js

Dans cette section, nous allons apprendre à créer et à rendre une scène WebXR avec Babylon.js, l'environnement de notre environnement et le cadre de notre expérience, avant de nous concentrer sur des actions telles que la saisie ou le mouvement de l'utilisateur. Babylon.js est un moteur de rendu Web gratuit et open-source basé sur WebGL qui inclut la prise en charge de WebXR et des applications multiplateformes sous la forme de Babylon Native. Babylon.js offre une multitude de fonctionnalités supplémentaires, y compris un éditeur de matériaux de nœuds à faible code pour la création de shaders et une intégration approfondie avec les fonctionnalités WebXR telles que la gestion des sessions et des entrées. Le site Web Babylon.js fournit également des environnements de jeux et de bac à sable.

Bien que la sélection entre Babylon.js et Three.js se résume à la préférence des développeurs, Three.js se concentre sur l'extensibilité plutôt que sur l'exhaustivité, avec une multitude de modules interchangeables qui ajoutent des fonctionnalités supplémentaires. Babylon.js, quant à lui, fournit une suite plus complète qui peut s'avérer excessive pour les petits projets mais offre la surface nécessaire pour de nombreuses implémentations.

Présentation de Babylon.js

Bien que vous puissiez gérer vous-même toutes les interactions avec l'API WebXR Device, Babylon.js fournit une option Assistant d'expérience par défaut qui peut configurer et fermer des sessions en votre nom. L'assistant d'expérience WebXR par défaut comprend également des contrôles d'entrée et d'autres fonctionnalités, ainsi qu'un bouton HTML rudimentaire pour entrer dans l'expérience immersive. Pour tester l’assistant d’expérience par défaut, écrivons une page HTML qui fournit un canevas pour l’affichage XR et sert la source Babylon.js à partir d’un CDN. Vous pouvez trouver cette page HTML dans le référentiel GitHub pour ce tutoriel sur le main branche.

Ouvert index.html dans votre éditeur de code préféré et dans un navigateur. Pour cette première partie du didacticiel, nous inspecterons le fichier au lieu d'ajouter du code. Dans un navigateur compatible WebXR comme Chrome ou Firefox (avec l'indicateur de fonctionnalité WebXR activé dans le cas de Firefox), vous verrez un canevas contenant le terrain de jeu initial de Babylon.js – une sorte de «Hello World» – et vous pouvez faire glisser votre souris sur l'écran pour vous réorienter. La capture d'écran ci-dessous illustre cet état initial.

Une capture d'écran montrant l'état initial du terrain de jeu par défaut de Babylon.js.
L'état initial du terrain de jeu par défaut de Babylon.js. (Grand aperçu)

Tout d'abord, nous allons intégrer les dernières versions de Babylon.js du CDN Babylon ainsi que d'autres dépendances utiles. Nous ajouterons également des styles pour notre élément de canevas de scène dans , c'est là que notre expérience immersive sera rendue.




  
    Démo Babylon WebXR
    
    
    

    
    

    
    

    
  

  
    

Il est maintenant temps pour notre implémentation Babylon.js. À l'intérieur d'un

Si vous exécutez le code dans la branche principale ou dans l'une des autres branches du référentiel sur un navigateur ou un appareil compatible WebXR, vous verrez notre scène terminée. À l'étape suivante, essayez d'ajouter une animation pour voir le rappel d'animation au travail.

Étapes suivantes: prise en charge et gestion des entrées utilisateur

Créer un monde virtuel ou augmenté pour les spectateurs est une chose, mais c’en est une autre de mettre en œuvre des interactions utilisateur qui permettent aux spectateurs d’interagir de manière riche avec votre scène. WebXR comprend deux types de entrée: ciblage (en spécifiant un seul point dans l'espace, par exemple en effectuant un suivi oculaire, en tapant ou en déplaçant un curseur) et Actions (impliquant à la fois la sélection, comme appuyer sur un bouton, et les pressions, qui sont des actions comme appuyer sur une gâchette ou appuyer sur un contrôleur).

Parce que l'entrée peut être médiée par une variété de sources d'entrée - écrans tactiles, contrôleurs de détection de mouvement, poignées, commandes vocales et de nombreux autres mécanismes - WebXR n'a aucune opinion sur les types d'entrée pris en charge par votre application, au-delà des valeurs par défaut intelligentes. Mais en raison de la surface colossale exposée par toutes les sources d'entrée, en particulier dans Babylon.js, il faudrait un autre article complet à part entière pour capturer et répondre à toutes sortes de mouvements oculaires, mouvements de joystick, mouvements de manette de jeu, pressions de gants haptiques, les entrées du clavier et de la souris, et d'autres formes d'entrée toujours à l'horizon.

Débogage, extension et regroupement de Babylon.js

Une fois que vous avez terminé la mise en œuvre de votre application WebXR, il est temps de déboguer et de tester votre code, de l'étendre comme vous le souhaitez pour d'autres mécanismes de rendu et moteurs physiques de jeu, et de le regrouper sous forme de fichier prêt pour la production. Pour une variété de cas d'utilisation, Babylon.js dispose d'un riche écosystème d'outils de débogage, de mécanismes de rendu et même de moteurs physiques (et la possibilité d'intégrer les vôtres) pour des interactions réalistes entre les objets.

Débogage de Babylon.js avec l'inspecteur

Au-delà des plugins de navigateur disponibles pour l'émulation WebXR, Babylon.js met également à disposition un inspecteur pour le débogage (intégré à React). Contrairement à des outils comme Jest, comme Babylon.js ne dispose pas d'une interface de ligne de commande officielle (CLI), le débogage a lieu directement dans le code. Pour ajouter l'inspecteur à notre application Babylon.js, nous pouvons ajouter un script externe supplémentaire aux scripts intégrés dans notre :



Ensuite, juste avant de terminer la création de notre scène, indiquons à Babylon.js que nous voulons rendre la scène en mode débogage en ajoutant la ligne scene.debugLayer.show() juste avant notre return déclaration:

// Initialize XR experience with default experience helper.
const xrHelper = await scene.createDefaultXRExperienceAsync();
if (!xrHelper.baseExperience) {
  // XR support is unavailable.
  console.log('WebXR support is unavailable');
} else {
  // XR support is available; proceed.
  scene.debugLayer.show();
  return scene;
}

La prochaine fois que vous chargez votre application Babylon.js dans un navigateur, vous verrez un "Explorateur de scènes" pour parcourir les objets rendus et un "Inspecteur" pour afficher et ajuster les propriétés de toutes les entités dont Babylon.js a connaissance. La capture d'écran ci-dessous montre à quoi ressemble notre application avec le mode débogage activé et la branche debugging-1 reflète cet état dans le code du didacticiel.

Une capture d'écran montrant le mode de débogage de Babylon.js dans le navigateur, avec l'inspecteur Babylon.js activé.
Mode de débogage de Babylon.js dans le navigateur, avec l'inspecteur Babylon.js activé. (Grand aperçu)

La documentation Babylon.js offre à la fois des informations complètes sur le chargement et l'utilisation de l'inspecteur et une série de vidéos sur l'inspection et le débogage.

Intégration et regroupement de Babylon.js avec d'autres JavaScript

Bien qu'au cours de ce didacticiel, nous ayons utilisé un script intégré directement dans le HTML contenant notre canevas, vous souhaiterez peut-être exécuter le script en tant que fichier externe ou exploiter un cadre d'application tel que React ou Ionic. Parce que Babylon.js rend tous ses packages disponibles sur NPM, vous pouvez utiliser NPM ou Yarn pour récupérer Babylon.js en tant que dépendance.

# Add ES6 version of Babylon.js as dependency using NPM.
$ npm install @babylonjs/core

# Add ES6 version of Babylon.js as dependency using Yarn.
$ yarn add @babylonjs/core

# Add non-ES6 version of Babylon.js as dependency using NPM.
$ npm install babylonjs

La documentation est disponible sur le site Web Babylon.js pour les intégrations de Babylon.js avec React (y compris react-babylonjs, un moteur de rendu React pour Babylon.js) et Ionic (un framework multiplateforme). Dans la nature, Julien Noble a également écrit un guide expérimental pour tirer parti de Babylon.js dans le moteur de rendu Web de React Native.

Pour des raisons de performances frontales, vous pouvez également envisager d'introduire un rendu côté serveur mécanisme pour les applications Babylon.js que vous créez. Babylon.js propose un moteur sans tête connu sous le nom de NullEngine, qui remplace la valeur par défaut de Babylon.js Engine instance et peut être utilisé dans Node.js ou dans des environnements côté serveur où WebGL est absent. Il existe certaines limitations, car vous devrez mettre en œuvre un remplacement pour les API de navigateur telles que XMLHttpRequest dans les frameworks de serveur Node.js comme Express.

Pendant ce temps, du côté client, la génération d'un ensemble client léger pouvant être analysé rapidement par un navigateur est une bonne pratique courante. Bien que vous puissiez utiliser le CDN de Babylon.js pour télécharger une version minifiée de la bibliothèque principale Babylon.js, vous pouvez également combiner Babylon.js et votre implémentation Babylon.js avec d'autres scripts comme React en utilisant un bundler tel que Webpack. Tirer parti de Webpack vous permet d'utiliser Babylon.js de manière modulaire avec ES6 et TypeScript et de générer des bundles clients représentant toute la portée de votre JavaScript.

Immergez-vous dans WebXR

La route à suivre pour WebXR est prometteuse si elle n'est pas entièrement formée. Alors que les gens continuent à rechercher des expériences plus immersives et d'évasion qui nous enveloppent complètement dans un monde virtuel ou augmenté, l'adoption de WebXR et de Babylon.js ne fera que s'accélérer.

En ces premiers jours, alors que la prise en charge des navigateurs se solidifie et que les expériences des développeurs mûrissent, la promesse de WebXR et des moteurs de rendu comme Babylon.js ne peut être sous-estimée. Dans ce didacticiel, nous n'avons eu qu'un aperçu du potentiel des expériences immersives sur le Web, mais vous pouvez voir tout notre code sur GitHub.

Cela dit, il est essentiel de se rappeler que la réalité mixte et les expériences immersives dans WebXR peuvent présenter des problèmes pour certains utilisateurs. Après tout, la réalité virtuelle est, à toutes fins utiles, un pari pour tromper les yeux et le cerveau du spectateur en percevant des objets qui n’y sont pas réellement. Beaucoup de gens vivent maladie de la réalité virtuelle, une maladie dangereuse avec des symptômes de désorientation, d'inconfort et de nausée. Les objets physiques qui ne sont pas visibles dans les casques de réalité virtuelle peuvent également présenter des risques pour les utilisateurs d'expériences immersives. Et peut-être plus important encore, de nombreuses expériences immersives sont inaccessibles aux utilisateurs souffrant de handicaps cognitifs et physiques tels que la cécité et les troubles associés aux vertiges.

Tout comme les expériences immersives restent hors de portée pour de nombreux utilisateurs, que ce soit en raison d'un manque d'accès à un casque immersif ou à un navigateur compatible WebXR ou à cause de handicaps qui entravent l'expérience utilisateur, la réalité mixte reste également un peu un mystère pour les développeurs. aux sables mouvants dans les spécifications et les cadres. Néanmoins, étant donné que les médias immersifs attendent juste au coin de la rue pour le marketing numérique, nous verrons une nouvelle scène obtenir le feu des projecteurs et prendre forme très bientôt - tous des jeux de mots très bien intentionnés.

WebXR
Graphiques 3D et WebGL
API de périphérique WebXR
Babylon.js
Éditorial fracassant(sh, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *