WebVR e a revolução da computação de borda do navegador

Uma enorme onda de tecnologia chegou - Realidade Virtual (VR). Independentemente do que você sentiu na primeira vez que segurou um smartphone, experimentar VR pela primeira vez oferece uma experiência emocional mais substancial em todos os aspectos da computação. Faz apenas 12 anos desde o primeiro iPhone. Como conceito, a RV existe há ainda mais tempo, mas a tecnologia necessária para levar a RV a usuários comuns não estava disponível até recentemente.

O Oculus Quest é a plataforma de jogos para consumidores do Facebook para VR. Sua principal característica é que não precisa de um PC. Ele fornece uma experiência de VR móvel e sem fio. Você pode entregar a alguém um fone de ouvido VR em uma cafeteria para compartilhar um modelo 3D com a mesma estranheza de pesquisar algo em uma conversa, mas a recompensa da experiência compartilhada é muito mais atraente.

A RV mudará a maneira como trabalhamos, compramos, desfrutamos de conteúdo e muito mais.

Nesta série, exploraremos as tecnologias de navegador atuais que permitem WebVR e computação de borda de navegador. Este primeiro post destaca essas tecnologias e uma arquitetura para nossa simulação.

Nos artigos a seguir, destacaremos alguns desafios e oportunidades exclusivos no código. Para explorar essa tecnologia, fiz uma demonstração do Canvas e WebVR e publiquei o código no GitHub.

O que VR significa para UX

Como Desenvolvedor Toptal, ajudo empresas a levar projetos da ideia para um teste beta com usuários. Então, como a RV é relevante para aplicativos da web de negócios?

O conteúdo de entretenimento liderará a adoção da Realidade Virtual (como aconteceu no celular). No entanto, uma vez que a VR se torne popular como o mobile, o “design VR-first” será a experiência esperada (semelhante ao “mobile-first”).

“Mobile-first” foi uma mudança de paradigma, “Offline-first” é uma mudança de paradigma atual e “VR-first” está no horizonte. Este é um momento muito emocionante para ser designer e desenvolvedor, porque VR é um paradigma de design completamente diferente (exploramos isso no último artigo da série). Você não é um designer de RV se não conseguir agarrar.

A RV começou na revolução da Computação Pessoal (PC), mas está chegando como o próximo passo na revolução móvel. O Oculus Quest do Facebook se baseia no Google Cardboard usando o Snapdragon 835 System-on-Chip (SoC) da Qualcomm, rastreamento de fone de ouvido (empregando câmeras móveis) e roda no Android - tudo empacotado para montar confortavelmente nos órgãos sensoriais do seu rosto.

O $ 400 Oculus Quest oferece experiências incríveis que posso compartilhar com meus amigos. Um novo iPhone de US$ 1.000 não impressiona mais ninguém. A humanidade não vai cuspir o gancho VR.

Aplicativos da indústria de RV

A RV está começando a fazer sentir sua presença em vários setores e campos da computação. Além do consumo de conteúdo e jogos, que tendem a receber muita cobertura da imprensa, a RV está mudando lentamente os setores que vão da arquitetura à saúde.

• Arquitetura e Imobiliário criam o valor de uma realidade física a custos extraordinários (comparados ao digital), por isso é uma opção natural para arquitetos e agentes imobiliários trazerem clientes através de uma realidade virtual para mostrar a experiência. A RV oferece um “teste beta” do seu estádio de US$ 200 milhões ou um passo a passo virtual pelo telefone.
• Aprendizagem e Educação em RV transmitem experiências que de outra forma seriam impossíveis de replicar com imagens ou vídeos.
• As empresas automotivas se beneficiam da RV, desde o design e a segurança até o treinamento e o marketing.
• Profissionais de saúde do Hospital Infantil Lucile Packard de Stanford têm usado VR para planejar cirurgias cardíacas, permitindo que eles entendam a anatomia de um paciente antes de fazer uma única incisão. A RV também está substituindo os produtos farmacêuticos para alívio da dor.
• Varejo, Marketing e Hotelaria já oferecem tours virtuais de produtos e lugares. À medida que os varejistas começam a entender o quão atraente sua experiência de compra pode ser, os inovadores do varejo colocarão o prego final no caixão de compras de tijolo e argamassa.

À medida que a tecnologia avança, veremos uma maior adoção em vários setores. A questão agora é a rapidez com que essa mudança ocorrerá e quais setores serão mais afetados.

O que a VR significa para a Web e a computação de borda

A “Edge Computing” move a computação para fora do cluster principal do servidor de aplicativos e para mais perto do usuário final. Tem um burburinho de marketing porque as empresas de hospedagem mal podem esperar para alugar um servidor de baixa latência em todas as cidades.

Um exemplo de computação de borda B2C é o serviço Stadia do Google, que executa cargas de trabalho de jogos com uso intensivo de CPU/GPU nos servidores do Google e, em seguida, envia o jogo para um dispositivo como o Netflix. Qualquer Chromebook estúpido da Netflix pode de repente jogar jogos como um computador de jogos de última geração. Isso também cria novas opções de arquitetura de jogos multiplayer monolíticos fortemente integrados.

Um exemplo de computação de borda B2B é o GRID da Nvidia, que fornece estações de trabalho remotas virtuais habilitadas para GPU da Nvidia para dispositivos baratos da classe Netflix.

Pergunta: Por que não mover a computação de borda do data center para o navegador?

Um caso de uso para a computação de borda do navegador é um “farm de renderização de animação” de computadores que renderizam um filme 3D dividindo o processo de um dia inteiro em partes que milhares de computadores podem processar em poucos minutos.

Tecnologias como Electron e NW.js trouxeram a programação web para aplicativos de desktop. Novas tecnologias de navegadores (como PWAs) estão trazendo o modelo de distribuição de aplicativos da web (SaaS é sobre distribuição) de volta à computação de desktop. Exemplos incluem projetos como SETI@Home, Folding@Home (dobramento de proteínas) ou várias fazendas de renderização. Em vez de baixar um instalador, agora é possível ingressar no farm de computação apenas visitando o site.

Pergunta: O WebVR é uma “coisa real” ou o conteúdo de VR será movimentado em “lojas de aplicativos” e jardins murados?

Como freelancer e tecnólogo da Toptal, é meu trabalho saber. Então eu construí um protótipo de tecnologia para responder minhas próprias perguntas. As respostas que encontrei são muito empolgantes e escrevi esta série de blogs para compartilhá-las com você.

Spoiler: Sim, o WebVR é uma coisa real. E sim, a computação de borda do navegador pode usar as mesmas APIs para acessar o poder de computação que permite o WebVR.

Muito divertido de escrever! Vamos construir uma prova de conceito

Para testar isso, faremos uma simulação astrofísica do problema de n-corpos.

Os astronautas podem usar equações para calcular as forças gravitacionais entre dois objetos. No entanto, não existem equações para sistemas com três ou mais corpos, o que é inconveniente para todos os sistemas do universo conhecido. Ciência!

Enquanto o problema de n-corpos não tem solução analítica (equações), ele tem uma solução computacional (algoritmos), que é O(n²). O(n²) é praticamente o pior caso possível, mas é como conseguir o que queremos, e é por isso que a notação Big O foi inventada em primeiro lugar.

Figura 2: “Para cima e para a direita? Bem, eu não sou engenheiro, mas o desempenho parece bom para mim!”

Se você está tirando a poeira de suas habilidades de Big O, lembre-se de que a notação Big O mede como o trabalho de um algoritmo “escala” com base no tamanho dos dados em que está operando.

Nossa coleção são todos os corpos em nossa simulação. Adicionar um novo corpo significa adicionar um novo cálculo de gravidade de dois corpos para cada corpo existente no conjunto.

Enquanto nosso loop interno é < n, ele não é <= O(log n), então todo o algoritmo é O(n²). Essas são as pausas, sem crédito 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 } }

A solução n-body também nos coloca no mundo da física/motores de jogo e uma exploração da tecnologia necessária para WebVR.

Para o nosso protótipo, uma vez construída a simulação, faremos uma visualização 2D.

Por fim, trocaremos a visualização do Canvas por uma versão WebVR.

Se você estiver impaciente, pode pular direto para o código do projeto.

Trabalhadores da Web, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Prepare-se para uma brincadeira cheia de ação e diversão através de um conjunto de novas tecnologias que já chegaram ao seu navegador móvel moderno (desculpe, não você Safari):

• Usaremos Web Workers para mover a simulação para seu próprio thread de CPU - melhorando o desempenho percebido e real.
• Usaremos o WebAssembly para executar o algoritmo O(n²) em código compilado de alto desempenho (C/C++/Rust/AssemblyScript/etc.) nesse novo thread.
• Usaremos o Canvas para visualizar nossa simulação em 2D.
• Usaremos Rollup e Gulp como uma alternativa leve ao Webpack.
• Por fim, usaremos WebVR e Aframe para criar uma Realidade Virtual para o seu telefone.

Arquitetura de trás do guardanapo antes de mergulhar no código

Começaremos com uma versão do Canvas porque você provavelmente está lendo isso no trabalho.

Nas primeiras postagens, usaremos APIs de navegador existentes para acessar os recursos de computação necessários para criar uma simulação intensiva de CPU sem degradar a experiência do usuário.

Em seguida, visualizaremos isso no navegador usando o Canvas, finalmente trocando nossa visualização do Canvas por um WebVR usando o Aframe.

Design de API e loop de simulação

Nossa simulação de n corpos prevê a posição de objetos celestes usando as forças da gravidade. Podemos calcular a força exata entre dois objetos com uma equação, mas para calcular as forças entre três ou mais objetos, precisamos dividir a simulação em pequenos segmentos de tempo e iterar. Nosso objetivo é 30 quadros/segundo (velocidade do filme) ou ~33 ms/quadro.

Para se orientar, aqui está uma rápida visão geral do código:

1. Index.html do navegador GET
2. Que executa main.js como o código abaixo. Os import s são tratados com Rollup, uma alternativa ao Webpack.
3. Que cria um novo nBodySimulator()
4. Que tem uma API externa:
   1. sim.addVisualização()
   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))) } }) }

Os dois asteróides têm massa zero, então não são afetados pela gravidade. Eles mantêm nossa visualização 2D reduzida para pelo menos 30x30. A última parte do código é o nosso botão “mayhem” para adicionar 10 pequenos planetas internos para um pouco de diversão!

O próximo é o nosso “loop de simulação” - a cada 33ms, recalcular e repintar. Se você está se divertindo, podemos chamar de “loop de jogo”. A coisa mais simples que poderia funcionar para implementar nosso loop é setTimeout() - e isso cumpriu meu propósito. Uma alternativa poderia ser requestAnimationFrame().

sim.start() inicia a ação chamando sim.step() a cada 33ms (cerca de 30 quadros por segundo).

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

Viva! Estamos passando do design para a implementação. Implementaremos os cálculos físicos no WebAssembly e os executaremos em uma thread separada do Web Worker.

nBodySimulator envolve essa complexidade de implementação e a divide em várias partes:

1. calculateForces() promete calcular as forças a serem aplicadas.
   1. Essas são principalmente operações de ponto flutuante e feitas no WebAssembly.
   2. Esses cálculos são O(n²) e nosso gargalo de desempenho.
   3. Usamos um Web Worker para movê-los para fora do thread principal para melhor desempenho percebido e real.
2. trimDebris() remove todos os detritos que não são mais interessantes (e diminuiria nossa visualização). Em)
3. applyForces() aplica as forças calculadas aos corpos. Em)
   1. Reutilizamos forças antigas se pularmos o calculateForces() porque o trabalhador já estava ocupado. Isso melhora o desempenho percebido (removendo o jitter) ao custo da precisão.
   2. O thread principal da interface do usuário pode pintar as forças antigas, mesmo que o cálculo demore mais de 33 ms.
4. visualize() passa a matriz de corpos para cada visualizador para pintar. Em)

E tudo acontece em 33ms! Podemos melhorar esse design? sim. Ficou curioso ou tem alguma sugestão? Confira os comentários abaixo. Se você estiver procurando por um design e implementação modernos avançados, confira o Matter.js de código aberto.

Decole!

Eu me diverti muito criando isso e estou animado para compartilhar com vocês. Nos vemos depois do salto!

1. Introdução - esta página
2. Web Workers - acessando vários threads
3. WebAssembly - computação do navegador sem JavaScript
4. Rollup and Gulp - uma alternativa ao WebPack
5. Canvas - Desenhando para a API do Canvas e o “sim loop”
6. WebVR - Trocando nosso visualizador Canvas por WebVR e Aframe

O entretenimento liderará o conteúdo em Realidade Virtual (como o celular), mas uma vez que a VR for normal (como o celular), será a experiência esperada do consumidor e da produtividade (como o celular).

Nunca fomos tão capacitados para criar experiências humanas. Nunca houve um momento mais emocionante para ser um designer e desenvolvedor. Esqueça as páginas da web - vamos construir mundos.

Nossa jornada começa com o humilde Web Worker, então fique atento para a próxima parte da nossa série WebVR.