| Tiempo requerido | Complejidad | Herramientas y Suministros |
|---|---|---|
| 30 minutos | Fácil | Softwares Libres |
Esta idea empezó como suele pasar: estaba trabajando en un proyecto completamente diferente cuando me desvié del camino después de toparme con el trabajo de un artista llamado catalina villegas en las redes sociales Crea filtros AR de Instagram que dan vida a las ilustraciones que vende como pegatinas. AR no es nada nuevo, tenía una aplicación que mostraba ese tipo de efectos en mi nuevo teléfono inteligente Sony en... 2012. Pero descubrir que había una herramienta disponible para crear fácilmente efectos AR y luego publicarlos en una plataforma omnipresente como Instagram realmente hizo clic para mí.
Entonces comencé a pensar en qué tipo de uso podría tener esa tecnología teniendo en cuenta mis actividades personales y profesionales. Ojalá pudiera crear bellas ilustraciones digitales y darles una nueva dimensión haciéndolos interactivos, pero por el momento esto está demasiado lejos de mi conjunto de habilidades. Así que decidí hacer un proyecto simple que de alguna manera tendría sentido para mí: crear un filtro que reproduciría una animación 3D cuando la cámara apuntara a una de mis tarjetas de presentación. Tengo una pequeña tienda en Etsy y pensé que podría ser una forma divertida de animar a mis clientes a que publiquen al respecto en las redes sociales, ya que podrían tener curiosidad por probar este filtro AR una vez que reciban su pedido junto con mi tarjeta de presentación.
Requisitos
programas
Los siguientes softwares se han utilizado para crear este proyecto:
- Licuadora para generar la animación del texto y exportarlo fotograma a fotograma.
- paisaje de tinta para todos los dibujos vectoriales.
- Estudio Spark AR para crear el filtro AR.
archivos
Subí todos los archivos del proyecto a Google Drive.
Estructura del repositorio de archivos del proyecto:
- /Tutorial de tarjeta de presentación Spark AR
- /Archivos fuente – los dibujos vectoriales de los que se derivaron todas las texturas.
- Texto_animado.blend
- Texto_animado.svg
- Moth_business_card_AR_mockup.svg
- Moth_business_card.svg
- Spark_AR_business_card_icon.svg
- /Archivos de proyecto de Spark AR Studio – los archivos de proyecto del filtro completo guardados y organizados por Spark AR Studio.
- /texturas
- SparkARBusinessCard.arproj
- /Texturas – estrictamente hablando, los únicos archivos necesarios para completar este tutorial.
- /Fotogramas de animación de texto
- Fondo.png
- Cuerpo.png
- Business_card_target_image.jpg
- Ala Izquierda.png
- Lunas.png
- AlaDerecha.png
- Estrellas.png
- /Archivos fuente – los dibujos vectoriales de los que se derivaron todas las texturas.
Recorrido
Diseño de una tarjeta de presentación y una maqueta para la animación AR
la tarjeta de visita
La primera tarea que deberá completar será crear su propio diseño de tarjeta de presentación.
Para este tutorial usaremos una ilustración de polilla que fue diseñada por mi talentoso amigo Hui Chen. ¡Gracias Hui por dejarnos usar tu trabajo!
Echa un vistazo a este artículo sobre el Mejores prácticas para el seguimiento de objetivos en Spark AR Studio para obtener una buena comprensión de cómo debe verse el diseño de su tarjeta de presentación para que el filtro la reconozca fácilmente.
Una vez que esté satisfecho con su diseño, imprímalo y tome una foto de la tarjeta. De hecho, descubrí que el seguimiento de objetivos funcionará mejor si usa una imagen del objeto del mundo real que desea rastrear en lugar de su contraparte digital.
Maqueta de la animación AR y preparación de los elementos visuales
A continuación, diseñe una maqueta de cómo visualiza su animación AR como se ve desde arriba. Te ayudará a organizar y posicionar los diferentes elementos de tu escena en Spark AR Studio.
Organice sus elementos principales en diferentes capas en el editor de vectores y expórtelos como .png imágenes con fondo transparente.
el texto animado: resulta que esta resultó ser una de las partes más problemáticas del proyecto para mí. En resumen, diseñé el trazo del texto en Inkscape y lo cargué en Blender para generar una animación cuadro por cuadro. Si alguien desea obtener más detalles sobre ese proceso, hágamelo saber en los comentarios y podría escribir un breve tutorial al respecto.
Instalar Spark AR Studio
Dirígete a la página de descarga de Spark AR Studio, descargue el archivo de instalación y siga las instrucciones para instalar el programa.
Se requiere una cuenta de Facebook para trabajar con este programa.
Crear un nuevo proyecto
Una vez que logró iniciar e iniciar sesión en Spark AR Studio, cree un nuevo proyecto haciendo clic en Crear nuevo -> Nuevo proyecto -> Seguimiento de objetivos.
Este software tiene muchos errores e es inestable, por lo que es posible que desee guardar su proyecto de inmediato y recordar guardar periódicamente después de que haya realizado un progreso significativo.
Importar las texturas al proyecto
¿Recuerdas los elementos de la escena que guardamos como .png anteriormente? Tenemos que cargarlos como texturas para que podamos usarlos dentro de nuestro proyecto.
Para citar la documentación del software:
Una textura es un archivo de imagen que se utiliza para ayudar a definir la apariencia de un objeto en su escena. Puede aplicar una o más texturas a un material y luego aplicar el material a un objeto.
En el Panel de activos en la esquina inferior izquierda de la ventana, haga clic en Importar desde la computadora y cargar todos los archivos en el texturas carpeta del repositorio de Google Drive, excepto el contenido de los cuadros de animación /Text (por ahora).
Luego seleccione todas las texturas recién importadas excepto para Fondo y Business_card_target_image. Sobre el Panel de textura a tu derecha en el Subpanel de compresión, establezca las tres opciones de compresión en Ninguna. Hacemos esto porque las imágenes ya son lo suficientemente ligeras y el módulo de compresión del programa tiende a atascarse para siempre usando demasiados recursos de CPU y GPU sin una razón clara.
Ahora para importar los cuadros de la animación de texto. Una vez más, tengo que usar una solución alternativa para evitar quedarme atascado esperando eternamente a que el módulo de compresión (no) haga su trabajo. En la parte inferior derecha de la Panel de activos, haga clic en + Agregar activo -> Importar -> De computadora. Carga todas las imágenes de la /Cuadros de animación de texto carpeta, una mitad a la vez. Tengo que hacer esto para evitar que el programa se cuelgue... Hay una opción de importación de Animación de texturas que sería más conveniente de usar si no... cuelgue el programa.
Una vez importados los 50 fotogramas, selecciónelos todos y cambie el Tipo para Secuencia de textura en la parte superior de la Panel de textura.
Establezca la compresión en Ninguna para las tres opciones de compresión como hicimos con las otras texturas.
Finalmente necesitamos crear otro tipo de objeto para trabajar con nuestra animación. En el + Agregar activo menú, seleccione Secuencia de animación. En el panel que se abrió a su derecha, haga clic en el flecha desplegable en frente de Textura y seleccione el secuencia de textura que acabamos de crear.
Crear los materiales
Para crear los materiales necesarios, haga clic en + Agregar activo -> Material. Vamos a necesitar 7 de esos, así que adelante, duplícalo. 6 veces con CTRL + D.
Dé a todos los materiales un nombre más significativo. Ahora tenemos que establecer algunos parámetros en cada uno de ellos.
Selecciona todos los materiales excepto el Fondo.
Sobre el Panel de materiales a su derecha seleccione Doble cara en el Opciones de renderizado subpanel. Esto es para que nuestras texturas también sean visibles si se ven desde abajo, algo que será especialmente relevante para las alas y el cuerpo de la polilla, ya que estarán flotando en el aire.
En el Opción de renderizado avanzado subpanel, desmarque Escribir a profundidad. Esto permitirá que el fondo transparente de nuestras texturas realmente desaparezca y no interfiera entre sí cuando trabajemos con planos más adelante.
A continuación, seleccione la correspondiente Textura para cada material en el Propiedades del sombreador subpanel.
Agregue la textura al rastreador de objetivos
Ahora necesitamos dar un objetivo a nuestro Target Tracker, el módulo del programa que se encarga de localizar el objeto del mundo real que activará la animación y le dará información sobre el plano en el que debe orientarse.
Seleccione FixedTargetTracker0 en el Escena panel en la parte superior izquierda y en el Rastreador de objetivos menú a su derecha seleccione Business_card_target_image como el Textura.
Crea los Planos para los Elementos de la Escena
Lo primero que vamos a hacer es cambiar de una vista 3D a una vista 2D de nuestra escena cambiando el Modo.
próximo Botón derecho del ratón sobre FixedTargetTracker0 para Agregar un nuevo Avión a la escena
Usar CTRL + D para duplicar este plano 6 veces para terminar con 7 aviones.
Renombrar los planos reflejando todos los elementos que se incluirán en nuestra escena.
En el Panel plano a su derecha, agregue lo relevante Material a cada plano.
Escalar y posicionar los planos
Ahora que nuestros planos han sido texturizados, necesitamos ajustarlos para dar a los elementos de nuestra escena sus dimensiones y posiciones adecuadas. Para ello vamos a trabajar un plano a la vez.
Así que empieza seleccionando todos los planos excepto el primero con el que trabajarás (en ese caso Estrellas) y hazlos oculto desmarcando Visible.
Utilice la imagen de destino como referencia para escala y reposicionar las estrellas hasta que de alguna manera coincidan con el fondo. Cuando haya terminado, configure la visibilidad del plano Estrellas como oculta y pase a otro plano. Repite esta operación con todos los planos excepto el Fondo y TextAnimation.
Una vez que esté satisfecho, revele todos los planos en los que ha estado trabajando, así como el Fondo. Selecciona el Fondo avión y escala a las dimensiones deseadas; idealmente, probablemente desee que cubra completamente la imagen de destino.
Luego haz el TextAnimation visible y una vez más escálelo a sus proporciones originales y colóquelo apropiadamente.
La polilla ahora parece un poco pequeña en comparación con el fondo. De hecho, escalamos la polilla usando la imagen de destino como referencia, pero hicimos que el fondo fuera más grande que la tarjeta de presentación. Por lo tanto, nuestras proporciones ya no son realmente fieles a la maqueta.
Para resolver esto, queremos escalar todo excepto el fondo de manera consistente. Lo lograremos englobando todos esos elementos en un Contenedor nulo, y escalada este contenedor en lugar de todos los planos individuales.
Animar el Texto
Botón derecho del ratón sobre FixedTargetTracker0 y elige Crear parche. Esto abrirá la editor de parches.
Botón derecho del ratón en el editor de parches y agregue un Animación parche. Conectar la Encontrado conector de la rastreador de objetivos fijos parche a la Jugar conector de la Animación parche. Esto hará que la animación de texto comience a reproducirse cuando el filtro AR esté habilitado porque se ha encontrado la imagen de destino.
Hacer eso agregará automáticamente un parche Pulse en el medio. Conecta el Apagado conector de la Legumbres parche a la Reiniciar conector de la Animación parche. Esto es para que cuando la cámara se mueva fuera del camino de la imagen objetivo, la animación de texto se restablezca y se pueda reproducir nuevamente cuando se encuentre el objetivo nuevamente.
Añadir un Transición de cuadro parche y conecte su Progreso conector a su homólogo desde el Animación parche. Selecciona el número de fotogramas = 51.
Selecciona el Secuencia de animación de texto para abrir el Panel Secuencia de animación a su derecha. Clickea en el flecha anterior Fotograma actual para agregar un nuevo parche que nos permitirá interactuar con el marco que se muestra en la escena. Conectar este parche al conector disponible del Transición de cuadro parche.
Puede controlar la velocidad de la animación jugando con el parámetro Duración del parche de Animación.
animar las alas
Seleccione cada ala consecutivamente y asegúrese de que sus posición sobre el Eje Z es 0.
Hacer batir las alas no es difícil. Simplemente necesitamos agregar una animación de rotación en el eje Y en ambos objetos de alas. Sin embargo, aplicar dicho efecto en el objeto del ala directamente no funcionaría. De hecho, el centro de masa del objeto está ubicado en el medio del ala, por lo que si tuviéramos que girarlo, giraría desde el centro. Lo que necesitamos es que gire desde la parte del borde del ala, la que está en contacto con el cuerpo. Espero tener un poco de sentido aquí...
Así que necesitamos encontrar una manera de cambiar de alguna manera el centro de masa de los objetos del ala. Para ello, vamos a utilizar objetos nulos que se crearán automáticamente con un centro de masa centrado en el medio de la escena. Esos Objetos Nulos sostendrán los objetos alas y la rotación se aplicará a los mismos Objetos Nulos. ¡Vamos a hacerlo!
Botón derecho del ratón sobre el Envase y Agregar un Objeto nulo dentro de eso. Cámbiele el nombre a RightWingContainer y duplicar esto con CTRL + D. Cambie el nombre del LeftWingContainer duplicado. Selecciona el objetos de ala y arrastrar y soltar ellos en sus respectivos Contenedores de objetos nulos.
En el editor de parches, Botón derecho del ratón y agrega un Animación en bucle parche. Selecciona el duración = 2 y marque el reflejado casilla de verificación (esto es para que la animación se repita sin problemas y no comience de nuevo desde el principio al final de un aleteo. Con Mirrored activado, el ala comenzará a aletear hacia atrás después de alcanzar el límite superior de un aleteo hacia arriba).
A continuación, agregue un Transición parche y duplicar eso. Vincular el Progreso conector de la Animación en bucle parche a sus contrapartes en ambos Transición parches
Complete los parámetros de los parches de transición así:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Selecciona el RightWingContainer y en el Panel Objeto nulo a su izquierda, haga clic en el flecha anterior Rotación. Esto agregará un parche al editor de parches para que podamos interactuar con esos valores. Conecta el Valor conector de la parte superior Transición parche al conector del RightWingContainer parche recién creado.
Repita la operación con el Contenedor De Ala Izquierda y el parche de transición más inferior.
¡En ese momento deberías ver que ambas alas comienzan a aletear! Ahora solo necesitamos mover la polilla a lo largo del eje Z a una posición que tenga más sentido. Juega con el Posición sobre el Eje Z de El RightWingContainer, Contenedor De Ala Izquierda y Cuerpo objetos hasta llegar a un resultado que le agrade.
Vista previa del resultado
Tendrás que descargar el Reproductor Spark AR aplicación en su teléfono primero.
Cuando su teléfono esté conectado a su computadora, verá un pequeño punto azul agregado al ícono del teléfono en la parte inferior izquierda de Spar AR Studio. Haz clic en él y elige Enviar a su dispositivo.
¡Apunte su cámara a la tarjeta de presentación que imprimió anteriormente y disfrute!
En ese momento, use la aplicación en su teléfono para grabar un video del efecto, ya que lo necesitaremos para el siguiente paso.
Publique el filtro AR en Facebook o Instagram
Clickea en el Publicar icono de flecha debajo del icono de vista previa en la esquina inferior izquierda. Esto empaquetará su proyecto, lo cargará y lo redirigirá al Centro Spark ARpágina web de .
Siga estos pasos para publicar con éxito su filtro:
- Escoge un nombre para el filtro
- Elija una plataforma en la que desee publicar, ya sea Instagram y/o Facebook.
- Elija una categoría para su filtro y agregue algunas palabras clave si desea que las personas lo encuentren fácilmente en el motor de búsqueda de filtros.
- Aquí es donde el video que guardamos durante el último paso es útil. Sube el vídeo de demostración de tu filtro.
- Elige un icono para tu filtro.
- escribir un rápido descripción explicando lo que está sucediendo en su filtro y cómo usarlo para ayudar con el proceso de revisión.
- Pegar Entregar en la esquina superior derecha.
- Esperen al revisión proceso a completar.
Es posible que desee comprobar la Políticas de Spark AR antes de enviarlo para su revisión. Mi primer intento fue denegado porque la dirección de mi sitio web estaba visible en el video de demostración.
Resultado final
Os dejo una demo de los filtros con los que he estado trabajando hasta ahora.
El primero es el que creé para mi propia tarjeta de presentación, el segundo es la primera prueba que hice usando uno de los postales que hago con pétalos de flores secas y el tercero es el filtro creado para este tutorial.
Espero que hayas disfrutado siguiendo este tutorial.
Como siempre, no dude en compartir cualquier comentario sobre este tutorial o cualquier idea de proyecto que le gustaría ver publicada aquí.
notas al pie
El siguiente contenido en línea proporcionó alguna ayuda y/o inspiración durante la realización de este proyecto:
, merci beaucoup pour toutes ces explications très claires! c'est vraiment top! en revanche, j'ai un petit soucis, lorsque j'exporte il semble que mon fichier ne peut être exporté que sur Facebook et n'est pas compatible avec Instagram… je ne sais pas pourquoi… et une fois que l'effet est accepté et annoncé comme publié du coup je ne sais pas ou le retrouver pour le montrer!!! ce qui est un problema! pouvez-vous m'aider? je vous souhaite une excellente journée.
Bonjour Noémie,
Il semblerait que depuis que j'ai écrit ce tutoriel l'option pour poster et retrouver des effets tel que celui-ci sur instagram ait été suprimée ou en tout cas largement modifié.
Une bonne journée à vous aussi!