Focusview

Com o passar do tempo, os browsers foram adquirindo mais performance, tornando possível o desenvolvimento de recursos tecnológicos avançados, como a renderização de objetos 3D.

Cenário 3D utilizando o plugin O3D do Google

Uma das novidades recentemente anunciadas pela Kronos Group foi a API WebGL, que ainda está em desenvolvimento e promete uma revolução em experiências ricas para web.

Como funciona?

Com o objetivo de apresentar conteúdo 3D, sem a utilização de plugins, em qualquer navegador de qualquer sistema operacional que já suporte os padrões gráficos do OpenGL e OpenGL ES, esta API faz uma ligação entre o hardware de renderização 3D do SO com a internet, tudo por meio de javascript.

O HTML 5 tem papel fundamental nesta integração, pois esta nova versão trás a implementação da tag canvas, que será utilizada pela API WebGL para renderizar o ambiente 3D. Outro pré-requisito para rodar a API é que o browser deverá possuir o mecanismo Webkit, que é utilizado, por exemplo, pelo Google Chrome.

Além do Kronos Groups, outras empresas estão envolvidas no desenvolvimento desta tecnologia, como Google, AMD, Mozilla, entre outros. Isto significa também que a tecnologia será totalmente free, livre de royalties!

Falando em Google, não podemos deixar de mencionar sua iniciativa com o mesmo propósito através da API O3D, já disponível para download.

A API também utiliza javascript, mas ainda é necessário a instalação de um plugin para rodar uma aplicação no browser.

Com estas e outras iniciativas surgindo, cada vez mais torna-se ameaçador para tecnologias RIA como Flash e Silverlight sua presença no mercado, uma vez que estas novidades trazem para a web o recurso rico e interativo destas ferramentas com a vantagem do menor custo para desenvolvimento, o que pode se tornar um bom atrativo para as empresas.

Abaixo alguns vídeos de aplicações utilizando WebGL e O3D:

Vídeo O3D Beach, cenário 3D com a API do Google:

O3D Cad no Firefox rodando no OSX:

Objetos 3D renderizados no browser utilizando a tag canvas do HTML 5 e WebGL:

Até mais.

Realidade aumentada, ou Augmented Reality, vem sendo adotada por grandes empresas ao redor do mundo como uma nova forma de acrescentar maior interatividade e riqueza na experiência do usuário em suas campanhas.

O conceito de realidade aumentada, tecnicamente, é possível na web graças a integração de objetos 3D e o plugin flash player, e já vem chamando a atenção através de alguns cases.

Aqui na Focusnetworks já fizemos algumas pesquisas e testes, neste que consideramos ser um grande passo para inovar a forma como nos comunicamos com o usuário, enriquecendo sua experiência em contato com objeto de divulgação da ação.

Para não ficar só no conceito, vamos ver uma aplicação exemplo que criei.

Para participar da experiência, basicamente, você precisará de uma webcam e seguir os passos:

1. Imprimir um símbolo (ou marker) disponibilizado pelo autor da aplicação (imprima esse marker em PDF).
2. Ligar a webcam e conceder permissão ao flashplayer para acessá-la (irá aparecer uma popup pedindo isto).
3. Posicionar o símbolo impresso em frente a webcam.

Um detalhe importante a se destacar é o ambiente, que se bem iluminado, aumentará o contraste de cores do símbolo na superfície branca e o marker será detectado com mais precisão.

O vídeo abaixo mostra um case que demonstra como a criatividade associada à tecnologia pode trazer experiências inovadoras. No teste, o blogueiro imprimiu em sua camisa um marker com um código de barras que possui informação de seu login e senha do Twitter. Ao se aproximar da câmera, o marker é detectado e a aplicação exibe um balão com a foto do cara e seu último post! Veja:

O case da GE, que na minha opinião, utilizou muito bem a técnica em sua campanha e considero um exemplo de utilização inteligente da tecnologia, pois o recurso enriquece o conteúdo.

O vídeo abaixo, produzido no Japão, mostra diversas formas de se aplicar a técnica:

Nesse case da Zugara a Realidade Aumentada foi utilizada para trazer uma nova experiência sobre compras online, tornando a compra pelo computador uma experiência mais rica e palpável.

Um dos cases mais recentes foi o da produtora de games Ubisoft, que aplicou o conceito para promover o jogo Assassin’s Creed 2. No site, após assistir ao teaser trailer do jogo, clique no ícone, imprima o símbolo em pdf e depois clique no ícone que fica ao lado esquerdo da tela para ver. Acesse aqui o site.

Para ter mais informações técnicas sobre o assunto, códigos de exemplo e bibliotecas, eu publiquei alguns posts no meu blog com referências e detalhes sobre a biblioteca FLARToolKit, utilizada para a captura das formas pela webcam, assim como a biblioteca papervision 3D.