SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
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
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
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ção
    o   Portabilidade
    o   Mobilidade
    o   Design
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
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
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
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_0resourcesflarToolkitpatterns - 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
FlarManager - Exemplo
www.corollarium.com/ra/html/flarmanager/samples/index.html
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
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
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
Junaio
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?

Contenu connexe

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

Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídiaFábio Costa
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídiaFábio Costa
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
APRESENTACAO WALANEM ANDROID (1)
APRESENTACAO WALANEM ANDROID (1)APRESENTACAO WALANEM ANDROID (1)
APRESENTACAO WALANEM ANDROID (1)Walanem Figueiredo
 
Desenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livreDesenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livrePedro Neto
 
RIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoRIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoLeonardo Braga
 
Descomplicando o Android
Descomplicando o AndroidDescomplicando o Android
Descomplicando o AndroidHeider Lopes
 
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122Bruno Souza
 
Introdução a Plataforma Android
Introdução a Plataforma AndroidIntrodução a Plataforma Android
Introdução a Plataforma AndroidÉdipo Souza
 
Integração do Zabbix com Grafana
Integração do Zabbix com GrafanaIntegração do Zabbix com Grafana
Integração do Zabbix com GrafanaAécio Pires
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryfelipebzr
 
Software livre - Parte 3
Software livre - Parte 3Software livre - Parte 3
Software livre - Parte 3Fabrício Basto
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Wennder Santos
 

Similaire à Apresentação realidade aumentada para aplicações web e mobile (20)

Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
HTML5
HTML5HTML5
HTML5
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
APRESENTACAO WALANEM ANDROID (1)
APRESENTACAO WALANEM ANDROID (1)APRESENTACAO WALANEM ANDROID (1)
APRESENTACAO WALANEM ANDROID (1)
 
Android - Conceito e Arquitetura
Android - Conceito e ArquiteturaAndroid - Conceito e Arquitetura
Android - Conceito e Arquitetura
 
Desenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livreDesenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livre
 
RIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoRIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à Inovação
 
Descomplicando o Android
Descomplicando o AndroidDescomplicando o Android
Descomplicando o Android
 
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
 
Introdução a Plataforma Android
Introdução a Plataforma AndroidIntrodução a Plataforma Android
Introdução a Plataforma Android
 
JavaME - Aula 1
JavaME - Aula 1JavaME - Aula 1
JavaME - Aula 1
 
Integração do Zabbix com Grafana
Integração do Zabbix com GrafanaIntegração do Zabbix com Grafana
Integração do Zabbix com Grafana
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Software livre - Parte 3
Software livre - Parte 3Software livre - Parte 3
Software livre - Parte 3
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 

Dernier

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
O papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-modernoO papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-modernoDenis Pereira Raymundo
 
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...Priscila Ribeiro Chagas
 
TI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdfTI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdfRodrigoMori7
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.Thiago lindolfo
 

Dernier (7)

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
O papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-modernoO papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-moderno
 
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
 
TI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdfTI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.
 

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"
  • 18. FlarManager – Escolha do Exemplo a ser executado
  • 19. FlarManager – Arquivo de configuração
  • 22. Mobile e Realidade Aumentada
  • 23. Soluções Existem algumas soluções de RA para plataformas mobile
  • 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)
  • 28. Criando uma layer no Layar
  • 29. Criando uma layer no Layar
  • 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
  • 34. Layar Vision - Imagens de Referência
  • 35. Layar Vision - Imagens de Referência
  • 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)
  • 37. Layar - Fluxo de Execução
  • 38. Layar - Fluxo de Execução ref: http://www.layar.com/documentation/browser/layar-platform-overview/
  • 39. Layar - Formato de retorno
  • 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
  • 49. Junaio - POI com som
  • 50. Junaio - Forma de Retorno
  • 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.