WebVR și revoluția Browser Edge Computing

Un val tehnologic uriaș a sosit - Realitatea Virtuală (VR). Indiferent de ce ai simțit prima dată când ai ținut un smartphone, experimentarea VR pentru prima dată oferă o experiență emoțională mai substanțială în fiecare aspect al computerului. Au trecut doar 12 ani de la primul iPhone. Ca concept, VR există și mai mult timp, dar tehnologia necesară pentru a aduce VR utilizatorilor obișnuiți nu a fost disponibilă până de curând.

Oculus Quest este platforma Facebook de jocuri pentru consumatori pentru VR. Caracteristica sa principală este că nu are nevoie de un PC. Oferă o experiență VR mobilă fără fir. Puteți înmâna cuiva un set cu cască VR într-o cafenea pentru a partaja un model 3D cu aproximativ aceeași stingere ca și când ați căuta ceva pe Google într-o conversație, dar câștigul experienței partajate este mult mai convingător.

VR va schimba modul în care lucrăm, cumpărăm, ne bucurăm de conținut și multe altele.

În această serie, vom explora tehnologiile actuale de browser care permit WebVR și computerul edge al browserului. Această primă postare evidențiază acele tehnologii și o arhitectură pentru simularea noastră.

În următoarele articole, vom evidenția câteva provocări și oportunități unice în cod. Pentru a explora această tehnologie, am făcut un demo Canvas și WebVR și am publicat codul pe GitHub.

Ce înseamnă VR pentru UX

În calitate de dezvoltator Toptal, ajut companiile să treacă proiecte de la idee la un test beta cu utilizatori. Deci, cum este VR relevantă pentru aplicațiile web de afaceri?

Conținutul de divertisment va conduce la adoptarea realității virtuale (cum a făcut-o pe mobil). Cu toate acestea, odată ce VR devine mainstream ca mobilul, „designul VR-first” va fi experiența așteptată (similar cu „mobile-first”).

„Mobile-first” a fost o schimbare de paradigmă, „Offline-first” este o schimbare actuală de paradigmă, iar „VR-first” este la orizont. Acesta este un moment foarte interesant pentru a fi designer și dezvoltator, deoarece VR este o paradigmă de design complet diferită (vom explora acest lucru în ultimul articol al seriei). Nu ești un designer VR dacă nu poți prinde.

VR a început în revoluția computerelor personale (PC), dar vine ca următorul pas în revoluția mobilă. Oculus Quest de la Facebook se bazează pe Google Cardboard folosind Qualcomm Snapdragon 835 System-on-Chip (SoC), urmărirea căștilor (folosind camere mobile) și rulează pe Android - toate ambalate pentru a fi montate confortabil pe organele sensibile ale feței tale.

Oculus Quest de 400 USD oferă experiențe uimitoare pe care le pot împărtăși prietenilor mei. Un nou iPhone de 1.000 de dolari nu mai impresionează pe nimeni. Omenirea nu va scuipa cârligul VR.

Aplicații din industria VR

VR începe să-și facă simțită prezența în numeroase industrii și domenii de calcul. Pe lângă consumul de conținut și jocurile de noroc, care tind să obțină multă acoperire în presă, VR schimbă încet industriile, de la arhitectură la asistență medicală.

• Arhitectura și imobiliare creează valoarea unei realități fizice la costuri extraordinare (comparativ cu digitalul), așa că este o potrivire firească ca arhitecții și agenții imobiliari să aducă clienții printr-o realitate virtuală pentru a arăta experiența. VR oferă un „test beta” al stadionului tău de 200 de milioane de dolari sau o prezentare virtuală prin telefon.
• Învățarea și educația în VR transmit experiențe care altfel ar fi imposibil de reprodus cu imagini sau videoclipuri.
• Companiile de automobile beneficiază de VR, de la design și siguranță la instruire și marketing.
• Profesioniștii din domeniul sănătății de la Spitalul de Copii Lucile Packard din Stanford au folosit VR pentru a planifica intervenții chirurgicale pe inimă, permițându-le să înțeleagă anatomia unui pacient înainte de a face o singură incizie. VR înlocuiește, de asemenea, produsele farmaceutice pentru ameliorarea durerii.
• Comerțul cu amănuntul, marketingul și ospitalitatea oferă deja tururi virtuale ale produselor și locurilor. Pe măsură ce comercianții cu amănuntul încep să înțeleagă cât de convingătoare ar putea fi experiența lor de cumpărături, inovatorii din comerțul cu amănuntul vor pune ultimul cui în sicriul de cumpărături din cărămidă și mortar.

Pe măsură ce tehnologia avansează, vom vedea o adoptare crescută în diverse industrii. Întrebarea acum este cât de repede va avea loc această schimbare și care industrii vor fi cel mai afectate.

Ce înseamnă VR pentru web și Edge Computing

„Edge Computing” mută calcularea din clusterul principal de servere de aplicații și mai aproape de utilizatorul final. Are zgomot de marketing, deoarece companiile de găzduire abia așteaptă să vă închirieze un server cu latență redusă în fiecare oraș.

Un exemplu de edge computing B2C este serviciul Stadia de la Google, care rulează sarcini de joc intensiv CPU/GPU pe serverele Google, apoi trimite jocul pe un dispozitiv precum Netflix. Orice Chromebook Netflix prost poate juca brusc jocuri precum un computer de jocuri de ultimă generație. Acest lucru creează, de asemenea, noi opțiuni de arhitectură ale jocurilor multiplayer monolitice strâns integrate.

Un exemplu de edge computing B2B este GRID-ul Nvidia, care oferă stații de lucru virtuale la distanță activate cu GPU Nvidia dispozitivelor ieftine din clasa Netflix.

Întrebare: De ce să nu mutați edge computing din centrul de date în browser?

Un caz de utilizare pentru browser edge computing este o „fermă de redare a animației” de computere care redă un film 3D, împărțind procesul de o zi în bucăți pe care mii de computere le pot procesa în câteva minute.

Tehnologii precum Electron și NW.js au adus programarea web în aplicațiile desktop. Noile tehnologii de browser (cum ar fi PWA) readuc modelul de distribuție a aplicațiilor web (SaaS este despre distribuție) înapoi la computerul desktop. Exemplele includ proiecte precum SETI@Home, Folding@Home (pliere cu proteine) sau diverse ferme de randare. În loc să fie nevoie să descărcați un program de instalare, acum este posibil să vă alăturați fermei de calcul doar vizitând site-ul web.

Întrebare: Este WebVR un „lucru real” sau conținutul VR va fi aglomerat în „magazine de aplicații” și grădini cu pereți?

În calitate de freelancer și tehnolog Toptal, treaba mea este să știu. Așa că am construit un prototip tehnologic pentru a răspunde la propriile mele întrebări. Răspunsurile pe care le-am găsit sunt foarte interesante și am scris această serie de blog pentru a le împărtăși cu voi.

Spoiler: Da, WebVR este un lucru real. Și da, browser-ul edge computing poate folosi aceleași API-uri pentru a accesa puterea de calcul care permite WebVR.

Foarte distractiv de scris! Să construim o dovadă a conceptului

Pentru a testa acest lucru, vom face o simulare astrofizică a problemei n-corpi.

Astronavigatorii pot folosi ecuații pentru a calcula forțele gravitaționale dintre două obiecte. Cu toate acestea, nu există ecuații pentru sistemele cu trei sau mai multe corpuri, ceea ce este incomod pentru fiecare sistem din universul cunoscut. Ştiinţă!

În timp ce problema cu n corpuri nu are o soluție analitică (ecuații), ea are o soluție de calcul (algoritmi), care este O(n²). O(n²) este aproape cel mai rău caz posibil, dar este cum să obținem ceea ce ne dorim și de ce a fost inventată notația Big O în primul rând.

Figura 2: „Sus și la dreapta? Ei bine, nu sunt inginer, dar performanța mi se pare bună!”

Dacă vă curățați de praf abilitățile Big O, amintiți-vă că notația Big O măsoară modul în care „scalează” munca unui algoritm în funcție de dimensiunea datelor pe care operează.

Colecția noastră reprezintă toate corpurile din simularea noastră. Adăugarea unui nou corp înseamnă adăugarea unui nou calcul de gravitație cu două corpuri pentru fiecare corp existent din set.

În timp ce bucla noastră interioară este < n, nu este <= O(log n), deci întregul algoritm este O(n²). Acestea sunt pauzele, fără credit suplimentar.

 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 } }

Soluția n-body ne pune, de asemenea, chiar în lumea fizicii/motoarelor de joc și o explorare a tehnologiei necesare pentru WebVR.

Pentru prototipul nostru, odată ce am construit simularea, vom face o vizualizare 2D.

În cele din urmă, vom schimba vizualizarea Canvas cu o versiune WebVR.

Dacă ești nerăbdător, poți sări direct la codul proiectului.

Lucrători web, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Încărcați-vă pentru o distracție plină de acțiune și distracție printr-un grup de tehnologii noi care au ajuns deja în browserul dvs. mobil modern (îmi pare rău, nu sunteți Safari):

• Vom folosi Web Workers pentru a muta simularea în propriul thread CPU - îmbunătățind performanța percepută și reală.
• Vom folosi WebAssembly pentru a rula algoritmul O(n²) în cod compilat de înaltă performanță (C/C++/Rust/AssemblyScript/etc.) în acel nou fir.
• Vom folosi Canvas pentru a vizualiza simularea noastră în 2D.
• Vom folosi Rollup și Gulp ca o alternativă ușoară la Webpack.
• În cele din urmă, vom folosi WebVR și Aframe pentru a crea o realitate virtuală pentru telefonul dvs.

Arhitectura din spatele șervețelului înainte de a te scufunda în cod

Vom începe cu o versiune Canvas pentru că probabil că citiți asta la serviciu.

În primele câteva postări, vom folosi API-urile de browser existente pentru a accesa resursele de calcul necesare pentru a crea o simulare intensivă de CPU fără a degrada experiența utilizatorului.

Apoi, vom vizualiza acest lucru în browser folosind Canvas, schimbând în cele din urmă vizualizarea Canvas cu un WebVR folosind Aframe.

Bucla de proiectare și simulare API

Simularea noastră n-corp prezice poziția obiectelor cerești folosind forțele gravitației. Putem calcula forța exactă dintre două obiecte cu o ecuație, dar pentru a calcula forțele dintre trei sau mai multe obiecte, trebuie să împărțim simularea în segmente mici de timp și să repetăm. Obiectivul nostru este de 30 de cadre/secundă (viteza filmului) sau ~33 ms/cadru.

Pentru a vă orienta, iată o scurtă prezentare generală a codului:

1. index.html al browserului GET
2. Care rulează main.js ca codul de mai jos. import sunt gestionate cu Rollup, o alternativă la Webpack.
3. Care creează un nou nBodySimulator()
4. Care are un API extern:
   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))) } }) }

Cei doi asteroizi au masă zero, așa că nu sunt afectați de gravitație. Ei mențin vizualizarea noastră 2D micșorată la cel puțin 30x30. Ultimul fragment de cod este butonul nostru „haos” pentru a adăuga 10 planete interioare mici pentru distracție!

Urmează „bucla noastră de simulare” - la fiecare 33 ms, recalculați și revopsiți. Dacă te distrezi, l-am putea numi „buclă de joc”. Cel mai simplu lucru care ar putea funcționa pentru a implementa bucla noastră este setTimeout() - și asta mi-a îndeplinit scopul. O alternativă ar putea fi requestAnimationFrame().

sim.start() începe acțiunea apelând sim.step() la fiecare 33ms (aproximativ 30 de cadre pe secundă).

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

Ura! Trecem de la proiectare la implementare. Vom implementa calculele fizice în WebAssembly și le vom rula într-un fir separat de Web Worker.

nBodySimulator înglobează complexitatea implementării și o împarte în mai multe părți:

1. calculateForces() promite să calculeze forțele de aplicat.
   1. Acestea sunt în mare parte operațiuni în virgulă mobilă și efectuate în WebAssembly.
   2. Aceste calcule sunt O(n²) și blocajul nostru de performanță.
   3. Folosim un Web Worker pentru a le muta din firul principal pentru o performanță mai bună percepută și reală.
2. trimDebris() elimină orice resturi care nu mai sunt interesante (și ar micșora vizualizarea noastră). Pe)
3. applyForces() aplică forțele calculate asupra corpurilor. Pe)
   1. Reutilizam forțele vechi dacă omitem calculateForces() deoarece lucrătorul era deja ocupat. Acest lucru îmbunătățește performanța percepută (eliminarea jitterului) cu prețul preciziei.
   2. Firul principal de UI poate picta forțele vechi chiar dacă calculul durează mai mult de 33 ms.
4. visualize() transmite matricea de corpuri fiecărui vizualizator pentru a picta. Pe)

Și totul se întâmplă în 33 ms! Am putea îmbunătăți acest design? Da. Ești curios sau ai o sugestie? Verificați comentariile de mai jos. Dacă sunteți în căutarea unui design și implementare modernă avansată, consultați Matter.js cu sursă deschisă.

Lansare!

M-am distrat atât de mult creând acest lucru și sunt încântat să îl împărtășesc cu voi. Ne vedem după salt!

1. Introducere - această pagină
2. Lucrători web - accesarea mai multor fire
3. WebAssembly - browser de calcul fără JavaScript
4. Rollup și Gulp - o alternativă la WebPack
5. Canvas - Desen în API-ul Canvas și „bucla sim”
6. WebVR - Schimbând vizualizatorul Canvas pentru WebVR și Aframe

Divertismentul va conduce conținutul în realitate virtuală (cum ar fi mobilul), dar odată ce VR este normală (precum mobilul), va fi experiența așteptată pentru consumator și productivitate (cum ar fi mobilul).

Nu am fost niciodată mai împuterniciți să creăm experiențe umane. Nu a existat niciodată un moment mai interesant pentru a fi designer și dezvoltator. Uită de paginile web - vom construi lumi.

Călătoria noastră începe cu umilul Web Worker, așa că rămâneți aproape pentru următoarea parte a seriei noastre WebVR.