Realidade Aumentada: crie um Business Card interativo utilizando Mind AR e A-frame JS.
Blog, Pitang.
Pitang Labs
Realidade Aumentada: crie um Business Card interativo utilizando Mind AR e A-frame JS.
Desenvolvimento
Está no ar o Intervalo Técnico sobre Realidade Aumentada!
A seguir, o tutorial da criação do Business Card em formato de texto:
O que é Mind-AR e A-Frame?
O A-Frame é um framework que permite a elaboração de cenas virtuais através de HTML, permitindo a criação de experiências de realidade aumentada (RA) e realidade virtual (VR), provendo acesso total à API do three.js.
O MindAR é uma biblioteca Javascript Open Source de realidade aumentada (RA) para web, que suporta rastreamento de imagem e rastreamento de rosto, utilizando a gpu (através do webgl) e web worker para aumentar o desempenho.
Configuração inicial
Para esse projeto precisaremos de um index.html que conterá o código principal da aplicação para a construção e exibição da cena virtual. Além disso, serão necessários alguns recursos gráficos, como o target e os elementos virtuais que farão parte da experiência de RA. Desse modo, estruturamos o diretório da seguinte forma:
Criando o target
Criaremos o cartão de visitas que servirá como gatilho para a exibição dos conteúdos interativos da nossa aplicação. É importante, quando estiver fazendo o seu, levar em consideração aspectos que garantam o máximo de feature points possíveis, que permitam maior precisão durante a detecção e rastreamento do alvo em tempo real. O MindAR fornece algumas dicas para que você possa fazer o design ou escolher imagens com esse propósito. Disponibilizamos o seguinte template canvas que iremos utilizar:
Figura 1: Cartão de Visita.
Faremos uso do Image Targets Compiler para transformar o Cartão de Visitas em um target. Essa compilação retornará um arquivo targets.mind que armazena os dados das características (features points) em formato compacto. Salve a imagem do seu cartão de visita no formato PNG e o arquivo compilado na pasta targets.
Figura 2: Pontos de características no Target
No index.html, precisaremos importar três bibliotecas que irão permitir a implementação da aplicação usando o MindAR em conjunto com o A-frame. Para importar por meio de CDN, adicione no head do seu index.html: mindar-image.prod.js, mindar-image-aframe.prod.js e aframe.min.js. Então o código inicial poderá estar dessa forma:
<title>My Business Card - Jane Doe</title> </head>
<body> </body> </html>
Criando a cena
Iniciaremos criando a cena, a a-scene, que é o objeto global da nossa aplicação. Nela iremos especificar algumas propriedades conforme a documentação do MindAR e também adicionar todos os elementos que irão compor o cenário.
mindar-image: para especificar o caminho para o target compilado.
color-space e renderer: são duas propriedades opcionais que garantem uma maior qualidade na renderização dos elementos gráficos.
vr-mode-ui: será inserido para desabilitar o botão que permite acessar a experiência de realidade virtual.
device-orientation-permission-ui: será desabilitado para não exibir diálogos que solicitam acesso à alguns eventos relacionados à orientação do dispositivo.
Adicionando elementos na cena
Dentro de a-scene, importaremos os nossos assets através da tag a-assets. Nela podemos colocar imagens, objetos 3D, áudio e vídeos. Para cada elemento importado, devemos indicar um ID único, que é a forma como esse elemento será referenciado mais adiante e o atributo src que conterá o caminho para o item, conforme os exemplos abaixo.
Como iremos inserir imagens na nossa aplicação, precisaremos da tag img. Vamos colocar o nosso primeiro conteúdo que é a imagem do cartão de visitas que você criou.
Para que possamos exibir o nosso primeiro conteúdo, precisamos da tag a-entity que possibilitará a inserção dos componentes que fornecerão aparência, comportamento e funcionalidades.
Como atributo da tag, precisamos especificar o caminho para o target que precisa ser detectado e rastreado em tempo real. Isso é feito através da propriedade mindar-image-target="targetIndex: 0". O targetIndex: 0, indica o índice da imagem compilada.
Informação: É possível compilar mais de uma imagem em conjunto. Neste caso, os targets serão referenciados considerando a ordem em que as imagens foram posicionadas no image targets compiler.
<a-entity mindar-image-target="targetIndex: 0" >
</a-entity>
Dentro de a-entity, colocamos o conteúdo que queremos exibir. Por ser apenas uma imagem, usando a tag a-image e especificamos os seguintes atributos:
id: identificação única do elemento
position: considerando as coordenadas x, y, z, podemos posicionar a imagem no centro com os valores 0, 0, 0.
height: altura da imagem
width: largura da imagem. Sempre que colocamos 1, estamos indicando que é para considerar a largura do target no ambiente real.
src: identificador do item que foi carregado na tag a-assets.
Vamos executá-lo utilizando o Live Server no seu VS Code. Após instalar a extensão, clique com o botão direito do mouse sobre o arquivo index.html, e selecione a opção Open with Live Server, que a página web será inicializada.
Figura 3: Exemplo de como usar o Live Server.
Adicionando interações
Podemos começar a colocar o restante dos itens no a-assets. Para isso, baixe esses ícones e coloque na pasta icons e insira uma foto sua, de preferência, com dimensões 980 x 980, na pasta profile. Você pode usar o nosso template canvas para colocar a imagem conforme o design proposto por essa aplicação.
Após importar os elementos no a-assets, organizaremos melhor o nosso código, colocando a imagem do cartão de visitas e a foto agrupadas em uma a-entity. No código, ajustamos o posicionamento, altura, largura e escala das imagens para corresponder ao design elaborado.
Dica: Caso você queira ajustar visualmente alguns parâmetros, é possível usar a ferramenta de inspector do A-Frame através do atalho <ctrl> + <alt> + i.
Figura 4: Inspector do A-Frame
Vamos em seguida, inserir uma a-entity contendo cinco tags a-image referentes aos botões dos sites e redes sociais. Experimentalmente, ajustamos os posicionamentos de todos os botões e da entidade que os mantém agrupados, conforme o código abaixo.
Opcionalmente, inserimos uma animação através da propriedade animation. A animação acontece aumentando o tamanho dos ícones em uma direção alternada. Para mais informações e customizações consulte a documentação oficial do A-frame.
A escala aumenta e diminui levemente, mas, para exemplificarmos de maneira clara como a animação ocorre, ajustamos um dos ícones para uma maior escala conforme o gif abaixo.
Figura 5: Animação nos botões
Após adicionarmos os botões na cena, precisamos permitir as interações, através do clique. Para isso, devemos inserir as propriedades cursor e raycaster na tag a-camera.
Em raycaster, especificamos que todos os objetos com a classe .clickable, serão clicáveis. Logo, para todos os ícones, devemos adicionar o seguinte atributo class=”clickable”.
Para permitir a interatividade, o raycaster gera uma linha a partir do local em que o usuário clicar até a cena. Dessa forma, se algum objeto interativo, ou seja, que possui a classe .cliclable, ficar no caminho da linha, o evento de click será disparado.
Agora precisamos criar o script que adiciona os comportamentos decorrentes do click nos botões. Para isso, vamos importar o arquivo index.js no head do index.html da seguinte forma:
O atributo defer impedirá que o script seja executado até que a página HTML esteja pronta.
No arquivo javascript, precisamos “escutar” os eventos de click para cada botão. Para selecionar os elementos, podemos utilizar o método document.querySelector(), especificando o id que corresponde a cada um dos objetos, conforme o código abaixo.
Após selecionarmos os elementos, podemos inserir os eventos de click usando o método addEventListener(). No método precisamos implementar a função que será executada quando este evento for disparado. Na nossa aplicação, cada um dos botões abrirá uma página web específica em uma nova janela ou tab. Coloque a URL de suas contas e páginas web.
Para customizarmos a nossa aplicação, podemos inserir, opcionalmente, um scanner customizado conforme o exemplo disponibilizado pela biblioteca MindAR.
Figura 6: Scanner customizado do MindAR.
Para tal, coloque o código abaixo no body do seu index.html e na tag img, especifique o caminho para a imagem do cartão de visitas.
Se formos executar a aplicação, podemos observar em alguns momentos, tremores nos elementos. Este é considerado um problema comum em aplicações de RA, devido a alguns fatores como ruídos provenientes da câmera.
Figura 7: Elementos com tremores
Para solucionar este problema podemos ajustar os parâmetros filterMinCF e filterBeta. Informações técnicas podem ser consultadas na documentação oficial do MindAR. Mas, de modo geral, ao diminuir o valor de filterMinCF estamos reduzindo os tremores (jitter) e ao aumentar o valor de filterBeta, estamos reduzindo o delay.
Os valores padrões de filterMinCF e filterBeta são 0.001 e 1000. Experimentalmente, alteramos esses valores no atributo mindar-image, com o objetivo de reduzir os tremores sem aumentar tanto o delay.
Podemos observar através do gif a seguir, que os tremores foram reduzidos substancialmente, garantindo uma experiência de usuário mais adequada.
Figura 8: Elementos com redução dos tremores.
Ao final, seu projeto completo poderá estar semelhante aos códigos presentes nesse repositório.
Deploy
Para finalizar o nosso tutorial, faremos o deploy na ferramenta Vercel, através dos seguintes passos:
Crie um repositório no seu github para colocar o seu código;
Faça o cadastro no Vercel, de preferência com a sua conta do Github;
Crie um novo projeto no Vercel;
4. Importe a sua conta do Github
5. Você pode dar acesso a todos os repositórios ou apenas ao que você acabou de criar;
6. Após instalar e selecionar o repositório, clique no botão Import;
7. Caso queira, altere o nome do projeto, em seguida, selecione a opção de deploy e aguarde.
8. Uma nova página será aberta, informando que o deploy foi realizado com sucesso.
9. Clique na janela em branco para abrir o site ou aperte no botão de Go to Dashboard para visualizar o status, domínios, etc.
10. No seu cartão de visitas, altere jane.com/card para a URL gerada pelo Vercel. Em seguida, refaça o procedimento de compilação do target com a imagem nova e substitua no seu projeto.
11. Por fim, realize o push no github e aguarde, que o Vercel irá alterar a página com as novas atualizações.
