Hace algunos meses hablé sobre neck bending, neck decoration y sus usos. Trabajé para posicionar unas alas y algunos otros elementos, puedes ver el vídeo tutorial aquí. Hoy te traigo una actualización de esta plantilla, vamos a crear un prototipo para superponer un traje y así generar la ilusión de tenerlo puesto. ¡Como siempre todos mis archivos los dejo en mi Patreon! Comencemos con el tutorial Neck decoration plantilla.
Tutorial paso a paso: Neck decoration plantilla
- Se preguntarán por qué necesitamos el neck bending para este caso. La explicación es simple: si agrego un plano al torso sin ninguna mejora, no se obtendría un resultado tan bueno, pero si utilizamos nuestro método, conseguiremos un resultado mucho mejor.
- Primero necesitamos crear elementos visuales. Por ello, comenzaremos a buscar en Google algunas imágenes de trajes para poder armar el efecto de realidad aumentada. Usaremos las típicas fotos de terno que se usan para el documento de identidad.
- El traje debe ser lo suficientemente extenso para cubrir el pecho. Esta parte es importante, si tú eres experto en Photoshop, podrás crear tus propios diseños y obtener un mejor acabado.
- Vamos a Photoshop.
- Tenemos la imagen en PNG con transparencia, lo que haremos es crear variaciones de la original para de esa manera tener opciones a escoger.
- Usaremos la herramienta “varita de selección rápida”, esta permite elegir qué parte de una imagen vamos a cubrir. Queremos capturar todo el traje pero sin tocar la camisa ni la corbata… utilizo ALT para deseleccionar cuando nos excedemos en el espacio… debemos ser bien precisos…
- Ahora vamos a la opción “equilibrio de color” y comenzaremos a hacer modificaciones para convertir de un color a otro.
- En estos momentos seleccionamos con la misma herramienta, la camisa para realizar el mismo proceso. Si queremos transformar todo el atuendo también debemos modificar la corbata, vamos a ello. ¡Listo! Iremos a exportar en formato PNG, ya tenemos la primera modificación.
- Realizamos otra variación del traje, ya sabes lo que debemos hacer, seleccionar el traje y hacer correción de color, también pasaremos a modificar el color de la camisa.
- Así generamos dos variaciones más. Con este último, ya tendremos lo suficiente para interactuar con nuestros trajes virtuales.
- Correción de color no es la única herramienta que podemos utilizar, también curvas y el elemento clonar para solucionar algunas imperfecciones. Vamos a Spark AR.
- Usamos la plantilla “neck decoration”, esta contiene todo lo necesario para agregar elementos cerca del torso y sobretodo permite que estos mismos elementos no se muevan de manera desproporcionada sino que tengan un movimiento natural y anclado al cuello.
- Para eso la plantilla tiene archivos como el occluder que es un archivo 3D que permite ocultar ciertos elementos virtuales para camuflarse con el mundo físico.
- Este archivo 3D tiene bones y un script optimizado para generar todo este efecto de realismo. Te recomiendo que veas mi video que hice al respecto, sobretodo para entender la lógica.
- Comencemos a trabajar, eliminamos el block “draghere”. Agregaremos un plano, este tiene que posicionarse delante del torso, tenemos que hacer ajustes sobretodo de escala y de posición, este es un proceso que requiere precisión para lograr la personalización correcta.
- Ahora la creamos un material, este tiene que estar en flat y respecto a la textura es momento de agregar nuestros 4 trajes. No te olvides de seleccionar la opción de “no compression”.
- Bueno, ahora regresemos al material y seleccionemos nuestra primera textura, realizamos ajustes que corresponden como por ejemplo quitar el “user depth test” para no tener conflicto con el occluder. Sigamos optimizando su posición, ¡ya tenemos todo listo!
- Para ser un prototipo no se ve tan mal, lo que haremos ahora es trabajarlo con un picker UI para mejorar su interacción.
- Habilitamos el patch editor, importamos el picker ui, arrastramos las texturas hacia el patch.
- El picker UI debe tener habilitado la opción visible… y lo que haremos ahora es conectar las texturas de esta manera. ¡Perfecto! lo que necesitamos para completar el efecto es mencionar la textural del “material”.
- Si te das cuenta el traje 2d reacciona al movimiento del rostro pero no tiene una acción brusca, sino que es complementaria y casi natural. ¿Qué te pareció? Recuerda que este es un prototitpo, mejorar el producto depende de tu creatividad.
Espero que este tutorial de Neck Decoration Plantilla te sirva, compártelo con quien crees que pueda necesitarlo. ¡Nos vemos en el metaverso!
Patreon
Si desear apoyarme para mantener mi sitio web, puedes hacerlo y también recibirás los archivos de mis tutoriales de Spark AR accediendo a mi patreon.
