La webAR es una tendencia muy fuerte que está avanzando con rapidez. En esta etapa de cuarentena social mundial, la realidad aumentada está tomando mayor relevancia. El año pasado hablé sobre la webAR de Google con la funcionalidad de Model Viever y Scene Viewer. Este mes de abril hubo una tendencia sobre colocar animales 3d en tu casa con esta tecnología. Así que hoy tienes un video tutorial de cómo utilizar esta funcionalidad para implementarlo en tus proyectos de negocio. Te va interesar mucho, así que no te pierdas el detalle.
El post sobre Scene viewer lo publiqué en mayo del 2019 allí mencioné sobre el futuro script que existirá para implementar adecuadamente esta tecnología. Inclusive llegué a probar el demo del astronauta. Esta tecnología ya se encuentra disponible y puedes ver varias fuentes oficiales relacionadas a ARCore, web browser, archivos GLB o gltf y más; pero la página más completa y simple para entrar a esta tecnología es Modelviewer.dev.
Model Viewer – Realidad Aumentada Web
Aquí encontraremos el script necesario. En esta código veremos el model-viewer.js el model-viewer-legacy.js, además del archivo 3d en formato GLB. Recuerda que las urls están online y no en tu carpeta, recuerda eso al implementar tu proyecto en tu propia web.
En esta web también encontrarás documentación directa de los elementos del proyecto, como la ruta y alt del archivo, nomenclatura de los documentos, cómo generar la rotación, escala, entre otros. Además también se mencionará las propiedades del CSS.
Ahora veremos la sección animation. Aquí veremos la series de elementos que podemos utilizar para animar de manera específica.
Necesitamos entrar al github del proyecto porque encontraremos los archivos necesarios de trabajo. Le damos a descargar. Ahora vamos a la acción, crearemos nuestro propio proyecto. Puedes comenzar desde cero, pero qué mejor que utilizar una plantilla. Esta es el model viewer desde glitch.
Glitch es una comunidad de desarrollo mundial donde podemos codear webApps con total libertad y sobretodo llegar a publicar sin complicaciones. Haremos clic a “remix this”.
Estos son los archivos de trabajo: demo style.css y index.html. Veremos scripts adicionales para trabajar correctamente con la mayoría de navegadores (relacionados a microsoft edge, firefox, safari, propiedades de full screen y hasta un archivo adicional para que se visualice correctamente en los visores de Magic Leap). También veremos el código original de model viewer y por supuesto la ruta del archivo GLB y USDZ.
Aquí quiero precisar una información: En el mundo webar existen dos rutas: la primera es) trabajar con formato gLTF. Este está impulsado por varias empresas y es de uso masivo; la segunda es trabajar con el formato USDZ que está impulsado por iOS y es más restrictivo.
En estos momentos reemplazamos el archivo GLB, para hacer eso vamos a assets y subiremos un nuevo archivo. Usaremos un objeto de la carpeta descargada hace minutos. El objeto seleccionado será “robotexpressive”. Cuando se agregue a nuestros assets le haremos clic y copiaremos su ruta. Vamos a index y reemplazamos la ruta del archivo GLB.
Puedes utilizar diferentes archivos 3d, por ejemplo yo luego utilicé un archivo creado por mi trabajo de la fotogrametría. Este tuvo un proceso diferente pasando vía Blender, luego a ViewAR, para convertir el formato de GLB a USDZ.
Patreon
Si desear apoyarme para mantener mi sitio web y descargar los archivo de trabajo, puedes hacerlo accediendo a mi patreon.
