¿Quieres crear tu primera experiencia de realidad aumentada para ecommerce o web? La visualización de objetos virtualizados es uno de los puntos más relevantes para el comercio electrónico actualmente. Hoy te explicaré cómo hacerlo gracias a Model viewer y así dar el siguiente paso en tu ecommerce.
Como siempre, dejo mis archivos en mi Patreon. ¡Comencemos con el tutorial!
Tutorial: realidad aumentada para ecommerce con Model Viewer
- El proceso es el siguiente:
1) Necesitamos una plataforma que nos permita generar la experiencia de realidad aumentada en web, es decir, WebAR.
2) Necesitamos un objeto 3D, este lo puedes virtualizar con fotogrametría o crear el objeto desde cero con Blender u otra herramienta.
- Sobre el primer punto, la plataforma webAR que usaremos será Model Viewer. Este es un proyecto de Google que nos permite visualizar e interactuar con la realidad aumentada desde navegadores. Es una de las iniciativas más interesantes que tenemos actualmente. Lo mejor de todo es que está en constante evolución y, por ello, ahora podemos utilizar su editor. Esta es su interfaz muy sencilla pero potente.
- Ahora necesitamos el archivo 3D. Puedes encontrar muchos en Sketchfab. Por ejemplo, en mi pagina tengo varios modelos libres de descarga, eso sí, tienes que optimizarlos para utilizarlos con WebAR; pues los archivos deben pesar poco para un mejor desempeño.
- Elegimos un objeto 3D, yo elegiré uno que yo cree (imagen de abajo). Se trata de una pequeña caja musical a la que le hice fotogrametría para obtener su réplica 3D. De esta manera, me permite trabajar con mayor versatilidad.
- Sketchfab tiene un punto muy interesante que es la capacidad de descargar tu archivo en formato USDZ,el formato especial WebAR para iOS. Te preguntarás ¿para me sirve eso?, pues Model viewer tiene la capacidad de funcionar tanto para Android como para IOS. Es por este motivo que necesitaremos dos formatos distintos: GLB (Android) y USDZ (IOS).
- Si en caso el archivo que descargues no es GLB, tendrás que convertirlo o pasarlo por Blender. Si tú me apoyas en Patreon, tendrás los archivos optimizados listos para trabajar sin problemas. Sigamos con el tutorial.
- Vamos a subir el archivo GLB. A la derecha verás como se va creando el snippet, tenemos que habilitar más abajo la función de “Enable AR” y también “Default AR mode to scene viewer”. En este punto, importamos el archivo USDZ haciendo clic en el botón «USDZ / Reality» Al hacer esto, el código cambiará, pero luego vamos a configurarlo mucho más.
- Existe una opción para modificar la luz o generar un efecto interesante utilizando “environment image”, también podemos generarle sombra. Se puede controlar las animaciones siempre y cuando tu objeto las tenga, el mío no las tiene, así que pasamos de frente a las anotaciones. Esto nos permite poner un punto referencial y agregarle una observación para enriquecer la experiencia.
- En este otro apartado tenemos habilitado la capacidad de interactuar con la cámara, además, habilitaremos la auto-rotación. Más abajo, podemos fijar una posición inicial de la cámara.
- En este punto, podemos también modificar el material. Inclusive podemos cambiar de color ciertos elementos en tiempo real. Hay varias opciones que te permitirán transformar la apariencia inicial del objeto 3D. Cuando termines de configurar, podemos copiar el Snippet, guardarlo en un editor de texto o en un bloc de notas y trabajar directamente en tu página web. El archivo zip contendrá toda la información necesaria.
- Model viewer editor ha incluido la capacidad de ver tu resultado final con deploy mobile, con esto podemos probar en tiempo real cómo ha quedado la experiencia y hacer ajustes directamente. ¡Vamos a probarlo!
- Tenemos las dos versiones: Android e iOS, en ambos dispositivos se ven bastante bien; aunque la experiencia en iOS se ve un poco mejor. Está inclinado el objeto 3D tal y como lo descargamos de Sketchfab. Toma en cuenta ese factor para que lo edites de ser necesario.
Ahora vamos a importarlo en un sitio web:
Primer punto importante: no te olvides de llamar a la librerías. Necesitas sí o sí estas líneas de código para que funcione la experiencia y ahora usaremos una plataforma para programar online, esta es GLITCH.COM. Creamos un proyecto desde cero. Borramos todo el código innecesario y pegamos nuestro snippet. Le damos formato al documento.
Como puedes ver al inicio se hace llamados a nuestros archivos GLB y USDZ. Borramos otros archivos innecesarios. También veremos las formas de controlar la cámara, el modo AR y las configuraciones que le hemos dado anteriormente.
Desde button, podemos ver cómo se han programado las “anotaciones”, tanto en ubicación, forma, contenido y estilo. Ahora sí, copiamos las librerías de model viewer y las pegamos en este espacio.
Si te diste cuenta, nuestros objetos 3D han sido llamados pero no existe aún en nuestro proyecto, por lo que hay subirlos en la carpeta assets. Esperamos a que cargue y comenzamos a copiar su ruta y reemplazarlos en el espacio correspondiente. Solo nos falta subir el póster, que es como el print inicial del objeto 3d. ¡Realizamos el mismo proceso!
Ahora solo nos falta agregar ciertos detalles, por ejemplo mejorar la configuración visual del “model viewport”. Me gusta agregarles valores predeterminados de estilo. También podemos agregar información meta relacionada a la compatibilidad y al viewport mismo. ¡Ahora sí, vamos a probarlo!
La experiencia sigue siendo buena. Si te das cuenta, con la experiencia Android hay una interacción interesante de las luces, la luminisidad del objeto cambia según como lo rotemos o como nos movamos entorno de este. En iOS también hay una característica interesante, la segmentación del cuerpo.
¿Qué te pareció el tutorial de realidad aumentada para ecommerce? Con este tutorial ya puedes crear tu primera experiencia WebAR para tu página web. Seguiré haciendo más contenido relacionado, ponlo en práctica y cuéntame cómo te fue. ¡Nos vemos en el metaverso!
Si desear apoyarme para mantener mi sitio web y también recibir los archivos de mis tutoriales, puedes hacerlo accediendo a mi patreon.
