Spark AR Tutorial Filtro para turismo – Parte 2

Hoy les traigo la segunda parte de la serie de turiales de realidad aumentada para el sector turístico con el que se busca incentivar y difundir la cultura de un país. Ahora realizaré un tutorial sobre cómo crear pequeños portales o showroom interactivos y que al presionarlos se acerquen a ti. Recuerda que esto es solo un prototipo, ¡el resultado final depende de ti! Vamos con el Spark AR Tutorial filtro para turismo parte 2.

Paso a paso: Spark AR Tutorial filtro para turismo

• Primero debemos crear el efecto visual en Photoshop, como utilizaremos un cubo necesitamos mapear todo sus lados para generar el efecto de profundidad en cada uno de estos. Podemos buscar en Google y ver que ya existen texturas de cubo, pero para este caso he creado uno desde cero para explicarles el proceso.
• La textura tendrá una forma de cruz, pero la importancia radica en que no todos sus lados son iguales: los lados 1 y 2 miran hacia arriba, en cambio los lados 3 y 4 miran hacia abajo.
• Finalmente existe una parte que donde agregaremos la imagen principal, si lo imprimimos formaría un cubo pero claro con el lado “IMG” hacia adentro. Pronto entenderás el por qué. Lo exportamos en formato PNG y lo guardamos en la carpeta. Vamos hacia Spark AR.
• Creamos con la plantilla «plane tracking», importaremos nuestro archivo png. Ahora en placer, llamaremos a un cubo desde nuestra librería. Este tiene que estar dentro de la jerarquía.
• Haremos unos ajustes en la escala, entraremos a su material para cambiar su shader type a flat y ahora en textura usaremos nuestro archivo png.
• Aún no se ve nuestro efecto, pero eso está por cambiar. En «cull mode» cambiamos de back a front. ¡Listo! Probaremos la lógica.
• Como podrás ver, el efecto de profundidad se hace presente y todo parte de una buena textura y un cubo. Vamos a seguir trabajando. Ahora agregaremos el primer lugar turístico, hablaremos de las líneas de Nazca. Estas líneas son muy representativas de la cultura Nazca. Son además Patrimonio de la humanidad y existen cientos de estos por el desierto. Descargamos una imagen de una de llas líneas: el colibrí.
• En Photoshop la importaremos y la colocaremos en el espacio de IMG. Ahora iremos a agregar información, recuerda que esta info puede ser también una imagen, un gif, entre otros.
• No te olvides que debes reducir el tamaño de la letra y también mejorar el espacio del interlineado, tienes que hacer ajustes para tener un buen resultado.
• En el lado número 3 podemos agregar “Patrimonio de la humanidad” y en el lado 4 colocaremos el nombre “Colibrí”, ahora lo exportaremos y lo usaremos en Spark AR. Importamos este nuevo archivo y reemplazaremos la textura del cubo. Lo probé y me pareció interesante. Realizaré dos ejemplos más.
• El 2do lugar turístico que hablaré será la ciudadela de Chan Chan. Esta sí tuve la oportunidad de conocer, está ubicada en la ciudad de Trujillo. Es un lugar hecho totalmente de barro, su historia precolombina te atrapará al instante.
• Colocaremos una foto de Chan Chan en el lado de IMG, ya sabes que hay que adecuar la foto según la posición de visualización. Cambiaremos la información que escribimos anteriormente. Ahora haremos el último lugar turístico: la laguna Parón.
• La laguna Parón está en mi lista de destinos que sí o sí tengo que ir. Muchos amigos me han contado que la vista es preciosa y estar en contacto con la naturaleza te recarga las energías por completo. Como ya hicimos anteriormente, colocaremos la foto en el lado de IMG y realizamos el proceso. Ahora pasaremos hacia Spark AR.
• Estamos en Spark AR, el cubo que creamos, lo duplicaremos y lo posicionamos. Cada cubo tiene un material específico, para este nuevo cubo le crearemos un material. Este material tendrá un shader type flat, en texture tendremos que agregar la relacionada Chan Chan, no te olvides que el cull mode debe estar en “front”.
• Ahora duplicaremos el segundo cubo y como ya saben realizaremos el mismo proceso, pero claro con su textura relacionada a la laguna Parón.
• Lo que haremos ahora es generar la interacción, tomamos el primer cubo y vamos a animación y elijo pulse. Quitaremos el loop animation y reemplazaré por el animation. Para explicar la lógica, usaré un screen tap, ya existe uno así que lo utilizaré, lo conectamos, hacemos tap en la pantalla y se mueve el cubo.
• Yo quiero que pueda regresar a su ubicación original, así que necesito un switch para conectarlo a la animación. Luego llamaremos a un “not” para luego conectarlo al “reverse”, ya tenemos la animación que necesitamos. Ahora haré un ajuste en el patch de transition para que el cubo se acerque más a la cámara. ¡Bien, ya va quedando!
• Reemplazaremos el screen tap y usaremos el object tap, para eso necesitamos arrastrar al cubo hacia el patch editor y lo conectaremos todo de esta forma.
• Le pondremos un comentario para agrupar el flujo de trabajo, falta un detalle adicional. Cuando se agrande el cubo, los otros deben desaparecer luego de unos segundos. Por eso, usaré un delay y lo conectaré desde el “object tap”. Luego utilizaré un switch, también un “not”, y, por ultimo, tomaré la opción visible de los dos cubos restantes. Y así quedaría el efecto, tap al cubo y se agranda. Luego los otros cubos desaparecen, si quiero regresar a su tamaño normal. Los cubos luego aparecerán.
• ¡Va quedando perfecto! Ahora trabajaremos el segundo cubo, para trabajar bien, modificaremos los nombres de los cubos. Copiamos todo el trabajo, arrastro el cubo Chan Chan y lo conectamos al object tap, el transition se conectará con la escala. Haremos algunos ajustes en el transition, pero sobre todo debemos crear otro para conectarlo a la posición del cubo para que cuando hagamos la animación, el cubo se ubique cerca a la cámara.
• Haremos ajustes para perfeccionarlo, ¡listo! Ahora usaremos los visibles de los otros cubos para que desaparezcan cuando sea necesario.
• Puedes utilizar el “mesh” del cubo para estos casos, por supuesto ahora haremos lo mismo para el otro cubo. Tenemos que modificar el transition. Con este toque final, ya está listo, me gusta cómo quedó este prototipo. Cumple su cometido, informar y generar un espacio inmersivo por algunos segundos.
• Puedes agregarle un plano en el fondo para generar enmarcar el filtro. Colocaré una foto, le bajaremos el alpha para que no resalte tanto y tendremos un efecto aún más atractivo.

¿Qué te pareció? ¿Te gustaría que siga hablando más sobre ideas para difundir sitios turísticos? Si es así, coméntamelo, gracias por leer este artículo sobre Spark AR Tutorial filtro turismo. ¡Nos vemos!

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.