Construindo AR / VR com Javascript e HTML

Uma lista abrangente de recursos para criar experiências envolventes de Realidade Aumentada e Virtual usando tecnologias da Web

Este post apareceu originalmente no blog do Halo Labs

Há alguns meses entrei na Halo Labs para ajudar a construir nossa plataforma de projeto e prototipagem de AR / VR. Após a primeira entrevista, recebi um exercício de “levar para casa”, para construir uma cena simples de RV. Enquanto eu estava animado para construir um aplicativo de RV pela primeira vez, eu também estava com um pouco de medo. Eu estou vindo de um fundo de desenvolvimento web e nunca trabalhei em um projeto de RV antes. Para minha surpresa, levei cerca de três horas para terminar o exercício, e até parecia muito bom (bem, pelo menos para mim …).

Nos últimos seis meses, sempre que eu dizia a alguém que estou desenvolvendo
Produto VR usando tecnologias da Web, fiquei perplexo parece. A primeira semana anual de WebXR ocorrerá em duas semanas, e achei que é uma ótima hora para mostrar aos desenvolvedores da VR & AR + Web technologies = ? .

O objetivo principal deste post é permitir que os desenvolvedores da Web entrem no mundo do AR / VR com rapidez e facilidade.
A abordagem que tomei não é escrever um guia sobre uma tecnologia ou biblioteca específica, mas sim construir um “currículo” que o levará do zero ao especialista, para que você possa construir experiências complexas de AR / VR.
Mesmo que você não planeje desenvolver experiências de AR / VR, a leitura deste guia lhe dará um vislumbre do estado atual do mundo do WebXR. Vamos começar.

Começando a jornada – Conhecendo o mundo da RV

Antes de começarmos, vamos alinhar os termos: Realidade Virtual é o uso de tecnologia de computador para criar um ambiente simulado , então quando você está em RV, você está vendo uma realidade completamente diferente da que está à sua frente. A Realidade Aumentada (AR), por outro lado, é uma versão aprimorada da realidade criada pela adição de informações digitais em sua realidade da vida real (como no Pokemon GO). O termo XR é freqüentemente usado para descrever qualquer um dos dois.

Embora você possa facilmente pular este passo e pular diretamente para os frameworks WebVR, investir algum tempo aprendendo os fundamentos do mundo XR melhorará muito sua velocidade de aprendizado e compreensão no futuro.

Os recursos a seguir ajudarão você a obter informações sobre o desenvolvimento de RV e AR, bem como sobre o contexto matemático necessário (muito básico):

  • Introdução ao curso de Realidade Virtual por Udacity – Este curso gratuito é um ótimo lugar para começar. O curso apresenta as principais plataformas de RV disponíveis hoje e explica como elas funcionam enquanto ensinam alguns termos de RV básicos (mas importantes!).
  • Glossário VR / AR – Conhecer o significado desses termos XR básicos ajudará você a entender melhor os artigos e a documentação dos frameworks XR. Outro bom recurso é o site The VR Glossary . Eu realmente gosto da seção de infográficos deles, pois isso me ajudou a entender alguns termos e tópicos de RV.
  • Matemática básica em 3D – O assunto do qual mais tive medo quando entrei no mundo da RV foi a matemática. Eu não sou um grande fã de matemática, e achei que lidar com 3D requer um profundo conhecimento de matemática. Felizmente, descobri que estava errado. As estruturas que apresentarei abaixo são relativamente “de alto nível” e não requerem nenhum conhecimento matemático. Pela minha experiência, a única coisa importante a saber antes de seguir em frente é a diferença entre os sistemas de coordenadas da esquerda e da mão direita .

Renderização de conteúdo 3D na web

Agora que temos uma compreensão básica do mundo XR, podemos começar a observar os frameworks web XR. O framework principal para o desenvolvimento de XR é o A-Frame (suportado pelo Mozilla). A próxima seção será mais profunda no A-Frame, mas antes disso, é importante entender como o A-Frame é construído para usá-lo efetivamente. Vamos mergulhar!

Em 2007, a Mozilla introduziu o Canvas 3D pela primeira vez, o que permitiu renderizar gráficos 3D interativos na web. O próximo passo foi expor uma API e, em 2009, o Grupo Khronos iniciou o Grupo de Trabalho WebGL. A primeira versão da especificação foi lançada em 2011.
Mas o que exatamente é o WebGL? para citar o Mozilla:

O WebGL permite que o conteúdo da web use uma API baseada no OpenGL ES 2.0 para executar a renderização 2D e 3D em uma canvas HTML em navegadores que a suportam sem o uso de plug-ins. Os programas WebGL consistem em código de controle escrito em JavaScript e código de shader (GLSL) que é executado na Unidade de Processamento Gráfico (GPU) de um computador.

Em suma, o WebGL é uma API que permite renderizar conteúdo 3D no navegador, sem a necessidade de usar plug-ins.

Atualmente, todos os principais navegadores suportam a API WebGL, portanto, podemos usá-la com segurança para renderizar conteúdo 3D na web. O problema principal? escrever WebGL é difícil e tedioso. É o suficiente para ver a quantidade de código necessária para exibir formas 2D simples para ser desencorajado. A solução? usando Three.js.

O objetivo do projeto é criar uma biblioteca 3D fácil de usar e leve. A biblioteca fornece renderizadores <canvas>, <svg>, CSS3D e WebGL.
(fonte: página Three.js do GitHub )

Three.js é uma biblioteca de “alto nível” que simplifica a criação de ambientes WebGL. Ele lida com a programação de nível mais baixo para você e permite que você se concentre em construir a cena.

Para ver o quanto isso simplifica o desenvolvimento, dê uma olhada no exemplo de código abaixo, que renderiza um cubo 3D animado na tela:

No exemplo de código acima, inicializamos a cena, a câmera (que são nossos “olhos” na cena) e o renderizador. Em seguida, criamos uma geometria de caixa, que define a forma do cubo, um material que define como será a aparência e, finalmente, criamos um cubo combinando os dois em uma malha. Depois disso, adicionamos o cubo à cena e anexamos uma animação simples para girá-lo constantemente.
Finalmente, nós renderizamos a cena.

Esta é uma grande melhoria das centenas de linhas de código WebGL, mas ainda não é muito simples. Para exibir um cubo, você precisa entender o que é um material, uma malha, um renderizador e como todos eles se conectam. Além disso, apresentar conteúdo 3D não é o fim da história. Para criar conteúdo de RV “sério”, também teremos que permitir a entrada do usuário, a física, a integração com vários headsets de RV e muito mais.
Embora todos esses recursos possam ser criados em three.js, será difícil fazê-lo sem um entendimento mais profundo dos domínios 3D e VR.
Mas não se preocupe! A-Frame para o resgate!

A-Frame – VR para as pessoas

A estrutura A-Frame foi criada em 2015 pela equipe da Mozilla VR para permitir que desenvolvedores e designers da Web criassem experiências em 3D e VR com HTML sem precisar conhecer o WebGL. O A-Frame é baseado no HTML e no DOM, o que o torna muito acessível e fácil de usar. Ao usar apenas a camada HTML, é possível obter um resultado impressionante, o HTML é apenas a camada de abstração mais externa do A-Frame. Abaixo, A-Frame é uma estrutura de componente de entidade para three.js que é exposta declarativamente.
O verdadeiro poder da A-Frame está incorporado na última frase, então vamos dividi-la para ter certeza de que a entendemos:

A-Frame é uma estrutura de componente de entidade para three.js

Para citar a Wikipedia :

Entity – component – ??system ( ECS ) é um padrão arquitetural […]
Um ECS segue o princípio Composition over inheritance , que permite maior flexibilidade na definição de entidades, onde cada objeto em uma cena é uma entidade (por exemplo, inimigos, balas, veículos, etc.).
Cada Entity consiste em um ou mais componentes que adicionam comportamento ou funcionalidade adicionais. Portanto, o comportamento de uma entidade pode ser alterado em tempo de execução, adicionando ou removendo componentes.

Vamos esclarecer com um exemplo:
Digamos que eu queira construir um veículo com o padrão ESC.

Entidade de veículo, composta de múltiplos componentes

Primeiro, precisaria de uma entidade de veículo, que é praticamente um objeto com um Id. Em seguida, eu usaria componentes para definir a aparência e o comportamento do veículo. Eu teria vários componentes, como cor, rodas, assentos e motor. Por fim, compor todos esses componentes na entidade que criamos anteriormente nos dará uma entidade de veículo funcional.

Embora o exemplo acima seja muito simplista, ele deve fornecer uma idéia aproximada do que é uma arquitetura de componente de entidade. O A-Frame permite escrever código Three.js de maneira ECS, o que facilita muito o desenvolvimento da RV. Uma razão principal é que o ECS torna muito fácil a reutilização de componentes – portanto, se eu construí um componente, a maioria das chances também é possível usá-lo. A comunidade A-Frame está aproveitando isso, e há uma grande biblioteca de componentes que está disponível para você usar.
Agora que entendemos a primeira parte da sentença, vamos examinar a segunda parte:

que é exposto declarativamente

Esta parte refere-se principalmente à camada de abstração de HTML. Essa camada nos permite construir uma cena declarativamente, o que significa que criamos uma cena definindo o que ela deve fazer e não como ela deve ser feita. Isso pode ser feito graças às camadas subjacentes que nos permitem criar componentes. Depois que criamos um componente, podemos apenas dizer o que queremos fazer – o componente já sabe como (isso é o código do componente).

Agora que entendemos o que é o A-Frame e como ele funciona, vamos ver o exemplo do Hello-World da A-Frame:

Copiado dos exemplos oficiais da A-Frame . Você pode se mover na cena usando o teclado.

Neste exemplo, todas as tags em a-scene são primitivas. Primitivos são apenas açúcar sintático para entidades com componentes padrão. Por exemplo, a primitiva a-box é uma entidade com vários componentes (como profundidade, altura e largura) adicionados por padrão. Cada propriedade HTML é um componente adicionado a essas entidades – adicionamos (ou substituímos o padrão) componentes de posição, rotação, cor e sombra a nossa entidade de caixa.

O A-Frame fornece um conjunto de primitivos para ajudá-lo a criar cenas básicas com rapidez e facilidade, e você também pode criar seus próprios primitivos.

Eu não vou me aprofundar mais no A-Frame, já que não é o propósito deste artigo, mas aqui estão alguns bons recursos para alavancar sua jornada A-Frame:

  1. Documentação A-Frame – A documentação oficial do A-Frame é bastante abrangente e eu recomendo fortemente lê-lo. Ele provavelmente contém as respostas para todas as suas “perguntas para iniciantes”, então não deixe de conferir antes de pesquisar em outros lugares.
  2. A-Frame school – Um curso interativo A-Frame construído pelos criadores do A-Frame. Usando o Glitch, o curso fornece exercícios passo a passo para ajudá-lo a começar.
  3. Criando seu primeiro aplicativo WebVR usando React e A-Frame – Apesar do fato de que o uso de A-Frame com React pode resultar em baixo desempenho, acho que é uma ótima combinação (na verdade, essa é nossa configuração aqui no Halo Labs). Se você gosta do React, este tutorial está usando o aframe-react e é um ótimo lugar para começar. (ps – Se você preferir Angular, confira angular-aframe-pipe )

Aumente suas habilidades

Até agora falamos sobre VR, mas e sobre AR?
Como ainda não temos nenhum headsets AR de consumidor amplo hoje, as soluções WebAR existentes se concentram principalmente em AR móvel .

Hoje, existem três bibliotecas principais que você pode usar para construir cenas AR, todas as três funcionam com A-Frame, mas cada uma tem recursos diferentes. Vamos repassá-los um por um:

AR.js

O AR.js fornece uma extensão A-Frame e uma extensão de três.js que permite criar cenas AR baseadas em marcadores . AR.js foi construído com WebGL e WebRTC, então é o único dos três que funciona com quase todos os smartphones, independentemente de sua versão do sistema operacional.

Se você quiser jogar com AR.js, confira o artigo de Akash Kuttappa.

aframe-ar

A maneira comum de criar aplicativos AR móveis é usar o ARCore (para Android) ou o ARKit (para o IOS) ambos são SDKs nativos. Para fornecer uma maneira de usar os recursos do SDK (como a detecção de superfície) na Web, o Google lançou dois aplicativos experimentais: WebARonARCore e WebARonARKit . que são na verdade navegadores que expõem uma API https://www.agatetepe.com.br/5-melhores-frameworks-de-javascript-em-2017/JavaScript aos recursos mencionados anteriormente. Além disso, eles lançaram uma biblioteca chamada three.ar.js , que fornece funções auxiliares de três.js para a criação de experiências AR. Como o A-Frame é construído em three.js, o aframe-ar foi criado para fornecer um wrapper A-Frame fácil de usar. Quão fácil? tudo o que você precisa fazer é mudar a tag da <a-scene> A-Frame de <a-scene> para <a-scene ar> e você terá uma cena de AR ativa!

Se você quiser jogar com aframe-ar, confira o excelente artigo de Uri Shaked.

aframe-xr

O aframe-xr é baseado no three.xr.js e ambos criados pela Mozilla. Sua principal diferença em relação ao aframe-ar é que ele está em conformidade com a API de dispositivos WebXR proposta usando o webxr-polyfill . A principal implicação é que o aframe-xr permite construir “experiências progressivas” – experiências que mudam de acordo com o dispositivo em uso. Simplificando, permite que você se mova entre AR e VR perfeitamente.
Aqui no Halo Labs somos grandes crentes na API WebXR, então o aframe-xr é o nosso framework escolhido.

Se você quiser saber mais sobre a API WebXR, confira a postagem no blog de Dan . Além disso, a Mozilla tem uma ótima postagem no blog sobre o Progressive WebXR.

Depois de jogar com a WebAR por um tempo, é óbvio que ela ainda não está madura. No entanto, até hoje, usando as bibliotecas que mencionei acima, você pode construir algumas experiências AR impressionantes.

No buraco do coelho

Até agora nós cobrimos todos os fundamentos. Isso é o suficiente para criar experiências básicas de AR / VR e ganhar alguma confiança em suas habilidades, mas se você quiser criar algumas coisas mais complexas, você precisará ampliar seu conhecimento.
Aqui estão alguns recursos para ajudá-lo a entender melhor:

Gráficos 3D interativos – Um curso da Udacity que ensina princípios básicos de computação gráfica 3D (malhas, transformações, materiais e muito mais).

Começando com 3D WebGL – Uma série de posts escritos por Rachel Smith, ensinando noções básicas do Three.js com muitos exemplos de código.

Three.js 101: Olá, mundo! – Uma introdução ao Three.js. A @necsoft fala sobre todas as coisas importantes em um post no blog.

Álgebra Linear – Khan academy – Quanto mais baixo você for no nível de abstração, maior será o conhecimento matemático exigido de você. Pela minha experiência, se você quiser fortalecer seu conhecimento de matemática, a Khan Academy é sua melhor amiga.

Criando uma demonstração do Minecraft com A-Frame – Um exemplo de como implementar uma demonstração do VR Minecraft usando o A-Frame. Este guia passo a passo ajudará você a entender melhor como criar um aplicativo de RV robusto com A-Frame.

Conteúdo

Como todos sabemos, na internet o conteúdo é rei . Isso também é verdade para o processo de criação de experiências XR. Para construir experiências XR convincentes, são necessários recursos 3D. Embora a quantidade de ferramentas de criação 3D gratuitas e fáceis aumente rapidamente, muitos de nós preferimos usar o conteúdo existente em vez de criá-lo por conta própria. Atualmente, existem duas principais fontes de recursos 3D gratuitos:

  1. Google Poly – Uma biblioteca contendo milhares de modelos 3D para uso em aplicativos de realidade virtual e arte. Modelos Poly são publicados sob a licença Creative Commons ( CC-BY 3.0 ), o que significa que você pode usá-los livremente, mesmo para uso comercial, contanto que você forneça a atribuição ao autor.
  2. Sketchfab – Um marketplace de modelos 3D que contém mais de 2M modelos. O Sketchfab contém milhares de modelos gratuitos, também licenciados sob licença Creative Commons ( CC-BY 4.0 ). Os modelos Sketchfab são geralmente de alta qualidade e, como resultado, “pesam” mais.

Ambos os sites suportam vários formatos 3D, incluindo glTF . Você pode escolher o formato necessário ao fazer o download do modelo.

É muito fácil adicionar modelos a uma cena A-Frame, usando a primitiva a a-gltf-model (também existem loaders para outros formatos ):

 <a-gltf-model src = {http: // model.url} />

A maneira mais fácil de evitar problemas de CORS é hospedar seus ativos em um CDN acessível publicamente. Mozilla fornece um gratuitamente: https://cdn.aframe.io/

Palavras finais

Como desenvolvedores web, o mundo AR / VR muitas vezes parece inacessível. A verdade é que as ferramentas necessárias para entrar e criar neste mundo já existem. Bibliotecas como three.js e A-Frame nos permitem usar nossas habilidades de desenvolvimento da Web para criar cenas de realidade virtual avançadas. Além disso, as bibliotecas complementares adicionam recursos que permitem a criação de cenas AR e até experiências progressivas que se adaptam às capacidades do dispositivo em que são executadas. Espero que o meu post ajude outros desenvolvedores web a entrar no mundo AR / VR e juntos poderemos finalmente construir o Metaverse ! 🙂