¡Hola! Hoy les presento un tutorial sobre cómo hacer Spark AR Neck bending (o movimiento de cuello), partiendo desde cero. Vamos a utilizar blender para crear nuestro objeto 3D. A este le agregaremos bones (huesos) para crear un armazón o estructura esquelética en dicho objeto. Por último, en Spark AR utilizaremos un script para mover correctamente la cabeza en relación con el torso. Este es un nuevo tutorial de Realidad Aumentada.
Déjame decirte que el tutorial no es para principiantes, si quieres conocer más de Spark AR te recomiendo este link para mayor información. Esta guía servirá para que tu mismo puedas crear correctamente una estructura. Recuerda que cada proyecto es único y debes personalizarlo para tu conveniencia.
Tutorial Neck Bending. Desde Blender hasta Spark AR
Antes que nada debes descargar los archivos de referencia que posee Spark AR. Una forma de hacerlo es entrando a la plataforma. Luego le daremos clic a Help -> download face assets. En dicha página encontrarás archivos para trabajar efectos relacionados a facemesh y también head occluder. Este último será muy relevante para nuestro trabajo.
Ahora que ya tenemos estos archivos, es necesario explicarles cómo preparar el objeto 3D en blender porque de esa manera trabajarás tus propios elementos.
Esta parte es vital para lograr una buen trabajo dentro de Spark AR. Lo que voy hacer en estos momentos es unir dos objetos 3D, agregar la armadura y los huesos para un correcto funcionamiento de interacciones.
Blender crear objeto 3D
Blender es un programa para la creación y modelado de escenas y objetos 3D. Es un software libre potente y es usado en muchas industrias. En dicha plataforma, lo primero que hacemos es borrar el cubo del centro. Necesitamos que todo esté limpio para trabajar.
Ahora vamos a importar un objeto que he creado detrás de cámara. Este se llama torso.obj y luego importaremos desde face assets el archivo llamado headOccluder.obj.
Movemos la cabeza para arriba, de tal manera que el espacio entre la cabeza y el torso sea lo más natural posible. Lo que voy hacer ahora es unirlos en un solo archivo para poder trabajar mejor. Primero se selecciona ambios elementos y luego presionamos CTRL + J.
Cambio de object mode -> Edit Mode para editar los vértices y comenzar a crear un cuello humano. Seleccionamos los vértices que deseamos unir con shift + clic izquierdo y luego presionamos la tecla F para llenar el espacio vacio de ambas partes. Repetimos lo mismo en todos los lados posibles.
Blender crear bones y hacer rigging en el objeto 3D
Comenzamos en object mode marcando el “torso”. Hacemos clic en add y luego clic en armadura. Ahora aparece en la jerarquía de trabajo. Ahora vamos a mover nuestro primer hueso atras de la cara para hacer cinetica inversa y es recomendable comenzar siempre desde la cabeza.
Para poder editar los huesos cambiamos a edit mode. Hacemos clic a la unión circular superior y lo movemos para lograr nuestro cometido. Ahora hacemos clic a extrude (E). Hacemos clic en el simbolo + y lo estiramos.
Luego hacemos clic en el centro del hueso y hacemos shift + D para mover el hueso a la posición que deseamos. Borramos el hueso anterior. Seguimos editando el último hueso creado. Clic en el centro del hueso y lo movemos.
Si te das cuenta, existe un línea de conexión entre huesos proveniente de las uniones. Haremos la conexión como si fuera un ZIGZAG entre las conexiones de nuestros huesos. Repetimos este acto hasta completar la creación de los 4 huesos.
El hueso de la parte del cuello es super importante. Este será el centro de la interacción en Spark AR. Lo hice más grande por ser el hueso primordial.
Blender unir bones de la armadura al objeto 3D
Ahora vamos a incluir la armadura creada con los huesos y las conexiones, dentro del objeto 3D. Cambiamos de edit mode -> object mode. Recuerda que hemos estado trabajando con la armadura, luego hacemos presionamos la tecla A para seleccionar todos los objetos 3d de la escena.
Hacemos clic en object -> parent y elegimos -> with automatic weights
Para probar que todo funciona bien cambiamos de object mode -> pose mode. Elegimos un hueso e interactuamos con la opción rotación.
Importar hacia Spark AR Neck Bending
Abrimos Spark AR y lo primero que haremos es agregar Face Tracker. Acto seguido en “add asset” agregamos el objeto 3d creado. Arrastramos el archivo dentro de la jerarquía de face tracker. Ahora vamos a reducir la escala porque es muy grande para nuestro trabajo.
Si te das cuenta todo el torso se mueve con el movimiento de la cara, pero eso está por cambiar gracias a un script. Clic en add asset luego script.
Ahora hacemos clic a los 3 puntos y vamos a conocer donde está alojado el archivo. Este es el archivo script, que está vacio, listo para ser usado.
Lo que haremos ahora es utilizar este script.
var Scene = require('Scene');
var Textures = require('Textures');
var Materials = require('Materials');
var FaceTracking = require('FaceTracking');
var Animation = require('Animation');
var Reactive = require('Reactive');
var TouchGestures = require('TouchGestures');
const Instruction = require('Instruction');
var face = FaceTracking.face(0);
var cuello = Scene.root.find('Bone.004');
var movimientocuello = 80;
cuello.transform.rotationX = face.cameraTransform.rotationX.mul(-1.0).sum(0).expSmooth(movimientocuello);
cuello.transform.rotationY = face.cameraTransform.rotationZ.mul(1.0).sum(0).expSmooth(movimientocuello);
cuello.transform.rotationZ = face.cameraTransform.rotationY.mul(-1.0).sum(0).expSmooth(movimientocuello);Si leemos el archivo script veremos que estamos llamando a FaceTracking. También estamos mencionando como elemento ancla o clave el hueso llamado bone.004 que está ubicado en el cuello. La variable cuello podrá luego ser modificado en sus 3 ejes a través de face.cameraTransform.rotation.
El objeto 3d es perfectible. Ten en cuenta que esto dependerá de tu proyecto. Cada proyecto y necesidad es distinto. Ahora puedes trabajar de manera más adecuada el uso de collares y objetos que estén relacionados al torso y la cara. Esto es solo una plantilla, no es un trabajo final, el resto depende de ti.
Recuerda que cada objeto 3D, su estructura, las articulaciones y el script deben estar bien relacionados entre sí, si algo no está bien hecho, no funcionará bien la experiencia de Spark AR neck bending
Descarga los archivos
Por motivo de mis próximos 10 años creando contenido de Realidad Aumentada he decidido liberar dos archivos: el objeto 3D y el script para que tu mismo puedas crear y modificarlo. Úsalo con sabiduría.
¿Quieres tener acceso a todos los archivos trabajado? Me refiero al archivo de blender, los objetos en extensión obj y fbx y por supuesto el script? Apóyame en patreon y no te perderás ningún archivo de mis tutoriales y proyectos.
¿Qué te pareció el tutorial sobre Spark AR Neck Bending?
