Faça um filtro AR do Instagram para o seu cartão de visita
00votos
Avaliação do artigo
Tempo requerido
Complexidade
Ferramentas e suprimentos
30 minutos
Fácil
Softwares Gratuitos
Essa ideia começou como sempre acontece: eu estava trabalhando em um projeto completamente diferente quando saí do caminho depois de tropeçar no trabalho de um artista chamado Catalina Villegas nas redes sociais. Ela cria filtros AR para Instagram que dão vida às ilustrações que ela vende como adesivos. AR não é novidade, eu tinha um aplicativo que mostrava esse tipo de efeito no meu novo smartphone Sony em…2012. Mas descobrir que havia uma ferramenta disponível para criar facilmente efeitos de RA e depois publicá-los em uma plataforma onipresente como o Instagram realmente me fez clicar.
Comecei então a pensar que tipo de utilização poderia ter de tal tecnologia tendo em conta as minhas atividades pessoais e profissionais. Eu gostaria de poder criar lindas ilustrações digitais e dar-lhes uma nova dimensão, tornando-os interativos, mas por enquanto isso está muito longe do meu conjunto de habilidades. Então decidi fazer um projeto simples que de alguma forma faria sentido para mim: criar um filtro que reproduzisse uma animação 3D quando a câmera fosse apontada para um dos meus cartões de visita. Tenho uma pequena loja no Etsy e pensei que poderia ser uma maneira divertida de incentivar meus clientes a postar sobre isso nas redes sociais, pois eles podem ficar curiosos para experimentar esse filtro AR assim que receberem o pedido junto com meu cartão de visita.
Quando estiver satisfeito com seu design, imprima-o e tire uma foto do cartão. Na verdade, descobri que o rastreamento do alvo funcionará melhor se você usar uma imagem do objeto do mundo real que deseja rastrear, em vez de sua contraparte digital.
Maquete da animação AR e preparação dos elementos visuais
Em seguida, projete uma maquete de como você imagina sua animação AR vista de cima. Isso o ajudará a organizar e posicionar os diferentes elementos da sua cena no Spark AR Studio.
Organize seus elementos principais em diferentes camadas no editor de vetores e exporte-os como .png imagens com fundo transparente.
O texto animado: Acontece que esta foi uma das partes mais problemáticas do projeto para mim. Resumindo, desenhei o traço do texto no Inkscape e carreguei no Blender para gerar uma animação quadro a quadro. Se alguém quiser mais detalhes sobre esse processo, deixe-me saber nos comentários e posso escrever um breve tutorial sobre isso.
É necessária uma conta no Facebook para trabalhar com este programa.
Crie um novo projeto
Depois de iniciar e fazer login no Spark AR Studio, crie um novo projeto clicando em Crie um novo -> Novo projeto -> Rastreamento de alvo.
Este software é bastante problemático e instável, então você pode querer salvar seu projeto imediatamente e lembrar de salvá-lo periodicamente depois de fazer qualquer progresso significativo.
Importe as texturas para o projeto
Lembra dos elementos da cena que salvamos como .png anteriormente? Precisamos carregá-los como Texturas para que possamos usá-los em nosso projeto.
Para citar a documentação do software:
Uma textura é um arquivo de imagem usado para ajudar a definir a aparência de um objeto em sua cena. Você pode aplicar uma ou mais texturas a um material e depois aplicar o material a um objeto.
No Painel de ativos no canto inferior esquerdo da janela, clique em Importar do computador e carregue todos os arquivos no Texturas pasta do repositório do Google Drive, exceto o conteúdo dos quadros de animação /Text (por enquanto).
Em seguida, selecione todas as texturas recém-importadas exceto Background e Business_card_target_image. No Painel de textura à sua direita no Subpainel de compressão, defina todas as três opções de compactação para Nenhum. Fazemos isso porque as imagens já são leves o suficiente e o módulo de compactação do programa tende a ficar preso para sempre, usando muitos recursos de CPU e GPU sem motivo claro.
Agora vamos importar os frames da animação do texto. Mais uma vez, tenho que usar uma solução alternativa para evitar ficar esperando para sempre que o módulo de compactação (não) faça seu trabalho. No canto inferior direito do Painel de ativos, Clique em + Adicionar ativo -> Importar -> Do computador. Carregue todas as imagens do /Quadros de animação de texto pasta, metade de cada vez. Eu tenho que fazer isso para evitar travar o programa... Existe uma opção de importação de Animação de Textura que seria mais conveniente de usar se não travasse... travar o programa.
Depois que os 50 quadros forem importados, selecione todos eles e altere o Tipo para Sequência de Textura no topo do Painel de textura.
Defina a compactação para Nenhum para todas as três opções de compactação, como fizemos com as outras texturas.
Finalmente precisamos criar outro tipo de objeto para trabalhar com nossa animação. No + Adicionar ativo menu, selecione Sequência de Animação. No painel que se abre à sua direita, clique no botão seta suspensa em frente de Textura e selecione o sequência de textura que acabamos de criar.
Crie os materiais
Para criar os materiais necessários, clique em + Adicionar ativo -> Material. Vamos precisar de 7 deles, então vá em frente e duplique-o 6 vezes com CTRL+D.
Dê a todos os materiais um nome mais significativo. Agora temos que definir alguns parâmetros em cada um deles.
Selecione todos os materiais, exceto o Fundo.
No Painel de materiais à sua direita selecione Dupla face no Opções de renderização subpainel. Isso ocorre para que nossas texturas também sejam visíveis se vistas por baixo – algo que será especialmente relevante para as asas e o corpo da mariposa, uma vez que estarão pairando no ar.
No Opção de renderização avançada subpainel, desmarque Escreva em profundidade. Isso permitirá que o fundo transparente de nossas texturas realmente desapareça e não interfira entre si quando trabalharmos com planos mais tarde.
Em seguida, selecione o relevante Textura para cada material do Propriedades do sombreador subpainel.
Adicione a textura ao rastreador de destino
Agora precisamos dar um alvo ao nosso Target Tracker – o módulo do programa que se encarrega de localizar o objeto do mundo real que irá acionar a animação e fornecer-lhe informações sobre o plano em que deve ser orientado.
Selecione fixoTargetTracker0 no Cena painel no canto superior esquerdo e no Rastreador de alvo menu à sua direita selecione Business_card_target_image Enquanto o Textura.
Crie os planos para os elementos da cena
A primeira coisa que faremos é mudar de uma visão 3D para uma visão 2D da nossa cena, alterando o Modo.
Próximo Clique com o botão direito sobre fixoTargetTracker0 para Adicionar um novo Avião para a cena.
Usar CTRL+D para duplicado esse avião 6 vezes para acabar com 7 aviões.
Renomeie os planos refletindo todos os elementos que serão incluídos em nossa cena.
No Painel plano à sua direita, adicione o relevante Material para cada avião.
Dimensione e posicione os planos
Agora que nossos planos foram texturizados, precisamos ajustá-los para dar aos elementos da nossa cena suas dimensões e posições adequadas. Para isso vamos trabalhar um plano de cada vez.
Então comece selecionando todos os planos exceto o primeiro com o qual você irá trabalhar (nesse caso Estrelas) e faça-os escondido desmarcando Visível.
Use a imagem alvo como referência para escala e Reposição as estrelas até que de alguma forma correspondam ao fundo. Quando terminar, defina a visibilidade do plano Stars como oculto e passe para outro plano. Repita esta operação com todos os planos, exceto Background e TextAnimation.
Quando estiver satisfeito, revele todos os planos em que você está trabalhando, bem como o Plano de Fundo. Selecione os Fundo avião e escala nas dimensões desejadas – o ideal é que você provavelmente queira cobrir completamente a imagem alvo.
Então faça o Animação de texto visível e mais uma vez redimensioná-lo de volta às suas proporções originais e posicioná-lo adequadamente.
A mariposa agora parece um pouco pequena em comparação com o fundo. Na verdade, dimensionamos a mariposa usando a imagem alvo como referência, mas tornamos o fundo maior do que o cartão de visita. Portanto, nossas proporções não são mais fiéis à maquete.
Para resolver isso, queremos dimensionar tudo, exceto o plano de fundo, de forma consistente. Conseguiremos isso englobando todos esses elementos em uma Contêiner Nulo, e dimensionamento este contêiner em vez de todos os planos individuais.
Animar o texto
Clique com o botão direito sobre fixoTargetTracker0 e escolha Criar patch. Isto abrirá o editor de patches.
Clique com o botão direito no editor de patch e adicione um Animação correção. Conectar o Encontrado conector do fixoTargetTracker remendo para o Jogar conector do Animação correção. Isso fará com que a animação do texto comece a ser reproduzida quando o filtro AR estiver ativado porque a imagem alvo foi encontrada.
Fazer isso adicionará automaticamente um patch Pulse no meio. Conecte o Desligado conector do Pulso remendo para o Reiniciar conector do Animação correção. Isto ocorre para que, quando a câmera se afasta da imagem alvo, a animação do texto seja redefinida e possa ser reproduzida novamente quando o alvo for encontrado novamente.
Adicione um Transição de quadro patch e conecte seu Progresso conector ao seu homólogo do Animação correção. Colocou o número de quadros = 51.
Selecione os Sequência de Animação de Texto para abrir o Painel Sequência de animação à sua direita. Clique no seta precedente Quadro atual para adicionar um novo patch que nos permitirá interagir com o quadro mostrado na cena. Conectar este patch ao conector disponível do Transição de quadro correção.
Você pode controlar a velocidade da animação alterando o parâmetro Duração do patch Animação.
Animar as asas
Selecione cada asa consecutivamente e certifique-se de que suas posição no Eixo Z é 0.
Fazer as asas baterem não é difícil. Precisamos simplesmente adicionar uma animação de rotação no eixo Y em ambos os objetos asas. No entanto, aplicar tal efeito diretamente no objeto asa não funcionaria. Na verdade, o centro de massa do objeto está localizado no meio da asa, portanto, se o girássemos, ele giraria a partir do centro. O que precisamos é que ela gire a partir da parte da borda da asa, aquela que está em contato com o corpo. Espero estar fazendo sentido aqui…
Portanto, precisamos encontrar uma maneira de deslocar de alguma forma o centro de massa dos objetos asais. Para fazer isso, usaremos Objetos Nulos que serão criados automaticamente com um centro de massa centralizado no meio da cena. Esses objetos nulos segurarão os objetos asas e a rotação será aplicada aos próprios objetos nulos. Vamos fazê-lo!
Clique com o botão direito no Recipiente e Adicionar a Objeto Nulo dentro dele. Renomeie-o para RightWingContainer e duplicado com CTRL+D. Renomeie o LeftWingContainer duplicado. Selecione os objetos de asa e arraste e solte -los em seus respectivos Contêineres de objetos nulos.
No Editor de patches, Clique com o botão direito e adicione um Animação em loop correção. Colocou o duração = 2 e marque o Espelhado caixa de seleção (isso é para que a animação faça um loop contínuo e não comece novamente do início no final de uma batida de asa. Com Espelhado ativado, a asa começará a bater para trás depois de atingir o limite superior de uma batida para cima).
Em seguida adicione um Transição remendar e duplicado isto. Vincule o Progresso conector do Animação em loop patch para suas contrapartes em ambos Transição manchas.
Preencha os parâmetros dos patches de transição assim:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Selecione os RightWingContainer e no Painel Objeto Nulo à sua esquerda, clique no seta precedente Rotação. Isso adicionará um patch ao editor de patches para que possamos interagir com esses valores. Conecte o Valor conector do mais alto Transição patch para o conector do RightWingContainer patch recém-criado.
Repita a operação com o LeftWingContainer e o patch de transição mais inferior.
Nesse ponto você deverá ver ambas as asas começarem a bater! Agora só precisamos mover a mariposa ao longo do eixo Z para uma posição que faça mais sentido. Mexa com o Posição no Eixo Z do RightWingContainer, LeftWingContainer e Corpo objetos até chegar a um resultado que lhe agrade.
Visualize o resultado
Você precisará baixar o Jogador Spark AR aplicativo no seu telefone primeiro.
Quando o telefone estiver conectado ao computador, você verá um pequeno ponto azul adicionado ao ícone do telefone no canto inferior esquerdo do Spar AR Studio. Clique nele e escolha Enviar para o seu dispositivo.
Aponte sua câmera para o cartão de visita que você imprimiu anteriormente e divirta-se!
Nesse ponto, use o aplicativo do seu telefone para gravar um vídeo do efeito, pois precisaremos dele para a próxima etapa.
Publique o filtro AR no Facebook ou Instagram
Clique no Publicar ícone de seta abaixo do ícone Visualização no canto inferior esquerdo. Isso irá empacotar seu projeto, carregá-lo e redirecioná-lo para Centro Spark ARpágina da web.
Siga estas etapas para publicar seu filtro com sucesso:
Escolha um nome para o filtro.
Escolha uma plataforma na qual deseja publicar – Instagram e/ou Facebook.
Escolha uma categoria para o seu filtro e adicione algumas palavras-chave se desejar facilitar a localização das pessoas no mecanismo de busca de filtros.
É aqui que o vídeo que salvamos na última etapa é útil. Carregar o vídeo de demonstração do seu filtro.
Escolha um ícone para o seu filtro.
Escreva um rápido descrição explicando o que está acontecendo no seu filtro e como usá-lo para ajudar no processo de revisão.
Bater Enviar no canto superior direito.
Espere pelo análise processo a ser concluído.
Você pode querer verificar o Políticas de AR do Spark antes de enviar para revisão. Minha primeira tentativa foi negada porque o endereço do meu site estava visível no vídeo de demonstração.
Resultado final
Deixo para vocês uma demonstração dos filtros com os quais tenho trabalhado até agora.
O primeiro é o que criei para o meu próprio cartão de visita, o segundo é o primeiro teste que fiz usando um dos cartões postais que faço com pétalas de flores secas e o terceiro é o filtro criado para este tutorial.
Espero que você tenha gostado de acompanhar este tutorial.
Como sempre, sinta-se à vontade para compartilhar qualquer feedback sobre este tutorial ou qualquer ideia de projeto que você gostaria de ver postada aqui.
Notas de rodapé
O seguinte conteúdo online forneceu alguma ajuda e/ou inspiração durante a realização deste projeto:
Quando você faz login pela primeira vez usando um botão de Login Social, coletamos informações de perfil público de sua conta compartilhadas pelo provedor de Login Social, com base em suas configurações de privacidade. Também obtemos seu endereço de e-mail para criar automaticamente uma conta para você em nosso site. Assim que sua conta for criada, você estará conectado a esta conta.
DiscordoConcordar
Eu permito criar uma conta
Quando você faz login pela primeira vez usando um botão de Login Social, coletamos informações de perfil público de sua conta compartilhadas pelo provedor de Login Social, com base em suas configurações de privacidade. Também obtemos seu endereço de e-mail para criar automaticamente uma conta para você em nosso site. Assim que sua conta for criada, você estará conectado a esta conta.
DiscordoConcordar
2 Comentários
Mais antigo
O mais novoMais Votados
Feedbacks embutidos
Ver todos os comentários
Noémie BSG
1 ano atrás
, merci beaucoup pour toutes ces explications très claires! é realmente o melhor! em revanche, eu tenho um pequeno dinheiro, quando eu exporto o que parece que meu arquivo não pode ser exportado para o Facebook e não é compatível com o Instagram… eu não sei o que fazer… e uma vez que o efeito foi aceito et annoncé comme publié du coup je ne sais pas ou le retrouver pour le montrer!!! isso é um problema! pouvez-vous m’aider? estou desejando uma excelente jornada.
Parece que depois de ter escrito este tutorial para a opção de pôster e recuperação de efeitos de telefones celulares no Instagram, eles foram substituídos ou modificados em todos os casos.
Tutorial
Faça um filtro AR do Instagram para o seu cartão de visita
30 minutos
Fácil
Softwares Gratuitos
Essa ideia começou como sempre acontece: eu estava trabalhando em um projeto completamente diferente quando saí do caminho depois de tropeçar no trabalho de um artista chamado Catalina Villegas nas redes sociais. Ela cria filtros AR para Instagram que dão vida às ilustrações que ela vende como adesivos. AR não é novidade, eu tinha um aplicativo que mostrava esse tipo de efeito no meu novo smartphone Sony em…2012. Mas descobrir que havia uma ferramenta disponível para criar facilmente efeitos de RA e depois publicá-los em uma plataforma onipresente como o Instagram realmente me fez clicar.
Comecei então a pensar que tipo de utilização poderia ter de tal tecnologia tendo em conta as minhas atividades pessoais e profissionais. Eu gostaria de poder criar lindas ilustrações digitais e dar-lhes uma nova dimensão, tornando-os interativos, mas por enquanto isso está muito longe do meu conjunto de habilidades. Então decidi fazer um projeto simples que de alguma forma faria sentido para mim: criar um filtro que reproduzisse uma animação 3D quando a câmera fosse apontada para um dos meus cartões de visita. Tenho uma pequena loja no Etsy e pensei que poderia ser uma maneira divertida de incentivar meus clientes a postar sobre isso nas redes sociais, pois eles podem ficar curiosos para experimentar esse filtro AR assim que receberem o pedido junto com meu cartão de visita.
Requisitos
Programas
Os seguintes softwares foram usados para criar este projeto:
arquivos
Enviei todos os arquivos do projeto para o Google Drive.
Estrutura do repositório de arquivos do projeto:
Passo a passo
Projetando um cartão de visita e uma maquete para a animação AR
O cartão de visita
A primeira tarefa que você precisará realizar será criar seu próprio design de cartão de visita.
Para este tutorial usaremos uma ilustração de mariposa desenhada por meu talentoso amigo Hui Chen. Obrigado Hui por nos deixar usar seu trabalho!
Dê uma olhada neste artigo sobre o Melhores práticas para rastreamento de alvo no Spark AR Studio para obter uma boa compreensão de como deve ser o design do seu cartão de visita para ser facilmente reconhecido pelo filtro.
Quando estiver satisfeito com seu design, imprima-o e tire uma foto do cartão. Na verdade, descobri que o rastreamento do alvo funcionará melhor se você usar uma imagem do objeto do mundo real que deseja rastrear, em vez de sua contraparte digital.
Maquete da animação AR e preparação dos elementos visuais
Em seguida, projete uma maquete de como você imagina sua animação AR vista de cima. Isso o ajudará a organizar e posicionar os diferentes elementos da sua cena no Spark AR Studio.
Organize seus elementos principais em diferentes camadas no editor de vetores e exporte-os como .png imagens com fundo transparente.
O texto animado: Acontece que esta foi uma das partes mais problemáticas do projeto para mim. Resumindo, desenhei o traço do texto no Inkscape e carreguei no Blender para gerar uma animação quadro a quadro. Se alguém quiser mais detalhes sobre esse processo, deixe-me saber nos comentários e posso escrever um breve tutorial sobre isso.
Instale o Spark AR Studio
Vá para o página de download do Spark AR Studio, baixe o arquivo de instalação e siga as instruções para instalar o programa.
É necessária uma conta no Facebook para trabalhar com este programa.
Crie um novo projeto
Depois de iniciar e fazer login no Spark AR Studio, crie um novo projeto clicando em Crie um novo -> Novo projeto -> Rastreamento de alvo.
Este software é bastante problemático e instável, então você pode querer salvar seu projeto imediatamente e lembrar de salvá-lo periodicamente depois de fazer qualquer progresso significativo.
Importe as texturas para o projeto
Lembra dos elementos da cena que salvamos como .png anteriormente? Precisamos carregá-los como Texturas para que possamos usá-los em nosso projeto.
Para citar a documentação do software:
No Painel de ativos no canto inferior esquerdo da janela, clique em Importar do computador e carregue todos os arquivos no Texturas pasta do repositório do Google Drive, exceto o conteúdo dos quadros de animação /Text (por enquanto).
Em seguida, selecione todas as texturas recém-importadas exceto Background e Business_card_target_image. No Painel de textura à sua direita no Subpainel de compressão, defina todas as três opções de compactação para Nenhum. Fazemos isso porque as imagens já são leves o suficiente e o módulo de compactação do programa tende a ficar preso para sempre, usando muitos recursos de CPU e GPU sem motivo claro.
Agora vamos importar os frames da animação do texto. Mais uma vez, tenho que usar uma solução alternativa para evitar ficar esperando para sempre que o módulo de compactação (não) faça seu trabalho. No canto inferior direito do Painel de ativos, Clique em + Adicionar ativo -> Importar -> Do computador. Carregue todas as imagens do /Quadros de animação de texto pasta, metade de cada vez. Eu tenho que fazer isso para evitar travar o programa... Existe uma opção de importação de Animação de Textura que seria mais conveniente de usar se não travasse... travar o programa.
Depois que os 50 quadros forem importados, selecione todos eles e altere o Tipo para Sequência de Textura no topo do Painel de textura.
Defina a compactação para Nenhum para todas as três opções de compactação, como fizemos com as outras texturas.
Finalmente precisamos criar outro tipo de objeto para trabalhar com nossa animação. No + Adicionar ativo menu, selecione Sequência de Animação. No painel que se abre à sua direita, clique no botão seta suspensa em frente de Textura e selecione o sequência de textura que acabamos de criar.
Crie os materiais
Para criar os materiais necessários, clique em + Adicionar ativo -> Material. Vamos precisar de 7 deles, então vá em frente e duplique-o 6 vezes com CTRL+D.
Dê a todos os materiais um nome mais significativo. Agora temos que definir alguns parâmetros em cada um deles.
Selecione todos os materiais, exceto o Fundo.
No Painel de materiais à sua direita selecione Dupla face no Opções de renderização subpainel. Isso ocorre para que nossas texturas também sejam visíveis se vistas por baixo – algo que será especialmente relevante para as asas e o corpo da mariposa, uma vez que estarão pairando no ar.
No Opção de renderização avançada subpainel, desmarque Escreva em profundidade. Isso permitirá que o fundo transparente de nossas texturas realmente desapareça e não interfira entre si quando trabalharmos com planos mais tarde.
Em seguida, selecione o relevante Textura para cada material do Propriedades do sombreador subpainel.
Adicione a textura ao rastreador de destino
Agora precisamos dar um alvo ao nosso Target Tracker – o módulo do programa que se encarrega de localizar o objeto do mundo real que irá acionar a animação e fornecer-lhe informações sobre o plano em que deve ser orientado.
Selecione fixoTargetTracker0 no Cena painel no canto superior esquerdo e no Rastreador de alvo menu à sua direita selecione Business_card_target_image Enquanto o Textura.
Crie os planos para os elementos da cena
A primeira coisa que faremos é mudar de uma visão 3D para uma visão 2D da nossa cena, alterando o Modo.
Próximo Clique com o botão direito sobre fixoTargetTracker0 para Adicionar um novo Avião para a cena.
Usar CTRL+D para duplicado esse avião 6 vezes para acabar com 7 aviões.
Renomeie os planos refletindo todos os elementos que serão incluídos em nossa cena.
No Painel plano à sua direita, adicione o relevante Material para cada avião.
Dimensione e posicione os planos
Agora que nossos planos foram texturizados, precisamos ajustá-los para dar aos elementos da nossa cena suas dimensões e posições adequadas. Para isso vamos trabalhar um plano de cada vez.
Então comece selecionando todos os planos exceto o primeiro com o qual você irá trabalhar (nesse caso Estrelas) e faça-os escondido desmarcando Visível.
Use a imagem alvo como referência para escala e Reposição as estrelas até que de alguma forma correspondam ao fundo. Quando terminar, defina a visibilidade do plano Stars como oculto e passe para outro plano. Repita esta operação com todos os planos, exceto Background e TextAnimation.
Quando estiver satisfeito, revele todos os planos em que você está trabalhando, bem como o Plano de Fundo. Selecione os Fundo avião e escala nas dimensões desejadas – o ideal é que você provavelmente queira cobrir completamente a imagem alvo.
Então faça o Animação de texto visível e mais uma vez redimensioná-lo de volta às suas proporções originais e posicioná-lo adequadamente.
A mariposa agora parece um pouco pequena em comparação com o fundo. Na verdade, dimensionamos a mariposa usando a imagem alvo como referência, mas tornamos o fundo maior do que o cartão de visita. Portanto, nossas proporções não são mais fiéis à maquete.
Para resolver isso, queremos dimensionar tudo, exceto o plano de fundo, de forma consistente. Conseguiremos isso englobando todos esses elementos em uma Contêiner Nulo, e dimensionamento este contêiner em vez de todos os planos individuais.
Animar o texto
Clique com o botão direito sobre fixoTargetTracker0 e escolha Criar patch. Isto abrirá o editor de patches.
Clique com o botão direito no editor de patch e adicione um Animação correção. Conectar o Encontrado conector do fixoTargetTracker remendo para o Jogar conector do Animação correção. Isso fará com que a animação do texto comece a ser reproduzida quando o filtro AR estiver ativado porque a imagem alvo foi encontrada.
Fazer isso adicionará automaticamente um patch Pulse no meio. Conecte o Desligado conector do Pulso remendo para o Reiniciar conector do Animação correção. Isto ocorre para que, quando a câmera se afasta da imagem alvo, a animação do texto seja redefinida e possa ser reproduzida novamente quando o alvo for encontrado novamente.
Adicione um Transição de quadro patch e conecte seu Progresso conector ao seu homólogo do Animação correção. Colocou o número de quadros = 51.
Selecione os Sequência de Animação de Texto para abrir o Painel Sequência de animação à sua direita. Clique no seta precedente Quadro atual para adicionar um novo patch que nos permitirá interagir com o quadro mostrado na cena. Conectar este patch ao conector disponível do Transição de quadro correção.
Você pode controlar a velocidade da animação alterando o parâmetro Duração do patch Animação.
Animar as asas
Selecione cada asa consecutivamente e certifique-se de que suas posição no Eixo Z é 0.
Fazer as asas baterem não é difícil. Precisamos simplesmente adicionar uma animação de rotação no eixo Y em ambos os objetos asas. No entanto, aplicar tal efeito diretamente no objeto asa não funcionaria. Na verdade, o centro de massa do objeto está localizado no meio da asa, portanto, se o girássemos, ele giraria a partir do centro. O que precisamos é que ela gire a partir da parte da borda da asa, aquela que está em contato com o corpo. Espero estar fazendo sentido aqui…
Portanto, precisamos encontrar uma maneira de deslocar de alguma forma o centro de massa dos objetos asais. Para fazer isso, usaremos Objetos Nulos que serão criados automaticamente com um centro de massa centralizado no meio da cena. Esses objetos nulos segurarão os objetos asas e a rotação será aplicada aos próprios objetos nulos. Vamos fazê-lo!
Clique com o botão direito no Recipiente e Adicionar a Objeto Nulo dentro dele. Renomeie-o para RightWingContainer e duplicado com CTRL+D. Renomeie o LeftWingContainer duplicado. Selecione os objetos de asa e arraste e solte -los em seus respectivos Contêineres de objetos nulos.
No Editor de patches, Clique com o botão direito e adicione um Animação em loop correção. Colocou o duração = 2 e marque o Espelhado caixa de seleção (isso é para que a animação faça um loop contínuo e não comece novamente do início no final de uma batida de asa. Com Espelhado ativado, a asa começará a bater para trás depois de atingir o limite superior de uma batida para cima).
Em seguida adicione um Transição remendar e duplicado isto. Vincule o Progresso conector do Animação em loop patch para suas contrapartes em ambos Transição manchas.
Preencha os parâmetros dos patches de transição assim:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Selecione os RightWingContainer e no Painel Objeto Nulo à sua esquerda, clique no seta precedente Rotação. Isso adicionará um patch ao editor de patches para que possamos interagir com esses valores. Conecte o Valor conector do mais alto Transição patch para o conector do RightWingContainer patch recém-criado.
Repita a operação com o LeftWingContainer e o patch de transição mais inferior.
Nesse ponto você deverá ver ambas as asas começarem a bater! Agora só precisamos mover a mariposa ao longo do eixo Z para uma posição que faça mais sentido. Mexa com o Posição no Eixo Z do RightWingContainer, LeftWingContainer e Corpo objetos até chegar a um resultado que lhe agrade.
Visualize o resultado
Você precisará baixar o Jogador Spark AR aplicativo no seu telefone primeiro.
Quando o telefone estiver conectado ao computador, você verá um pequeno ponto azul adicionado ao ícone do telefone no canto inferior esquerdo do Spar AR Studio. Clique nele e escolha Enviar para o seu dispositivo.
Aponte sua câmera para o cartão de visita que você imprimiu anteriormente e divirta-se!
Nesse ponto, use o aplicativo do seu telefone para gravar um vídeo do efeito, pois precisaremos dele para a próxima etapa.
Publique o filtro AR no Facebook ou Instagram
Clique no Publicar ícone de seta abaixo do ícone Visualização no canto inferior esquerdo. Isso irá empacotar seu projeto, carregá-lo e redirecioná-lo para Centro Spark ARpágina da web.
Siga estas etapas para publicar seu filtro com sucesso:
Você pode querer verificar o Políticas de AR do Spark antes de enviar para revisão. Minha primeira tentativa foi negada porque o endereço do meu site estava visível no vídeo de demonstração.
Resultado final
Deixo para vocês uma demonstração dos filtros com os quais tenho trabalhado até agora.
O primeiro é o que criei para o meu próprio cartão de visita, o segundo é o primeiro teste que fiz usando um dos cartões postais que faço com pétalas de flores secas e o terceiro é o filtro criado para este tutorial.
Espero que você tenha gostado de acompanhar este tutorial.
Como sempre, sinta-se à vontade para compartilhar qualquer feedback sobre este tutorial ou qualquer ideia de projeto que você gostaria de ver postada aqui.
Notas de rodapé
O seguinte conteúdo online forneceu alguma ajuda e/ou inspiração durante a realização deste projeto:
, merci beaucoup pour toutes ces explications très claires! é realmente o melhor! em revanche, eu tenho um pequeno dinheiro, quando eu exporto o que parece que meu arquivo não pode ser exportado para o Facebook e não é compatível com o Instagram… eu não sei o que fazer… e uma vez que o efeito foi aceito et annoncé comme publié du coup je ne sais pas ou le retrouver pour le montrer!!! isso é um problema! pouvez-vous m’aider? estou desejando uma excelente jornada.
Bom dia Noémie,
Parece que depois de ter escrito este tutorial para a opção de pôster e recuperação de efeitos de telefones celulares no Instagram, eles foram substituídos ou modificados em todos os casos.
Uma boa jornada para você também!