WebVR e la rivoluzione del Browser Edge Computing

È arrivata un'enorme ondata di tecnologia: la realtà virtuale (VR). Qualunque cosa tu abbia provato la prima volta che hai impugnato uno smartphone, l'esperienza della realtà virtuale per la prima volta offre un'esperienza emotiva più sostanziale in ogni aspetto dell'informatica. Sono passati solo 12 anni dal primo iPhone. Come concetto, la realtà virtuale esiste ancora da più tempo, ma la tecnologia necessaria per portare la realtà virtuale agli utenti medi non era disponibile fino a poco tempo.

Oculus Quest è la piattaforma di gioco consumer di Facebook per la realtà virtuale. La sua caratteristica principale è che non necessita di un PC. Offre un'esperienza VR mobile e wireless. Puoi consegnare a qualcuno un visore VR in un bar per condividere un modello 3D con la stessa imbarazzo di cercare su Google qualcosa in una conversazione, ma il vantaggio dell'esperienza condivisa è molto più avvincente.

La realtà virtuale cambierà il modo in cui lavoriamo, acquistiamo, godiamo dei contenuti e molto altro.

In questa serie, esploreremo le attuali tecnologie browser che abilitano WebVR e browser edge computing. Questo primo post mette in evidenza quelle tecnologie e un'architettura per la nostra simulazione.

Nei seguenti articoli, evidenzieremo alcune sfide e opportunità uniche nel codice. Per esplorare questa tecnologia, ho realizzato una demo su Canvas e WebVR e pubblicato il codice su GitHub.

Cosa significa VR per UX

In qualità di sviluppatore Toptal, aiuto le aziende a portare i progetti dall'idea a un beta test con gli utenti. Quindi, in che modo la realtà virtuale è rilevante per le applicazioni Web aziendali?

I contenuti di intrattenimento guideranno l'adozione della realtà virtuale (come è successo sui dispositivi mobili). Tuttavia, una volta che la realtà virtuale diventa mainstream come i dispositivi mobili, il "design VR-first" sarà l'esperienza prevista (simile a "mobile-first").

"Mobile-first" è stato un cambio di paradigma, "Offline-first" è un cambiamento di paradigma attuale e "VR-first" è all'orizzonte. Questo è un momento molto eccitante per essere un designer e uno sviluppatore, perché la realtà virtuale è un paradigma di design completamente diverso (lo esploreremo nell'ultimo articolo della serie). Non sei un designer di realtà virtuale se non riesci ad afferrare.

La realtà virtuale è iniziata con la rivoluzione del Personal Computing (PC), ma sta arrivando come il prossimo passo nella rivoluzione mobile. Oculus Quest di Facebook si basa su Google Cardboard utilizzando il System-on-Chip (SoC) Snapdragon 835 di Qualcomm, il rilevamento delle cuffie (impiegando telecamere mobili) e funziona su Android, il tutto confezionato per essere comodamente montato sui teneri organi di senso del tuo viso.

L'Oculus Quest da $ 400 offre esperienze straordinarie che posso condividere con i miei amici. Un nuovo iPhone da $ 1.000 non impressiona più nessuno. L'umanità non sputerà il gancio della realtà virtuale.

Applicazioni del settore VR

La realtà virtuale sta iniziando a farsi sentire in numerosi settori e campi dell'informatica. A parte il consumo di contenuti e i giochi, che tendono a ottenere molta copertura da parte della stampa, la realtà virtuale sta lentamente cambiando i settori che vanno dall'architettura all'assistenza sanitaria.

• Architettura e Real Estate creano il valore di una realtà fisica a costi straordinari (rispetto al digitale), quindi è una scelta naturale per architetti e agenti immobiliari portare i clienti attraverso una realtà virtuale per mostrare l'esperienza. La realtà virtuale offre un "beta test" del tuo stadio da $ 200 milioni o una procedura dettagliata virtuale al telefono.
• L'apprendimento e l'istruzione in VR trasmettono esperienze che altrimenti sarebbero impossibili da replicare con immagini o video.
• Le aziende automobilistiche traggono vantaggio dalla realtà virtuale, dalla progettazione e sicurezza alla formazione e al marketing.
• Gli operatori sanitari del Lucile Packard Children's Hospital di Stanford hanno utilizzato la realtà virtuale per pianificare interventi chirurgici al cuore, consentendo loro di comprendere l'anatomia di un paziente prima di eseguire una singola incisione. La realtà virtuale sta anche sostituendo i prodotti farmaceutici per alleviare il dolore.
• Retail, Marketing e Hospitality offrono già tour virtuali di prodotti e luoghi. Quando i rivenditori inizieranno a capire quanto potrebbe essere avvincente la loro esperienza di acquisto, gli innovatori del commercio al dettaglio metteranno l'ultimo chiodo nella bara dello shopping di mattoni e malta.

Con l'avanzare della tecnologia, assisteremo a una maggiore adozione in vari settori. La domanda ora è quanto velocemente avverrà questo cambiamento e quali settori saranno maggiormente colpiti.

Cosa significa VR per il Web e l'Edge Computing

L'"Edge Computing" sposta l'elaborazione fuori dal cluster di server delle applicazioni principale e si avvicina all'utente finale. Ha un entusiasmo di marketing perché le società di hosting non vedono l'ora di affittarti un server a bassa latenza in ogni città.

Un esempio di edge computing B2C è il servizio Stadia di Google, che esegue carichi di lavoro di gioco intensivi di CPU/GPU sui server di Google, quindi invia il gioco a un dispositivo come Netflix. Qualsiasi stupido Chromebook Netflix può improvvisamente giocare a giochi come un computer da gioco di fascia alta. Questo crea anche nuove opzioni di architettura di giochi multiplayer monolitici strettamente integrati.

Un esempio di edge computing B2B è GRID di Nvidia, che fornisce workstation remote virtuali abilitate per GPU Nvidia a dispositivi economici di classe Netflix.

Domanda: perché non spostare l'edge computing dal data center al browser?

Un caso d'uso per l'edge computing del browser è una "fattoria di rendering di animazioni" di computer che esegue il rendering di un film 3D suddividendo il processo di un giorno in blocchi che migliaia di computer possono elaborare in pochi minuti.

Tecnologie come Electron e NW.js hanno portato la programmazione web nelle applicazioni desktop. Nuove tecnologie browser (come quelle PWA) stanno riportando il modello di distribuzione delle applicazioni web (SaaS riguarda la distribuzione) al desktop computing. Gli esempi includono progetti come SETI@Home, Folding@Home (ripiegamento proteico) o vari render farm. Invece di dover scaricare un programma di installazione, ora è possibile entrare nella Compute Farm semplicemente visitando il sito web.

Domanda: WebVR è una "cosa reale" o i contenuti VR verranno introdotti negli "app store" e nei giardini recintati?

Come libero professionista e tecnologo di Toptal, è il mio lavoro saperlo. Così ho costruito un prototipo tecnologico per rispondere alle mie domande. Le risposte che ho trovato sono molto eccitanti e ho scritto questa serie di blog per condividerle con te.

Spoiler: Sì, WebVR è una cosa reale. E sì, il browser edge computing può utilizzare le stesse API per accedere alla potenza di calcolo che abilita WebVR.

Molto divertente da scrivere! Costruiamo una prova di concetto

Per testare questo, faremo una simulazione astrofisica del problema degli n corpi.

Gli astronauti possono utilizzare le equazioni per calcolare le forze gravitazionali tra due oggetti. Tuttavia, non ci sono equazioni per i sistemi con tre o più corpi, che è scomodamente ogni sistema nell'universo conosciuto. Scienza!

Sebbene il problema degli n corpi non abbia una soluzione analitica (equazioni), ha una soluzione computazionale (algoritmi), che è O(n²). O(n²) è praticamente il peggior caso possibile, ma è come ottenere ciò che vogliamo, e in qualche modo è stata inventata la notazione Big O in primo luogo.

Figura 2: “In alto ea destra? Beh, non sono un ingegnere, ma le prestazioni mi sembrano buone!”

Se stai rispolverando le tue abilità di Big O, ricorda che la notazione Big O misura come il lavoro di un algoritmo "scala" in base alla dimensione dei dati su cui sta operando.

La nostra collezione è composta da tutti i corpi nella nostra simulazione. Aggiungere un nuovo corpo significa aggiungere un nuovo calcolo della gravità di due corpi per ogni corpo esistente nell'insieme.

Mentre il nostro ciclo interno è < n, non è <= O(log n), quindi l'intero algoritmo è O(n²). Queste sono le pause, nessun credito extra.

 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 soluzione n-body ci porta anche nel mondo della fisica/dei motori di gioco e nell'esplorazione della tecnologia necessaria per WebVR.

Per il nostro prototipo, una volta costruita la simulazione, realizzeremo una visualizzazione 2D.

Infine, sostituiremo la visualizzazione Canvas con una versione WebVR.

Se sei impaziente, puoi passare direttamente al codice del progetto.

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

Allaccia le cinture per un gioco pieno di azione e divertimento attraverso un gruppo di nuove tecnologie che sono già arrivate nel tuo moderno browser mobile (scusate, non tu Safari):

• Utilizzeremo Web Workers per spostare la simulazione nel proprio thread CPU, migliorando le prestazioni percepite ed effettive.
• Useremo WebAssembly per eseguire l'algoritmo O(n²) in codice compilato ad alte prestazioni (C/C++/Rust/AssemblyScript/ecc.) in quel nuovo thread.
• Useremo Canvas per visualizzare la nostra simulazione in 2D.
• Useremo Rollup e Gulp come alternativa leggera a Webpack.
• Infine, utilizzeremo WebVR e Aframe per creare una realtà virtuale per il tuo telefono.

Architettura del retro del tovagliolo prima di immergersi nel codice

Inizieremo con una versione Canvas perché probabilmente lo stai leggendo al lavoro.

Nei primi post, utilizzeremo le API del browser esistenti per accedere alle risorse di elaborazione necessarie per creare una simulazione ad alta intensità di CPU senza degradare l'esperienza dell'utente.

Quindi, lo visualizzeremo nel browser utilizzando Canvas, scambiando infine la nostra visualizzazione Canvas con un WebVR utilizzando Aframe.

Ciclo di progettazione e simulazione API

La nostra simulazione a n corpi prevede la posizione degli oggetti celesti utilizzando le forze di gravità. Possiamo calcolare la forza esatta tra due oggetti con un'equazione, ma per calcolare le forze tra tre o più oggetti, abbiamo bisogno di suddividere la simulazione in piccoli segmenti di tempo ed iterare. Il nostro obiettivo è di 30 fotogrammi/secondo (velocità del filmato) o ~33 ms/fotogramma.

Per orientarsi, ecco una rapida panoramica del codice:

1. index.html del browser GET
2. Che esegue main.js come il codice seguente. Gli import vengono gestiti con Rollup, un'alternativa a Webpack.
3. Che crea un nuovo nBodySimulator()
4. Che ha un'API esterna:
   1. sim.addVisualizzazione()
   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))) } }) }

I due asteroidi hanno massa zero quindi non sono influenzati dalla gravità. Mantengono la nostra visualizzazione 2D ridotta ad almeno 30x30. L'ultimo pezzo di codice è il nostro pulsante "caos" per aggiungere 10 piccoli pianeti interni per un po' di divertimento!

Il prossimo è il nostro "ciclo di simulazione": ogni 33 ms, ricalcola e ridipingi. Se ti stai divertendo, potremmo chiamarlo un "ciclo di gioco". La cosa più semplice che potrebbe funzionare per implementare il nostro ciclo è setTimeout() - e questo ha soddisfatto il mio scopo. Un'alternativa potrebbe essere requestAnimationFrame().

sim.start() avvia l'azione chiamando sim.step() ogni 33 ms (circa 30 fotogrammi al secondo).

 // 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() }

Evviva! Stiamo passando dalla progettazione all'implementazione. Implementeremo i calcoli di fisica in WebAssembly e li eseguiremo in un thread di Web Worker separato.

nBodySimulator racchiude quella complessità di implementazione e la divide in più parti:

1. calculateForces() promette di calcolare le forze da applicare.
   1. Si tratta principalmente di operazioni in virgola mobile e eseguite in WebAssembly.
   2. Questi calcoli sono O(n²) e il nostro collo di bottiglia delle prestazioni.
   3. Usiamo un Web Worker per spostarli fuori dal thread principale per una migliore performance percepita ed effettiva.
2. trimDebris() rimuove tutti i detriti che non sono più interessanti (e rimpicciolisce la nostra visualizzazione). Su)
3. applyForces() applica le forze calcolate ai corpi. Su)
   1. Riutilizziamo le vecchie forze se abbiamo saltato calcolareForces() perché il lavoratore era già occupato. Ciò migliora le prestazioni percepite (rimuovendo il jitter) a scapito della precisione.
   2. Il thread principale dell'interfaccia utente può dipingere le vecchie forze anche se il calcolo richiede più di 33 ms.
4. visualize() passa l'array di corpi a ciascun visualizzatore per dipingere. Su)

E succede tutto in 33ms! Potremmo migliorare questo design? Sì. Curiosi o avete un suggerimento? Controlla i commenti qui sotto. Se stai cercando un design e un'implementazione moderni avanzati, dai un'occhiata al Matter.js open source.

Esplosione!

Mi sono divertito così tanto a crearlo e sono entusiasta di condividerlo con voi. Ci vediamo dopo il salto!

1. Introduzione - questa pagina
2. Web Workers: accesso a più thread
3. WebAssembly - elaborazione del browser senza JavaScript
4. Rollup e Gulp: un'alternativa a WebPack
5. Canvas - Disegno sull'API Canvas e sul "loop sim"
6. WebVR - Scambio del nostro visualizzatore Canvas per WebVR e Aframe

L'intrattenimento guiderà i contenuti nella realtà virtuale (come i dispositivi mobili), ma una volta che la realtà virtuale sarà normale (come i dispositivi mobili), sarà l'esperienza di consumo e produttività prevista (come i dispositivi mobili).

Non siamo mai stati così autorizzati a creare esperienze umane. Non c'è mai stato un momento più emozionante per essere un designer e uno sviluppatore. Dimentica le pagine web: costruiremo mondi.

Il nostro viaggio inizia con l'umile Web Worker, quindi resta sintonizzato per la prossima parte della nostra serie WebVR.