Post on 04-Jul-2015
description
Realidade aumentada para aplicações
web e mobile
Marcelo de Paiva Guimarães
Bruno Barberi Gnecco
Diego Roberto Colombo Dias
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
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
• 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
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.
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çãoo Portabilidade
o Mobilidade
o Design
Plataformas web e mobile
• 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
RA - Equipamentos específicos
• FLARToolkit:
o AS3 (ActionScript 3.0) conjuntamente
com o Papervision3D
o Licença GPL
o Acesso a webcam
o Utiliza Flash Player no navegador
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
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
Bibliotecas de Rastreamento
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)
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
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_0\resources\flarToolkit\patterns - 12
exemplos de marcadores (imagens PNG)
ii. - Imprima os marcadores para que possam ser utilizados
para testar as aplicações exemplos
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
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
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
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"
FlarManager – Escolha do Exemplo
a ser executado
FlarManager – Arquivo de
configuração
FlarManager – Exemplo de Código
Mobile e Realidade Aumentada
Soluções
Existem algumas soluções de RA para
plataformas mobile
Layar
• Sua ideia é
associar
conteúdo digital
em layers,
inclusive
geolocalizado,
associando-o a
marcadores
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)
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
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)
Criando uma layer no Layar
Criando uma layer no Layar
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!!!
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.
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
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
Layar Vision - Imagens de
Referência
Layar Vision - Imagens de
Referência
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)
Layar - Fluxo de Execução
Layar - Fluxo de Execução
ref: http://www.layar.com/documentation/browser/layar-platform-overview/
Layar - Formato de retorno
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
Junaio - Modos de Detecção
Glue: reconhecimento de marcadores, que podem ser qualquer tipo de
imagem
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
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
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
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
Junaio - Criando o POI
Junaio - Exemplo POI
Junaio - POI com som
Junaio - Forma de Retorno
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.
Junaio - Glue
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.
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.
Perguntas?