Melhores práticas para elaboração de projetos e construção de aplicações.

Jogos e aplicativos mobile já vem fazendo uso da realidade aumentada (RA) há um bom tempo. No entanto, esta tecnologia imersiva vem se destacando não só nos jogos ou aplicativos Android e iOS, mas também nos navegadores web. Projetos de RA desenvolvidos para navegadores web são alternativas que vêm sendo buscadas pelo mercado pois permitem proporcionar a mesma experiência de forma totalmente desacoplada de um aplicativo. A WebAR (Realidade Aumentada para Web) proporciona ao usuário uma experiência prática e imersiva no navegador de smartphones, tablets e desktops.

A construção de uma aplicação WebAR evoluiu muito ao longo dos últimos anos e mesmo assim ainda existem desafios e limitações que precisam ser considerados durante a criação de um novo projeto. Falaremos um pouco sobre eles e como podemos transpor estas dificuldades através de soluções práticas e eficazes. Alguns destes desafios são:

• Custos envolvidos no processo de desenvolvimento

• As limitações e particularidades que as plataformas de desenvolvimento possuem e que impactam diretamente no resultado final da aplicação

• As diferentes formas de dar início a renderização da realidade aumentada.

• Como criar a realidade aumentada baseada em marcadores.

Custos

Fique atento aos custos na hora de projetar a aplicação. É importante mensurar o que a sua equipe pode e sabe fazer e o que é preciso terceirizar. Outro ponto é a escolha da plataforma de desenvolvimento. Antes de escolher a plataforma verifique se oferece suporte aos requisitos do  projeto e se, no caso de uma plataforma paga, os custos são viáveis. Os custo envolvidos na construção de uma WebAR envolvem:

Design 2D e 3D. 

Experiências WebAR podem ser  2D, 3D ou mistas. O designer gráfico cria o conteúdo interativo ou apenas o constrói baseado em uma concepção prévia da equipe de criação. A internet está repleta de exemplos de projetos e demonstrações de experiências WebAR, em todas elas os objetos 3D estão ali prontos e funcionais, porém, a etapa de criação desses objetos pode levar mais tempo que o estimado, principalmente quando se trata de objetos animados. Existem sites onde artistas 3D vendem objetos prontos, eles podem ser úteis durante a fase de prototipação, mas é pouco provável que sirvam para um projeto elaborado com um propósito específico.

Atualmente é possível até emular jogos em uma WebAR e já existem cases de sucesso no mercado, como o jogo do Pac-Man nas caixas da Pizza Hut. Em um projeto com alto nível de interatividade, além do design 2D e 3D, será necessário também trabalho de profissionais de desenvolvimento de jogos.
 

Desenvolvimento da Aplicação Web 

Profissionais da área do desenvolvimento Web, desenvolvimento de jogos são os agentes capacitados para realizar as entregas dessa fase do projeto. A plataforma de desenvolvimento a ser adotada no projeto pode mudar de acordo com a complexidade da aplicação. É necessário conhecer as plataformas de desenvolvimento disponíveis no mercado e as particularidades de cada uma para poder escolher a que melhor se encaixa no projeto diante das limitações e particularidades que cada uma possui. Desta forma para um projeto de sucesso e que atenda as necessidades é importante ter todas as especificações e requisitos técnicos bem claros e previamente definidos.

Plataformas Proprietárias 

Existem diversas plataformas disponíveis no mercado, algumas gratuitas mas a maioria é paga. Com as opções pagas pode-se prototipar gratuitamente mas é necessário fazer a assinatura para publicar. Com algumas é possível publicar seu protótipo gratuitamente, mas com número limitado de acessos e exibição da marca d’água da plataforma na sua experiência, algumas trabalham com pacotes de acessos da ordem de $10,00 por mil acessos, $50,00 por 5 mil acessos e assim por diante.

Confira abaixo algumas plataformas com os respectivos planos e seus preços

Zappar(ZapWorks): Planos que iniciam em $68,00/mês permitindo até 12 mil visualizações ao ano mas pode custar mais de $1.500,00/mês dependendo do número de visualizações e se houver interesse/necessidade de hospedá-la no domínio próprio.

MyWebAR: Plano Pró de $25,00/mês com 2GB para armazenamento de aplicações mas apenas 1 domínio sem a possibilidade de compra de domínios adicionais.  Plano Ultimate $250,00/mês, com 5GB para armazenamento de aplicações, apenas 1 domínio mas com a possibilidade de compra de domínios adicionais. O Plano Enterprise tem o preço customizado e todos os recursos ilimitados.

8th Wall: O Plano Starter é o mais básico da plataforma, seu custo é de $9,00/mês, não permite conexões a partir de domínio personalizados e nem permite que o projeto seja hospedado em host próprio suportando apenas 3 membros no time. Ainda possui os planos Plus, Pro e Enterprise. O Plano Enterprise tem todos os recursos ilimitados e o preço customizado.

Blippar: Diferente dos citados até agora, o Blippar trabalha com pacotes de acesso por quantidade. Os pacotes vão de $10,00 por mil acessos, chegando a $4.500,00 por 1.500.000 acessos.

Plataformas gratuitas 

Além das plataformas citadas é possível desenvolver WebAR com a engine de jogos Unity. Existem algumas bibliotecas no mercado que estendem as funcionalidades engine para produção de WebAR. Você pode fazer o download da Unity gratuitamente no site oficial. Vou trazer aqui algumas bibliotecas que também são gratuitas.

Vuforia: O Vuforia SDK não oferece suporte para WebAR, resolvi trazê-lo aqui pois é um dos kits de desenvolvimento de realidade aumentada mais conhecidos e divulgados atualmente. No entanto ele é suportado apenas em projetos para Android, IOS e  Universal Windows Platform (UWP).

ARJs-Unity: É uma biblioteca open source que faz uma ponte entre a Unity e as tecnologias de realidade aumentada na web, WebXR e ARjs. Está disponível para download no GitHub, é só baixar e usar.

ARWT: Segue a mesma linha da ARJs-Unity e também está disponível para download no GitHub totalmente grátis. Um dos melhores resultados alcançados com plataformas gratuitas foi com a combinação de Unity com ARWT.

Hospedagem e Domínio

Geralmente, plataformas pagas oferecem o serviço de hospedagem em suas assinaturas e seus custos muitas vezes inviabilizam o projeto. Hospedar uma WebAR é uma tarefa relativamente simples, a aplicação WebAR é um site estático, toda a experiência acontece no navegador. O ponto de atenção aqui é a implementação do protocolo HTTPS do lado do servidor, pois só assim o navegador identifica sua aplicação como um site seguro e permite acesso à câmera dos dispositivos. Geralmente, ao hospedar uma aplicação, os servidores disponibilizam um endereço temporário mas não permitem a configuração do HTTPS neste endereço e consequentemente a WebAR não funciona. Nesse caso você deve registrar um domínio para sua aplicação ou hospedá-la em um subdiretório de um site que já possua domínio e HTTPS.

Limitações e Particularidades

Cada plataforma possui limitações e particularidades. Antes de escolher a plataforma é preciso verificar se ela oferece suporte aos requisitos exigidos pelo projeto.

• Um exemplo prático é que algumas permitem a inserção de vídeos (como a Unity com ARJs-Unity) e outras não. A distância máxima para reconhecimento de marcadores pode mudar, no Zappar, por exemplo, a distância máxima é o dobro do tamanho do marcador, já com a combinação de Unity e ARWT é possível fazer uma boa leitura com até 1,5 metros de distância como um marcador de 25 cm.

• Um ponto importante a se levar em consideração são os navegadores no ambiente mobile. O navegador não tem a mesma integração com o sistema operacional que uma aplicação nativa teria, o que pode limitar acesso a hardware e serviços do dispositivo.

• Não é possível exibir a página fullscreen automaticamente, para isso é necessário implementar um javascript que faça isso a partir de uma interação do usuário, embora haja navegadores que não implementam a Fullscreen Api do javascript, como o Safari(IOS) por exemplo.

Os marcadores que são utilizados como gatilho para o início da realidade aumentada também podem representar um grande desafio no projeto. Se forem muito pequenos podem dificultar o reconhecimento, a distância que a câmera consegue fazer o reconhecimento varia muito de uma plataforma para a outra e pode ser impactado por outros fatores como iluminação do ambiente.

Esses são apenas alguns exemplos que nos deparamos no dia-a-dia. Durante o desenvolvimento de cada projeto podem surgir situações específicas e para cada uma delas devemos propor uma solução diferente tendo em vista sempre o melhor resultado.

Formas de acessar e “rodar” a realidade aumentada.

Na prática, grande parte das experiências WebAR são projetadas para dispositivos portáteis como smartphones e tablets. Geralmente disponibiliza-se um QR Code com o endereço da aplicação na web para conduzir o usuário de uma forma rápida e prática.

Ao acessar a aplicação é comum exibir uma página inicial dando boas vindas e/ou trazendo orientações sobre a navegação na experiência. Através de uma ação do usuário, um toque na tela ou um toque em algum elemento específico, como um botão por exemplo,  o usuário é direcionado para a página que contém a WebAR. Nesse momento o navegador apresenta uma solicitação de acesso à câmera do dispositivo, uma vez concedida, o navegador passa a ter acesso a câmera, que é acionada no mesmo instante. Com a câmera acionada existem algumas maneiras de “startar” a realidade aumentada.

Os elementos gráficos podem ser renderizados das seguintes formas:

• Assim que a câmera do dispositivo é acionada;

• Após uma interação do usuário, um toque na tela ou um toque em algum elemento gráfico específico.

• Em uma posição geográfica específica, nesse caso, além da câmera faz-se o uso do GPS do dispositivo.

• A partir de reconhecimento facial

• Quando a câmera identifica uma imagem específica no ambiente. Essa imagem é previamente configurada na aplicação, quando a câmera reconhece a imagem no cenário os elementos gráficos digitais são renderizados. Essa imagem é usualmente referida como marker, target ou trigger (marcador, alvo ou gatilho em português).

WebAR com marcadores (markers, targets, triggers).

Cada plataforma tem suas particularidades sobre experiências com marcadores. Cada documentação deve conter as orientações sobre as melhores práticas na criação de marcadores personalizados. Traremos aqui um apanhado sobre o que há em comum entre elas.

Marcadores 2D x 3D: Grande parte das plataformas funciona apenas com marcadores 2D. O marcador 2D pode ser fixado em uma superfície plana ou curva de uma objeto real.

Forma do marcador: O marcador é criado a partir de uma imagem. A imagem deve ser assimétrica, ou seja, não deve formar padrões que se repetem continuamente, como um xadrez ou um mosaico, por exemplo.

Desafios da Realidade Aumentada - Marcadores

O reconhecimento da imagem pela câmera é baseado em quinas, curvas e contrastes, quanto mais disso houver na imagem mais eficaz é o reconhecimento. Cada imagem possui um conjunto de características que funcionam como uma impressão digital. Na imagem a seguir os pontos amarelos representam o conjunto de detalhes que a câmera deve reconhecer.

Desafios da Realidade Aumentada - Reconhecimento das imagens.

Outro ponto é que grande parte das plataformas funcionam apenas com imagens de dimensões muito próximas. Isso significa que a imagem deve formar um quadrado ou, no máximo, um retângulo modesto. Imagens que possuem medidas de largura e altura distantes entre si não serão reconhecidas pela câmera.

Qualidade da impressão: Use marcadores com uma boa impressão, de preferência a papel fotográfico. Durante a fase de desenvolvimento é comum vermos o uso de marcadores diretamente da tela dos monitores pela praticidade, mas esta não é uma boa prática já que o reconhecimento fica prejudicado devido ao brilho e outros aspectos relacionados ao display.

Dimensões x Distância de leitura: O tamanho do marcador é diretamente proporcional à distância de leitura para reconhecimento. A câmera deve enquadrar a imagem por inteiro, sem cortes e quão maior a distância maior deve ser o marcador. Se um projeto busca criar uma experiência em ambientes amplos, com grandes distâncias entre câmera e marcador, este deve ser grande o suficiente preservando a qualidade de impressão. Na prática, 1,50m já pode ser considerado uma grande distância, à essa distância algumas plataformas não conseguem gerar uma aplicação que consiga reconhecer um marcador com menos de 80cm. Em algumas plataformas foi possível constatar que a 1,50m de distância é possível fazer uma boa leitura de marcadores de 25cm em diante. Nessas situações é preciso avaliar se a WebAR com marcadores é realmente a melhor opção

Tremores/Oscilações no objetos 3D: Os modelos 3D podem apresentar oscilações no seu posicionamento  se a câmera não for capaz de reconhecer o marcador de forma constante e consistente. Ainda não é possível emular uma experiência com marcadores onde não haja tremores em nenhum momento, mas seguindo as recomendações é possível mitigar esse efeito  a ponto de torná-lo imperceptível.

Qualidade da câmera e Iluminação: A qualidade da câmera do dispositivo e a iluminação do ambiente do mundo real tem relação direta com a qualidade do reconhecimento do marcador e da renderização dos objetos em tela.

Tudo que foi apresentado até  aqui compõem um quadro de  fatores de extrema importância que devem ser levados em consideração na hora de projetar uma aplicação WebAR. O suporte de uma equipe especializada e experiente é muito bem vindo e crucial para seu projeto atingir e superar os resultados esperados.

Se você tem um desafio em Realidade aumentada a 10i9 poderá ajudá-lo.

Nossa equipe é altamente qualificada e preparada para superar desafios através de soluções tecnológicas. Criamos produtos verdadeiramente competitivos e de grande impacto no mercado.

Somos especializados em soluções de Realidade Aumentada, Aplicações Móveis, Sistemas Customizados, Big Data, Cloud Computing e Serviços de hospedagem profissional

Quer saber mais? Acesse 10i9