O documento discute as plataformas web e mobile para realidade aumentada, bibliotecas de rastreamento como FLARToolkit e Flare, e ferramentas para desenvolvimento de aplicativos como FlarManager e Layar. Ele também descreve soluções para realidade aumentada em dispositivos móveis como Layar e Junaio/Metaio.
Apresentação realidade aumentada para aplicações web e mobile
1. Realidade aumentada para aplicações
web e mobile
Marcelo de Paiva Guimarães
Bruno Barberi Gnecco
Diego Roberto Colombo Dias
2. Roteiro
• Plataformas web e mobile
• Bibliotecas de rastreamento
o FLARToolkit
o Flare Tracker (Flash Augmented Reality Engine)
o Flare NFT (natural feature tracking)
• Desenvolvimento de aplicações web
o FlarManager
o FlashDevelop
• Mobile e RA
o Layar
o Junaio/Metaio
• Conclusão
3. Plataformas web e mobile
A escolha da plataforma de desenvolvimento é
um ponto primordial em qualquer projeto de
software, pois ela está ligada diretamente ao
propósito da aplicação.
Cada plataforma tem características próprias;
• Custos
• Eficiência
• Tempo de desenvolvimento
4. Plataformas web e mobile
• As plataformas de hardware e software voltadas para
desktops e para mobile possuem a mesma base tecnológica.
• Elas são capazes de realizar as mesmas tarefas
computacionais.
• Contudo, elas podem ser diferenciadas sob vários aspectos,
como, por exemplo:
o Portabilidade
o Mobilidade
o Design
o Câmera Integrada
o GPS e bússola
o Acelerômetro
5. Plataformas web e mobile
• RA na web é, atualmente, implementada por
bibliotecas em Flash, que possui suporte a
3D acelerado.
• O desenvolvimento do HTML5 permitirá,
num futuro próximo, que estas funções
sejam feitas em JavaScript puro.
• Em aplicações mobile as ferramentas são
compiladas nativamente.
6. Plataformas web e mobile
• Aplicações web e mobile buscam dados
remotamente, o que requer conectividade, é
limitado pela banda disponível e pode
aumentar o tempo de resposta da aplicação
o Portabilidade
o Mobilidade
o Design
7. RA - Equipamentos específicos
• Câmeras: integrada e posicionada de forma fixa
em relação à tela, o que permite que o aparelho
seja usado naturalmente pelo usuário
• GPS e Bússolas: permite que pontos de interesse
(POI) geográficos sejam detectados e rastreados.
Como exemplo, podemos desenhar marcadores
em todos os parques de uma cidade, e a pessoa
os vê apontando o telefone na direção correta
• Acelerômetros: pode ser usado para interagir com
os objetos virtuais
8. Bibliotecas de Rastreamento
• FLARToolkit:
o AS3 (ActionScript 3.0) conjuntamente
com o Papervision3D
o Licença GPL
o Acesso a webcam
o Utiliza Flash Player no navegador
9. Bibliotecas de Rastreamento
• flare tracker:
o o diferencial dela é o suporte a diferentes tipos
de marcadores, como o Binary Marker, o
Frame marker e o DATAMATRIX marker. Ela é
baseada em flash e é executada em
navegadores. É uma solução comercial
10. Bibliotecas de Rastreamento
• flare NFT:
o A maioria das bibliotecas realizam o rastreamento de
marcadores, o Flare*NFT caracteriza-se pela
possibilidade de realizar o rastreamento de qualquer
imagem impressa. É também uma solução comercial
11. Desenvolvimento de aplicações
com o FlarManager
• FlarManager é um framework amigável para
o desenvolvimento de aplicações web
baseadas em Flash
• Ele é compatível com várias bibliotecas de
rastreamento (FLARToolkit, flare*tracker,
flare*NFT)
• Compatível com frameworks 3D
(Alternativa3D, Away3D, Away3D Lite,
Papervision3D, Sandy3D)
12. Desenvolvimento de aplicações
com o FlarManager
• A programação é baseada em eventos de
marcadores:
o adição
o atualização
o remoção
• Suporta diversos marcadores
• Pacote de desenvolvimento de fácil uso
13. Instalação do FlarManager
1. Faça o dowload do pacote do FLARmanager no endereço
http://words.transmote.com/wp/flarmanager/
2. Descompacte o arquivo FLARManager.zip. Ele gerará o diretório
FLARManager_v1_1_0 (usado neste tutorial)
i. - Os marcadores utilizados nas aplicações exemplo estão
no diretório
FLARManager_v1_1_0resourcesflarToolkitpatterns - 12
exemplos de marcadores (imagens PNG)
ii. - Imprima os marcadores para que possam ser utilizados
para testar as aplicações exemplos
14. Flash Develop - FlarManager
• Pode-se utilizar para o desenvolvimento
com o FLARmanager:
o Flash Builder
o FlashDevelop
• As duas ferramentas fornecem recursos
semelhantes
• FlashDevelop é open source, por isso foi
escolhida
15. Instalação e Configuração do Flash
Develop
1. Pré-requisito: instale o Flash Player (versão 10 ou superior) do
endereço http://get.adobe.com/br/flashplayer/
2. Pré-requisito: Java run-time no endereço
http://www.java.com/pt_BR/download/
3. Faça o dowload do pacote do FlashDevelop no endereço
http://www.flashdevelop.org/
4. Execute o arquivo “FlashDevelop 4.0.1 RTM.exe” . O processo de
instalação irá fazer o download automático do Flex SDK
(http://opensource.adobe.com/wiki/display/flexsdk/)
5. Inicie o FlashDevelop
16. Criando um projeto no Flash
Develop
1. Crie um novo projeto ("Project -> New project")
2. Escolha "Flex 3 Project"
3. Nomeie o projeto e clique em "Ok"
4. Arraste o conteúdo do diretório do FlarManager para o
projeto (drag and drop)
5. - Quando questionado se deve subscrever (“Overwrite”)
o diretório “src” clique em “yes”
6. Apague o arquivo “Main.mxml”, que está em “src/”
7. Selecionando o programa principal: clique com o botão
direito do mouse sobre o arquivo
“FLARManagerExampleLauncher.as” e escolha a
seguente opção no menu “Set Document Class”. Este
se tornará o programa principal
17. Criando um projeto no Flash
Develop
1. Apague o diretório “lib”
2. Renomeie o diretório “libs” para “lib”
3. No diretório "lib", clique com o botão direito do
mouse sobre todos os arquivos (Alternativa3D
7.6.0.swc, ASCollada.swc,Away3D_3.6.0.swc,
Away3D_Lite_1.0.swc,
Papervision3D_2.1.920.swc,
sandy_3.1_r1006.swc) com extensão ".swc" e os
escolha "Add To Library"
24. Layar
• Sua ideia é
associar
conteúdo digital
em layers,
inclusive
geolocalizado,
associando-o a
marcadores
25. Layar - Desenvolvimento
• O Layar possibilita o desenvolvimento de
aplicações de RA com:
o objetos 3D
o imagens animadas
o compartilhamento com Twitter e Facebook
o suporte a áudio e vídeo,
o a possibilidade de ser integrado a outras
aplicações(através do Layar Player)
26. Layar
• O Layar não é uma solução de código
aberto
• O sistema é gratuito aos clientes
• É gratuito para desenvolvedores dentro de
certos limites:
o Layar Vision: gratuito até 10.000 visualizações / mês
o Layar Geo: totalmente gratuito
27. Criando uma layer no Layar
1. Crie uma conta no
www.layar.com/development
2. Crie uma camada própria em
www.layar.com/publishing. Neste momento
serão adicionados os meta-dados, como:
a. nome
b. detalhes
c. configuração visual
d. tipo de dado (2D, 3D)
30. Criando uma layer no Layar
1. Crie um serviço Layar. Este componente
pode ser escrito em qualquer linguagem
(PHP, Java etc). Ele será responsável por
prover os dados aumentados
2. Após a criação, você poderá customizar sua
camada em vários detalhes, como ícone,
descrição detalhada, visual e colorido e
outros.
3. Até 5 dias para ser aprovada!!!
31. Layar Vision
• É um componente que detecta imagens
como marcadores
• Realiza rastreamento no próprio cliente,
suportando até 50 imagens diferentes, com
deteção instantânea
• O algoritmo de reconhecimento é robusto,
sendo capaz de lidar com rotações,
perspectiva e até mesmo oclusão parcial
• O Layar Geo faz o rastreamento por GPS,
com POIs georeferenciados.
32. Layer com o Layar Vision
• A criação de camadas utilizando o Layar
Vision é um pouco diferente
• Para criar camadas para o Layar Vision, não
se pode utilizar geo localização
33. Layar Vision - Imagens de
Referência
• A detecção de imagens através do Layar
Vision é configurada neste ponto também
• Imagens boas para serem rastreadas
precisam dos seguintes aspectos:
o Linhas bem delimitadas
o Vários objetos na imagem (imagens repetitivas,
como padrões e ladrilhos, não funcionam bem.
o Boa qualidade da imagem
o Imagens estáticas (rostos ou animais não), com
texto fixo que não mudará com o tempo
36. Layar Vision - Converter modelos
3D
Layar 3D Model Converter Tool:
• converte modelo Wavefront(obj/mtl) para o formato
aceito pelo Layar
• desenvolvido em Java, portanto, compatível com
Windows, Mac OS e Linux
• pode ser utilizado online e offline (Java WebStart)
41. Junaio/Metaio
• O Junaio é um navegador de RA
desenvolvido pela Metaio, e faz parte de
uma família de produtos de realidade
aumentada
• Existe uma versão para web, chamada
Metaio Web-SDK. É baseada em flash
• Metaio Mobile SDK pode ser usado para
integração em aplicações móveis nativas,
inclusive em aplicações Unity3D
42. Junaio - Modos de Detecção
Glue: reconhecimento de marcadores, que podem ser qualquer tipo de
imagem
43. Junaio - Modos de Detecção
Baseado em localização: consiste
em um ponto de interesse (POI)
geo-referenciado, isto é, em
grupos de latitude, longitude e
altitude
44. Junaio
• O Junaio possui uma forma de trabalho
simples
• O navegador acessa um website, pedindo
informações sobre marcadores, dados,
objetos, imagens entre outros
• O usuário pode escolher qual canal quer
ver, por exemplo:
o museus
o parques
o restaurantes
45. Junaio - WebSite
• O uso do Junaio consiste apenas em
desenvolver o serviço web que fornece as
informações necessárias ao aplicativo
• A comunicação é feita por meio de um
pedido HTTP comum, o servidor retorna um
XML para a aplicação no formato do Junaio
Fluxo similar ao do Layar
46. Junaio - Bibliotecas de
Desenvolvimento
Para facilitar o desenvolvimento, existem
bibliotecas para o Junaio em PHP e
ASP.NET, que lidam com a criação do XML
automaticamente.
Utilizaremos o PHP!!!
PHP Helper Libraries: um conjunto de classes
que auxilia o desenvolvimento em PHP
51. Junaio - Glue
• Para rastrear imagens quaisquer, o princípio
é semelhante ao Layar, mas é preciso fazer
alguns passos extras:
o registrar a(s) imagem(ns) que devem ser rastreadas
no site de desenvolvedores do Junaio. Isso permite
que elas sejam reconhecidas.
o neste modo é preciso usar modelos 3D como objeto
virtual (imagens, vídeos não são suportados). É
preciso encriptar os modelos, o que também é feito
no site de desenvolvedores do Junaio.
54. Conclusão
A realidade aumentada pode ser usada
atualmente em web e em dispositivos
móveis,
com ferramentas já bastante maduras, de
utilização simples para um programador, e
com desempenho plenamente aceitável. Ela
também evoluiu dos seus primórdios, usando
apenas marcadores binários, para hoje em
dia rastrear imagens quaisquer e pontos
geográficos através de GPS.
55. Conclusão
É de se esperar uma evolução ainda maior,
com rastreamento robusto de rostos (o que já
acontece em aplicações desktop) e mesmo
reconstrução automática 3D do ambiente,
permitindo que objetos sejam posicionados
sem nenhum marcador, o que já tem sido
feito em tempo real com algoritmos como o
SLAM.