Llevando lo virtual a la realidad con AR en Shopify

La Realidad Aumentada es algo que hemos visto surgir cada vez más, pero ¿qué es exactamente y cómo se hace? Todo el mundo está familiarizado con la Realidad Virtual gracias a los videojuegos y películas como Ready Player One. En la realidad virtual, te pones un visor de realidad virtual y experimentas una realidad completamente sintética, que te aleja del mundo físico y te permite sumergirte en un mundo totalmente diferente. Mientras tanto, la Realidad Aumentada difumina la línea entre lo virtual y lo real. Permite al usuario experimentar contenido artificial como parte de su entorno físico y está listo para tomar por asalto el comercio electrónico, ya que Shopify está adoptando la tecnología para habilitar AR para los propietarios de sus tiendas.

Recientemente, Shopify integró el uso de ARKit de Apple para proporcionar contenido AR a sus usuarios y, en Eastside Co, hemos estado experimentando con él desde entonces. Más recientemente, trabajamos con Lazy Oaf para ofrecer versiones de realidad aumentada de su nueva línea de zapatos desarrollada en colaboración con el legendario Doc Martens. Llevar la estética única de los diseños de Lazy Oaf a la realidad aumentada a través del modelado 3D fue un desafío divertido y, creo, agregó un nivel de interactividad a las compras en línea que está cerca de lo que antes solo estaba disponible en las tiendas minoristas.

Entonces, ¿qué implica hacer un producto virtual para AR y cuáles son los problemas que surgen en el camino?

Preparándose

Lazy Oaf tuvo la amabilidad de enviarnos el prelanzamiento real de los productos, por lo que pude tener una buena idea de cómo eran los productos. Esto puede ser muy beneficioso ya que a veces las fotos simplemente no pueden capturar los tipos o la sensación de los materiales utilizados en el producto y eso puede ser importante para hacer que el producto se vea bien en el futuro. Nuestro fotógrafo y videógrafo, Dave, fotografió amablemente cada uno de los zapatos Doc Marten desde el frente, la parte posterior, ambos lados, arriba y abajo, así como desde varios ángulos para ayudar a capturar algunos detalles de las superficies antes de comenzar el proceso de modelado 3D.

Una vez que recorté y escalé las fotos para que fueran precisas entre sí, las dispuse como planos en 3DS Max 2018.

Modelado Básico

A partir de aquí comienza el modelado con formas simples. El zapato comenzó su vida como un solo plano que fue extruido y manipulado para adaptarse a la forma de la suela.

Una vez que la forma básica estuvo completa, corté los bordes que formarían la suela y los extruí seguidos por el resto de la suela, aplicando algunos modificadores para obtener la parte inferior redondeada de la suela como un todo. Después de un modelado básico adicional, la suela estaba lista para usar ZBrush para hacer el trabajo de alta resolución.

Modelado 3D de alta resolución

Tomar un modelo de baja resolución y aumentar el número de polígonos suaviza el modelo. Este proceso se realizó en algunos niveles dando una superficie mucho más suave que me permitió agregar puntadas a lo largo del borde de la suela y esculpir manualmente los orificios de las puntadas en la superficie para que pareciera que fueran puntadas adecuadas.

Una vez alisada y pulida la suela, comencé por la parte superior del zapato, creando una forma básica que seguía el contorno del propio zapato.

Usando esta versión tosca como base pude extraer las formas de todas las piezas que componían el detalle del zapato. Todas las piezas superpuestas de material que formaron la forma se extrajeron de esta forma y se organizaron en consecuencia. El área de cordones en la parte delantera de la puntera fue esculpida.

A partir de esta etapa, se trataba de agregar accesorios como las hebillas y los cordones en la puntera y, por supuesto, más pequeños detalles como las puntadas de los paneles.

la parte dificil

Con algo de color seguro que se acaba ese modelo, ¿no? Lamentablemente no. El modelo 3D del zapato Doc Marten en su conjunto se compone de poco menos de 10 millones de polígonos. A pesar de que los teléfonos inteligentes que llevamos en nuestros bolsillos ahora son dispositivos informáticos increíblemente poderosos, les resultaría muy difícil renderizar tantos polígonos a la vez. Al igual que un editor de películas, debe seleccionar y elegir las partes importantes de lo que está tratando de presentar. Notarás que el interior del zapato no está terminado. Esta fue la primera pieza que golpeó el suelo de la sala de montaje, por así decirlo. El interior del zapato no tenía una importancia significativa para la estética general y, por lo tanto, no modelarlo redujo la complejidad del modelo (además de ahorrarme algo de tiempo). Pero aún nos quedan casi 10 millones de polígonos.

Debido a que la realidad aumentada representa el modelo en tiempo real, tenemos que reducir la complejidad. Esto implica reducir la cuenta regresiva de polígonos a niveles manejables y es un proceso increíblemente tedioso. Afortunadamente, la mayoría de las partes comenzaron su vida como versiones de polígonos bajos y pude volver a esas partes y reutilizarlas para esta tarea. En la captura de pantalla a continuación, puede ver que, si bien la forma es representativa del zapato en sí, carece de los detalles más finos, como las puntadas, los bordes ligeramente biselados y la suavidad general que brindan todos esos polígonos. Sin embargo, también puede ver que el número de polígonos se ha reducido de casi 10 millones a poco más de 6000 y, de hecho, podría reducirse un poco más si fuera necesario, pero 6000 polígonos está dentro del presupuesto y tener una geometría que admita la forma puede ser útil. para la siguiente etapa.

Recuperando los detalles

Así que ahora tenemos dos versiones del zapato: una versión de resolución extremadamente alta y una versión de baja resolución que se reproducirá rápido y sin problemas en el hardware móvil. Pero ahora nos faltan los detalles que diría que hacen que el zapato sea único.

Para transferir los detalles de alta resolución a la versión de baja resolución, necesitamos "hornearlos" en varios mapas de textura que proporcionen información a la luz virtual en nuestra realidad aumentada. Para hacerlo, primero debemos desenvolver nuestro modelo y aplanarlo, creando un mapa UV. ¿Qué es un mapa UV? Es una representación 2D de nuestro modelo si se desplegara como un modelo de origami; permite que las texturas se proyecten sobre su superficie más adelante en la línea.

Para mantener los detalles nítidos y limpios, decidí dividir el modelo en dos partes. La suela, hebillas y correas en una parte, y luego la parte superior en otra pieza. Esto me permitió usar 2 mapas de textura pequeños en lugar de uno solo grande, lo que conduce a un tamaño de archivo más pequeño para que se cargue más rápido.

A continuación puede ver los mapas UV: las versiones planas de ambas partes.

Una vez hecho esto, podemos hornear nuestros mapas y trabajar en las texturas, agregando la información del material que hará que el producto se vea como el producto.

El púrpura en la captura de pantalla anterior puede parecer extraño, pero esta es la forma principal en que recuperamos los detalles en nuestro modelo. La superficie del modelo de alta resolución se proyecta sobre el modelo de menor resolución y se registra en valores de rojo, verde o azul según la dirección a la que apunte la superficie. Cuando se aplica al modelo y una fuente de luz lo golpea, el color del píxel que golpea la luz determina la dirección en la que rebota la luz, creando una superficie 3D artificial sin el costo del polígono. Esto es más obvio con los puntos.

Una vez que se han creado estos mapas, ahora solo se trata de aplicar materiales y textura a la superficie.

Ponerse físico

Los renderizadores en tiempo real de hoy en día utilizan un sistema llamado PBR o renderizado basado en la física. Esto significa que el motor de iluminación y renderizado intenta mapear con precisión la forma en que la luz se comporta cuando golpea la superficie de un modelo en función del material de esa superficie. El software de texturizado moderno ha hecho que la creación de materiales realistas sea muy fácil. Substance Painter fue fundamental para permitir que las superficies de estos elementos de la vida real se recrearan digitalmente. Principalmente usamos 5 mapas de textura diferentes para aplicar varias propiedades al modelo:

• Mapa de colores Así suena, es el color base del material.
• Metalidad Este es un mapa en blanco y negro que determina qué parte del modelo es metálica o no metálica.
• Rugosidad Tal como suena, define qué tan rugosas o suaves son las superficies del modelo.
• Oclusión ambiental Un mapa en escala de grises que imita esas diminutas sombras de contacto donde dos superficies se encuentran en la esquina, agrega profundidad adicional a la iluminación.
• Mapa normal Este es el mapa morado que se mostró anteriormente y es responsable de mostrar el detalle de la superficie; como se muestra a continuación, apenas hay detalles cuando se apaga el mapa normal en la suela y luego en la parte superior del zapato.

Una vez que se completa el proceso de texturizado, tenemos algo que parece bastante convincente. Los pasos finales son exportar el modelo y las texturas y convertirlos a un formato compatible con AR. En este caso es USDZ ya que es el formato que usa Apple ARKit.

Si todavía estás conmigo, ¡bien hecho! El resultado de AR es mucho más fascinante que el proceso de creación, pero espero que este pequeño vistazo detrás de escena muestre cuánto implica el proceso de recrear manualmente una representación virtual de un producto real. Las nuevas tecnologías, como el escaneo 3D y la fotogrametría, facilitarán el proceso en el futuro, pero en este momento la calidad no es del todo buena a menos que invierta una gran suma de dinero en la tecnología.

Todavía estamos en los primeros días de la tecnología de realidad aumentada: a medida que continúa avanzando y los teléfonos móviles se vuelven más potentes y capaces, comenzaremos a ver esta tecnología cada vez más en los lugares cotidianos. Si bien Ready Player One y otras películas de ciencia ficción popularizaron la realidad virtual, creo que la realidad virtual permanecerá en el ámbito del entretenimiento y la educación, mientras que la realidad aumentada se volverá tan omnipresente como Internet, especialmente cuando todos obtengamos nuestras actualizaciones cibernéticas. Tal vez eso esté un poco lejos, pero hasta entonces al menos puedo poner unos zapatos sobre la mesa y que no me regañen.

Visite Lazy Oaf y vea los zapatos Dr Marten en su propio iPhone o iPad con iOS y Safari 12.