WebVR und die Browser-Edge-Computing-Revolution

Eine riesige Technologiewelle ist angekommen - Virtual Reality (VR). Was auch immer Sie gefühlt haben, als Sie zum ersten Mal ein Smartphone in der Hand hielten, VR zum ersten Mal zu erleben, bietet eine umfassendere emotionale Erfahrung in jedem Aspekt des Computers. Seit dem ersten iPhone sind nur 12 Jahre vergangen. Als Konzept gibt es VR schon länger, aber die Technologie, die erforderlich ist, um VR für durchschnittliche Benutzer bereitzustellen, war bis vor kurzem nicht verfügbar.

Oculus Quest ist Facebooks Consumer-Gaming-Plattform für VR. Sein Hauptmerkmal ist, dass es keinen PC benötigt. Es bietet ein drahtloses, mobiles VR-Erlebnis. Sie können jemandem in einem Café ein VR-Headset geben, um ein 3D-Modell mit ungefähr der gleichen Umständlichkeit zu teilen, als würde man in einem Gespräch etwas googeln, aber der Lohn der gemeinsamen Erfahrung ist viel überzeugender.

VR wird die Art und Weise verändern, wie wir arbeiten, einkaufen, Inhalte genießen und vieles mehr.

In dieser Serie werden wir die aktuellen Browsertechnologien untersuchen, die WebVR und Browser-Edge-Computing ermöglichen. Dieser erste Beitrag beleuchtet diese Technologien und eine Architektur für unsere Simulation.

In den folgenden Artikeln werden wir einige einzigartige Herausforderungen und Möglichkeiten im Code hervorheben. Um diese Technologie zu erkunden, habe ich eine Canvas- und WebVR-Demo erstellt und den Code auf GitHub veröffentlicht.

Was VR für UX bedeutet

Als Toptal-Entwickler helfe ich Unternehmen, Projekte von der Idee bis zu einem Beta-Test mit Benutzern zu bringen. Wie also ist VR für geschäftliche Webanwendungen relevant?

Unterhaltungsinhalte werden die Einführung von Virtual Reality anführen (wie es auf Mobilgeräten der Fall war). Sobald VR jedoch wie Mobile zum Mainstream wird, wird „VR-First-Design“ die erwartete Erfahrung sein (ähnlich wie „Mobile-First“).

„Mobile-first“ war ein Paradigmenwechsel, „Offline-first“ ist ein aktueller Paradigmenwechsel und „VR-first“ zeichnet sich ab. Dies ist eine sehr aufregende Zeit für Designer und Entwickler, da VR ein völlig anderes Designparadigma ist (wir werden dies im letzten Artikel der Serie untersuchen). Sie sind kein VR-Designer, wenn Sie nicht greifen können.

VR begann in der Revolution des Personal Computing (PC), kommt aber als nächster Schritt in der mobilen Revolution. Oculus Quest von Facebook baut auf Google Cardboard auf und verwendet Qualcomms Snapdragon 835 System-on-Chip (SoC), Headset-Tracking (mit mobilen Kameras) und läuft auf Android – alles so verpackt, dass es bequem auf den empfindlichen Sinnesorganen Ihres Gesichts montiert werden kann.

Das 400-Dollar-Oculus-Quest hält erstaunliche Erfahrungen bereit, die ich mit meinen Freunden teilen kann. Ein neues 1.000-Dollar-iPhone beeindruckt niemanden mehr. Die Menschheit wird den VR-Haken nicht ausspucken.

VR-Branchenanwendungen

VR beginnt sich in zahlreichen Branchen und Bereichen der Computertechnik bemerkbar zu machen. Abgesehen vom Konsum von Inhalten und Spielen, die in der Regel viel Presseberichterstattung erhalten, verändert VR langsam Branchen, die von der Architektur bis zum Gesundheitswesen reichen.

• Architektur und Immobilien schaffen den Wert einer physischen Realität zu außergewöhnlichen Kosten (im Vergleich zu digitalen), daher ist es für Architekten und Immobilienmakler eine natürliche Lösung, Kunden durch eine virtuelle Realität zu bringen, um das Erlebnis zu zeigen. VR bietet einen „Beta-Test“ Ihres 200-Millionen-Dollar-Stadions oder einen virtuellen Rundgang per Telefon.
• Lernen und Bildung in VR vermitteln Erfahrungen, die sonst nicht mit Bildern oder Videos nachgebildet werden könnten.
• Automobilunternehmen profitieren von VR, von Design und Sicherheit bis hin zu Schulungen und Marketing.
• Gesundheitsexperten des Lucile Packard Children's Hospital in Stanford setzen VR zur Planung von Herzoperationen ein, sodass sie die Anatomie eines Patienten verstehen können, bevor sie einen einzigen Einschnitt vornehmen. VR ersetzt auch Medikamente zur Schmerzlinderung.
• Einzelhandel, Marketing und Gastgewerbe bieten bereits virtuelle Besichtigungen von Produkten und Orten an. Wenn Einzelhändler zu verstehen beginnen, wie überzeugend ihr Einkaufserlebnis sein kann, werden Innovatoren im Einzelhandel den letzten Nagel in den Sarg des stationären Einkaufs setzen.

Mit fortschreitender Technologie werden wir eine zunehmende Akzeptanz in verschiedenen Branchen sehen. Die Frage ist nun, wie schnell dieser Wandel vonstatten gehen wird und welche Branchen am stärksten betroffen sein werden.

Was VR für das Web und Edge Computing bedeutet

„Edge Computing“ verlagert die Datenverarbeitung aus Ihrem Hauptanwendungsserver-Cluster und näher an Ihren Endbenutzer. Es hat Marketing-Buzz bekommen, weil Hosting-Unternehmen es kaum erwarten können, Ihnen in jeder Stadt einen Server mit niedriger Latenz zu mieten.

Ein Beispiel für B2C-Edge-Computing ist der Stadia-Dienst von Google, der CPU-/GPU-intensive Gaming-Arbeitslasten auf Googles Servern ausführt und das Spiel dann an ein Gerät wie Netflix sendet. Jedes dumme Netflix-Chromebook kann plötzlich Spiele wie ein High-End-Gaming-Computer spielen. Dies schafft auch neue Architekturoptionen für eng integrierte monolithische Multiplayer-Spiele.

Ein Beispiel für B2B-Edge-Computing ist GRID von Nvidia, das GPU-fähige virtuelle Remote-Workstations von Nvidia für billige Geräte der Netflix-Klasse bereitstellt.

Frage: Warum nicht Edge Computing aus dem Rechenzentrum in den Browser verlagern?

Ein Anwendungsfall für Browser-Edge-Computing ist eine „Animations-Renderfarm“ von Computern, die einen 3D-Film rendern, indem sie den ganztägigen Prozess in Stücke zerlegen, die Tausende von Computern in wenigen Minuten verarbeiten können.

Technologien wie Electron und NW.js brachten die Webprogrammierung in Desktop-Anwendungen. Neue Browsertechnologien (wie PWAs) bringen das Verteilungsmodell für Webanwendungen (bei SaaS geht es um die Verteilung) zurück zum Desktop-Computing. Beispiele sind Projekte wie SETI@Home, Folding@Home (Proteinfaltung) oder verschiedene Renderfarmen. Anstatt ein Installationsprogramm herunterladen zu müssen, ist es jetzt möglich, der Compute-Farm beizutreten, indem man einfach die Website besucht.

Frage: Ist WebVR eine „reale Sache“ oder werden VR-Inhalte in „App Stores“ und Walled Gardens geschleudert?

Als Freiberufler und Technologe bei Toptal ist es meine Aufgabe, es zu wissen. Also baute ich einen technischen Prototypen, um meine eigenen Fragen zu beantworten. Die Antworten, die ich gefunden habe, sind sehr spannend, und ich habe diese Blogserie geschrieben, um sie mit Ihnen zu teilen.

Spoiler: Ja, WebVR ist eine echte Sache. Und ja, Browser-Edge-Computing kann dieselben APIs verwenden, um auf die Rechenleistung zuzugreifen, die WebVR ermöglicht.

Sehr lustig zu schreiben! Lassen Sie uns einen Proof of Concept erstellen

Um dies zu testen, machen wir eine astrophysikalische Simulation des n-Körper-Problems.

Astronavigatoren können Gleichungen verwenden, um Gravitationskräfte zwischen zwei Objekten zu berechnen. Es gibt jedoch keine Gleichungen für Systeme mit drei oder mehr Körpern, was unbequemerweise jedes System im bekannten Universum ist. Wissenschaft!

Während das n-Körper-Problem keine analytische Lösung (Gleichungen) hat, hat es eine rechnerische Lösung (Algorithmen), die O(n²) ist. O(n²) ist so ziemlich der schlimmstmögliche Fall, aber es ist, wie wir bekommen, was wir wollen, und irgendwie wurde die Big-O-Notation überhaupt erfunden.

Abbildung 2: „Oben und rechts? Nun, ich bin kein Ingenieur, aber Leistung sieht für mich gut aus!“

Wenn Sie Ihre Big O-Kenntnisse abstauben, denken Sie daran, dass die Big O-Notation misst, wie die Arbeit eines Algorithmus basierend auf der Größe der Daten, mit denen er arbeitet, „skaliert“.

Unsere Sammlung besteht aus allen Körpern in unserer Simulation. Das Hinzufügen eines neuen Körpers bedeutet das Hinzufügen einer neuen Zwei-Körper-Schwerkraftberechnung für jeden vorhandenen Körper im Satz.

Während unsere innere Schleife < n ist, ist sie nicht <= O(log n), also ist der gesamte Algorithmus O(n²). Das sind die Pausen, kein Extraguthaben.

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

Die n-Body-Lösung versetzt uns auch direkt in die Welt der Physik/Game-Engines und eine Erkundung der für WebVR erforderlichen Technologie.

Für unseren Prototyp erstellen wir nach Erstellung der Simulation eine 2D-Visualisierung.

Schließlich tauschen wir die Canvas-Visualisierung gegen eine WebVR-Version aus.

Wenn Sie ungeduldig sind, können Sie direkt zum Code des Projekts springen.

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

Schnallen Sie sich an für ein actiongeladenes, unterhaltsames Toben durch eine Reihe neuer Technologien, die bereits in Ihrem modernen mobilen Browser angekommen sind (sorry, nicht Sie Safari):

• Wir werden Web Workers verwenden, um die Simulation in einen eigenen CPU-Thread zu verschieben, wodurch die wahrgenommene und tatsächliche Leistung verbessert wird.
• Wir verwenden WebAssembly , um den O(n²)-Algorithmus in hochleistungsfähigem (C/C++/Rust/AssemblyScript/usw.) kompiliertem Code in diesem neuen Thread auszuführen.
• Wir verwenden Canvas , um unsere Simulation in 2D zu visualisieren.
• Wir verwenden Rollup und Gulp als leichte Alternative zu Webpack.
• Schließlich verwenden wir WebVR und Aframe , um eine virtuelle Realität für Ihr Telefon zu erstellen.

Back-of-the-Servietten-Architektur vor dem Eintauchen in Code

Wir beginnen mit einer Canvas-Version, da Sie dies wahrscheinlich bei der Arbeit lesen.

In den ersten Beiträgen verwenden wir vorhandene Browser-APIs, um auf die Rechenressourcen zuzugreifen, die zum Erstellen einer CPU-intensiven Simulation erforderlich sind, ohne die Benutzererfahrung zu beeinträchtigen.

Dann visualisieren wir dies im Browser mit Canvas und tauschen schließlich unsere Canvas-Visualisierung gegen eine WebVR mit Aframe aus.

API-Design und Simulationsschleife

Unsere n-Körper-Simulation sagt die Position von Himmelskörpern mithilfe der Schwerkraft voraus. Wir können die genaue Kraft zwischen zwei Objekten mit einer Gleichung berechnen, aber um die Kräfte zwischen drei oder mehr Objekten zu berechnen, müssen wir die Simulation in kleine Zeitabschnitte aufteilen und iterieren. Unser Ziel sind 30 Frames/Sekunde (Filmgeschwindigkeit) oder ~33 ms/Frame.

Um sich zu orientieren, hier ein kurzer Überblick über den Code:

1. Index.html von Browser GET
2. Was main.js als den folgenden Code ausführt. Die import werden mit Rollup abgewickelt, einer Alternative zu Webpack.
3. Was einen neuen nBodySimulator() erstellt
4. Welches hat eine externe API:
   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))) } }) }

Die beiden Asteroiden haben keine Masse, sodass sie nicht von der Schwerkraft beeinflusst werden. Sie halten unsere 2D-Visualisierung auf mindestens 30x30 verkleinert. Das letzte Bit des Codes ist unser „Chaos“-Button, um 10 kleine innere Planeten für ein bisschen Spinning-Spaß hinzuzufügen!

Als nächstes kommt unsere „Simulationsschleife“ – alle 33 ms neu berechnen und neu zeichnen. Wenn Sie Spaß haben, könnten wir es eine „Spielschleife“ nennen. Das einfachste, was möglicherweise funktionieren könnte, um unsere Schleife zu implementieren, ist setTimeout() - und das hat meinen Zweck erfüllt. Eine Alternative könnte requestAnimationFrame() sein.

sim.start() startet die Aktion durch Aufrufen von sim.step() alle 33ms (ca. 30 Frames pro Sekunde).

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

Hurra! Wir gehen vom Design zur Implementierung über. Wir werden die physikalischen Berechnungen in WebAssembly implementieren und in einem separaten Web Worker-Thread ausführen.

nBodySimulator umschließt diese Implementierungskomplexität und teilt sie in mehrere Teile auf:

1. calculateForces() verspricht, die anzuwendenden Kräfte zu berechnen.
   1. Dies sind hauptsächlich Gleitkommaoperationen und werden in WebAssembly ausgeführt.
   2. Diese Berechnungen sind O(n²) und unser Leistungsengpass.
   3. Wir verwenden einen Web Worker, um sie für eine besser wahrgenommene und tatsächliche Leistung aus dem Hauptthread herauszubewegen.
2. trimDebris() entfernt alle Trümmer, die nicht mehr interessant sind (und unsere Visualisierung verkleinern würden). An)
3. applyForces() wendet die berechneten Kräfte auf die Körper an. An)
   1. Wir verwenden alte Forces wieder, wenn wir computeForces() übersprungen haben, weil der Worker bereits beschäftigt war. Dies verbessert die wahrgenommene Leistung (Beseitigung von Jitter) auf Kosten der Genauigkeit.
   2. Der Haupt-UI-Thread kann die alten Mächte malen, auch wenn die Berechnung länger als 33 ms dauert.
4. visualize() übergibt das Array von Körpern an jeden Visualizer zum Malen. An)

Und das alles in 33 ms! Könnten wir dieses Design verbessern? Jawohl. Neugierig oder haben Sie einen Vorschlag? Überprüfen Sie die Kommentare unten. Wenn Sie nach einem fortschrittlichen modernen Design und einer fortschrittlichen Implementierung suchen, sehen Sie sich die Open-Source-Version von Matter.js an.

Blastoff!

Es hat mir so viel Spaß gemacht, dies zu erstellen, und ich freue mich darauf, es mit Ihnen zu teilen. Wir sehen uns nach dem Sprung!

1. Einführung - diese Seite
2. Web Worker – Zugriff auf mehrere Threads
3. WebAssembly - Browser-Computing ohne JavaScript
4. Rollup and Gulp - eine Alternative zu WebPack
5. Canvas - Zeichnen auf die Canvas-API und die „Sim-Schleife“
6. WebVR - Austausch unseres Canvas-Visualizers für WebVR und Aframe

Unterhaltung wird Inhalte in Virtual Reality (wie Mobile) anführen, aber sobald VR normal ist (wie Mobile), wird es das erwartete Verbraucher- und Produktivitätserlebnis sein (wie Mobile).

Wir waren noch nie so ermächtigt, menschliche Erfahrungen zu schaffen. Es gab noch nie eine aufregendere Zeit, um Designer und Entwickler zu sein. Vergessen Sie Webseiten - wir werden Welten bauen.

Unsere Reise beginnt mit dem bescheidenen Web Worker, also bleiben Sie dran für den nächsten Teil unserer WebVR-Serie.