Realidade Aumentada e Interação estão na pauta do InterCon 2009. No Ambiente Criação e Inovação, representantes do laboratorio.us farão uma demonstração de computação pervasiva. Além disso, acontecerão discussões sobre games, produção interativa, propagandas trasmídia e interativa. Já na área de Mobilidade, dentro do Ambiente Tecnolgoia, Fabiano Coura, diretor de planejamento da Neogama/BBH vai falar sobre a presença mobile do Bradesco com a Realidade Aumentada (veja aqui o vídeo de um app para iPhone usando RA). Esses são apenas alguns temas que o InterCon 2009 vai trazer para você. Não perca.

Você já deve ter ouvido falar em Realidade Aumentada, uma tecnologia que está virando moda em uma velocidade assustadora. Que tal começarmos a “brincar” de Realidade Aumentada? Acreditem, é mais simples do que possa parecer.

O que é Realidade Aumentada?

Basicamente, Realidade Aumentada, ou simplesmente “RA”, é a sobreposição de objetos virtuais tridimensionais gerados por computador, com objetos reais, misturando o real e o virtual, abrindo um leque de infinitas possibilidades em diversas áreas, principalmente na web e na publicidade.

Com a RA, é possível trazer ou transformar objetos reais em virtuais, interagindo e acrescentando, possibilitando jogos mais interativos, publicidade, navegação, entre muitas outras utilidades, incluindo a medicina. Seu potencial é assustador.

Fazendo uma busca rápida no Google por Realidade Aumentada ou “Augmented Reality”, você encontrará exemplos fantásticos do uso da tecnologia. Um ótimo exemplo é o http://www.livingsasquatch.com, onde o pé grande virtual se materializa e você pode interagir com sua personalidade.

Com o princípio da tecnologia, é possível desenvolver a RA em praticamente qualquer linguagem de programação. O principal kit de desenvolvimento é conhecido como ARToolKit, desenvolvido em C. Disponível gratuitamente no site do laboratório HITL da Universidade de Washington (http://www.hitl.washington.edu/artoolkit/download/), o ARToolKit emprega métodos de visão computacional para detectar marcadores na imagem capturada por uma câmera. O rastreamento ótico do marcador permite o ajuste de posição e orientação para realizar a renderização do objeto virtual, de modo que esse objeto pareça estar “atrelado” ao marcador. Há também uma versão para Java e uma adaptação para o Flash, em ActionScript 3, e é com este último que desenvolveremos a RA para a web.

Requisitos

Para a mágica da RA precisamos de 3 elementos básicos:

• Um objeto real com um código impresso ou formato específico.
• Uma câmera que realize uma leitura desse objeto.
• Um software que interprete a leitura da câmera e crie o mundo tridimensional de interação.

Na web, podemos resumir esses três elementos em:

• Um papel com um código impresso em alto contraste.
• Uma webcam.
• Um filme Flash na página com um framework 3D + um framework de leitura da webcam.

Começando a mágica

Aqui faremos a nossa própria realidade aumentada que consistirá basicamente em:

• Criar nossa própria marcação (marker) que é o desenho que será lido pela webcam, no qual o objeto virtual ficará “acoplado”.
• Criar um SWF utilizando 2 frameworks: o FLARToolKit, que é uma adaptação em AS3 do original ARToolKit, e o Papervision 3D para criar o ambiente de interação tridimensional.

Usaremos um modelo 3D de um patinho de borracha, importado de um arquivo .dae em formato Collada. Esse formato pode ser exportado de um software 3D como o 3D Studio, ou Cinema 4D do modelo 3D de sua preferência.

Para facilitar, disponibilizarei o source já com o Papervision 3D 2 e o FLARToolKit prontos para exportar o SWF, assim como o arquivo .dae do patinho já pronto também. O importante é que consigamos fazer a base da tecnologia. A partir dela você será capaz de ajustar da forma como quiser e até mudar o objeto virtual 3D no Flash.

Criando sua marca

O primeiro passo é gerar sua marca, seu código RA que será lido pela webcam. Você pode criar on-line, no site: http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html. O aplicativo permite que você coloque um desenho em frente à webcam para gerar a partir dele, ou enviar uma imagem. Sua marca deve ser um desenho simples, preto e branco, com alto contraste e de preferência envolto por um quadrado bem delimitado.
Com sua marca pronta, clique em Save. O aplicativo irá gerar um arquivo .pat, que passará as coordenadas de sua marca para o FLARToolKit. No nosso exemplo, você deverá salvar este arquivo na pasta Data, com o nome marker.pat. Caso deseje alterar, será necessário alterar também o caminho no AS principal.

O exemplo do artigo contém um PDF (marker.pdf) com a marca que já está sendo usada no exemplo para impressão e testes.

Juntando tudo

Agora é a vez de o SWF juntar os 2 frameworks, carregar o arquivo gerado de sua marca, e o modelo 3D. Vamos ao código.

Arquivo ExemploAR.as:

package {
import flash.events.Event;
import flash.events.MouseEvent;
    import org.papervision3d.lights.PointLight3D;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.objects.parsers.DAE;   
    [SWF(width=640, height=480, frameRate=30, backgroundColor=0x0)]
    public class ExemploAR extends PV3DARApp {
        private var universe:DisplayObject3D;
        private var daeFile:DAE;
        public function ExemploAR() {
            this.init('Data/camera_para.dat', 'Data/marker.pat');
        }       
        protected override function onInit():void {
            super.onInit();           
daeFile = new DAE();
daeFile.load("duck.dae");
daeFile.z = 20;
daeFile.scaleY = 0.4;
daeFile.scaleZ = 0.4;       
daeFile.rotationX  = 90;
            this.universe = new DisplayObject3D();
            this.universe.addChild(daeFile);
            this.universe.z = -20;
            this._baseNode.addChild(this.universe);           
        }
    }
}

Agora é só criar um .FLA que chame esse arquivo ExemploAR.as como classe principal. Imprima sua marca e execute o SWF… Voilá! Se tudo der certo, seu SWF pedirá permissão para ativar a webcam e o patinho seguirá sua marca onde você mexer em frente à webcam.

É importante que a luz do ambiente esteja boa e permita um bom contraste na sua marca. Quanto mais fosca a impressão, melhor. Tintas mais brilhantes podem gerar reflexo e afetar a leitura da webcam.

Espero que tenham gostado! Fiquem à vontade para configurar o objeto 3D da forma que quiserem e até mudar o arquivo .dae. Você também pode baixar gratuitamente arquivos .dae para testes na internet, mas eu encorajo que você crie seu próprio em um software 3D.

Clique aqui e faça o download dos arquivos de exemplo.