WebVR i rewolucja przeglądarki Edge Computing

Nadeszła ogromna fala technologii - Wirtualna Rzeczywistość (VR). Niezależnie od tego, co czułeś, gdy po raz pierwszy trzymałeś smartfon w dłoni, doświadczanie VR po raz pierwszy zapewnia bardziej konkretne wrażenia emocjonalne w każdym aspekcie korzystania z komputera. Od pierwszego iPhone'a minęło dopiero 12 lat. Jako koncepcja, VR istnieje jeszcze dłużej, ale technologia potrzebna do udostępnienia VR przeciętnym użytkownikom nie była dostępna do niedawna.

The Oculus Quest to konsumencka platforma gier Facebooka dla VR. Jego główną cechą jest to, że nie potrzebuje komputera. Zapewnia bezprzewodowe, mobilne wrażenia VR. Możesz wręczyć komuś zestaw VR w kawiarni, aby udostępnić model 3D z mniej więcej taką samą niezręcznością, jak googlowanie czegoś w rozmowie, ale zapłata za wspólne doświadczenie jest o wiele bardziej przekonująca.

VR zmieni sposób, w jaki pracujemy, robimy zakupy, cieszymy się treścią i nie tylko.

W tej serii przyjrzymy się obecnym technologiom przeglądarek, które umożliwiają WebVR i przetwarzanie brzegowe przeglądarki. Ten pierwszy post przedstawia te technologie i architekturę naszej symulacji.

W kolejnych artykułach przedstawimy kilka wyjątkowych wyzwań i możliwości w kodzie. Aby poznać tę technologię, stworzyłem demo Canvas i WebVR oraz opublikowałem kod na GitHub.

Co oznacza VR dla UX

Jako programista Toptal pomagam firmom w przejściu projektów od pomysłu do beta testów z użytkownikami. Jak więc VR ma znaczenie dla biznesowych aplikacji internetowych?

Treści rozrywkowe poprowadzą do wykorzystania wirtualnej rzeczywistości (tak jak miało to miejsce w przypadku urządzeń mobilnych). Jednak gdy VR stanie się tak popularny jak mobilny, oczekiwanym doświadczeniem będzie „projektowanie z myślą o VR” (podobnie jak w przypadku „najpierw mobilność”).

„Mobile-first” był zmianą paradygmatu, „Offline-first” to obecna zmiana paradygmatu, a „VR-first” jest na horyzoncie. To bardzo ekscytujący czas na bycie projektantem i deweloperem, ponieważ VR to zupełnie inny paradygmat projektowania (omówimy to w ostatnim artykule z serii). Nie jesteś projektantem VR, jeśli nie możesz się przyczepić.

Rzeczywistość wirtualna rozpoczęła się w rewolucji komputerów osobistych (PC), ale nadchodzi jako kolejny krok w rewolucji mobilnej. Facebook's Oculus Quest opiera się na Google Cardboard, wykorzystując Snapdragon 835 System-on-Chip (SoC) firmy Qualcomm, śledzenie zestawu słuchawkowego (za pomocą kamer mobilnych) i działa na Androidzie - wszystko zapakowane, aby wygodnie zamontować na narządach zmysłów tkliwych twarzy.

Oculus Quest o wartości 400 USD zapewnia niesamowite wrażenia, którymi mogę podzielić się z przyjaciółmi. Nowy iPhone za 1000 dolarów już na nikim nie robi wrażenia. Ludzkość nie zamierza wypluć haka VR.

Aplikacje branżowe VR

VR zaczyna zaznaczać swoją obecność w wielu branżach i dziedzinach informatyki. Poza konsumpcją treści i grami, które są często omawiane w prasie, VR powoli zmienia branże, od architektury po opiekę zdrowotną.

• Architektura i nieruchomości tworzą wartość fizycznej rzeczywistości przy nadzwyczajnych kosztach (w porównaniu z cyfrową), więc architekci i agenci nieruchomości mogą w naturalny sposób przeprowadzić klientów przez wirtualną rzeczywistość, aby pokazać doświadczenie. VR oferuje „test beta” Twojego stadionu za 200 milionów dolarów lub wirtualny spacer przez telefon.
• Nauka i edukacja w VR przekazują doświadczenia, które w innym przypadku byłyby niemożliwe do odtworzenia za pomocą obrazów lub filmów.
• Firmy motoryzacyjne czerpią korzyści z VR, od projektowania i bezpieczeństwa po szkolenia i marketing.
• Pracownicy służby zdrowia ze Szpitala Dziecięcego im. Lucile Packard w Stanford wykorzystują technologię VR do planowania operacji serca, co pozwala im zrozumieć anatomię pacjenta przed wykonaniem pojedynczego nacięcia. VR zastępuje również leki przeciwbólowe.
• Handel detaliczny, marketing i hotelarstwo już oferują wirtualne wycieczki po produktach i miejscach. Ponieważ detaliści zaczynają rozumieć, jak atrakcyjne może być ich doświadczenie zakupowe, innowatorzy w handlu detalicznym wbiją ostatni gwóźdź do trumny na zakupy.

Wraz z postępem technologicznym będziemy świadkami zwiększonej adopcji w różnych branżach. Teraz pytanie brzmi, jak szybko ta zmiana nastąpi i które branże ucierpią najbardziej.

Co oznacza VR dla Internetu i Edge Computing

„Przetwarzanie brzegowe” przenosi przetwarzanie poza główny klaster serwerów aplikacji i zbliża się do użytkownika końcowego. Ma szum marketingowy, ponieważ firmy hostingowe nie mogą się doczekać, aby wynająć Ci serwer o niskim opóźnieniu w każdym mieście.

Przykładem przetwarzania brzegowego B2C jest usługa Google Stadia, która uruchamia obciążające procesory/GPU obciążenia gier na serwerach Google, a następnie wysyła grę na urządzenie takie jak Netflix. Każdy głupi Chromebook Netflix może nagle grać w gry, takie jak wysokiej klasy komputer do gier. Stwarza to również nowe opcje architektury ściśle zintegrowanych monolitycznych gier wieloosobowych.

Przykładem przetwarzania brzegowego B2B jest Nvidia GRID, która dostarcza wirtualne zdalne stacje robocze z obsługą GPU Nvidia do tanich urządzeń klasy Netflix.

Pytanie: Dlaczego nie przenieść przetwarzania brzegowego z centrum danych do przeglądarki?

Przykładem użycia przetwarzania brzegowego przeglądarki jest „farma renderowania animacji” komputerów, które renderują film 3D, dzieląc całodniowy proces na fragmenty, które tysiące komputerów mogą przetworzyć w ciągu kilku minut.

Technologie takie jak Electron i NW.js wprowadziły programowanie internetowe do aplikacji komputerowych. Nowe technologie przeglądarek (takie jak PWA) przywracają model dystrybucji aplikacji internetowych (SaaS dotyczy dystrybucji) z powrotem do komputerów stacjonarnych. Przykładami są projekty takie jak SETI@Home, Folding@Home (składanie białek) lub różne farmy renderujące. Zamiast pobierać instalator, można teraz dołączyć do farmy obliczeniowej, po prostu odwiedzając witrynę internetową.

Pytanie: Czy WebVR to „prawdziwa rzecz”, czy też treści VR zostaną zatłoczone w „sklepach z aplikacjami” i otoczonych murem ogrodach?

Jako freelancer i technolog firmy Toptal, moim zadaniem jest wiedzieć. Zbudowałem więc prototyp techniczny, aby odpowiedzieć na moje własne pytania. Odpowiedzi, które znalazłem, są bardzo ekscytujące i napisałem tę serię blogów, aby podzielić się nimi z wami.

Spoiler: Tak, WebVR to prawdziwa rzecz. I tak, przetwarzanie brzegowe przeglądarki może korzystać z tych samych interfejsów API, aby uzyskać dostęp do mocy obliczeniowej, która umożliwia WebVR.

Bardzo fajnie pisać! Zbudujmy dowód koncepcji

Aby to przetestować, zrobimy symulację astrofizyczną problemu n-ciał.

Astronawigatorzy mogą używać równań do obliczania sił grawitacyjnych między dwoma obiektami. Jednak nie ma równań dla układów z trzema lub więcej ciałami, co jest niewygodne dla każdego układu w znanym wszechświecie. Nauki ścisłe!

Chociaż problem n-ciał nie ma rozwiązania analitycznego (równań), ma rozwiązanie obliczeniowe (algorytmy), którym jest O(n²). O(n²) jest najgorszym możliwym przypadkiem, ale mówi o tym, jak uzyskać to, czego chcemy, i dlaczego w ogóle wynaleziono notację Big O.

Rysunek 2: „W górę iw prawo? Cóż, nie jestem inżynierem, ale wydajność wydaje mi się dobra!”

Jeśli odkurzasz swoje umiejętności Big O, pamiętaj, że notacja Big O mierzy, w jaki sposób działanie algorytmu „skaluje się” w oparciu o rozmiar danych, na których operuje.

Nasza kolekcja to wszystkie ciała w naszej symulacji. Dodanie nowego ciała oznacza dodanie nowego obliczenia grawitacji dwóch ciał dla każdego istniejącego ciała w zestawie.

Chociaż nasza wewnętrzna pętla to < n, to nie jest <= O(log n), więc cały algorytm to O(n²). To są przerwy, bez dodatkowego kredytu.

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

Rozwiązanie n-body wprowadza nas również w świat fizyki/silników gier i eksplorację technologii potrzebnej do WebVR.

Dla naszego prototypu, po zbudowaniu symulacji, wykonamy wizualizację 2D.

Na koniec zamienimy wizualizację Canvas na wersję WebVR.

Jeśli jesteś niecierpliwy, możesz przejść od razu do kodu projektu.

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

Przygotuj się na pełną akcji, zabawną zabawę z klastrem nowych technologii, które pojawiły się już w Twojej nowoczesnej przeglądarce mobilnej (przepraszam, nie w Safari):

• Użyjemy Web Workers , aby przenieść symulację do własnego wątku procesora - poprawiając postrzeganą i rzeczywistą wydajność.
• Użyjemy WebAssembly do uruchomienia algorytmu O(n²) w wysokowydajnym (C/C++/Rust/AssemblyScript/itp.) skompilowanym kodzie w tym nowym wątku.
• Użyjemy Canvas , aby zwizualizować naszą symulację w 2D.
• Użyjemy Rollup i Gulp jako lekką alternatywę dla Webpack.
• Na koniec użyjemy WebVR i Aframe , aby stworzyć wirtualną rzeczywistość dla Twojego telefonu.

Architektura tylnej części serwetki przed zagłębieniem się w kod

Zaczniemy od wersji Canvas, ponieważ prawdopodobnie czytasz to w pracy.

W pierwszych kilku postach użyjemy istniejących interfejsów API przeglądarki, aby uzyskać dostęp do zasobów obliczeniowych wymaganych do stworzenia symulacji intensywnie korzystającej z procesora bez pogorszenia doświadczenia użytkownika.

Następnie zwizualizujemy to w przeglądarce za pomocą Canvas, w końcu zamieniając naszą wizualizację Canvas na WebVR przy użyciu Aframe.

Projektowanie API i pętla symulacji

Nasza symulacja n-ciał przewiduje położenie ciał niebieskich przy użyciu sił grawitacji. Możemy obliczyć dokładną siłę między dwoma obiektami za pomocą równania, ale aby obliczyć siły między trzema lub większą liczbą obiektów, musimy podzielić symulację na małe segmenty czasowe i wykonać iterację. Naszym celem jest 30 klatek/sekundę (szybkość filmu) lub ~33 ms/klatkę.

Aby się zorientować, oto krótki przegląd kodu:

1. Przeglądarka GET index.html
2. Który uruchamia main.js w poniższym kodzie. import są obsługiwane przez Rollup, alternatywę dla Webpack.
3. Który tworzy nowy nBodySimulator()
4. Który ma zewnętrzny interfejs API:
   1. sim.addWizualizacja()
   2. sim.dodajBody()
   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))) } }) }

Obie asteroidy mają zerową masę, więc grawitacja nie ma na nie wpływu. Utrzymują naszą wizualizację 2D pomniejszoną do co najmniej 30x30. Ostatnim fragmentem kodu jest nasz przycisk „zamęt”, który dodaje 10 małych planet wewnętrznych dla pewnej zabawy!

Dalej jest nasza „pętla symulacyjna” - co 33ms, przelicz i odmaluj. Jeśli dobrze się bawisz, możemy nazwać to „pętlą gry”. Najprostszą rzeczą, która mogłaby zadziałać w celu zaimplementowania naszej pętli, jest setTimeout() — i to spełniło mój cel. Alternatywą może być requestAnimationFrame().

sim.start() uruchamia akcję, wywołując sim.step() co 33ms (około 30 klatek na sekundę).

 // 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! Przechodzimy od projektowania do realizacji. Zaimplementujemy obliczenia fizyczne w WebAssembly i uruchomimy je w osobnym wątku Web Worker.

nBodySimulator owija tę złożoność implementacji i dzieli ją na kilka części:

1. calculateForces() obiecuje obliczyć siły do ​​zastosowania.
   1. Są to głównie operacje zmiennoprzecinkowe i wykonywane w WebAssembly.
   2. Te obliczenia to O(n²) i nasze wąskie gardło wydajności.
   3. Używamy Web Workera, aby przenieść je z głównego wątku, aby uzyskać lepszą postrzeganą i rzeczywistą wydajność.
2. trimDebris() usuwa wszelkie zanieczyszczenia, które nie są już interesujące (i pomniejszyłyby naszą wizualizację). Na)
3. applyForces() stosuje obliczone siły na ciałach. Na)
   1. Używamy ponownie starych sił, jeśli pominęliśmy funkcję obliczania Siły(), ponieważ pracownik był już zajęty. Poprawia to postrzeganą wydajność (usuwanie jittera) kosztem dokładności.
   2. Główny wątek interfejsu użytkownika może namalować stare siły, nawet jeśli obliczenia trwają dłużej niż 33 ms.
4. visualize() przekazuje tablicę ciał do każdego wizualizera do malowania. Na)

A wszystko dzieje się w 33 ms! Czy możemy ulepszyć ten projekt? TAk. Ciekawy lub masz sugestię? Sprawdź komentarze poniżej. Jeśli szukasz zaawansowanego, nowoczesnego projektu i implementacji, sprawdź Open-Source Matter.js.

Wybuch!

Świetnie się bawiłem tworząc to i cieszę się, że mogę się tym z wami podzielić. Do zobaczenia po skoku!

1. Wprowadzenie - ta strona
2. Web Workers — dostęp do wielu wątków
3. WebAssembly - przetwarzanie przeglądarki bez JavaScript
4. Rollup i Gulp - alternatywa dla WebPack
5. Canvas — rysowanie do interfejsu Canvas API i „pętla SIM”
6. WebVR - Zamiana naszego wizualizera Canvas na WebVR i Aframe

Rozrywka będzie prowadzić treści w wirtualnej rzeczywistości (jak mobilna), ale kiedy VR będzie normalna (jak mobilna), będzie to oczekiwane doświadczenie konsumenckie i produktywne (jak mobilna).

Nigdy nie byliśmy bardziej upoważnieni do tworzenia ludzkich doświadczeń. Nigdy nie było tak ekscytującego czasu, aby być projektantem i programistą. Zapomnij o stronach internetowych - zbudujemy światy.

Nasza podróż zaczyna się od skromnego Web Workera, więc czekaj na kolejną część naszej serii WebVR.