5 passos para criar um filtro para o Instagram que muda a cor dos olhos
Os filtros do Instagram podem passar a impressão de serem somente uma brincadeira muito divertida, onde alguns possibilitam ver pequenas alterações na face, ou até mesmo realizar modificações no vídeo. No entanto, apesar de parecerem simples, os filtros são a porta de entrada para o universo de realidade aumentada, e pra uma das grandes promessas do futuro metaverso.
Spark AR é a ferramenta oficial da Meta, antigo Facebook, que é responsável diretamente pela criação de filtros de realidade aumentada. Com o Spark AR é possível criar inúmeros tipos de filtros e projetos de Realidade aumentada.
Nesse artigo, falarei apenas dos filtros mais simples que interagem com a face na câmera de selfie, e apresentarei a interface pra facilitar o seu entendimento. Mas, é possível realizar a criação de filtros que utilizem lógica e possibilitem jogos online, manipulação de objetos 3D em conjunto com o ambiente, ou ainda filtros que interagem com mais de uma pessoa na cena.
Vem conferir os 5 passos para criação desse filtro simples de alteração da cor dos olhos.
Passo 1
O primeiro passo, e essencial, é fazer o download do Spark AR Studio na plataforma da Meta. Com isso, alguns assets, ou modelos, já estarão disponíveis ao acessar o software pela primeira vez.
Ao abrir o software, acesse o efeito Eye Color, conforme demonstrado abaixo:
Passo 2
Agora que você abriu o projeto Eye Color (cor de olhos), você tem duas possibilidades, modificá-lo ou disponibilizar o filtro da maneira atual. Nesse caso, vamos entender os elementos principais desse projeto, e realizar uma pequena modificação na cor utilizada atualmente.
Antes disso, vamos nomear rapidamente cada um dos elementos na interface do Spark AR, assim, será mais fácil a continuação do tutorial:
- Menu: contém a barra de ferramentas e a barra de menu, onde é possível realizar configurações e até mesmo publicar o filtro criado.
- Painel de cena: onde estão localizadas as referências dos elementos atuais do projeto. É aqui que estão organizados os elementos e seus subníveis de inserção no visor. Também possibilita incluir mais objetos clicando no +.
- Painel de ativos: os ativos podem ser texturas, materiais, modelos 3D, animações ou arquivos de áudio.
- Visor: demonstra o projeto em desenvolvimento. É a nossa área de trabalho que possibilita alterar a posição dos diferentes elementos.
- Simulador: Representa a tela do dispositivo, com várias opções de imagem e dispositivo mobile. Incluindo a sua própria webcam. É utilizado para ver uma prévia do efeito.
- Inspetor: Demonstra as propriedades do elemento selecionado e possibilita fazer ajustes.
Agora que já entendemos quais são as partes principais da interface do spark, vamos realizar uma pequena modificação no filtro que foi importado. Nessa etapa você vai clicar para selecionar o elemento eyeColor no painel de cena(2) e irá visualizar as suas propriedades no inspetor (6).
Passo 3
Encontramos as propriedades do elemento que desejamos alterar no inspetor, como o experimento é alterar a cor dos olhos, o objetivo agora é colocar a sua cor preferida.
Na aba inspetor, altere a propriedade inputs para a cor desejada. Clique na cor atual, selecione no menu de cores, clique em ok para salvar a nova cor. Repita o processo para os três elementos da propriedade inputs.
Passo 4
Agora que já terminamos o nosso filtro, antes de disponibilizá-lo no Instagram ou Facebook, iremos testar e validar o funcionamento geral.
Teste com vídeos disponíveis.
No Simulador (5) é possível verificar diversas opções de vídeos, clicando no ícone de câmera.
Os vídeos disponíveis no simulador ajudam a garantir que o seu filtro está ápto para diferentes tonalidades de pele e etnias. Além disso, você também pode selecionar a opção de usar a câmera disponível no computador e testar com a sua imagem.
Teste com dispositivos móveis variádos
No simulador, verifique como o seu filtro se comporta para diferentes dispositivos móveis, clicando no menu hamburguer.
Teste com seu próprio celular
No menu (1) a barra de menu está na parte inferior. Clique na opção Test On device (Testar no dispositivo). A janela de teste de disposivo demonstra todas as opções disponíveis para testar, clique no botão Send, e aguarde uma notificação no seu dispositivo. Após disponível, teste o seu filtro do seu celular.
Obs: Caso você ainda não tenha realizado login no Spark AR, o login será solicitado nesse momento.
Passo 5
Parabéns, você já produziu o seu filtro, agora vamos disponibilizá-lo para usuários do instagram.
No menu (1), na barra de menu, selecione a opção de Publish (Publicar).
A janela de publicação estará aberta, garanta que os seguintes tópicos estarão implementados da forma correta:
- Tamanho correto indicado na sessão de Platform Requirements.
- Video de demonstração.
Ao clicar em upload, após finalizado, o Spark AR Hub será aberto, então garanta que todas as informações estarão preenchidas. Após preencher todas as informações, o seu filtro passa por uma avaliação que inclui a validação das politicas de privacidade da Meta, e esse processo poderá levar até 5 dias. Pois irá validar se o filtro estimula jogos de azar, conteúdo sexual, bulling ou uso de drogas, entre outros tópicos.
Após o período de avaliação, o seu filtro estará disponível para você e também para os usuários dos aplicativos que você forneceu na etapa de publicação.
Você gostou desse tutorial? Quer acompanhar tutoriais de Spark AR mais complexos? Então curte esse conteúdo e envia para os seus colegas nas redes sociais.
Quer atuar em projetos internacionais com a temática de Realidade Aumentada? A ArcTouch atua com clientes internacionais e aqui estão algumas pessoas engenheiras com certificação Meta Spark AR.
Se identificou com esses desafios? Acesse a página de carreiras, se inscreva para as nossas vagas em aberto, ou ative o nosso alerta de vagas.
