L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Utilisation de WebXR avec Babylon.js
Expériences immersives, en particulier celles régies par la réalité mixte (XR), qui englobe à la fois l'augmentation et la réalité virtuelle, gagnent rapidement une nouvelle attention parmi les développeurs et les architectes intéressés à atteindre les utilisateurs et les clients de manière novatrice. Pendant de nombreuses années, le manque d’adoption d’expériences de réalité mixte était dû au matériel – trop cher et trop difficile à manier – et aux logiciels – trop complexes et difficiles à utiliser.
Mais la pandémie de coronavirus pourrait brouiller tous ces vieux calculs en encourageant le sortes d'expériences qui se limitent pour la plupart au monde du jeu vidéo, 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 barrières 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 universitaire d'algèbre linéaire et de calcul multivarié.
Bien que le support du navigateur soit pris en charge. pour WebXR s'élargit, 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 responsable de la prise en charge de scènes tridimensionnelles rendues en réalité virtuelle et augmentée, deux domaines expérientiels connus ensemble 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 fonctionnent. 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. [19659011] La spécification WebXR et la prise en charge du navigateur
L'API WebXR Device 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 un projet de travail, la spécification WebXR est une combinaison de l'API WebVR précédente, qui a été conçue uniquement pour des 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é 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 l'industrie, 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 à WebXR membres de la communauté qui implémentent l'API de périphérique WebXR dans 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 en définissant dom.vr.webxr.enabled sur true ] dans les paramètres avancés de votre navigateur.
L'installation de l'émulateur API WebXR sur Chrome ou Firefox sur un ordinateur personnel introduira des outils supplémentaires pour vous aider à déboguer et à tester.
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 texture nécessaires à une scène. Bien que la portée la plus profonde de WebGL dépasse largement la portée de cet article, ceux qui connaissent déjà 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; à la place, ils jouent dans le bac à sable des espaces tridimensionnels.
Champ de vision (FOV) et degrés de liberté (DoF)
Dans cet article, nous allons nous concentrer sur la construction 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. Étant donné que WebXR est ancré dans l'expérience du spectateur, tout tourne autour du casque immersif ou de la fenêtre d'affichage auxquels l'utilisateur fait face.
Tous les casques et smartphones ont une caméra servant de fenêtre d'affichage à l'utilisateur dans 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 dans 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 se situent entre 90 ° et 150 ° dans leur champ de vision.
Le monde virtuel ou augmenté vu à travers le champ de vision de la caméra peut être ajusté par le mouvement qui se produit le long de degrés de liberté chaque fois qu'un dispositif est décalé de certaines manières alors que l'utilisateur reste immobile. Le mouvement de rotation se produit le long de trois degrés de liberté (3DoF), qui est une ligne de base pour la plupart des casques immersifs basiques:
- Pitch est un 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.
- Le lacet est un mouvement encouru en regardant à gauche et à droite. En lacet, la tête de l’utilisateur pivote sur l’axe y, qui s’étend verticalement à travers la fenêtre.
- Le roulis est un mouvement engendré par une inclinaison vers la gauche et 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.
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 simplement changer leur point de vue sur celui-ci. Pour cela, nous avons besoin de six degrés de liberté (6DoF), dont les trois derniers degrés définissent le mouvement de translation dans l'espace – avant et arrière, gauche et droite, haut et bas – pour tanguer, lacet 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.
Modes de session WebXR
WebXR remplaçant la spécification WebVR précédente, il fournit désormais une API comme 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, étant donné que 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.
Parce que beaucoup d'entre nous n'ont pas de casque immersif pratique à la maison, et comme le module de réalité augmentée WebXR reste en développement intensif, nous concentrerons notre attention sur une expérience de réalité virtuelle immersive qui peut être rendue dans un canevas de navigateur.
Mise en scène avec WebXR et Babylon.js [19659003] 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 intéresser à des actions telles que l'entrée utilisateur ou le mouvement. Babylon.js est un moteur de rendu Web gratuit et open-source basé sur WebGL qui inclut le support 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 jeu et de bac à sable.
Bien que la sélection entre Babylon.js et Three.js se résume aux préférences 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 toutes les interactions avec l'API WebXR Device vous-même, Babylon.js fournit un Default Experience Helper facultatif 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 la branche main .
Ouvrir 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.
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 où sera rendue notre expérience immersive.
Démo Babylon WebXR
Il est maintenant temps pour notre implémentation Babylon.js. Dans un élément
Babylon.js fournit un prototype HemisphericLight pour la lumière ambiante que nous pouvons utiliser pour instancier un nouveau Source de lumière. Dans ce cas, nous positionnons la lumière hémisphérique pour qu'elle pointe vers le haut vers le ciel avec le vecteur (0, 1, 0).
// Créer une lumière et la diriger verticalement vers le ciel (0, 1, 0) .
let light = new BABYLON.HemisphericLight ('light-1', new BABYLON.Vector3 (0, 1, 0), scene);
Sources de lumière
Babylon.js fournit quatre types de sources de lumière qui peuvent utiliser la lumière ambiante, diffuse ou spéculaire à des degrés divers: sources de lumière ponctuelles (définies par un point unique à partir duquel la lumière est émise dans toutes les directions, par exemple une ampoule), sources lumineuses directionnelles (définies par une direction à partir de laquelle la lumière est émise, par exemple la lumière du soleil éclairant une planète éloignée), et sources lumineuses ponctuelles ( défini par un cône de lumière qui part d'une position et pointe vers une direction, par exemple un projecteur de scène). Dans ce cas, comme nous créons une source de lumière hémisphérique qui émet de la lumière ambiante dans une direction mais n'a pas de position unique, nous n'avons besoin que d'un seul vecteur tridimensionnel pour définir son orientation.
Modifions ce code d'éclairage pour expérimenter les autres types d'éclairage. Dans chacun des trois exemples ci-dessous, nous remplaçons la lumière hémisphérique par des lumières ponctuelles, directionnelles et spot respectivement. Comme on pouvait s'y attendre, les lumières ponctuelles (branch lighting-1 dans le référentiel GitHub) ne nécessitent qu'un seul vecteur indiquant la position.
// Crée une lumière ponctuelle.
let light = new BABYLON.PointLight ('light-1', new BABYLON.Vector3 (0.5, 5, 0.5), scene);
Les lumières directionnelles (branche lighting-2 ), quant à elles, agissent de la même manière que les lumières hémisphériques en ce qu'elles ne nécessitent également qu'un vecteur indiquant la direction. Dans cet exemple, la lumière directionnelle provient de la droite (valeur x de –1).
// Crée une lumière directionnelle.
let light = new BABYLON.DirectionalLight ('light-1', new BABYLON.Vector3 (-1, 0, 0), scene);
Enfin, les projecteurs (branche lighting-3 ) nécessitent des arguments pour la position et la direction (les deux vecteurs tridimensionnels) ainsi que l'angle de l'éclairage (la taille en radians du faisceau conique du spot) et un exposant qui définit la vitesse à laquelle la lumière se désintègre sur une distance.
Ici, nous avons un vecteur de position pour placer notre source de lumière spot haut (valeur y de 15 ) et à l'arrière (valeur z de –15) pour imiter une configuration de cinéma typique. Le deuxième vecteur directionnel indique que le projecteur doit pointer vers le bas (valeur y de –1) et vers l'avant (valeur z de 1). Le faisceau est limité à π / 4 (45 °) et décroît à un taux de 3 (c'est-à-dire que l'intensité de la lumière diminue de deux tiers avec chaque unité à sa portée).
// Crée un spot lumineux
let light = new BABYLON.SpotLight ('light-1', new BABYLON.Vector3 (0, 15, -15), new BABYLON.Vector3 (0, -1, 1), Math.PI / 4, 3, scène) ;
La capture d'écran ci-dessous illustre les différences entre les sources de lumière ambiante, ponctuelle, directionnelle et spot.
Paramètres d'éclairage
Il existe certains paramètres que les utilisateurs de Babylon.js peuvent définir pour l'éclairage, tels que l'intensité ( light.intensity a une valeur par défaut de 1 ) et couleur. Les lumières peuvent également être éteintes ( light.setEnabled (false) ) et allumées ( light.setEnabled (true) ).
// Réglez l'intensité lumineuse sur une valeur inférieure ( la valeur par défaut est 1).
light.intensity = 0,5;
Réduisons de moitié l’intensité de la lumière en réduisant la valeur à 0,25. Enregistrez le fichier et affichez-le dans le navigateur pour voir le résultat, qui reflète la branche lighting-4 dans le référentiel GitHub.
// Définit l'intensité lumineuse sur une valeur inférieure (la valeur par défaut est 1).
light.intensity = 0,25;
Des paramètres sont également disponibles pour régler la couleur de la lumière diffuse ou spéculaire provenant d'une source lumineuse. Nous pouvons ajouter deux lignes supplémentaires pour définir la couleur diffuse et spéculaire (branche lighting-5 ). Dans cet exemple, nous créons un bleu clair diffus et un rouge clair spéculaire, qui superpose un point rouge spéculaire brillant sur une bande bleue plus diffuse.
// Définit la lumière diffuse sur le bleu et la lumière spéculaire sur le rouge.
light.diffuse = nouveau BABYLON.Color3 (0, 0, 1);
light.specular = nouveau BABYLON.Color3 (1, 0, 0);
La gamme complète des capacités d'éclairage de Babylon.js, y compris les lightmaps et les textures de projection, va bien au-delà de cet article, mais la documentation Babylon.js sur les lumières contient beaucoup plus d'informations.
Taking Shape : Set And Parametric Shapes
Maintenant que nous avons un éclairage et une caméra, nous pouvons ajouter des éléments physiques à notre scène. Grâce au générateur de maillage intégré de Babylon.js, vous pouvez rendre à la fois des formes définies et paramétriques. Les formes d'ensemble sont celles qui ont généralement des noms dans l'usage quotidien et une apparence bien connue, comme des boîtes (également appelées cuboïdes), des sphères, des cylindres, des cônes, des polygones et des plans. Mais les formes définies incluent également des formes que vous n'utilisez peut-être pas quotidiennement, telles que les tores, les nœuds tores et les polyèdres.
Dans l'exemple de code suivant, nous créons une sphère d'un diamètre de 2 unités et de 32 segments horizontaux utilisés. pour rendre la forme.
// Ajoute l'une des formes de sphères intégrées de Babylon.
laissez sphère = BABYLON.MeshBuilder.CreateSphere ('sphère-1', {
diamètre: 2,
segments: 32
}, scène);
// Positionne la sphère vers le haut de la moitié de sa hauteur.
sphère.position.y = 1;
Si nous ajustons les paramètres pour inclure des diamètres distincts le long des axes x, y et z, nous pouvons transformer notre sphère en un ellipsoïde (branche forms-1 ). Dans cet exemple, les paramètres diamètreY et diamètreZ remplacent le diamètre par défaut de 2 sur chaque axe.
// Ajoutez l'une des formes de sphères intégrées de Babylon.
laissez sphère = BABYLON.MeshBuilder.CreateSphere ('sphère-1', {
diamètre: 2,
diamètreY: 3,
diamètreZ: 4,
segments: 32
}, scène);
Créons un cône tronqué en appliquant les mêmes diamètres différenciés à un cylindre typique, qui a des diamètres supérieur et inférieur facultatifs en plus d'un diamètre par défaut. Lorsqu'un de ces diamètres est égal à zéro, le cylindre devient un cône. Lorsque ces diamètres diffèrent, nous rendons un cône tronqué à la place (branche formes-2 ). Ici, l'argument de tessellation fait référence au nombre de côtés radiaux devant être rendus pour le cône. Toutes les formes définies acceptent des arguments similaires qui définissent comment elle doit apparaître.
// Ajoute l'une des formes cylindriques intégrées de Babylon.
let cylindre = BABYLON.MeshBuilder.CreateCylinder ('cylindre-1', {
diamètreTop: 2,
diamètre en bas: 5,
pavage: 32
}, scène);
// Positionne le cylindre vers le haut de la moitié de sa hauteur.
cylindre.position.y = 1;
Bien que bien au-delà de la portée de cette introduction à WebXR et Babylon.js, vous pouvez également créer des formes paramétriques qui dépendent des paramètres d'entrée pour exister, comme les lignes, les rubans, les tubes, les formes extrudées, les tours , et des polygones non réguliers, et polyèdres . qui sont des formes tridimensionnelles caractérisées par des faces polygonales, des arêtes droites et des sommets pointus. Vous pouvez également créer des plans en mosaïque et des boîtes en mosaïque qui portent un motif ou une texture, comme la brique ou le bois noué. Enfin, vous pouvez créer combiner groupe et séquences animations de matériaux et d'objets en utilisant les deux animations intégrées et une approche basée sur les images-clés.
Mettre tout ensemble: rendu de la scène
Maintenant que nous avons introduit une caméra, une lumière et une forme dans notre scène, il est temps de le rendre dans un environnement. Par souci de simplicité, nous nous en tiendrons à l'environnement par défaut de Babylon.js, qui nous donne un sol comme étage et une « skybox », un ciel simulé.
// Créer un environnement par défaut pour la scène.
scene.createDefaultEnvironment ();
Maintenant, nous pouvons utiliser l'assistant d'expérience par défaut de Babylon.js pour vérifier la compatibilité du navigateur ou de l'appareil avec WebXR. Si le support WebXR est disponible, nous renvoyons la scène construite à partir de la fonction globale createScene () .
// Initialisation de l'expérience XR avec l'aide d'expérience par défaut.
const xrHelper = attendre scene.createDefaultXRExperienceAsync ();
if (! xrHelper.baseExperience) {
// Le support XR n'est pas disponible.
console.log ('Le support WebXR n'est pas disponible');
} autre {
// Le support XR est disponible; procéder.
retour scène;
}
};
Nous créons ensuite un canevas par défaut basé sur la fonction d'assistance précédente que nous avons écrite, qui instancie un nouveau moteur et l'attache à l'élément canevas dans notre HTML.
// Créer un moteur.
moteur = createDefaultEngine ();
if (! moteur) {
throw 'Le moteur ne doit pas être nul';
}
Enfin, nous invoquons la fonction createScene () définie précédemment pour utiliser le moteur pour rendre la scène, dans le processus de préparation de Babylon.js pour toutes les scènes futures que nous pourrions avoir besoin de rendre. Dans une implémentation WebXR uniquement, un rappel d'animation d'image WebXR représenté par la méthode XRSession requestAnimationFrame () est appelé chaque fois que le navigateur ou l'appareil a besoin d'un new frame, such as the next one defined in an animation, to render the scene. In Babylon.js, the engine method runRenderLoop() serves this function.
// Create scene.
scene = createScene();
scene.then(function (returnedScene) {
sceneToRender = returnedScene;
});
// Run render loop to render future frames.
engine.runRenderLoop(function () {
if (sceneToRender) {
sceneToRender.render();
}
});
Because our current WebXR application encompasses the entire browser viewport, we want to ensure that whenever a user resizes the browser window, the scene’s dimensions update accordingly. To do so, we add an event listener for any browser resize that occurs.
// Handle browser resize.
window.addEventListener('resize', function () {
engine.resize();
});
If you run the code in the main branch or any of the other repository branches on a WebXR-compliant browser or device, you’ll see our completed scene. As a next step, try adding an animation to see the animation callback at work.
Next Steps: Supporting And Managing User Input
It’s one thing to establish a virtual or augmented world for viewers, but it’s another to implement user interactions that allow viewers to engage richly with your scene. WebXR includes two types of input: targeting (specifying a single point in space, such as through eye-tracking, tapping, or moving a cursor) and actions (involving both selection, like tapping a button, and squeezes, which are actions like pulling a trigger or squeezing a controller).
Because input can be mediated through a variety of input sources — touchscreens, motion-sensing controllers, grip pads, voice commands, and many other mechanisms — WebXR has no opinion about the types of input your application supports, beyond intelligent defaults. But because of the colossal surface area exposed by all input sources, especially in Babylon.jsit would take another full article in its own right to capture and respond to all manner of eye movements, joystick motions, gamepad moves, haptic glove squeezes, keyboard and mouse inputsand other forms of input still over the horizon.
Debugging, Extending, And Bundling Babylon.js
Once you’ve completed the implementation of your WebXR application, it’s time to debug and test your code, extend it as desired for other rendering mechanisms and game physics engines, and to bundle it as a production-ready file. For a variety of use cases, Babylon.js has a rich ecosystem of debugging tools, rendering mechanisms, and even physics engines (and the ability to integrate your own) for realistic interactions between objects.
Debugging Babylon.js With The Inspector
Beyond the browser plugins available for WebXR emulation, Babylon.js also makes available an inspector for debugging (built in React). Unlike tools like Jest, because Babylon.js lacks an official command-line interface (CLI), debugging takes place directly in the code. To add the inspector to our Babylon.js application, we can add an additional external script to the embedded scripts in our :
Then, just before we finish creating our scene, let’s indicate to Babylon.js that we want to render the scene in debug mode by adding the line scene.debugLayer.show() just before our return statement:
// 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;
}
The next time you load your Babylon.js application in a browser, you’ll see a “Scene Explorer” to navigate rendered objects and an “Inspector” to view and adjust properties of all entities Babylon.js is aware of. The screenshot below shows how our application now looks with debug mode enabled, and branch debugging-1 reflects this state in the tutorial code.
The Babylon.js documentation offers both comprehensive information about loading and using the inspector and a series of videos about inspection and debugging.
Integrating And Bundling Babylon.js With Other JavaScript
Although over the course of this tutorial, we’ve used a script embedded directly into the HTML containing our canvas, you may wish to execute the script as an external file or to leverage an application framework like React or Ionic. Because Babylon.js makes all of its packages available on NPM, you can use NPM or Yarn to fetch Babylon.js as a dependency.
# 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
Documentation is available on the Babylon.js website for integrations of Babylon.js with React (including react-babylonjsa React renderer for Babylon.js) and Ionic (a cross-platform framework). In the wild, Julien Noble has also written an experimental guide to leveraging Babylon.js in React Native’s web renderer.
For front-end performance reasons, you may also consider introducing a server-side rendering mechanism for the Babylon.js applications you build. Babylon.js offers a headless engine known as NullEnginewhich replaces Babylon.js’ default Engine instance and can be used in Node.js or server-side environments where WebGL is absent. There are certain limitations, as you’ll need to implement a replacement for browser APIs like XMLHttpRequest in Node.js server frameworks like Express.
Meanwhile, on the client side, generating a lightweight client bundle that can be parsed quickly by a browser is a common best practice. While you can use Babylon.js’ CDN to download a minified version of the core Babylon.js library, you may also wish to combine Babylon.js and your Babylon.js implementation with other scripts like React by using a bundler such as Webpack. Leveraging Webpack allows you to use Babylon.js modularly with ES6 and TypeScript and to output client bundles representing the full scope of your JavaScript.
Immersing Yourself In WebXR
The road ahead for WebXR is bright if not fully formed. As people continue to seek more immersive and escapist experiences that enfold us completely in a virtual or augmented world, WebXR and Babylon.js adoption will only accelerate.
In these early days, as browser support solidifies and developer experiences mature, the promise of WebXR and rendering engines like Babylon.js can’t be understated. In this tutorial, we’ve only had a glimpse of the potential of immersive experiences on the web, but you can see all of our code on GitHub.
That said, it’s essential to remember that mixed reality and immersive experiences in WebXR can present problems for certain users. After all, virtual reality is, for all intents and purposes, a gambit to trick the viewer’s eyes and brain into perceiving objects that aren’t actually there. Many people experience virtual reality sicknessa dangerous illness with symptoms of disorientation, discomfort, and nausea. Physical objects that aren’t visible in virtual reality headsets can also pose hazards for users of immersive experiences. And perhaps most importantly, many immersive experiences are inaccessible for users with cognitive and physical disabilities such as blindness and vertigo-associated disorders.
Just as immersive experiences still remain out of reach for many users, whether due to lack of access to an immersive headset or WebXR-enabled browser or because of disabilities that stymie the user experience, mixed reality also remains a bit of a mystery for developers due to shifting sands in specifications and frameworks alike. Nonetheless, given immersive media waits just around the corner for digital marketing, we’ll see a new scene get the spotlight and take shape very soon — all puns very much intended.
Related Resources
WebXR
3D Graphics and WebGL
WebXR Device API
Babylon.js
(sh, ra, yk, il)Source link