Crea un showroom de marca con Spark AR

Hoy te traigo la segunda parte de una serie de tutoriales sobre cómo promover tu marca utilizando Spark AR. En el primer vídeo, te enseñé cómo transformar tu logo 2D a uno 3D con Blender para posteriormente trabajarlo en Spark AR. Lo que haremos ahora es crear un showroom de marca con Spark AR para poder mostrar tu producto, servicio o proyecto. Recuerda que este es tan solo un prototipo, te explicaré las ideas básicas para que luego despegue tu creación. OJO: todos mis archivos se encuentran en mi Patreon, si deseas obtenerlos, ¡apóyame!

Showroom de marca con Spark AR: tutorial paso a paso

• Crearemos una estructura que será nuestro principal escenario. Para ello utilizaremos una habitación, usaremos un add-on de Blender llamado “Building Tools”. En un video anterior expliqué detalladamente su instalación y proceso de trabajo.
• Presionamos «N» para abrir la herramienta, creamos un floorplan, luego iremos a edit mode. Para trabajar adecuadamente usaremos “face select”. Ahora seleccionamos el plano y creamos un piso en la opción de floor, quitamos “slab”.
• Utilizaremos la herramienta transform para estirar la habitación. Podemos crear una puerta si gustas para hacer un portal. Tendrías que borrar el face del elemento puerta, pero para este caso vamos a eliminar todo este lado del cuarto. 
• Ahora, ensancharemos las paredes. Para eso usaremos la tecla «E» y así cubrir todos los lados. Adornaremos con ventanas.
• Seleccionamos la pared izquierda y agregaremos. Puedes aumentar la cantidad de ventanas, depende de ti, también podemos generar mayor profundidad.
• De este otro lado también crearemos una ventana pero con un diseño distinto. Cambiamos el fill type y borramos su fondo para que tenga una mejor apariencia. En el fondo también una ventana pero en este caso como si fuera una guía para colocar elementos.
• Para trabajar con Spark AR necesitamos establecer materiales. Seleccionamos las ventanas y vamos hacia material properties para agregar uno de esta manera. Es muy importante asignar para seleccionar todo lo demás, simplemente hacemos CTRL + I para la selección inversa.
• Creamos un nuevo material y lo asignamos. Ya tenemos dos materiales. Podemos agregar un material adicional, por ejemplo el techo del cuarto. También podemos seleccionar los bordes y conectarle un material. Cuando tengamos todo listo vamos a exportarlo.
• Uso el Spark AR Toolkit que ya se ha actualizado hacía la versión de Blender 2.9. Tengo un video donde hablo específicamente del tema.
• Para exportar necesitamos estar en object mode y presionar «N» para habilitar la opción. El archivo 3d no es tan pesado por lo que no será necesario optimizarlo, no te olvides de centrarlo.
• Exportamos para ir inmediatamente a Spark AR.
• En la plataforma, usaremos la plantilla “world object”. Arrastramos nuestra habitación y también el logo 3D que hemos creado en el vídeo anterior.
• Ahora detendremos la animación, arrastro el logo hacia la jerarquía y hacemos ajustes de escala y posición. Aún estará vigente el anterior objeto 3D y nos servirá de guía. 
• Ahora agregamos nuestra habitación a la jerarquí y haremos un ajuste de posición para que aparezca frente a la cámara de manera adecuada. Veremos los detalles de nuestro archivo y aparecerán los 4 materiales. 
• Seleccionamos este material y le creamos uno desde Spark AR. Tenemos que habilitar la opción “double sided, le agregamos un color específico. Sería más que nada una referencia ya que puedes agregar un objeto 3D con esas dimensiones específicas o una imagen.
• Puedes seguir haciendo ajustes según tus preferencias. Ahora ya podemos borrar los elementos innecesarios y si gustas podemos agregar una animación simple de float al logo. ¡Ahora comenzaré a trabajar el contenido!

Creando el contenido para el showroom de marca en Spark AR

• Utilizaré una propiedad de realidad aumentada que tiene Samsung. Esta se llama AR Emoji. Grabaré algo simple y luego lo pasaré hacia Instagram para agregar un filtro. Descargaré la que más me gustó.
• Como Spark AR no soporta video mp4, lo que haré será convertirlo en sprite sheets. En el mercado hay varias opciones, yo he utilizado ezgif.com. Primero reduzco el tiempo para que al convertirlo en secuencias de imágenes, no sea demasiado pesado. Luego lo convierto en GIF. Uso esta misma plataforma para generar el sprite sheet.
• Quiero que el resultado tenga 5 columnas, puedes elegir entre formato png o jpg… yo eligo este último…. Este sería resultado… recuerda pasamos de un videp mp4 a GIF y luego a un sprite sheet en formato jpg…Regresemos a Spark AR.
• En nuestro archivo shop1 agregaremos un plano, ese plano lo ajustaremos para que vaya directo al primer recuadro. Le creamos un material, luego agregamos un image sequence y su textura será nuestro sprite sheet.
• Te preguntarás, ¿por qué no se visualiza? Es porque no hemos activado la opción “double slided”. Tenemos que ajustar este sprite sheet. Dichos ajustes están relacionados a la manera cómo has creado este jpg. La rapidez de la visualización está relacionado al animation sequence.
• El otro contenido que quiero agregar son los efectos de realidad aumentada que he realizado. Para ello solo recopilaré imágenes tanto de Instagram como de Snapchat.
• En Spark AR creo otro plano y lo posiciono en la otra ventana. Hacemos ajustes.
• Le creamos un material, es momento de agregar nuestras imágeness. Todas estas imágenes pasarán a ser una sola, como texture sequence. No te olvides que el material tiene que tener habilitado la opción “double sided”.
• Para que se muestre como una secuencia tenemos que crear un “animation sequence”. Nuestras imágenes actuarán como textura, ahora lo conectaremos a nuestro material, ya saben que la velocidad de visualización se modifica en el animation sequence.
• Crea tu propio espacio, por ejemplo puedes agregar los iconos de las redes sociales y que tu username aparezca cerca a estas. Procura que no sean tantos elementos porque posiblemente no te aprobarán el filtro. Utiliza otras cosas para no recargar la escena.
• Puedes pensar en agregar texturas para las paredes. Yo te recomiendo que lo hagas pero primero trabájalas en Blender para tener un mejor control.
• También puedes agregar otro plano donde colocarás el home de tu página web o quizá un objeto 3D que hayas realizado. En fín, ¡diviertete creando y modificando tu escenario!

La herramienta está a tu alcance, piensa en los elementos que pueden explicar tu trabajo, que no sean muy pesados y que no rompan con la estructura que planteas en un inicio.  

El resultado final del showroom de marca con Spark AR lo podrás ver en el vídeo de arriba. ¿Qué te pareció? Espero que te sirva como guía para crear experiencias virtuales más enriquecedoras. Me despido invitándote a seguirme en Youtube. ¡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.