Realidade aumentada para aplicações web e mobile

Transcrição

1 1 Realidade aumentada para aplicações web e mobile Marcelo de Paiva Guimarães 1, Bruno Barberi Gnecco 2, Diego Roberto Colombo Dias 2,3 Abstract This course shows how augmented reality (AR) can be used in web and mobile platforms. We start with a brief introduction about AR, explaining its basics and how it can be used, and detailing the differences in development between desktop, mobile and web. We also show some tools and frameworks available for these two platforms, with its work flow and a basic tutorial of how to use them. The tools discussed include several tracking libraries for web (FLARToolkit, flare*tracker, flare*nft); FLARManager, a Flash-based framework for quick development of AR applications; Layar and Junaio, AR frameworks for mobile platforms which support cameras and GPS. Resumo O objetivo deste curso é apresentar a realidade aumentada em plataformas web e móveis. Após uma breve introdução sobre RA, explicando seu princípio e uso, falaremos das diferenças principais em desenvolvimento para web e para mobile. Em seguida, mostraremos algumas ferramentas disponíveis para estas duas plataformas, com seu fluxo de funcionamento e um tutorial básico do seu uso. Entre as ferramentas discutidas: várias bibliotecas de rastreamento de marcadores para web (FLARToolkit, flare*tracker, flare*nft); FLARManager, um framework para o desenvolvimento rápido de aplicações de Realidade Aumentada baseada em Flash; Layar e Junaio, ferramentas de plataformas móveis para realidade aumentada que usam câmeras e GPS. 1 Universidade Federal de São Paulo /membro do Programa de Mestrado da Faculdade Campo Limpo Paulista 2 Corollarium Tecnologia 3 Corollarium Tecnologia

2 1.1. Realidade aumentada A Realidade Aumenta (RA) é uma área da computação que se caracteriza pela adição de objetos virtuais em cenas reais, em tempo real. Exemplos de objetos virtuais são imagens, objetos 3D, vídeos e sons. Atualmente, existem várias ferramentas que facilitam o desenvolvimento de aplicações de RA para web e mobile (dispositivos móveis como smartphones e tablets). As aplicações web se caracterizam por serem executadas em navegadores (browsers), que estão padronizados de maneira satisfatória, independente do sistema operacional e do hardware em execução. Como consequência, os programadores não precisam se preocupar com os problemas que são próprios das aplicações nativas, como o suporte a diversos sistemas operacionais e hardwares. A busca por ferramentas de software que permitam o desenvolvimento eficiente de aplicações RA tem sido constante nos últimos anos. Uma ferramenta ideal seria de alto nível, ou seja, permitiria que profissionais de outras áreas, como professores do ensino básico, conseguissem utilizá-la sem se preocupar com aspectos técnicos. Para isso, toda a arquitetura de software e hardware deveria ser abstraída. Existem diversas ferramentas que realizam, de maneira fácil, a associação entre os objetos virtuais e os respectivos marcadores. Contudo, além da associação, é necessária a produção do conteúdo virtual: imagens, vídeos, modelos 3D. Uma aplicação de RA sofisticada, com modelos 3D animados, ainda requer a construção de objetos virtuais específicos e que interajam entre si, e modelos 3D requerem uma longa curva de aprendizado para serem feitos. Os objetos podem até ser comprados, porém podem não ser exatamente o objeto desejado pelo usuário. Então, se o usuário não conseguir o objeto virtual (aquisição com custo ou livre), ele terá que envolver no projeto um profissional especializado. As aplicações de RA funcionam, de maneira geral, encontrando a posição onde o objeto virtual deve ser desenhado e em seguida desenhando o objeto virtual nesta posição. Existem diversas formas de encontrar esta posição: usando marcadores físicos, que podem ser códigos de barras ou imagens genéricas pré-arquivadas; usando coordenadas de GPS; a partir apenas das coordenadas do usuário; ou até mesmo pelo reconhecimento tridimensional do ambiente. A escolha desta forma depende das ferramentas utilizadas e da funcionalidade da aplicaçã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 e tempo de desenvolvimento). De maneira geral, as plataformas de hardware e software voltadas para desktops e para mobile possuem a mesma base tecnológica, ou seja, elas são capazes de realizar as mesmas tarefas computacionais. Contudo, elas podem ser diferenciadas sob vários aspectos, como, por exemplo: Portabilidade: trata da capacidade de um determinado aplicativo ser compilado (se houver compilação) e executado em diferentes arquiteturas de software e hardware. No processo de escolha de arquitetura, pode-se escolher por soluções nativas (específicas) ou por aquelas capazes de adaptar o conteúdo conforme o

3 ambiente de execução. Uma das principais vantagens das aplicações nativas é o desempenho, o que é esperado, pois toda a solução foi construída para tal plataforma; quanto às soluções adaptativas, como principal vantagem espera-se o desenvolvimento mais simples e a capacidade de serem executadas em diversas plataformas sem modificação do código. Mobilidade: permite que os usuários se movimentam fisicamente de uma localidade para outra e ainda acessem os serviços. Essa necessidade está cada vez mais presente entre os usuários e impulsiona o uso dos dispositivos mobile. Porém, afeta diretamente esses dispositivos, por exemplo, limitando a capacidade de processamento; exigindo baixo consumo de energia para aumentar a vida da bateria; e dificultando a transmissão de dados. A mobilidade cria oportunidades que não estão presentes nos desktops, como a construção de aplicações que são capazes de adaptar o conteúdo conforme a localização física do usuário naquele momento. Design: as telas dos dispositivos mobile são menores do que as dos desktops, o que limita a quantidade de informações que podem ser disponibilizadas ao mesmo tempo. Além disso, esses dispositivos possuem uma menor capacidade de processamento do que os desktops, o que torna mais evidente as preocupações com as imagens, cores, tamanhos, tipologias, formatos e animações. Em plataformas móveis temos equipamentos específicos que trazem vantagens para o uso de RA: Câmera 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ússola, o que 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. As funcionalidades de RA na web são atualmente implementadas 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. Outro ponto importante é que 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. Apesar destas limitações, atualmente é plenamente possível executar aplicações de RA nas duas plataformas Bibliotecas de rastreamento Uma das formas de determinar o posicionamento de objetos virtuais na cena aumentada é através de marcadores físicos, geralmente imagens. Então, em tempo de

4 execução, as imagens da webcam são capturadas e analisadas a fim determinar a localização dos marcadores. Quando encontrados, o objeto virtual é adicionado na posição determinada por eles. As aplicações de RA também podem ser construída sem marcadores, por exemplo, a face do usuário pode determinar a posição da adição dos objetos virtuais, ou uma posição geográfica de latitude e longitude. A seguir alguns exemplos de bibliotecas de rastreamento para web: FLARToolkit: desenvolvida em AS3 (ActionScript 3.0) conjuntamente com o Papervision3D. Ela está sob a licença GPL. Para que as aplicações de RA construídas com essa biblioteca acessem a webcam, é necessária a instalação do Flash Player no navegador. flare tracker (Flash Augmented Reality Engine): o diferencial dela é o suporte a diferentes tipos de marcadores, como o Binary Marker, o Frame marker e o DATAMATRIX marker (Figura 1.1). Ela é baseada em flash e é executada em navegadores. Ela é uma solução comercial. Figura 1.1 Exemplos de marcadores utilizados pelo fare tracker (Imagination,2012). flare NFT (natural feature tracking): 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. A Figura 1.2 mostra exemplos de aplicações rastreadas com flare NFT. Figura 1.2 Exemplos de aplicações construídas com o flare NFT (Imagination,2012b).

5 1.4. Desenvolvimento de aplicações web com o FlarManager O FlarManager é um framework amigável para o desenvolvimento de aplicações web baseadas em Flash (Mullen,2011). Ele está disponível em Ele é compatível com várias bibliotecas de rastreamento (FLARToolkit, flare*tracker, flare*nft) e com frameworks 3D (Alternativa3D, Away3D, Away3D Lite, Papervision3D, Sandy3D). A programação é baseada em eventos, com recursos para a adição, atualização e remoção de marcadores. Além disso, suporta diversos marcadores. Essa flexiblidade de escolha é uma das vantagens que se destaca nessa ferramenta, a outra é o pacote de desenvolvimento, que é de fácil uso Passos para a instalação e configuração do FLARmanager 1. Faça o download do pacote do FLARmanager no endereço 2. Descompacte o arquivo FLARManager.zip. Ele gerará o diretório FLARManager_v1_1_0 (usada neste tutorial) - 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) - Imprima os marcadores para que possam ser utilizados para testar as aplicações exemplos Pode-se utilizar para o desenvolvimento com o FLARmanager a ferramenta Flash Builder ou a FlashDevelop. As duas ferramentas fornecem recursos semelhantes. Porém, a FlashDevelop é open source, por isso foi escolhida Instalação de configuração do FlashDevelop 1. Pré-requisito: instale o Flash Player (versão 10 ou superior) no endereço 2. Pré-requisito: Java run-time no endereço 3. Faça o download do pacote do FlashDevelop no endereço 4. Execute o arquivo FlashDevelop RTM.exe. O processo de instalação irá fazer o download automático do Flex SDK ( ). 5. A interface do FlashDevelop é apresentada na Figura 1.3.

6 Figura 1.3 Interface do FlashDevelop Exemplos 1. Inicie o FlashDevelop 2. Crie um novo projeto ("Project -> New project") 3. Escolha "Flex 3 Project" 4. Nomeie o projeto e clique em "Ok" 5. Arraste o conteúdo do diretório do FlarManager para o projeto (drag and drop) 6. - Quando questionado se deve subscrever ( Overwrite ) o diretório src clique em yes 7. Apague o arquivo Main.mxml, que está em src/ 8. 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 9. Apague o diretório lib 10. Renomeie o diretório libs para lib 11. No diretório "lib", clique com o botão direito do mouse sobre todos os arquivos (Alternativa3D swc, ASCollada.swc,Away3D_3.6.0.swc, Away3D_Lite_1.0.swc, Papervision3D_ swc, sandy_3.1_r1006.swc) com extensão ".swc" e os escolha "Add To Library" 12. Execute o projeto (imprima qualquer marcador - resources\flartoolkit\patterns) Se ao compilar o programa for exibida a seguinte mensagem de erro src\apps\sequencar\sequencar.as(31): col: 3: Error: Unable to transcode

7 ../resources/assets/apps/sequencar.swf, então edite o arquivo "src\apps\sequencar\sequencar.as" Coloque o endereço absoluto na linha 31, por exemplo: [Embed('C:/curso/FLAR/resources/assets/apps/sequencAR.swf', mimetype='application/octet-stream')]. A Figura 1.4 apresenta o código fonte do programa principal. Ele possui a chamada para vários exemplos. Nesse caso está habilitado a execução do FLarManagerTutorial_Collada_PV3D. O objeto 3D adicionado na cena é um modelo Collada. Para testar outros exemplos, basta comentar o exemplo atual e retirar o comentário (//) do exemplo desejado. FLARManagerExample_PV3D é um exemplo do uso de múltiplos marcadores na mesma aplicação. Figura 1.4 Código fonte do FLARManagerExampleLauncher.as (programa principal). A Figura 1.5 mostra um trecho do código do arquivo flarconfig.xml. Nele está a configuração da webcam e da localização dos arquivos.pat (padrões dos marcadores).

8 Figura 1.5 Trecho do código fonte do flarconfig.xml. A Figura 1.6 apresenta um trecho do código fonte do arquivo FLARManagerTutorial_Collada_Away3D.as. Ele contém o código de inicialização e execução do exemplo. A aplicação é baseada em eventos. Por exemplo, toda vez que o marcador é identificado o evento onmarkeradded é acionado. Assim, para associar a associação de marcadores e objetos pode ser realizada neste método. Figura 1.6 Trecho do código fonte do FLARManagerTutorial_Collada_Away3D.as.

9 1.5. Mobile e RA Há várias alternativas de plataformas de RA para dispositivos móveis, e detalhamos algumas mais populares abaixo Layar O Layar na verdade é um conjunto de softwares para realidade aumentada em plataformas móveis. Sua ideia é associar conteúdo digital em layers (camadas), inclusive geolocalizado, associando-o a marcadores, que podem ser imagens comuns. Para isso o Layar disponibiliza uma plataforma aberta, que permite a desenvolvedores criarem suas próprias camadas. Através de um navegador próprio (Layar Browser, suportado nas plataformas Android e ios), os usuários podem encontrar camadas listadas em um diretório. Isso permite que conteúdo desenvolvido para o Layar esteja imediatamente disponível para toda sua base de usuários (1.5 milhões em julho de 2011, com 2500 camadas públicas). Figura 1.7 Aplicação Layar. O Layar (Layar,2012) permite o desenvolvimento de aplicações de realidade aumentada com objetos 3D, com imagens animadas, compartilhamento com Twitter e Facebook, suporte a áudio e vídeo, a possibilidade de ser integrado a outras aplicações (através do Layar Player, disponível somente para ios no momento, mas uma versão Android está sendo desenvolvida) e até pagamentos, através do Paypal. Consideraremos só o uso do Layar Browser neste tutorial, e não do Layar Player.

10 O Layar Vision é um componente que detecta imagens como marcadores. Ele faz 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. O Layar não é uma solução de código aberto. O sistema é gratuito para os usuários, e dentro de certos limites também para os desenvolvedores. O Layar Vision é gratuito até 10 mil visualizações/mês, e o Layar Geo é totalmente gratuito. Como criar uma camada no Layar: 1. Crie uma conta no 2. Cria uma camada própria em Neste momento serão adicionados os meta-dados, como o nome, detalhes, configuração visual, tipo de dado (2D, 3D) Figura 1.8 Camada Layar. 3. 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 4. Após a criação, você poderá customizar sua camada em vários detalhes, como ícone, descrição detalhada, visual e colorido e outros. A detecção de imagens através do Layar Vision é configurada neste ponto também. Imagens boas para serem rastreadas precisam dos seguintes aspectos: 1. Linhas bem delimitadas 2. Vários objetos na imagem (imagens repetitivas, como padrões e ladrilhos, não funcionam bem. 3. Boa qualidade da imagem 4. Imagens estáticas (rostos ou animais não), com texto fixo que não mudará com o tempo Misturar a deteção de POIs do Layar Geo e o Layar Vision não é permitido mais. O fluxo de dados no Layar segue um padrão bastante simples, ilustrado na Figura 1.9. O

11 Layar Player fica na camada cliente, e faz os pedidos ao servidor do Layar. Este, por sua vez, contata o servidor do desenvolvedor com um pedido de dados. Figura 1.9 fluxo de dados no Layar. Este pedido é feito via HTTP GET. Os principais campos passados são os seguintes: layername: Nome da camada. Isso permite a um site servir informações de diversas camadas diferentes. lat: A latitude do usuário. lon: A longitude do usuário. radius: O raio, medida em metros, onde deve ser feita a busca das informações. Todas as respostas são dadas no formato JSON. Algumas chaves são obrigatórias na resposta: layer: o nome da camada. errorcode: 0 se não houve erro. Um número entre 20 e 29 para uma mensagem de erro ser mostrada ao usuário. errorstring: a mensagem de erro retornada ao usuário. Se não houve erro uma simples mensagem "ok" pode ser enviada. hotspots: uma lista de POIs, resultado da busca. Cada item do POI deve conter os seguintes valores: a. id: string única que refere aquele POI. b. anchor: o local do POI. Exemplo: "anchor": { "geolocation": { "lat": , "lon": 4.93 } }. No caso de imagens (LayarVision), use a chave usada no registro da imagem a ser rastreada: "anchor": { "referenceimage": "chavedaimagemreferencia" } c. text: um array contendo as informações do ponto de interesse, com chaves como title (nome), description (descrição), footnote (nota de rodapé).

12 d. imageurl: link da imagem a ser mostrada no POI (ou seja, o objeto virtual). e. Exemplo de retorno completo: {"hotspots": [{ "id": "test_1", "anchor": { "geolocation": { "lat": , "lon": 4.93 } "text": { "title": "The Layar Office", "description": "The Location of the Layar Office", "footnote": "Powered by Layar" }, "imageurl": " }], Figura 1.10 Exemplo de retorno. A documentação do Layar é bastante clara e detalhada, com tutoriais que incluem código fonte, em PHP, de aplicações de exemplo [REF 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 também, chamada Metaio Web-SDK, baseada em Flash. Além do navegador, o Metaio Mobile SDK pode ser usado para integração em aplicações móveis nativas, inclusive em aplicações Unity3D. Há uma extensa documentação no site do Junaio, com tutoriais e exemplos de código [REF: O Junaio possui dois modos de detecção: GLUE: reconhecimento de marcadores, que podem ser qualquer tipo de imagem. Figura 1.11 Junaio/Metaio.

13 location based: consiste em um ponto de interesse (POI) geo-referenciado, isto é, em grupos de latitude, longitude e altitude. Para ambientes fechados, onde o GPS não está disponível, existe a opção de usar marcadores LLA (LLA é latitude, longitude, altitude), que são códigos de barra 2D. Note que estes marcadores não são para identificar objetos de realidade aumentada -- use os GLUE para isso. Figura 1.12 Pontos de interesse (POI) geo-referenciados. O Junaio possui uma forma de trabalho simples. O navegador acessa um website, pedindo informações sobre o canal. Canal é o grupo de informações sobre marcadores, dados, objetos, imagens, etc; assim o usuário pode escolhar o canal que quer ver. Pode haver um canal mostrando museus da cidade, outro canal mostrando parques da cidade. O uso do Junaio consiste apenas em desenvolver este website, que fornece as informações necessárias para o aplicativo. Esta comunicação é feita através de um pedido HTTP comum, e o servidor retorna um XML para a aplicação no formato do Junaio. Ou seja, é um fluxo similar ao do Layar. Para facilitar o desenvolvimento, existem bibliotecas para o Junaio em PHP e ASP.NET, que lidam com a criação do XML automaticamente. Nos exemplos deste capítulos usaremos a versão PHP Exemplo POI O exemplo abaixo mostra como gerar um marcador geo-referenciado para o Cristo redentor.

14 // use a classe do Junaio $jpoibuilder = new JunaioBuilder(); // inicia a criacao do retorno $jpoibuilder->start(); // cria um ponto georeferenciado $poi = $jpoibuilder->createbasiclocationbasedpoi( ); "Cristo Redentor", // nome " , ,0", // coordenadas lat, long, "O Cristo Redentor é um dos símbolos do Rio de Janeiro", //descricao " // icone " // thumbnail "1", //id "true" // permite rotas no google maps // envia para o cliente $jpoibuilder->outputpoi($poi); // termina o processo $jpoibuilder->end(); Figura 1.13 Exemplo de ponto de interesse (POI). O processo é bastante trivial: é feita uma inicialização do objeto JunaioBuilder; em seguida um POI é criado, com suas informações. Finalmente, fazemos o output e terminamos o processo. Isso gera um XML como este: <?xml version="1.0" encoding="utf-8"?> <results> <poi id="1" interactionfeedback="none"> <name><![cdata[cristo Redentor]]></name> <description><![cdata[ Cristo Redentor é um dos símbolos do Rio de Janeiro]]></description> <l> , ,0</l> <o> 0,0,0</o> <mime-type>text/plain</mime-type> <icon> <thumbnail> </poi> </results>" Figura 1.14 XML resultante.

15 Existem diversas chamadas para colocar conteúdo rico. Por exemplo, para mostrar uma imagem completa: $poi = $jpoibuilder->createimagelocationbasedpoi( ); "Cristo Redentor", // nome " , ,0", // coordenadas lat, long, " // imagem "O Cristo Redentor é um dos símbolos do Rio de Janeiro", //descricao " // icone " // thumbnail "1", //id "true" // permite rotas no google maps Figura 1.15 Conteúdo para mostrar uma imagem. Comandos similares para vídeo (createvideolocationbasedpoi), áudio (createaudiolocationbasedpoi) e objetos 3D (create3dlocationbasedpoi) existem Exemplo GLUE Para rastrear imagens quaisquer o princípio é semelhante, mas é preciso fazer alguns passos a mais: 1. registrar a(s) imagem(ns) que devem ser rastreadas no site de desenvolvedores do Junaio. Isso permite que elas sejam reconhecidas. 2. 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. Após estes passos, a chamada no PHP é semelhante às anteriores: $poi = $jpoibuilder->createbasicgluepoi ( ); "objeto 3d", //nome "0,0,0", // translação " // modelo " // textura 1, // escala 1, //cos ID -> número gerado no registro da imagem "Este é meu modelo 3D!", //description " //thumbnail "objetoxyz", //id "1.57,0,1.57" //orientação Figura 1.16 Chamada no PHP.

16 Através de suas APIs, o Junaio oferece uma solução simples e robusta para fazer realidade aumentada Conclusões 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. É 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. Referências IMAGINATION.(2012a)."Flash Augmented Reality Engine * Tracker (flare*tracker)". Acessado em 20/04/2012. Disponível em: cker IMAGINATION.(2012b)."Flash Augmented Reality Engine * Tracker (flare*tracker)". Acessado em 20/04/2012. Disponível em: LAYAR (2012). Acessado em 15/04/2012. Disponível em: JUNAIO (2012). Acessado em 15/04/2012. Disponível em: MULLEN,T. Prototyping Augmented Reality. Publisher: Sybex.272 pages.october 18, MULLEN,T. (2011). Prototyping Augmented Reality. Publisher: Sybex.272 pages.october 18, 2011.