Durante a conferência Fullstack London de 2019, Doug Sillars, engenheiro de software freelance, debateu sobre o estado da realidade virtual e aumentada no JavaScript, demonstrando como construir uma galeria de arte virtual.
Para que o usuário mergulhe em um mundo totalmente 3D gerado em realidade virtual ou realidade aumentada, que oferecem profundas integrações entre o mundo real e objetos digitais, são tecnologias relativamente novas que estão sendo integradas na Web usando o API WebXR. O X em WebXR é um espaço reservado para qualquer tipo de tecnologias imersivas que possam aparecer no futuro.
A API WebXR ainda está em desenvolvimento com suporte limitado para navegador e com pouca documentação. O repositório do GitHub do WebXR inclui uma introdução amigável aos principais conceitos para começar a utilizá-lo.
Mesmo sem a API WebXR, ainda é possível interagir com dispositivos AR/VR e criar aplicações simples e multi-plataforma. Bibliotecas como o A-frame oferecem uma interface simplificada para o desenvolvimento de aplicações com muitos exemplos interessantes e implementações já disponíveis on-line.
A biblioteca A-frame é baseada em three.js, uma biblioteca de renderização 3D popular para JavaScript, onde oferece uma sintaxe simples como HTML permitindo o desenvolvimento de aplicativos VR e AR com o conhecimento mínimo de JavaScript.
Para usar o A-frame, os desenvolvedores descrevem a cena usando tags semelhantes ao HTML, que em seguida, são transformados em um modo de exibição WebGL pelo A-frame. Para colocar os objetos 3D no espaço real (AR), os desenvolvedores atualmente precisam usar marcas físicas especiais que podem ser geradas no próprio site do projeto. Colocar essas tags permite que o A-frame saiba onde (e quais) objetos 3D devem ser colocados.
A criação de uma simples cena VR requer um punhado de tags:
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25"></a-sphere>
</a-scene>
Outra biblioteca que merece ser mencionada é o React-360, que permite que aos desenvolvedores criarem interfaces de usuário de AR/VR usando uma sintaxe semelhante ao REACT.
Inicialmente, as aplicações AR/VR exigiam equipamentos dedicados e caros que desencorajavam os consumidores. Hoje os desenvolvedores podem usar smartphones para alcançar uma experiência semelhante. Ao usar aplicativos AR/VR em um smartphone é possível, e também recomendável, usar um conjunto especial de óculos que envolvam a tela do celular permitindo que os usuários tenham uma experiência mais imersiva. O primeiro conjunto de óculos criado foi o Google Cardboard, com muitas soluções alternativas disponíveis.
A palestra completa de Doug Sillars, Construindo uma Galeria de Arte no Navegador, pode ser encontrada no site do FullStack (é necessário um registro gratuito).
A-frame é uma licença MIT e o código fonte está disponível através do repositório do GitHub do A-frame.