O estado atual da Realidade Virtual baseada em navegadores com HTML5

O grupo de usuários do HTML5 de São Francisco na Califórnia, se reuniu com fins de discutir as tecnologias HTML5 para criação de experiências de realidade virtual - WEBGL, WebVR, Three.js e GALM -, e o estado atual do desenvolvimento de suporte à realidade virtual no Firefox e Chrome. A idéia é a imergir a web na experiência da realidade virtual.

Tony Parisi, co-autor dos padrões VRML e X3D ISO, apresentou uma introdução ao WebRV. O WebRV é uma mistura de realidade virtual e tecnologias web. Atualmente, os softwares de realidade virtual se parecem com jogos e grande parte do trabalho está concentrado na criação e manipulação de gráficos. A maior parte dos aplicativos de realidade virtual são desenvolvidos usando a engine Unity que é dominada por poucas pessoas. A idéia de Parisi é nivelar essa área de desenvolvimento habilitando todos os desenvolvedores na criação de aplicativos de realidade virtual usando tecnologias básicas da web, notadamente JavaScript com WebGL.

Nessa linha, o Three.js é uma biblioteca JavaScript para renderizar gráficos 2D e 3D com WebGL que facilita a renderização de cenas de realidade virtual. O código gerado com o Three.js é em média de 3 à 10 vezes menor que o código correspondente em WebGL. Parisi também está trabalhando em uma solução diferente chamada GLAM. O GLAM é uma linguagem declarativa para criação de conteúdo Web 3D que torna ainda mais simples renderizar realidades virtuais. Para renderizar um cubo 3D em rotação com GLAM é necessário apenas o script glam.js e uma tag como o exemplo a seguir:

#photocube {
    image:url(../images/flowers.jpg);
    rx:30deg;
}
#photocube {
    image:url(../images/flowers.jpg);
    rx:30deg;
}

Parisi também contou que o Chrome (build experimental a partir do branch Blink) e o Firefox (build diário com fins de testes) começaram a implementação de uma API WebVR para reconhecimento de movimentos da cabeça. Essa API pode ser utilizada para rastrear o movimento de dispositivos de realidade aumentada (por hora o Oculus Rift, futuramente outros dispositivos serão suportados) e permite renderização 3D stereo para conteúdo WEbGL/CSS3. Uma outra alternativa mais simples, que já está disponível é a utilização do Google Cardboard com um smartphone em conjunto com aplicativos de realidade aumentada como o Cardboard. O aplicativo utiliza a câmera do smartphone e sensores de movimento para gerar uma imagem estereoscópica móvel via WebGl no navegador do aparelho.

Durante sua apresentação, UI/Ux design for WebVR, Josh Carpenter, designer líder de UX para o Firefox OS da Mozilla, demonstrou a utilização do Oculus Rift com o Firefox e destacou algumas das características de uma boa experiência de realidade virtual na web. Essas são as características que ele gostaria de ver viabilizadas:

• A habilidade de navegar com transparência e segurança de um lugar para outro utilizando links. Isso incluí controles para os links utilizados na navegação e para ações de zoom, scroll, voltar, entrada de dados em formulários, etc. Em suma, a possibilidade de ter uma experiência parecida com a de utilização de um navegador durante o uso de um headset de realidade virtual.
• Desenvolvimento fácil. Com esse propósito, novas ferramentas estão sendo criadas. Como exemplo, temos a pilha de ferramentas JavaScript com Threes.js, WEbVR e WebGL no navegador que está em um estágio inicial de maturidade.
• Experiências de realidade virtual que funcionam em qualquer dispositivo.
• A possibilidade de converter automaticamente qualquer website em realidade virtual. Isso significa que deveria ser possível navegar e independente das características de implementação dos websites ter uma experiência de realidade virtual 3D.
• A monetização da realidade virtual. São necessários mais dispositivos, embarcabilidade e melhor desempenho.

Além de enfatizar essas características, Carpenter demonstrou um trabalho inicial na conversão de websites comuns em websites para a realidade virtual sem que seja necessária uma atualização de conteúdo. Carpenter também criou algumas transições que podem ser utilizadas ao navegar entre sites com realidade virtual e indicou que enxerga muito potencial em um projeto de navegador de realidade virtual. Esse projeto é viável, uma vez que está disponível um canvas 360° com animação espacial.

Brandon Jones, desenvolvedor do WebGL e WebVR na Google, disponibilizou exemplos de código para uma aplicação de realidade virtual, demonstrando o que é necessário para renderizar uma cena de realidade virtual na sessão Web browser VR internals do encontro. Ainda que a renderização de realidades virtuais pareça intimidante num primeiro momento, com o Three.js se torna mais simples conforme se pode ver no trecho de código abaixo:

<script src="js/effects/VREffect.js"></script>
<script src="js/controls/VRControls.js"></script> // Setup padrão
var vrControls = new THREE.VRControls(camera);
var vrEffect = new THREE.VREffect(renderer);

function onEnterVRFullscreen() {
   vrEffect.setFullScreen(true);
} 
function onWindowResize() {
   vrEffect.setSize(window.innerWidth, window.innerHeight);
} 
function onRequestAnimationFrame() {
   vrControls.update();
   vrEffect.render(scene, camera);
}

No entanto, Jones admite que o Three.js não trata como prioridade a realidade virtual e ainda não tem um processo renderização para realidade virtual otimizado. Assim, podem ser necessárias algumas melhorias. De qualquer forma, o Three.js dá conta do recado. Ele apresentou alguns conselhos para desenvolvedores de aplicativos de realidade virtual:

• Prefira vertex shaders leves;
• Quando houver problemas de desempenho, reduza a resolução do canvas ao invés de diminuir a taxa de frames;
• Evite sempre renderizar mais de uma vez elementos que não dependem do contexto como é o caso de sombras ou mapas do ambiente;
• Desenhar a cena para ambos os pontos de vista em seqüência é pesado em termos de mudanças de estado. Dependendo da cena, pode ser mais eficiente desenhar o ponto de vista esquerdo, trocar a viewport e desenhar o ponto de vista direito para cada objeto.

Jones também demonstrou a renderização de uma cena de realidade virtual do Quake 3 no Chrome.

Nestes links você pode encontrar mais informações: Vídeos do encontro do grupo de ususários HTML5 de SF, Começando a usar a WebVR API, Mozilla VR - websites com realidade virtual, Google Cardboard, Experiências com realidade virtual no Chrome, GLAM, Lista de discussão do Mozilla WebVR.