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.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.
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.
- 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.
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.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);
}
}
}
É 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.
Um comentário:
Muito bom seu exemplo, gostaria de saber como fazer com multiplas marcações.
Se puder ajudar, leandro.n2006@hotmail.com
Obrigado
Postar um comentário