Realidade aumentada para aplicações           web e mobile   Marcelo de Paiva Guimarães       Bruno Barberi Gnecco   Diego...
Roteiro•   Plataformas web e mobile•   Bibliotecas de rastreamento    o FLARToolkit    o Flare Tracker (Flash Augmented Re...
Plataformas web e mobileA escolha da plataforma de desenvolvimento é  um ponto primordial em qualquer projeto de  software...
Plataformas web e mobile•   As plataformas de hardware e software voltadas para    desktops e para mobile possuem a mesma ...
Plataformas web e mobile•   RA na web é, atualmente, implementada por    bibliotecas em Flash, que possui suporte a    3D ...
Plataformas web e mobile•   Aplicações web e mobile buscam dados    remotamente, o que requer conectividade, é    limitado...
RA - Equipamentos específicos•   Câmeras: integrada e posicionada de forma fixa    em relação à tela, o que permite que o ...
Bibliotecas de Rastreamento•   FLARToolkit:    o AS3 (ActionScript 3.0) conjuntamente      com o Papervision3D    o Licenç...
Bibliotecas de Rastreamento•   flare tracker:    o o diferencial dela é o suporte a diferentes tipos      de marcadores, c...
Bibliotecas de Rastreamento•   flare NFT:    o A maioria das bibliotecas realizam o rastreamento de       marcadores, o Fl...
Desenvolvimento de aplicações    com o FlarManager•   FlarManager é um framework amigável para    o desenvolvimento de apl...
Desenvolvimento de aplicações    com o FlarManager•   A programação é baseada em eventos de    marcadores:    o   adição  ...
Instalação do FlarManager1. Faça o dowload do pacote do FLARmanager no endereço     http://words.transmote.com/wp/flarmana...
Flash Develop - FlarManager•   Pode-se utilizar para o desenvolvimento    com o FLARmanager:    o   Flash Builder    o   F...
Instalação e Configuração do Flash   Develop1. Pré-requisito: instale o Flash Player (versão 10 ou superior) do   endereço...
Criando um projeto no Flash     Develop1. Crie um novo projeto ("Project -> New project")2. Escolha "Flex 3 Project"3. Nom...
Criando um projeto no FlashDevelop1. Apague o diretório “lib”2. Renomeie o diretório “libs” para “lib”3. No diretório "lib...
FlarManager – Escolha do Exemploa ser executado
FlarManager – Arquivo deconfiguração
FlarManager – Exemplo de Código
FlarManager - Exemplowww.corollarium.com/ra/html/flarmanager/samples/index.html
Mobile e Realidade Aumentada
SoluçõesExistem algumas soluções de RA para plataformas mobile
Layar•   Sua ideia é    associar    conteúdo digital    em layers,    inclusive    geolocalizado,    associando-o a    mar...
Layar - Desenvolvimento•   O Layar possibilita o desenvolvimento de    aplicações de RA com:    o objetos 3D    o imagens ...
Layar•   O Layar não é uma solução de código    aberto•   O sistema é gratuito aos clientes•   É gratuito para desenvolved...
Criando uma layer no Layar1. Crie uma conta no   www.layar.com/development2. Crie uma camada própria em   www.layar.com/pu...
Criando uma layer no Layar
Criando uma layer no Layar
Criando uma layer no Layar1. Crie um serviço Layar. Este componente   pode ser escrito em qualquer linguagem   (PHP, Java ...
Layar Vision•   É um componente que detecta imagens    como marcadores•   Realiza rastreamento no próprio cliente,    supo...
Layer com o Layar Vision•   A criação de camadas utilizando o Layar    Vision é um pouco diferente•   Para criar camadas p...
Layar Vision - Imagens de    Referência•   A detecção de imagens através do Layar    Vision é configurada neste ponto tamb...
Layar Vision - Imagens deReferência
Layar Vision - Imagens deReferência
Layar Vision - Converter modelos    3DLayar 3D Model Converter Tool:•   converte modelo Wavefront(obj/mtl) para o formato ...
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 r...
Junaio - Modos de DetecçãoGlue: reconhecimento de marcadores, que podem ser qualquer tipo de  imagem
Junaio - Modos de DetecçãoBaseado em localização: consiste  em um ponto de interesse (POI)  geo-referenciado, isto é, em  ...
Junaio•   O Junaio possui uma forma de trabalho    simples•   O navegador acessa um website, pedindo    informações sobre ...
Junaio - WebSite•   O uso do Junaio consiste apenas em    desenvolver o serviço web que fornece as    informações necessár...
Junaio - Bibliotecas de  DesenvolvimentoPara facilitar o desenvolvimento, existem bibliotecas para o Junaio em PHP e ASP.N...
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 pass...
Junaio - Glue
Junaio
ConclusãoA   realidade aumentada pode ser usada  atualmente em web e em dispositivos  móveis,com ferramentas já bastante m...
ConclusãoÉ de se esperar uma evolução ainda maior, com rastreamento robusto de rostos (o que já acontece em aplicações des...
Perguntas?
Apresentação   realidade aumentada para aplicações web e mobile
Próximos SlideShares
Carregando em…5
×

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

2.946 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.946
No SlideShare
0
A partir de incorporações
0
Número de incorporações
266
Ações
Compartilhamentos
0
Downloads
39
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. Realidade aumentada para aplicações web e mobile Marcelo de Paiva Guimarães Bruno Barberi Gnecco Diego Roberto Colombo Dias
  2. 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. 3. Plataformas web e mobileA 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Instalação do FlarManager1. 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. 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. 15. Instalação e Configuração do Flash Develop1. 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. 16. Criando um projeto no Flash Develop1. 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. 17. Criando um projeto no FlashDevelop1. 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. 18. FlarManager – Escolha do Exemploa ser executado
  19. 19. FlarManager – Arquivo deconfiguração
  20. 20. FlarManager – Exemplo de Código
  21. 21. FlarManager - Exemplowww.corollarium.com/ra/html/flarmanager/samples/index.html
  22. 22. Mobile e Realidade Aumentada
  23. 23. SoluçõesExistem algumas soluções de RA para plataformas mobile
  24. 24. Layar• Sua ideia é associar conteúdo digital em layers, inclusive geolocalizado, associando-o a marcadores
  25. 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. 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. 27. Criando uma layer no Layar1. Crie uma conta no www.layar.com/development2. 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. 28. Criando uma layer no Layar
  29. 29. Criando uma layer no Layar
  30. 30. Criando uma layer no Layar1. Crie um serviço Layar. Este componente pode ser escrito em qualquer linguagem (PHP, Java etc). Ele será responsável por prover os dados aumentados2. 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. 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. 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. 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. 34. Layar Vision - Imagens deReferência
  35. 35. Layar Vision - Imagens deReferência
  36. 36. Layar Vision - Converter modelos 3DLayar 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. 37. Layar - Fluxo de Execução
  38. 38. Layar - Fluxo de Execução ref: http://www.layar.com/documentation/browser/layar-platform-overview/
  39. 39. Layar - Formato de retorno
  40. 40. 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
  41. 41. Junaio - Modos de DetecçãoGlue: reconhecimento de marcadores, que podem ser qualquer tipo de imagem
  42. 42. Junaio - Modos de DetecçãoBaseado em localização: consiste em um ponto de interesse (POI) geo-referenciado, isto é, em grupos de latitude, longitude e altitude
  43. 43. 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
  44. 44. 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 JunaioFluxo similar ao do Layar
  45. 45. Junaio - Bibliotecas de DesenvolvimentoPara 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
  46. 46. Junaio - Criando o POI
  47. 47. Junaio - Exemplo POI
  48. 48. Junaio - POI com som
  49. 49. Junaio - Forma de Retorno
  50. 50. 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.
  51. 51. Junaio - Glue
  52. 52. Junaio
  53. 53. ConclusãoA 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.
  54. 54. 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.
  55. 55. Perguntas?

×