WebVR et la révolution du Browser Edge Computing

Une énorme vague technologique est arrivée - la réalité virtuelle (VR). Quoi que vous ayez ressenti la première fois que vous avez tenu un smartphone, faire l'expérience de la réalité virtuelle pour la première fois offre une expérience émotionnelle plus substantielle dans tous les aspects de l'informatique. Cela ne fait que 12 ans depuis le premier iPhone. En tant que concept, la réalité virtuelle existe depuis encore plus longtemps, mais la technologie nécessaire pour apporter la réalité virtuelle aux utilisateurs moyens n'était pas disponible jusqu'à récemment.

L'Oculus Quest est la plate-forme de jeu grand public de Facebook pour la réalité virtuelle. Sa principale caractéristique est qu'il n'a pas besoin de PC. Il offre une expérience de réalité virtuelle sans fil et mobile. Vous pouvez donner à quelqu'un un casque VR dans un café pour partager un modèle 3D avec à peu près la même maladresse que de googler quelque chose dans une conversation, mais le bénéfice de l'expérience partagée est beaucoup plus convaincant.

La réalité virtuelle changera notre façon de travailler, d'acheter, de profiter du contenu et bien plus encore.

Dans cette série, nous explorerons les technologies de navigateur actuelles qui permettent WebVR et l'informatique de pointe du navigateur. Ce premier article met en lumière ces technologies et une architecture pour notre simulation.

Dans les articles suivants, nous mettrons en évidence certains défis et opportunités uniques dans le code. Pour explorer cette technologie, j'ai fait une démo Canvas et WebVR et publié le code sur GitHub.

Ce que la VR signifie pour l'UX

En tant que développeur Toptal, j'aide les entreprises à faire passer leurs projets de l'idée à un test bêta avec les utilisateurs. Alors, en quoi la réalité virtuelle est-elle pertinente pour les applications Web d'entreprise ?

Le contenu de divertissement entraînera l'adoption de la réalité virtuelle (comme ce fut le cas sur mobile). Cependant, une fois que la réalité virtuelle deviendra un courant dominant comme le mobile, la « conception axée sur la réalité virtuelle » sera l'expérience attendue (similaire à « la conception mobile d'abord »).

"Mobile-first" était un changement de paradigme, "Offline-first" est un changement de paradigme actuel, et "VR-first" est à l'horizon. C'est une période très excitante pour être concepteur et développeur, car la réalité virtuelle est un paradigme de conception complètement différent (nous l'explorerons dans le dernier article de la série). Vous n'êtes pas un concepteur VR si vous ne pouvez pas saisir.

La réalité virtuelle a commencé dans la révolution de l'informatique personnelle (PC) mais arrive comme la prochaine étape de la révolution mobile. Oculus Quest de Facebook s'appuie sur Google Cardboard en utilisant le système sur puce (SoC) Snapdragon 835 de Qualcomm, le suivi du casque (utilisant des caméras mobiles) et fonctionne sur Android - le tout emballé pour se monter confortablement sur les organes sensoriels tendres de votre visage.

L'Oculus Quest à 400 $ contient des expériences incroyables que je peux partager avec mes amis. Un nouvel iPhone à 1 000 $ n'impressionne plus personne. L'humanité ne va pas cracher le crochet VR.

Applications de l'industrie de la réalité virtuelle

La réalité virtuelle commence à se faire sentir dans de nombreuses industries et domaines de l'informatique. Outre la consommation de contenu et les jeux, qui ont tendance à faire l'objet d'une large couverture médiatique, la réalité virtuelle modifie lentement les secteurs allant de l'architecture aux soins de santé.

• L'architecture et l'immobilier créent la valeur d'une réalité physique à des coûts extraordinaires (par rapport au numérique), il est donc naturel pour les architectes et les agents immobiliers d'amener les clients à travers une réalité virtuelle pour montrer l'expérience. VR propose un "test bêta" de votre stade de 200 millions de dollars, ou une visite virtuelle par téléphone.
• L'apprentissage et l'éducation en réalité virtuelle transmettent des expériences qui seraient autrement impossibles à reproduire avec des images ou des vidéos.
• Les entreprises automobiles bénéficient de la réalité virtuelle, de la conception et de la sécurité à la formation et au marketing.
• Les professionnels de la santé de l'hôpital pour enfants Lucile Packard de Stanford utilisent la réalité virtuelle pour planifier des chirurgies cardiaques, ce qui leur permet de comprendre l'anatomie d'un patient avant de pratiquer une seule incision. La réalité virtuelle remplace également les produits pharmaceutiques pour soulager la douleur.
• Retail, Marketing et Hospitality proposent déjà des visites virtuelles de produits et de lieux. Alors que les détaillants commencent à comprendre à quel point leur expérience d'achat peut être convaincante, les innovateurs de la vente au détail mettront le dernier clou dans le cercueil des magasins de brique et de mortier.

À mesure que la technologie progresse, nous allons voir une adoption accrue dans diverses industries. La question est maintenant de savoir à quelle vitesse ce changement va se produire et quelles industries seront les plus touchées.

Que signifie la réalité virtuelle pour le Web et l'Edge Computing

"Edge Computing" déplace l'informatique hors de votre cluster de serveurs d'applications principal et plus près de votre utilisateur final. Il y a un buzz marketing parce que les sociétés d'hébergement ont hâte de vous louer un serveur à faible latence dans chaque ville.

Un exemple d'informatique de périphérie B2C est le service Stadia de Google, qui exécute des charges de travail de jeu intensives CPU/GPU sur les serveurs de Google, puis envoie le jeu à un appareil comme Netflix. Tout Chromebook Netflix stupide peut soudainement jouer à des jeux comme un ordinateur de jeu haut de gamme. Cela crée également de nouvelles options d'architecture de jeux multijoueurs monolithiques étroitement intégrés.

Un exemple d'informatique de périphérie B2B est le GRID de Nvidia, qui fournit des postes de travail distants virtuels compatibles GPU Nvidia aux appareils de classe Netflix bon marché.

Question : Pourquoi ne pas déplacer l'informatique de pointe du centre de données vers le navigateur ?

Un cas d'utilisation de l'informatique en périphérie de navigateur est une «ferme de rendu d'animation» d'ordinateurs qui rendent un film 3D en divisant le processus d'une journée en morceaux que des milliers d'ordinateurs peuvent traiter en quelques minutes.

Des technologies comme Electron et NW.js ont apporté la programmation Web aux applications de bureau. Les nouvelles technologies de navigateur (comme les PWA) ramènent le modèle de distribution d'applications Web (le SaaS concerne la distribution) à l'informatique de bureau. Les exemples incluent des projets tels que SETI@Home, Folding@Home (repliement de protéines) ou diverses fermes de rendu. Au lieu de devoir télécharger un programme d'installation, il est désormais possible de rejoindre la ferme de calcul en visitant simplement le site Web.

Question : WebVR est-il une « chose réelle » ou le contenu VR sera-t-il diffusé dans les « magasins d'applications » et les jardins clos ?

En tant que pigiste et technologue Toptal, c'est mon travail de savoir. J'ai donc construit un prototype technologique pour répondre à mes propres questions. Les réponses que j'ai trouvées sont très excitantes, et j'ai écrit cette série de blogs pour les partager avec vous.

Spoiler : Oui, WebVR est une vraie chose. Et oui, l'informatique en périphérie de navigateur peut utiliser les mêmes API pour accéder à la puissance de calcul qui permet WebVR.

Très amusant à écrire ! Construisons une preuve de concept

Pour tester cela, nous allons faire une simulation astrophysique du problème à n corps.

Les astronautes peuvent utiliser des équations pour calculer les forces gravitationnelles entre deux objets. Cependant, il n'y a pas d'équations pour les systèmes à trois corps ou plus, ce qui est malencontreusement tous les systèmes de l'univers connu. La science!

Alors que le problème à n corps n'a pas de solution analytique (équations), il a une solution informatique (algorithmes), qui est O(n²). O(n²) est à peu près le pire cas possible, mais c'est comment obtenir ce que nous voulons, et c'est en quelque sorte la raison pour laquelle la notation Big O a été inventée en premier lieu.

Figure 2 : « En haut et à droite ? Eh bien, je ne suis pas ingénieur, mais les performances me semblent bonnes !

Si vous dépoussiérez vos compétences Big O, rappelez-vous que la notation Big O mesure comment le travail d'un algorithme « s'adapte » en fonction de la taille des données sur lesquelles il fonctionne.

Notre collection est constituée de tous les corps de notre simulation. Ajouter un nouveau corps signifie ajouter un nouveau calcul de gravité à deux corps pour chaque corps existant dans l'ensemble.

Alors que notre boucle interne est < n, elle n'est pas <= O(log n), donc tout l'algorithme est O(n²). Ce sont les pauses, pas de crédit supplémentaire.

 for (let i: i32 = 0; i < numBodies; i++) { // n // Given body i: pair with every body[j] where j > i for (let j: i32 = i + 1; j < numBodies; j++) { // 1/2 n is > log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

La solution n-body nous place également dans le monde des moteurs de physique/jeu et une exploration de la technologie nécessaire pour WebVR.

Pour notre prototype, une fois que nous aurons construit la simulation, nous ferons une visualisation 2D.

Enfin, nous remplacerons la visualisation Canvas par une version WebVR.

Si vous êtes impatient, vous pouvez passer directement au code du projet.

Web Workers, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Bouclez votre ceinture pour une aventure pleine d'action et amusante à travers un groupe de nouvelles technologies qui sont déjà arrivées dans votre navigateur mobile moderne (désolé, pas vous Safari):

• Nous utiliserons Web Workers pour déplacer la simulation dans son propre thread CPU, améliorant ainsi les performances perçues et réelles.
• Nous utiliserons WebAssembly pour exécuter l'algorithme O(n²) dans du code compilé hautes performances (C/C++/Rust/AssemblyScript/etc.) dans ce nouveau thread.
• Nous allons utiliser Canvas pour visualiser notre simulation en 2D.
• Nous utiliserons Rollup et Gulp comme alternative légère à Webpack.
• Enfin, nous utiliserons WebVR et Aframe pour créer une réalité virtuelle pour votre téléphone.

Architecture du dos de la serviette avant de plonger dans le code

Nous allons commencer par une version Canvas car vous lisez probablement ceci au travail.

Dans les premiers articles, nous utiliserons les API de navigateur existantes pour accéder aux ressources informatiques nécessaires pour créer une simulation gourmande en CPU sans dégrader l'expérience utilisateur.

Ensuite, nous allons visualiser cela dans le navigateur à l'aide de Canvas, en échangeant enfin notre visualisation Canvas pour un WebVR utilisant Aframe.

Boucle de conception et de simulation d'API

Notre simulation à n corps prédit la position des objets célestes en utilisant les forces de gravité. Nous pouvons calculer la force exacte entre deux objets avec une équation, mais pour calculer les forces entre trois objets ou plus, nous devons diviser la simulation en petits segments de temps et itérer. Notre objectif est de 30 images/seconde (vitesse du film) ou ~33 ms/image.

Pour vous orienter, voici un bref aperçu du code :

1. Index.html du navigateur GET
2. Qui exécute main.js comme le code ci-dessous. Les import sont gérées avec Rollup, une alternative à Webpack.
3. Qui crée un nouveau nBodySimulator()
4. Qui a une API externe :
   1. sim.addVisualization()
   2. sim.addBody()
   3. sim.start()

 // src/main.js import { nBodyVisPrettyPrint, nBodyVisCanvas } from "./nBodyVisualizer" import { Body, nBodySimulator } from "./nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // Add some visualizers sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))) sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas"))) // This is a simulation, using opinionated G = 6.674e-11 // So boring values are allowed and create systems that collapse over billions of years. // For spinny, where distance=1, masses of 1e10 are fun. // Set Z coords to 1 for best visualization in overhead 2D Canvas. // lol, making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9)) sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0)) // A couple far-out asteroids to pin the canvas visualization in place. sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0)) sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) // That is the extent of my effort to handcraft a stable solar system. // We can now play in that system by throwing debris around (inner plants). // Because that debris will have significantly smaller mass, it won't disturb our stable system (hopefully :-) // This requires we remove bodies that fly out of bounds past our 30x30 space created by the asteroids. // See sim.trimDebris(). It's a bit hacky, but my client (me) doesn't want to pay for it and wants the WebVR version. function rando(scale) { return (Math.random()-.5) * scale } document.getElementById("mayhem").addEventListener('click', () => { for (let x=0; x<10; x++) { sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1))) } }) }

Les deux astéroïdes ont une masse nulle et ne sont donc pas affectés par la gravité. Ils maintiennent notre visualisation 2D agrandie à au moins 30x30. Le dernier morceau de code est notre bouton « chaos » pour ajouter 10 petites planètes intérieures pour s'amuser !

Vient ensuite notre « boucle de simulation » - toutes les 33 ms, recalculez et repeignez. Si vous vous amusez, nous pourrions appeler cela une "boucle de jeu". La chose la plus simple qui pourrait éventuellement fonctionner pour implémenter notre boucle est setTimeout() - et cela a rempli mon objectif. Une alternative pourrait être requestAnimationFrame().

sim.start() démarre l'action en appelant sim.step() toutes les 33 ms (environ 30 images par seconde).

 // Methods from class nBodySimulator // The simulation loop start() { // This is the simulation loop. step() calls visualize() const step = this.step.bind(this) setInterval(step, this.simulationSpeed) } // A step in the simulation loop. async step() { // Skip calculation if worker not ready. Runs every 33ms (30fps), so expect skips. if (this.ready()) { await this.calculateForces() } else { console.log(`Skipping: ${this.workerReady}, ${this.workerCalculating}`) } // Remove any "debris" that has traveled out of bounds - this is for the button this.trimDebris() // Now Update forces. Reuse old forces if we skipped calculateForces() above this.applyForces() // Ta-dah! this.visualize() }

Hourra! Nous passons de la conception à la mise en œuvre. Nous allons implémenter les calculs physiques dans WebAssembly et les exécuter dans un thread Web Worker séparé.

nBodySimulator enveloppe cette complexité d'implémentation et la divise en plusieurs parties :

1. calculateForces() promet de calculer les forces à appliquer.
   1. Ce sont principalement des opérations en virgule flottante et effectuées dans WebAssembly.
   2. Ces calculs sont O(n²) et notre goulot d'étranglement de performance.
   3. Nous utilisons un Web Worker pour les déplacer hors du fil principal pour une meilleure performance perçue et réelle.
2. trimDebris() supprime tous les débris qui ne sont plus intéressants (et feraient un zoom arrière sur notre visualisation). Au)
3. applyForces() applique les forces calculées aux corps. Au)
   1. Nous réutilisons les anciennes forces si nous avons sauté calculateForces() car le travailleur était déjà occupé. Cela améliore les performances perçues (suppression de la gigue) au détriment de la précision.
   2. Le thread principal de l'interface utilisateur peut peindre les forces anciennes même si le calcul prend plus de 33 ms.
4. visualize() passe le tableau de corps à chaque visualiseur à peindre. Au)

Et tout se passe en 33ms ! Pouvons-nous améliorer ce design ? Oui. Curieux ou avez une suggestion? Vérifiez les commentaires ci-dessous. Si vous recherchez une conception et une implémentation modernes et avancées, consultez l'open-source Matter.js.

Être mis à feu!

Je me suis tellement amusé à le créer et je suis ravi de le partager avec vous. Rendez-vous après le saut !

1. Introduction - cette page
2. Web Workers - accès à plusieurs threads
3. WebAssembly - informatique de navigateur sans JavaScript
4. Rollup et Gulp - une alternative à WebPack
5. Canvas - Dessin vers l'API Canvas et la "boucle de simulation"
6. WebVR - Remplacement de notre visualiseur Canvas par WebVR et Aframe

Le divertissement dirigera le contenu dans la réalité virtuelle (comme le mobile), mais une fois que la réalité virtuelle sera normale (comme le mobile), ce sera l'expérience attendue du consommateur et de la productivité (comme le mobile).

Nous n'avons jamais été aussi habilités à créer des expériences humaines. Il n'y a jamais eu de période plus excitante pour être concepteur et développeur. Oubliez les pages Web - nous construirons des mondes.

Notre voyage commence avec l'humble Web Worker, alors restez à l'écoute pour la prochaine partie de notre série WebVR.