Acesso rápido

Realidade aumentada para e-commerce: um exemplo prático!

por Sidney Jhony Dias da Silva Quinta-feira, 19 de julho de 2018   Tempo de leitura: 7 minutos

Antes de falar sobre realidade aumentada para web, vamos lembrar sobre os conceitos de realidade aumentada (AR) e realidade virtual (VR).

Apesar das pessoas confundirem as duas tecnologias – nas quais a principal semelhança é misturar o mundo físico ao digital – essas tecnologias são diferentes.

Na realidade virtual, o usuário está inserido em um ambiente 3D usando de óculos, câmeras, fones etc. A realidade virtual pode ser inserida em várias áreas: medicina, educação, entretenimento, arqueologia, treinamento (simuladores de vôo), entre outras. No exemplo abaixo um jogo onde o usuário está imersivo no mundo virtual.

O indivíduo está sentado em casa e está fazendo o mergulho autônomo usando o dispositivo montado na cabeça para a realidade virtual.

Na realidade aumentada inserimos elementos do mundo digital no mundo físico através de smartphones ou alguma tela. Um exemplo claro de realidade aumentada é o Google Glass: o óculos do Google exibe informações digitais na sua tela. Abaixo, na imagem, o jogo Pokemón Go, atualmente um grande exemplo de realidade aumenta.

Ilustração plana de pessoas usando smartphones para pegar Pokemons no parque. Mão humana detém um smartphone com app pokemon para jogar jogo de realidade aumentada.

Agora que sabemos as principais semelhanças e diferenças entre realidade aumentada e realidade virtual, vamos focar na realidade aumentada para web.

Com a evolução do canvas no HTML 5 (páginas da internet são basicamente a renderização do código HTML) vários navegadores dão suporte a API javascript WebGL. Para simplificar, a WebGL é uma biblioteca que renderiza gráficos 2D e 3D sem a necessidade de instalação de plugins nos navegadores. Hoje em dia, existem várias bibliotecas baseadas na WebGL que permitem o uso da câmera, do áudio e de diversos outros recursos disponíveis nos navegadores mais modernos.

Sendo assim, não precisamos instalar aplicativos e muito menos utilizar QR-Code para criar realidade aumentada. Precisamos apenas de um navegador (Chrome, Firefox, Internet Explorer).

Vamos a prática: para implementar uma aplicação, você precisa apenas de um conhecimento básio de HTML.

Na nossa aplicação, utilizaremos a biblioteca javascript mais famosa para criar a nossa realidade aumentada:

AR.js, no link existem vários exemplos do que é possível desenvolver.

Vamos utilizar apenas uma imagem, que quando acessarmos o link jhonyxf.github.io será solicitado permitir ativar a câmera e no momento que apontarmos a câmera para a imagem, a aplicação vai exibir uma promoção em realidade aumentada.

ATENÇÃO: para quem quiser praticar, ou estudar sobre o AR, a aplicação deve estar em uma página “https”. Por esse motivo, utilizei o Github pages que já fornece a página em “https”.

GitHub Pages é um serviço de hospedagem gratuito para sites estáticos. Com ele é possível publicar sites direto de um repositório no GitHub.

Sites estáticos são aqueles que não necessitam de nenhum processamento server side de linguagens de programação, ou seja, são escritos apenas com HTML, JavaScript e CSS, por exemplo.

1º passo: criar a imagem para leitura da realidade aumentada

Basicamente, a imagem é semelhante os QR-Code. Deve estar dentro de um quadrado preto e fundo branco e com códigos formando uma imagem. Para facilitar a aplicação, vamos utilizar um gerador de imagens. Segue o link: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Com o link aberto, faça o upload da imagem e depois clique em “Download Maker”. O download do arquivo “pattern-marker.patt” será realizado. Esse arquivo que vamos utilizar na nossa aplicação para reconhecer a imagem gerada.

Faça também o download da imagem customizada (opções de download: .jpg e .pdf).

Dica: utilize uma imagem em preto e branco e que não contenha textos. Assim será mais fácil a aplicação ler a imagem.

Curiosidade: abra o arquivo “pattern-marker.patt”. Você verá que o desenho da imagem foi gerado entre os códigos numéricos.

Vamos utilizar apenas uma imagem, que quando acessarmos o link https:jhonyxf.io será solicitado permitir ativar a câmera e no momento que apontarmos a câmera para a imagem abaixo será exibido nossa imagem em realidade aumentada.

Para esse exemplo gerei a imagem abaixo (logomarca eFácil):

2º passo: criar nosso código HTML

Criei um arquivo index.html e inseri o código abaixo, comentei as linhas para ficar fácil o entendimento da estrutura e o que o código faz.

Observação: em um arquivo HTML, tudo que está entre “<!–   meu comentário –>” é um comentário que não será exibido na página.

<!DOCTYPE html>

<!– Importei as bibliotecas para utilizar a Realidade Aumentada –>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js”></script>

<script src=”https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js”></script>

<!– Arquivo css inline para ocultar o modo debug que vem na própria biblioteca –>

<style type=”text/css”>

#arjsDebugUIContainer

{

display: none; !important;

}

.a-enter-vr-button

{

display: none; !important;

}

</style>

<body>

    <!– Insiro a tag <a-scene>, é responsável por criar o cenário, toda estrutura deve estar dentro dela –>

    <a-scene>

        <!– importo o arquivo pattern-marker.patt, responsável por comparar nossa imagem, tudo o que estiver na entidade câmera será exibido quando apontar a câmera para a imagem gerada –>

        <a-marker-camera preset=’custom’ type=’pattern’ url=’big-m.patt’>

            <!– Insiro uma imagem que será mostrada, configurações: posição, rotação e tamanho da imagem –>

            <a-image position=”0 0.2 0″ rotation=”270 0 0″ height=”1″ width=”1″ src=”imagem1.png”></a-image>

            <!– Insiro uma imagem que será mostrada, configurações: posição, rotação e tamanho da imagem –>

            <a-image position=”0 0.4 0″ rotation=”270 0 0″ height=”1″ width=”1″ src=”imagem2.png”></a-image>

        </a-marker-camera>

            <a-entity camera></a-entity>

    </a-scene>

</body>

</html>

Pronto! Já temos nossa página HTML criada, precisamos apenas hospedar em um servidor https. No exemplo, eu utilizei o Github Pages para hospedar minha página jhonyxf.github.io.

Acesse a minha página jhonyxf.github.io, ative a câmera e aponte para a imagem. Você vai visualizar uma imagem em realidade aumentada.

Esse foi apenas um exemplo simples, mas você pode atingir seu consumidor de diversas formas com realidade aumentada para web. Alguns exemplos:

  • exibir vídeo como montar um produto;
  • visualizar produtos em um ambiente;
  • interação com campanhas offline (folhetos, flyers, brindes, etc).

Espero que tenham gostado, comentem idéias e sugestões para utilizar a realidade aumentada no e-commerce.

Você recomendaria esse artigo para um amigo?

Nunca

 

Com certeza

 

Deixe seu comentário

1 comentário

Comentários

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

O projeto E-Commerce Brasil é mantido pelas empresas:

Oferecimento:
Hospedado por: Dialhost Transmissão de Webinars: Recrutamento & Seleção: Dialhost Métricas & Analytics: MetricasBoss

  Assine nossa Newsletter

Fique por dentro de todas as novidades, eventos, cursos, conteúdos exclusivos e muito mais.

Obrigado!

Você está inscrito em nossa Newsletter. Enviaremos, periodicamente, novidades e conteúdos relevantes para o seu negócio.

Não se preocupe, também detestamos spam.