Realidade Aumentada para as marcas sem precisar criar um aplicativo
Por décadas, clientes e marcas nos procuram com a seguinte (e ótima) provocação: “Vamos fazer algo com realidade aumentada? Como funciona?”.
Após explicar o potencial da tecnologia e todas as coisas legais que é possível fazer, a mesma resposta se repete: “putz, o usuário precisa baixar um app, então? Não tem outro jeito? Nem no Facebook?”. E nisso a maioria das ideias morrem, ou ficam “para depois”.
Por muitos anos esta foi a realidade: um perpétuo processo para mostrar o quão interessante a realidade aumentada pode ser, e o quão onerosa ela é para o usuário final, mas isto vem mudando. E rápido.
Recentemente, vivenciamos um renascimento da realidade aumentada, com muitas empresas e tecnologias promovendo uma nova onda de popularidade para a área.
Tecnologias como Microsoft Holo Lens e ArKit da Apple mostram investir cada vez mais na tecnologia. Os gigantes da tecnologia estão tratando a realidade aumentada como um dos main selling points de seus dispositivos.
Ainda assim, a principal barreira para o uso da Realidade Aumentada continua existindo: a necessidade de instalar um aplicativo extra. Um panorama que finalmente está mudando, com a criação do Facebook Filters, por exemplo, que disponibilizou sua ferramenta de criação para a comunidade.
Hoje, com o Facebook AR Filters, não é necessário instalar um aplicativo extra para oferecer experiências complexas em Realidade Aumentada para o usuário.
Neste artigo, irei mostrar a fundo as principais possibilidades do Facebook Filters, como é o processo de publicação de um filtro e como se faz para que os mesmos atinjam o maior publico possível.
Mas antes, vamos relembrar brevemente a trajetória da Realidade Aumentada até os dias de hoje.
Breve história da Realidade Aumentada
Para quem não sabe, pesquisas no ramo da Realidade Aumentada começaram há muito tempo. Olha o que o pesquisador Ivan Sutherland estava fazendo já em 1968 (!):
Avançando um bocado no tempo, tivemos o período dos marcadores de Realidade Aumentada. Feios, ocupavam um bocado de espaço em embalagens ou revistas, o que tornava muito difícil a hora de justificar o investimento para o cliente:
Pouco depois, surgiram tecnologias de leitura de imagens (sem necessidade de marcadores preto e branco).
Agora, não é nem preciso mais marcadores. É possível posicionar elementos em superfícies planas no ambiente.
Hoje esse é o panorama das principais tecnologias de RA. Aqui, alguns dos maiores nomes no mundo da tecnologia:
Este breve histórico, mostra como 2017 foi um ano muito importante, fazendo a RA atingir um público potencial muito maior do que em qualquer momento anterior.
Mais importante ainda, mostra que com a adição do Facebook AR Filters, finalmente não precisamos de um aplicativo extra, permitindo que milhões de usuários tenham acesso imediato.
Facebook AR Filters e ARStudio
O Facebook ARStudio é um software gratuito, que pode ser obtido pelo seguinte link:
Sem entrar tanto em detalhes técnicos, a interface lembra a de um software de edição 3D simplificado, com a imagem da câmera sendo captada e projetada em tempo real, permitindo ao usuário posicionar elementos 3D e interagir facilmente.
Sem mais delongas, é chegada a hora de dissecar as principais features do ARStudio.
Tipos de filtros disponíveis:
- Molduras (elementos 2D sobre a imagem)
- Realidade Aumentada (elementos 3D interagindo com a câmera)
Face tracking
Feature mais óbvia e conhecida. Permite identificar a posição e orientação do rosto do usuário.
A ferramenta suporta tanto modelos 3D simples/cartunescos, quanto elementos mais realistas e complexos. No exemplo abaixo, usamos um modelo 3D com textura animada.
Detecção de múltiplos rostos
É possível identificar mais de um rosto ao mesmo tempo e tratar estes casos de maneira diferente, ou seja, é possível criar cenários de interações e visualização diferentes dependendo do número de pessoas na frente da câmera.
Por exemplo, em uma ação de Dia dos Namorados, seria possível definir que, com uma única pessoa na frente da câmera, um óculos 3D no formato de coração apareça no rosto do usuário, mas se duas pessoas estiverem no frame, duas metades de corações aparecerão e o casal será convidado a unir os rostos.
Pontos de detecção
Os seguintes pontos do rosto podem ser trackeados individualmente (sendo que é possível posicionar elementos 3D em cada um deles):
- Boca
- Nariz
- Queixo
- Testa
- Bochechas
- Olhos
- Sobrancelhas
Com este nível de precisão, podemos inclusive tentar ir além e colocar (por aproximação) elementos em pontos não trackeados, como cílios (neste caso usamos aproximação pela posição dos olhos):
Triggers
Enquanto detecta o rosto do usuário, o sistema constantemente observa mudanças de movimento e expressões faciais do usuário. Estas mudanças podem ser usadas para executar diversas interações no filtro.
Marcados em verde, estão os triggers relacionados com o rosto do usuário.
Também é possível observar que podemos capturar toques de tela e outros gestos comuns como pinch, pan, etc.
Triggers nos permitem, por exemplo, tocar animações que acompanham movimentos da boca do usuário.
Hand Tracking
ARStudio também possui tracking de mão (no caso palma da mão). No vídeo abaixo é possível ver que a precisão é um pouco baixa, bem menos confiável que o tracking facial.
Mesmo com precisão baixa, ainda é possível usar esta identificação para outros meios, por exemplo, trocar o modelo 3D no rosto da pessoa sempre que mostrar a palma da mão, como uma forma alternativa de input.
Device Motion
É possível obter os dados de giroscópio e acelerômetro do dispositivo, o que permite ativar elementos ou animações de acordo com movimentos do celular do usuário. Ex: um filtro que peça para o usuário se movimentar.
Chroma Key
As features de segmentação (remoção do fundo da imagem), permitem a criação de efeitos parecidos com o Chroma Key, permitindo a criação de filtros onde o usuário é transportado para outros ambientes.
Face Mesh (máscaras)
Além de modelos 3D, é possível retexturizar o rosto do usuário aplicando “máscaras” 3D sobre o rosto.
Um bom exemplo é o filtro criado durante a Copa do Mundo, que aplicava as cores das bandeiras de diferentes países no rosto dos usuários.
Em linhas gerais (na maioria dos casos), para criar uma destas máscaras basta criar uma textura (imagem) a inserir no ARStudio.
Esta textura nada mais é do que uma imagem, com um formato semelhante a este:
Esta imagem serve como referência para o desenho das máscaras, marcando as posições a serem desenhadas. Para exemplificar melhor como isto funciona, criamos um filtro de batom vermelho:
Para atingir este objetivo, criamos uma máscara que é apenas o batom:
A partir deste exemplo, é fácil imaginar que é possível fazer todo tipo de ilustração ou simulações de maquiagem com certa facilidade.
Outras características das Face Masks:
- O nível de transparência da máscara é controlável, podendo ser completamente opaca ou quase totalmente transparente.
- A aplicação também pode ser feita nos modos add e multiply.
- Existe configuração pronta para branquear os dentes.
- É possível esconder os olhos e a boca, fazendo a máscara substituir o rosto original completamente.
Face Mesh — Deformações
É possível deformar (usando aplicativo de edição 3D externo) a malha 3D da Face mask. No exemplo abaixo, a malha 3D é deformada para aumentar o peso da boca e encurtar o topo da cabeça.
O resultado é parecido com este:
Extração de rosto
Usando Face Mesh, é possível “extrair” o rosto do usuário e reposicioná-lo em outros pontos da tela, ainda permitindo as mesmas manipulações de cor.
Este vídeo mostra alguns exemplos de extração e reposicionamento do rosto, além de outros bons exemplos de máscaras em geral.
Isto permite criar filtros que substituam o rosto de celebridades pelo do usuário, fazendo-o vivenciar momentos de filmes ou de vídeos de campanhas publicitárias (ótima forma de permitir que clientes interajam com vídeos de campanhas).
Plane Tracker
É possível trackear superfícies planas e posicionar elementos 3D da mesma forma que no ARKit da Apple.
Image plane tracker
Além de planos genéricos (chão, mesa, etc), é possível trackear imagens específicas, como embalagens de produtos, cartazes, revistas, etc.
Observações:
- Um tracker por filtro no máximo.
- A imagem precisa ter um ótimo contraste.
- Transparências causam muitos problemas de leitura.
Para criar experiências ativadas pela detecção de produtos, é importante evitar qualquer produto com transparências, além de uma área plana para leitura com traços de contraste forte. Abaixo temos umexemplo de produto que não pode ser lido (transparente) e outros dois que tem características que facilitam a leitura.
Linguagem de script
Vimos como é possível trackear diversas partes do corpo, rosto, ambientes e criar máscaras, mas é possível fazer muito mais através da linguagem de script que é fornecida (perfeita para quem tem familiaridade com Javascript).
Scripts ampliam muito o potencial para interações complexas, permitindo:
- Inserção de lógicas complexas: criação de games e quizzes.
- Interface interativa (Ex: seleção de maquiagem, etc).
- Também é possível conectar em um servidor e obter dados da internet. Por exemplo, é possível obter dados de tempo e clima e usar essa informação para alterar o visual do filtro ou mostrar uma nuvem de hashtags atualizada em tempo real.
Seguem abaixo alguns exemplos de interações complexas que podem ser criadas.
Processo de publicação
Com o filtro pronto e testado, é hora de publicar para o mundo! O processo é bastante simples. Existe um manager de publicações e gerenciamento de filtros em: https://www.facebook.com/fbcameraeffects/manage/
Basta subir um pacote (que é gerado pelo próprio ARStudio), preencher dados de ícone, descrição, tags, fazer um vídeo do filtro sendo usado e mandar para aprovação.
Também é possível liberar o filtro apenas em algumas regiões, usando geofencing (bem útil para filtros com linguagem mais específica para determinadas regiões como Face Masks de times de futebol):
O tempo de aprovação dos filtros é de até uma semana.
Mas aprovar um filtro é apenas uma pequena parte da equação, considerando que estamos falando de marcas/agências que precisam garantir que o mesmo fique popular.
Impulsionando filtros
Assim que um filtro é publicado e aprovado, um link se torna disponível para compartilhamento.
O link pode ser compartilhado em qualquer rede social ou ser aplicado em peças de mídia. Ao ser selecionado, o link automaticamente abre o aplicativo do Facebook com o filtro já selecionado. Este é o formato do link:
Ter um link direto para o filtro é ótimo mas, como fazer que o filtro apareça na lista geral de filtros do Facebook?
A lista é formada de forma orgânica, dependendo muito da popularidade dos filtros. Para influenciar o posicionamento (a simples presença) do filtro na mesma, é necessário popularizá-lo através do link direto, mídia ou convencendo influenciadores em redes sociais a utilizarem.
Portanto, um lançamento de filtro como parte de uma caminha (ou peça principal da mesma), consiste em:
- distribuir o link direto através de peças de mídia
- contratar ou enviar o link para influenciadores
- postar imagens feitos com o filtro da fanpage da marca
Isto irá gerar fluxo que deve ser suficiente para fazer o filtro ficar cada vez melhor ranqueado na lista.
Considerações Finais
Agora é só pensar na próxima grande ideia de filtro e lançar para o grande público.
Caso tenha interesse em aprender a fazer alguns filtros por conta própria ou repassar conhecimento para sua equipe técnica, seguem alguns links para começar:
Quick Start: https://developers.facebook.com/docs/ar-studio/tutorials/quick-start-guide/
