WebVR Parte 5: Design e Implementação

Eu amo fazer projetos “prontos”. Chegamos ao final de nossa jornada - e ao nascimento de nossa simulação de gravidade celestial em WebVR.

Neste post final, vamos conectar nosso código de simulação de alto desempenho (Artigos 1,2,3) em um visualizador WebVR baseado no visualizador de tela (Artigo 4).

1. “n-body problem” Introdução e Arquitetura
2. Web Workers nos dão threads de navegador adicionais
3. WebAssembly e AssemblyScript para nosso código de gargalo de desempenho O(n²)
4. Visualização de dados da tela
5. Visualização de dados WebVR

Este é um artigo mais longo, portanto, pularemos alguns detalhes técnicos abordados anteriormente. Confira os posts anteriores se quiser uma orientação, ou leia perigosamente.

Temos explorado a mudança de paradigma do navegador de um tempo de execução JavaScript de thread único para um tempo de execução de alto desempenho de vários segmentos (trabalhadores da Web) (WebAssembly). Esses recursos de computação de desktop de desempenho estão disponíveis em Progressive Web Apps e no modelo de distribuição SaaS.

A RV criará ambientes atraentes de vendas e marketing sem distrações para comunicar, persuadir e medir o engajamento (rastreamento ocular e interação). Os dados ainda serão zeros e uns, mas o resumo executivo esperado e a experiência do consumidor serão WebVR - assim como construímos experiências de painel móvel para a web plana hoje.

Essas tecnologias também permitem computação de borda de navegador distribuída. Por exemplo, poderíamos criar um aplicativo baseado na web para executar nossos cálculos WebAssembly para milhões de estrelas em uma simulação. Outro exemplo é um aplicativo de animação que renderiza as criações de outros usuários enquanto você edita as suas.

O conteúdo de entretenimento está liderando a aceitação da Realidade Virtual, assim como o entretenimento conduzido no celular. No entanto, uma vez que a VR é normal (como o design mobile-first é hoje), será a experiência esperada (design VR-first). Este é um momento muito emocionante para ser designer e desenvolvedor - e VR é um paradigma de design completamente diferente.

Você não é um designer de RV se não conseguir agarrar. Essa é uma afirmação ousada, e hoje é o mergulho profundo no design de VR. Este campo está sendo inventado enquanto você lê isso. Meu objetivo é compartilhar minhas experiências em software e filmes para iniciar a conversa sobre “primeiro design VR”. Todos aprendemos uns com os outros.

Com essas previsões grandiosas em mente, eu queria concluir este projeto como uma demonstração técnica profissional - WebVR é uma ótima opção para isso!

WebVR e Google A-Frame

O repositório git WebVR é um fork da versão canvas por alguns motivos. Isso facilita a hospedagem do projeto nas páginas do Github, e o WebVR exigiu algumas alterações que teriam desordenado a versão de tela e esses artigos.

Se você se lembra do nosso primeiro post sobre a arquitetura, delegamos toda a simulação ao nBodySimulator .

A postagem do web worker mostrou que nBodySimulator tem uma função step() chamada a cada 33ms da simulação. step() chama calculateForces() para executar nosso código de simulação O(n²) WebAssembly (artigo 3), então atualiza as posições e redesenha. Em nosso post anterior, criando uma visualização de tela, implementamos isso com um elemento de tela, a partir desta classe base:

 /** * Base class that console.log()s the simulation state. */ export class nBodyVisualizer { constructor(htmlElement) { this.htmlElement = htmlElement this.resize() this.scaleSize = 25 // divided into bodies drawSize. drawSize is log10(mass) // This could be refactored to the child class. // Art is never finished. It must be abandoned. } resize() {} paint(bodies) { console.log(JSON.stringify(bodies, null, 2)) } }

Definir o desafio de integração

Temos a simulação. Agora, queremos integrar com WebVR - sem rearquitetar nosso projeto. Quaisquer ajustes que façamos na simulação acontecem a cada 33ms no thread principal da interface do usuário na função paint(bodies) .

É assim que mediremos o “pronto”. Estou animado - vamos trabalhar!

Como fazer uma realidade virtual

Primeiro, precisamos de um projeto:

• Do que é feito a RV?
• Como o design WebVR é expresso ?
• Como podemos interagir com ele?

A Realidade Virtual remonta ao início dos tempos. Cada história de fogueira é um pequeno mundo virtual de exageros bizarros encobertos por detalhes triviais.

Podemos 10x nossa história de fogueira adicionando visuais e áudio estereoscópicos 3D. Meu instrutor de orçamento de produção de filmes costumava dizer: “Estamos pagando apenas pelo pôster. Não estamos construindo a realidade.”

Se você estiver familiarizado com o DOM do navegador, saberá que ele cria uma estrutura hierárquica semelhante a uma árvore.

Implícito no design da web está o espectador vendo de “frente”. Olhando de lado revelaria os elementos DOM como linhas, e de trás veríamos apenas a tag <body> porque ela obscurece seus filhos.

Parte da experiência imersiva da RV é permitir que o usuário controle seu ponto de vista, estilo, ritmo e ordem de interações. Eles não precisam prestar atenção a nada em particular. Se você mover ou girar a câmera programaticamente, eles literalmente vomitarão de doença de VR.

Por favor, note que a doença VR não é brincadeira. Ambos os nossos olhos e ouvidos internos detectam movimento. É muito importante para um animal que anda ereto. Quando esses sensores de movimento discordam, nosso cérebro naturalmente assume que nossa boca está comendo besteira novamente e vomita. Todos nós já fomos crianças. Muito já foi escrito sobre esse instinto de sobrevivência em VR. O título “Epic Fun” é gratuito no Steam, e a montanha-russa é a melhor demonstração de doença de RV que encontrei.

A Realidade Virtual é expressa como um “gráfico de cena”. Um gráfico de cena tem o mesmo padrão de árvore que o DOM para ocultar os detalhes e a complexidade de um ambiente 3D convincente. No entanto, em vez de rolar e direcionar, posicionamos o espectador onde ele deseja levar a experiência para ele.

Aqui está o gráfico de cena Hello World do A-Frame WebVR Framework do Google:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! • A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html>

Este documento HTML cria um DOM no navegador. As tags <a-*> fazem parte da estrutura A-Frame e <a-scene> é a raiz do gráfico de cena. Aqui, vemos quatro primitivas 3D exibidas na cena.

Primeiro, observe que estamos visualizando a cena de um navegador de web simples. A pequena máscara no canto inferior direito convida o usuário a alternar para um modo estereoscópico 3D.

Em teoria, você deve ser capaz de:

1. Abra isso no seu telefone
2. Segure seu telefone até o seu rosto
3. Delicie-se com o esplendor de uma nova realidade!

Eu nunca consegui que isso funcionasse sem as lentes sofisticadas de um fone de ouvido VR. Você pode obter um headset VR para um telefone Android barato (um dispositivo básico baseado no Google Cardboard), no entanto, para desenvolver conteúdo, sugiro um HMD (Head Mounted Display) autônomo, como o Oculus Quest.

Assim como o mergulho ou o paraquedismo, a Realidade Virtual é um esporte de engrenagem.

Aprendizagem dos designers de RV “Cliff”

Observe que a cena A-Frame Hello World tem uma iluminação e uma câmera padrão:

• As faces do cubo são de cores diferentes - o cubo é auto-sombreado.
• O cubo está lançando uma sombra no plano - há uma luz direcional.
• Não há espaço entre o cubo e o plano - este é um mundo com gravidade.

Essas são dicas críticas que dizem ao espectador: “Relaxe, essa coisa no seu rosto é totalmente normal”.

Observe também que essa configuração padrão está implícita no código da cena Hello World acima. A-Frame sabiamente fornece um padrão sensato, mas tome nota - câmera e iluminação é o abismo que os designers de web plana devem atravessar para criar VR.

Tomamos a configuração de iluminação padrão como garantida. Por exemplo, botões:

Observe como essa iluminação implícita é difundida no design e na fotografia. Mesmo o botão “flat design” não conseguiu escapar da iluminação padrão da web - está lançando uma sombra para baixo e para a direita.

Projetar, comunicar e implementar configurações de iluminação e câmera são o precipício de aprendizado do designer de WebVR. A “Linguagem do Cinema” é uma coleção de normas culturais – expressas como diferentes configurações de câmera e iluminação – que comunicam emocionalmente a história ao público. Os profissionais de cinema que projetam/movem luzes e câmeras ao redor de uma cena são o departamento de aderência.

De volta à nossa realidade virtual

Agora, então, vamos voltar ao trabalho. Nossa cena WebVR celestial tem um padrão semelhante:

 <!DOCTYPE> <html> <head> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> <script src="main.js"></script> </head> <body> <a-scene> <a-sky color="#222"></a-sky> <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity> <a-entity></a-entity> <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!..."> </a-entity> <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity> </a-scene> </body> </html>

Este documento HTML carrega a estrutura A-Frame e um plug-in de interação. Nossa cena começa em <a-scene> .

Dentro, começamos com um elemento <a-sky color="#222"></a-sky> para colorir de fundo tudo o que não definimos na cena.

Em seguida, criamos um “plano orbital” para o espectador “segurar” enquanto voa pelo nosso mundo estranho e desconhecido. Criamos isso como um disco e uma pequena esfera preta em (0,0,0). Sem isso, virar parecia “sem fundamento” para mim:

 <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity>

Em seguida, definimos uma coleção onde podemos adicionar/remover/reposicionar entidades A-Frame.

 <a-entity></a-entity>

Esta é a clareira para a paint(bodies) do nBodyVisualizer fazer seu trabalho.

Então, criamos a relação entre o espectador e este mundo. Como uma demonstração de tecnologia, o propósito deste mundo é permitir que o espectador explore o WebVR e a tecnologia do navegador que o habilita. Uma narrativa simples de “astronauta” cria uma sensação de jogo, e essa placa estelar é outro ponto de referência para a navegação.

 <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!\n ..."> </a-entity>

Isso completa nosso gráfico de cena. Finalmente, eu queria algum tipo de interação em uma demonstração de telefone entre o usuário e este mundo giratório. Como podemos recriar o botão “Jogar Detritos” em VR?

O botão é um elemento primordial de todo design moderno - onde estão os botões VR?

Interações no WebVR

A Realidade Virtual tem seu próprio “acima” e “abaixo da dobra”. A primeira interação de um espectador é por meio de seu avatar ou câmera. Estes são todos os controles para dar zoom.

Se você estiver lendo isso em um desktop, você pode usar WASD para mover e mouse para girar a câmera. Essa exploração revela informações, mas não expressa sua vontade.

Real Reality tem alguns recursos muito importantes que não são encontrados com frequência na web:

• Perspectiva - os objetos ficam visivelmente menores à medida que se afastam de nós.
• Oclusão - os objetos são escondidos e revelados com base na posição.

VR simula esses recursos para criar o efeito 3D. Eles também podem ser usados ​​em RV para revelar informações e interface - e para definir o clima antes de apresentar as interações. Descobri que a maioria das pessoas só precisa de um minuto para aproveitar a experiência antes de seguir em frente.

Na WebVR, interagimos no espaço 3D. Temos duas ferramentas básicas para isso:

• Colisão - um evento 3D passivo disparado quando dois objetos compartilham o mesmo espaço.
• Projeção - uma chamada de função 2D ativa listando todos os objetos que cruzam uma linha.

Colisão é a interação mais “parecida com VR”

Em VR, uma “colisão” é exatamente o que parece: quando dois objetos compartilham o mesmo espaço, o A-Frame cria um evento.

Para o usuário “pressionar” um botão, devemos dar a ele um peão e algo para pressionar o botão.

Infelizmente, o WebVR ainda não pode assumir controladores - muitas pessoas verão uma versão de web plana em seu desktop ou telefone, e muitos usarão um fone de ouvido como o Google Cardboard ou o Gear VR da Samsung para mostrar uma versão estereoscópica.

Se o usuário não tiver controladores, ele não pode alcançar e “tocar” as coisas, então qualquer colisão terá que ser com seu “espaço pessoal”.

Poderíamos dar ao jogador um peão em forma de astronauta para se movimentar, mas forçar o usuário a um miasma rodopiante de planetas parece um pouco desanimador e contrário à amplitude do nosso design.

A projeção é um clique 2D “semelhante à Web” em um espaço 3D

Além de “colisão”, também podemos usar “projeção”. Podemos projetar uma linha através de nossa cena e ver o que ela toca. O exemplo mais comum é o “raio de teletransporte”.

Um raio de teletransporte traça uma linha no mundo para mostrar onde um jogador pode se mover. Essa “projeção” procura lugares para pousar. Retorna um ou mais objetos no caminho da projeção. Aqui está um exemplo de raio de teletransporte:

Observe que o raio é realmente implementado como uma parábola apontando para baixo. Isso significa que naturalmente se cruza com o “chão” como um objeto arremessado. Isso também define naturalmente uma distância máxima de teletransporte. Os limites são as escolhas de design mais importantes em VR. Felizmente, a realidade tem muitas limitações naturais.

A projeção “achata” o mundo 3D em 2D para que você possa apontar para as coisas e clicar como um mouse. Os jogos de tiro em primeira pessoa são jogos elaborados de "clique 2D" em botões extremamente frustrantes - muitas vezes com uma história elaborada para explicar por que não é certo que esses malditos botões estejam "clicando" em você de volta.

Existem tantas armas em VR porque as armas foram aperfeiçoadas como mouses 3D precisos e confiáveis ​​- e clicar é o que os consumidores sabem fazer sem aprender.

A projeção também oferece a segurança da distância na relação com a cena. Lembre-se, aproximar-se de algo em VR naturalmente ocluirá todas as outras coisas cuja importância pode ainda não ter sido revelada.

Projeção sem controladores usando o “olhar”

Para criar essa interação primitiva em WebVR sem controladores, podemos projetar o “olhar” dos espectadores como um “cursor” de linha de visão. Este cursor pode ser usado programaticamente para interagir com objetos com um “fusível”. Isso é comunicado ao espectador como um pequeno círculo azul. Agora estamos clicando!

Se você se lembra de histórias de fogueira, quanto maior a mentira, menos detalhes são necessários para vendê-la. Uma interação óbvia e absurda de “olhar” é olhar para o sol. Usamos esse “olhar” para acionar a adição de novos planetas “detritos” à nossa simulação. Nenhum espectador jamais questionou essa escolha - VR é bastante encantador quando absurdo.

No A-Frame, expressamos a câmera (peão invisível dos jogadores) e esse “cursor” de linha de visão como nosso equipamento de câmera. Colocar o <a-cursor> dentro da <a-camera> faz com que as transformações da câmera também sejam aplicadas ao cursor. Quando o jogador move/gira seu peão ( a-camera ), ele também move/gira seu olhar ( a-cursor ).

 // src/index.html <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity>

O “fusível” do cursor espera até que um segundo completo de “olhar” tenha passado antes de emitir um evento.

Eu usei a iluminação padrão para que você possa notar que há uma “parte traseira” apagada do sol. Embora eu não tenha estado fora do plano orbital, não acho que é assim que o sol funciona. No entanto, funciona para o nosso pôster de demonstração de tecnologia da realidade.

Uma opção alternativa seria colocar a iluminação dentro do elemento da câmera, para que ela se mova com o usuário. Isso criaria uma experiência mais íntima - e possivelmente assustadora - de minerador de asteróides. Estas são opções de design divertidas.

Temos um Plano de Integração

Com isso, agora temos nossos pontos de integração entre o A-Frame <a-scene> e nossa simulação JavaScript:

A-Frame <a-scene> :

• Uma coleção nomeada para os corpos: <a-entity></a-entity>

• Um cursor que emitirá eventos de projeção: <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor>

Nossa simulação JavaScript:

• nBodyVisWebVR.paint(bodies) - adicionar/remover/reposicionar as entidades VR dos corpos de simulação

• addBodyArgs(name, color, x, y, z, mass, vX, vY, vZ) para adicionar novos corpos de detritos à simulação

index.html carrega main.js , que inicializa nossa simulação muito parecida com a versão de tela:

 // src/main.js import { nBodyVisualizer, nBodyVisWebVR } from ."/nBodyVisualizer" import { Body, nBodySimulator } from ."/nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // this Visualizer manages the UI sim.addVisualization(new nBodyVisWebVR(document.getElementById("a-bodies"), sim)) // making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 1, 1e9)) sim.addBody(new Body("hot-jupiter", "red", -1, -1, 1, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold-jupiter", "purple", 4, 4, .5, 1e4, -.07, 0.04, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) }

Você notará aqui que configuramos o htmlElement do visualizador para a coleção a a-bodies para armazenar os corpos.

Gerenciando Programaticamente Objetos A-Frame do JavaScript

Tendo declarado nossa cena em index.html , agora estamos prontos para codificar o visualizador.

Primeiro, configuramos nBodyVisualizer para ler a lista de corpos nBodySimulation e criar/atualizar/excluir objetos A-Frame na coleção <a-entity></a-entity> .

 // src/nBodyVisualizer.js /** * This is the WebVR visualizer. * It's responsible for painting and setting up the entire scene. */ export class nBodyVisWebVR extends nBodyVisualizer { constructor(htmlElement, sim) { // HTML Element is a-collection#a-bodies. super(htmlElement) // We add these to the global namespace because // this isn't the core problem we are trying to solve. window.sim = sim this.nextId = 0 } resize() {}

No construtor, salvamos nossa coleção A-Frame, definimos uma variável global para nosso evento de olhar para encontrar a simulação e inicializamos um contador de id que usaremos para combinar corpos entre nossa simulação e a cena do A-Frame.

 paint(bodies) { let i // Create lookup table: lookup[body.aframeId] = body const lookup = bodies.reduce( (total, body) => { // If new body, give it an aframeId if (!body.aframeId) body.aframeId = `a-sim-body-${body.name}-${this.nextId++}` total[body.aframeId] = body return total }, {}) // Loop through existing a-sim-bodies and remove any that are not in // the lookup - this is our dropped debris const aSimBodies = document.querySelectorAll(."a-sim-body") for (i = 0; i < aSimBodies.length; i++) { if (!lookup[aSimBodies[i].id]) { // if we don't find the scene's a-body in the lookup table of Body()s, // remove the a-body from the scene aSimBodies[i].parentNode.removeChild(aSimBodies[i]); } } // loop through sim bodies and upsert let aBody bodies.forEach( body => { // Find the html element for this aframeId aBody = document.getElementById(body.aframeId) // If html element not found, make one. if (!aBody) { this.htmlElement.innerHTML += ` <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>` aBody = document.getElementById(body.aframeId) } // reposition aBody.object3D.position.set(body.x, body.y, body.z) }) }

Primeiro, percorremos os corpos sim para rotular e/ou criar uma tabela de pesquisa para combinar entidades A-Frame com corpos de simulação.

Em seguida, percorremos os corpos A-Frame existentes e removemos qualquer um que tenha sido aparado pela simulação para viajar fora dos limites. Isso aumenta o desempenho percebido da experiência.

Finalmente, percorremos os corpos sim para criar uma nova <a-sphere> para corpos ausentes e reposicionar os outros com aBody.object3D.position.set(body.x, body.y, body.z)

Podemos alterar programaticamente elementos na cena A-Frame usando funções padrão do DOM. Para adicionar um elemento à cena, anexamos uma string ao innerHTML do contêiner. Este código tem um gosto estranho para mim, mas funciona e não encontrei nada melhor.

Você notará que quando criamos a string para anexar, temos um operador ternário próximo a “estrela” para definir um atributo.

 <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>`

Se o corpo é uma “estrela”, adicionamos alguns atributos extras descrevendo seus eventos. Veja como nossa estrela fica quando montada no DOM:

 <a-sphere class="a-sim-body" dynamic-body="" debris-listener="" event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" position="0 0 0" radius="0.36" color="yellow" material="" geometry=""></a-sphere>

Três atributos, debris-listener , event-set__enter e event-set__leave , configuram nossas interações e são a última volta de nossa integração.

Definindo eventos e interações do A-Frame

Usamos o pacote NPM “aframe-event-set-component” nos atributos da entidade para alterar a cor do sol quando o espectador “olhar” para ele.

Esse “olhar” é uma projeção da posição e rotação do espectador, e a interação fornece o feedback necessário de que seu olhar está fazendo algo.

Nossa esfera estelar agora tem dois eventos abreviados habilitados pelo plugin, event-set__enter e event-set__leave :

 <a-sphere ... event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" … ></a-sphere>

Em seguida, decoramos nossa esfera estelar com um debris-listener que implementaremos como um componente A-Frame personalizado.

 <a-sphere ... debris-listener="" … ></a-sphere>

Os componentes A-Frame são definidos em nível global:

 // src/nBodyVisualizer.js // Component to add new bodies when the user stares at the sun. See HTML AFRAME.registerComponent('debris-listener', { init: function () { // Helper function function rando(scale) { return (Math.random()-.5) * scale } // Add 10 new bodies this.el.addEventListener('click', function (evt) { for (let x=0; x<10; x++) { // name, color, x, y, z, mass, vx, vy, vz window.sim.addBodyArgs("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1)) } }) } })

Este componente A-Frame age como um ouvinte de 'clique' que pode ser acionado pelo cursor de olhar para adicionar 10 novos corpos aleatórios à nossa cena.

Para resumir:

1. Declaramos a cena WebVR com A-Frame em HTML padrão.
2. Podemos adicionar/remover/atualizar entidades A-Frame programaticamente na cena do JavaScript.
3. Podemos criar interações em JavaScript com manipuladores de eventos por meio de plugins e componentes A-Frame.

WebVR: Veni, Vidi, Vici

Espero que você tenha aproveitado tanto desta demonstração técnica quanto eu. Onde aplicamos esses recursos (trabalhadores da Web e WebAssembly) ao WebVR, eles também podem ser aplicados à computação de borda do navegador.

Uma enorme onda de tecnologia chegou - Realidade Virtual (VR). Seja o que for que você sentiu na primeira vez que segurou um smartphone, experimentar VR pela primeira vez oferece uma experiência emocional 10x maior em todos os aspectos da computação. Faz apenas 12 anos desde o primeiro iPhone.

A RV existe há muito mais tempo, mas a tecnologia necessária para levar a RV aos usuários comuns chegou através da revolução móvel e do Oculus Quest do Facebook - não da revolução do PC.

A internet e o código aberto estão entre as maiores maravilhas da humanidade no mundo. A todas as pessoas que criaram a internet plana - faço um brinde à sua coragem e senso de aventura.

Manifesto! Construiremos mundos, pois temos o poder de criar.