Instagram & Realidade Aumentada - Um tutorial

Quem me conhece bem sabe que não sou o maior fã do Instagram. Na realidade, fazem alguns anos que tento me afastar, com certo insucesso, das redes sociais em geral. Tenho de fato diversas críticas sobre como o modelo de negócios dessas empresas foi formado e acho que isso pode ser o assunto de um outro post no futuro. No momento, vou ignorar tudo isso e falar de algo um pouco mais especifico. 

A tecnologia em si dessa rede social não é muito diferente do que já vimos em outras. O meu foco aqui é em uma característica especifica do Instagram: os filtros. Para aqueles, que assim como eu, estão um pouco por fora da rede social, vou explicar do meu jeito o que é: basta abrir o app do Instagram e tocar o desenho de uma câmera fotográfica no canto esquerdo superior (é possível acessar também deslizando o dedo para direita), lá você ira ver um círculo, que é o botão para bater a foto, e do lado os tais filtros que eu falei.

Mas o que eles fazem? Basicamente alteram a imagem que a câmera está capturando utilizando técnicas de processamento de imagens para rastrear seu rosto, massa não é? O que acho mais interessante é que introduziram recentemente algumas outras ferramentas de realidade aumentada que permite projetar desenhos 3D no ambiente em que a pessoa está. Isso é tecnologia de ponta nas mãos do grande público. 

Para que vocês tenham uma ideia, a primeira menção de um sistema de realidade aumentada do tipo foi de L. Frank Baum em 1901. E o primeiro dispositivo capaz de realizar isso só foi construído na década de 60, por Morton Heilig e Ivan Sutherland. Hoje, qualquer celular com Instagram (e giroscópio) consegue essa mágica. Imagine: um aparelho na sua mão capaz de gerar desenhos 3D sobre o seu rosto que se mesclam com a vida real, sonho não é?

Apesar do pouco contato com a rede acabei recebendo um pedido inusitado recentemente: minha namorada queria que eu a ajudasse a criar um filtro. Oi? Bom, preciso dizer que depois de uma longa conversa ela me convenceu... fiquei um tanto fascinado pela ideia. Vou tentar resumir o pouquinho que aprendi...

Assim como comentei aqui no primeiro post, aprender a programar é algo que exige algum tempo e algum suor. Ao procurar por informações sobre filtros encontrei pouquíssimo conteúdo em português e diversos obstáculos. O primeiro: como performar esse milagre? Depois de muitas ajudas do Goole cheguei ao software que realiza a tarefa, o Spark AR Studio. Agora, segundo passo, como usa isso? Achei pouquíssimo conteúdo e ainda assim, um dos melhores que encontres, se referia a versão 68! Para vocês terem ideia, o software já está na 82, confira aqui. 

Resolvi então, estudar um pouco mais o assunto, sair um pouco do mundo das ideias e criar um passo-a-passo em português para ajudar os aventureiros de plantão como eu! Vamos lá:

1 - Antes de tudo, como está o seu inglês?

Infelizmente não tem jeito de fugir. Se você engasgar com algum problema, se precisar de alguma ajuda, se procurar algum tutorial, ele estará em inglês. (Exceto por esse aqui e alguns perdidos por ai)

Então se prepare para uma jornada que vai além do mundo de T.I., temos o desafio linguístico. Talvez o maior problema seja algum jargão específico, geralmente os tutoriais são bem diretos com muitas imagens, não se apavore!

2 - Conheça o seu computador

Para rodar o Spark AR Studio é necessário uma máquina "nova" com configurações boas. As especificações em inglês podem ser vistas aqui. Ou abaixo em português:

Sistema operacional: Windows 10 (64 bit) ou MacOS 10.14+. 

- Não adianta tentar rodar no Windows 7 ou 8. O software roda somente no 10, eu juro que tentei...

Processador (CPU): mínimo Intel Core i3 2.5Ghz, ou AMD Bulldozer/Jaguar/Puma/Zen com conjunto de instruções SSE4.1

- Aqui não tem jeito, poder de processamento é chave para aplicações que envolvem imagens e vídeos.

Memória RAM: 4GB.

- Impossível fugir de memórias de acesso rápido para esse tipo de aplicação. Felizmente graças ao Windows que subir a régua, a grande maioria dos notebooks seminovos hoje já vem com essa configuração ou até melhor...

Resolução do monitor: 1280x768 ou maior.

- Acho que isso também é bem padrão em notebooks semi-novos...

Placa de aceleração gráfica (GPU): Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 ou melhor.

- Mas roda em outras placas de video mais tranquilas também... se serve de benchmarking eu consegui rodar bem em uma máquina com 8 Gb de RAM, i5 2.6 GHz e Intel HD Graphics 620.

Está na dúvida qual as configurações do seu micro? Dica de atalho: pressione a tecla com símbolo do Windows e Pause Break simultaneamente para abrir as configurações do sistema (achou que o Pause Break não servia para nada né?)

3 - Hora de começar:

Baixe o Spark AR Studio nesse link pressionando "Download" https://sparkar.facebook.com/ar-studio/download/. Após o download é só seguir as instruções de instalação, basicamente pressionando "Next" até a conclusão das operações (espero que isso não seja um desafio, o desafio vem depois!)

4 - Como criar o filtro:

Finalmente! Ambiente pronto hora de colocarmos a mão na massa. Abaixo você pode deslumbrar a interface do software em toda sua glória visual:

Vou dar algumas voltas ao longo do tutorial para que você tenha chance de experimentar o programa de uma maneira mais "completa".

Clique então em "Makeup", isso irá abrir o sistema de edição do filtro com um projeto de maquiagem já configurado.

Essa será nossa tela principal de trabalho. No canto esquerdo temos o campo "Scene" com os recursos que são obtidos para criação do filtro e alteram a imagem original. No campo "Assets" temos imagens, texturas e desenhos 3D que podem ser utilizados pelos itens do scene. No centro da tela temos uma projeção de onde estaria o celular e um "personagem" que replica o comportamento do usuário. Ele estará se movendo e ajudará a mostrar o comportamento do filtro. Também é demonstrado uma pré-visualização de como seria o filtro no celular. Por fim, no canto direito temos o painel "Properties" onde podemos alterar as configurações de qualquer elemento do canto esquerdo ("Scene" e "Assets").

Clique em "makeup" no canto esquerdo, você verá que do lado direito apareceram diversas configurações das alterações que ele realiza na imagem. Você pode brincar com esses controles para entender como ele afeta a imagem. 

Bom, vamos agora destruir tudo que está pronto. Selecione "facemeshMakeup" e pressione delete, isso irá apagar a malha com maquiagem que é aplicada sobre o rosto capturado pela câmera. Delete "faceMeshRetouch" e isso irá apagar eventuais retoques na imagem, apague "Eyelashes" e você removerá o filtro aplicado sobre a sobrancelha. Apague em "Assets" todos os itens. Você ficará com algo como a imagem abaixo:

Repare que mantive apenas a máquiagem padrão "makeup" comum em muitos filtros e que apenas retira algumas imperfeições da pele. Agora vamos adicionar um texto sobre a cabeça de nosso personagem. Clique em "AddObject" no canto esquerdo na seção "Scene". O menu abaixo irá se abrir:

Role os itens laterais até encontrar "2D Text". Selecione e depois pressione "Insert" para inserir.

Veja que um texto apareceu sobre a imagem do personagem. Selecione no canto esquerdo o texto e você poderá escrever o que deseja no campo lateral direito. Vou escrever: "Exemplo de filtro" mas antes...

Clique em "canvas0" e arraste sobre "Facetracker1" isso irá associar o efeito à instrução que rastreia o rosto do personagem. Selecione "Canvas" e altere o campo "Mode" de "Camera Space" para "Worldspace". Note que o texto agora irá seguir a movimentação do rosto.

Em position altere o valor de "Y" para 0.2 ou 0.3, isso irá tirar o texto da frente do rosto do personagem.

Você pode clicar em "2dtext0" e alterar a cor e o tipo de fonte. Veja o exemplo:

Vamos finalizar por aqui, você pode explorar mais o software se quiser.

Para exportar o arquivo para o Instagram, clique em "File" no canto superior esquerdo e depois em "Export".

Aguarde o sistema compilar o filtro para os formatos diversos de aparelhos e clique em "Export" novamente quando finalizar.

Escolha um local de fácil acesso para exportar o filtro, você vai precisar desse arquivo. Lembre que o formato deve ser *.arexport.

  

Agora vamos colocar isso online!

5 - Como publicar na rede:

Acesse https://www.facebook.com/sparkarhub/, insira seu login do Facebook e senha. Você entrará em um menu similar ao mostrado abaixo. Caso isso não aconteça não se preocupe, o Facebook altera com frequência as páginas de desenvolvedores. A essência é encontrar o botão "Upload Effect" no canto superior direito.

Agora ficou mais fácil, arraste o arquivo "Makeup.arexport para o campo "Effect file". Selecione o Effect destination" como Instagram. Em "effect name" coloque o nome que deseja para o efeito.

Você vai precisar criar uma imagem para representar o seu filtro no Instagram. Você pode criar no paint algo simples nessa dimensão ou pode elaborar algo. Solte a criatividade! Por fim, caso esteja de acordo com os direitos legais de uso das imagens no filtro e os demais termos do Instagram, tique o "Legal Agreement". 

Na próxima tela você terá acesso a um link para enviar e testar o filtro. Compartilhe com os amigos! Ele será limitado a visualização de apenas 50 pessoas. Aqui um exemplo (que pode acabar em breve):

https://www.instagram.com/a/r/?effect_id=1494627967361434&ch=MDViZDE1Zjg0YTM4OTdkNmZiY2UzYTE5NmYwMDUwYTU=

Para publicar oficialmente o Instagram e tirar esse limite continue neste site. O Instagram pede que seja criado um vídeo demonstrando o filtro, basta abrir o link, gerar o video e subir para o site. Pronto! Você agora é um produto de filtros! Parabéns!

6 - Fim!

Acho que esse foi um dos posts mais longos que já fiz. O tema é bem interessante e apenas fiz um  resumo do pouco que sei. Se você tiver dúvidas, se precisar de ajuda ou se achar algum passo do processo confuso me mande uma mensagem! Ajudar será um prazer!

Até o próximo post!