Saltar al contenido principal

📌 Especificaciones Técnicas y Desarrollo de Proyecto: Kellogg's

🔎 ¿Por qué este proyecto?​

Se eligió este proyecto porque integra muchos elementos que abarcan las funciones básicas que suelen pedirse en proyectos más simples, combinándolos con otros más avanzados.

🎬 Descripción del Proyecto​

Este proyecto está diseñado como una web app, utilizando un filtro de Image Tracker.

🔹 Al iniciar el filtro, aparece una pantalla con animaciones fade in - fade out, mostrando y ocultando elementos después de unos segundos.
🔹 La pantalla inicial se mueve hacia atrás, simulando que se abre una caja.
🔹 Dentro de la caja aparece un elemento 3D animado (con su propia animación).
🔹 Posteriormente, aparecen más elementos animados desde Lens Studio:

  • Dependiendo de cada filtro los elementos animados dentro de la caja cambian

🏗️ Componentes Clave​

🖼️ Image Tracker​

El seguimiento de imagen se realizó mediante Image Tracking, agregando dos Scene Objects para separar los renders. Esto ayuda a crear el efecto de profundidad en la caja y organizar los demás elementos visuales.

🎭 Antirenders​

Se utilizaron elementos 3D planos con el material Occluder, lo que permite generar el efecto de profundidad en la caja.

✔️ Importante:
Estos elementos se colocan antes de los demás para respetar el orden de renderizado y evitar que se pierda el efecto de oclusión.

✨ Partículas​

Se usaron dos tipos de partículas para lograr distintos efectos:

🔹 GPU Particles → Para simular el cereal cayendo en el tazón y las gotas de leche salpicando.
🔹 GPU Particles Trails → Para generar el efecto de humo en el jarrito, en el caso de Chocokrispis.

🎬 Tweens (Tween Manager)​

Los TweenTypes facilitaron la animación de diversos elementos:

  • Tween Transform → Se usó Scale y Move para animaciones de movimiento y tamaño.
  • Tween Alpha → Aplicado en los efectos fade in - fade out de elementos planos y textos.
  • Tween Chain → Útil para organizar mejor las distintas etapas del filtro y facilitar el control de los Tweens mediante Scripts.

📸 Orthographic Camera​

La cámara ortográfica evita la distorsión de perspectiva. En este proyecto se usó para:
✔️ La instrucción de encontrar el marcador.
✔️ La imagen del marcador.

📜 Scripts​

Además de los Tweens, se implementaron Scripts para controlar diferentes elementos dentro de la escena.

🎯 Integración de Elementos​

1. 🖼️ Image Tracker​

El image tracker se compone de dos elementos que contienen los antirenders para dar profundidad a la caja y los elementos que compondrán la caja de cereal.

Image Tracking Objects

2. 🧱 Antirenders​

Se utilizaron antirenders alrededor de la caja. Para crearlos basta usar planos con el material incluido en Lens que corresponde a occluder. Es necesario colocarlos antes de los demás elementos para respetar el "renderizado".
Antirenders en escena

Material Occluder

3. 🎮 Objetos en Escena​

Dentro de otro objeto se agruparon los elementos que componen el resto de la escena, como los elementos que aparecen al inicio, los escenarios 3D prefabricados y las partículas que se utilizan.
Objetos dentro del tracker

4. 📦 Prefabs​

Los elementos prefab se utilizaron para importar los assets 3D que se utilizan a lo largo del flujo. Para cada filtro únicamente se sustituía el prefab que correspondía a la animación 3D de cada cereal en particular con sus respectivas animaciones.
Prefabs Prefab reemplazable

5. 💫 Tweens​

Se utilizaron diferentes tipos de Tweens para generar las animaciones de todo el flujo básico, como transformación de escala, posición y opacidad.
Tweens en escena

Coordinación de animaciones con Tween Chains:​

  • Transformaciones iniciales
    Tweens de inicio

  • Control de opacidades (alphas) del inicio
    Tween Alphas

  • Transición para dar profundidad a la caja
    Tweens de transición

  • Animaciones variable que depende de los elementos dentro de la caja
    Tweens dentro de la caja

  • Instrucciones de marcador (opacidad y escala)
    Tweens del marcador

6. 📜 Scripts​

TouchBlock​

Bloquea los gestos de toque nativos de Lens, evitando que al hacer tap simple o doble se ejecuten acciones predeterminadas de Snapchat.

Main​

Controla todo el flujo al encontrar o perder el marcador.
Script principal

🔍 Al encontrar el marcador:​

Se inician los tweens, las animaciones 3D y se controlan los audios. Tanto la animación del 3D prefabricado, como los audios, cuentan con delay para que se inicien los segundos necesarios después de encontrar el marcador.

Script al encontrar el marcador

❌ Al perder el marcador:​

  • Se detiene la animación.
  • Se oculta el modelo 3D.
  • Se muestra la instrucción del marcador.
  • Se detienen y reinician los Tweens.
  • Se detienen los audios y se limpia el storage.
    Script al perder el marcador

7. 🌫️ Partículas​

  • GPU Particles:
    • Gotas de leche al caer el cereal.
    • Cereal cayendo.
    • Gotas de lluvia (Zucaritas).
  • GPU Particle Trails:
    • Humo (ChocoKrispis).

8. 🎯 Orthographic Camera​

Aloja los objetos fijos en pantalla. Se usa para generar la instrucción del marcador mediante:

  • Imagen en pantalla
  • Texto en pantalla
    Instrucción del marcador

🧩 Elementos específicos​

  • Zucaritas.
    Se tuvieron que implementar ajustes para la animación 3D del aro y el corredor. Esto con el fin de cuadrar sus salidas con respecto al flujo del filtro.

Zucaritas aro Zucaritas corredor

  • Cronflakes.
    Se implementó un Tween Value para controlar el material que genera el crecimiento de un elemento 3D que corresponde a un hilo de estambre. El fin fue cuadrar el tiempo de animación con el flujo del filtro.

Cornflakes Tween Value

  • Chocokrispis.

    • Se agregó una animación por medio de Tween para hacer crecer el jarro del modelo 3D prefab.
      Chocokrispis tamaño jarro

    • Se añadió un tipo de partículas GPU Particles Trails para generar el efecto "humo" que sale del jarro.
      Chocokrispis trails humo

    • Se agregó un Script para hacer rotar un grupo de chocolates del prefab 3D. No fue posible hacerlo mediante Tweens porque en ese caso las rotaciones solamente llegan a 180° y se requería una animación en loop completa, esto solo se logra mediante Script.
      Chocokrispis rotación chocolates

  • Frootloops.
    En este caso sólo se añadió al material de las partículas de cereal una textura flipbook para generar un cambio de color en los aros de cereal sin necesidad de agregar una textura para cada color.

Frootloops flipbook

  • Cornpops.
    La animación 3D de los elementos dentro de la caja estaba dividida en dos: una para la salida de cada elemento y una en loop que se quedaría para el final del flujo. Se controlaron ambas mediante script con delay para iniciar cada una.

Animaciones Cornpops

❗ Errores​

Durante el desarrollo ocurrieron dos errores importantes prevenibles:

🧩 Error en los prefabs​

No cargan correctamente los modelos y/o elementos que se requieren en escena.

Solución:
Para generar los prefabs que se utilizarán, se debe tener en cuenta que el proyecto del cual partirá debe estar bien ordenado y sólo contener los elementos que se requieren en escena. El Asset Panel debe estar también ordenado por carpetas y limpio de elementos que no se ocupen.

🎨 Problemas en los shaders para los materiales 3D​

El filtro en algunos equipos funciona pero no aparecen los objetos 3D. En otros casos aparece un mensaje de error y el filtro se detiene.

Solución:
Se debe tener cuidado en la asignación de shaders en los materiales para los assets 3D:

  • No asignar un material GLTF con shader gltf a un modelo FBX, OBJ o GLB.

  • No mezclar materiales diferentes a GLTF con el shader gltf.
    Combinación incorrecta de materiales

  • Siempre deben coincidir un modelo 3D GLTF con material GLTF y shader gltf.

Combinación correcta de materiales

  • Si existe alguna otra combinación se genera el error.

Error GLTF