Apresentação realidade aumentada para aplicações web e mobile

56
Realidade aumentada para aplicações web e mobile Marcelo de Paiva Guimarães Bruno Barberi Gnecco Diego Roberto Colombo Dias

description

Apresentação do Pré Simpósio - SVR 2012

Transcript of Apresentação realidade aumentada para aplicações web e mobile

Page 1: Apresentação   realidade aumentada para aplicações web e mobile

Realidade aumentada para aplicações

web e mobile

Marcelo de Paiva Guimarães

Bruno Barberi Gnecco

Diego Roberto Colombo Dias

Page 2: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 3: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 4: Apresentação   realidade aumentada para aplicações 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

Plataformas web e mobile

Page 5: Apresentação   realidade aumentada para aplicações 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

Page 6: Apresentação   realidade aumentada para aplicações 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

Page 7: Apresentação   realidade aumentada para aplicações 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

Page 8: Apresentação   realidade aumentada para aplicações web e mobile

• 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

Page 9: Apresentação   realidade aumentada para aplicações web e mobile

• 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

Page 10: Apresentação   realidade aumentada para aplicações web e mobile

• 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

Page 11: Apresentação   realidade aumentada para aplicações web e mobile

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)

Page 12: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 13: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 14: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 15: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 16: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 17: Apresentação   realidade aumentada para aplicações web e mobile

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"

Page 18: Apresentação   realidade aumentada para aplicações web e mobile

FlarManager – Escolha do Exemplo

a ser executado

Page 19: Apresentação   realidade aumentada para aplicações web e mobile

FlarManager – Arquivo de

configuração

Page 20: Apresentação   realidade aumentada para aplicações web e mobile

FlarManager – Exemplo de Código

Page 21: Apresentação   realidade aumentada para aplicações web e mobile

FlarManager - Exemplo

www.corollarium.com/ra/html/flarmanager/samples/index.html

Page 22: Apresentação   realidade aumentada para aplicações web e mobile

Mobile e Realidade Aumentada

Page 23: Apresentação   realidade aumentada para aplicações web e mobile

Soluções

Existem algumas soluções de RA para

plataformas mobile

Page 24: Apresentação   realidade aumentada para aplicações web e mobile

Layar

• Sua ideia é

associar

conteúdo digital

em layers,

inclusive

geolocalizado,

associando-o a

marcadores

Page 25: Apresentação   realidade aumentada para aplicações web e mobile

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)

Page 26: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 27: Apresentação   realidade aumentada para aplicações web e mobile

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)

Page 28: Apresentação   realidade aumentada para aplicações web e mobile

Criando uma layer no Layar

Page 29: Apresentação   realidade aumentada para aplicações web e mobile

Criando uma layer no Layar

Page 30: Apresentação   realidade aumentada para aplicações web e mobile

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!!!

Page 31: Apresentação   realidade aumentada para aplicações web e mobile

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.

Page 32: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 33: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 34: Apresentação   realidade aumentada para aplicações web e mobile

Layar Vision - Imagens de

Referência

Page 35: Apresentação   realidade aumentada para aplicações web e mobile

Layar Vision - Imagens de

Referência

Page 36: Apresentação   realidade aumentada para aplicações web e mobile

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)

Page 37: Apresentação   realidade aumentada para aplicações web e mobile

Layar - Fluxo de Execução

Page 39: Apresentação   realidade aumentada para aplicações web e mobile

Layar - Formato de retorno

Page 40: Apresentação   realidade aumentada para aplicações web e mobile
Layar.wmv
Page 41: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 42: Apresentação   realidade aumentada para aplicações web e mobile

Junaio - Modos de Detecção

Glue: reconhecimento de marcadores, que podem ser qualquer tipo de

imagem

Page 43: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 44: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 45: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 46: Apresentação   realidade aumentada para aplicações web e mobile

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

Page 47: Apresentação   realidade aumentada para aplicações web e mobile

Junaio - Criando o POI

Page 48: Apresentação   realidade aumentada para aplicações web e mobile

Junaio - Exemplo POI

Page 49: Apresentação   realidade aumentada para aplicações web e mobile

Junaio - POI com som

Page 50: Apresentação   realidade aumentada para aplicações web e mobile

Junaio - Forma de Retorno

Page 51: Apresentação   realidade aumentada para aplicações web e mobile

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.

Page 52: Apresentação   realidade aumentada para aplicações web e mobile

Junaio - Glue

Page 53: Apresentação   realidade aumentada para aplicações web e mobile

Junaio

Page 54: Apresentação   realidade aumentada para aplicações web e mobile

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.

Page 55: Apresentação   realidade aumentada para aplicações web e mobile

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.

Page 56: Apresentação   realidade aumentada para aplicações web e mobile

Perguntas?