AR Quick Look para la Web

Desde hace un par de años los desarrolladores Apple contamos en nuestro arsenal con ARKit, el framework para trabajar con Realidad Aumentada, y una de las posibilidades que nos ofrece es la de usar Safari, el navegador web, para presentar modelos de realidad aumentada de una forman fácil y sencilla.

Me estoy refiriendo AR Quick Look, y en este artículo vamos a ver como implementarlo de principio a fin.

Reality Converter.

Si tu diseñador te ha pasado el modelo en el nuevo formato USDZ entonces puedes saltarte este paso, pero si tienes el modelo en un formato obj, por ejemplo, entonces vas a tener que trabajar con Reality Converter.

Esta herramienta desarrollada por Apple sirve para convertir los modelos generador por herramientas de diseño 3D, como Blender, al nuevo formato USDZ.

Lo primero que tienes que hacer es descargar la herramienta desde la web de desarrolladores de Apple., en la sección Applications de Beta Software. Es necesario tener una cuenta de desarrollador Apple para acceder

Tras descargar e instalarlo, que no tiene nada de especial, sólo tenemos que abrir la app y arrastrar nuestro modelo sobre la ventana de la herramienta.

Si no tienes ningún modelo puedes dirigirte a la web Free3D donde puedes descargarlos de forma gratuita gracias a los artista que publican su trabajo en dicha web. Para este ejemplo he descargado una torre de vigía y una casa abandona.

Lo primero que tienes que hacer es arrastrar el archivo .obj sobre la ventana de Reality Converter, y tras unos segundos veremos aparecer el modelo en la herramienta.

Lo que ocurre es que lo que se ve es el esqueleto de tu modelo, no tiene color, no tiene materiales, para ello tienes que ir a la carpeta donde se ha descargado tu modelo 3D y buscar en la carpeta Textures. Luego ve a Reality Converter y selecciona la pestaña de Materiales.

Aquí es donde tendrás que arrastrar los archivos de imágenes para que modelo adquiera sus aspecto final.

Lo más complicada ya está hecho, sólo te queda exportar el modelo desde la opción Exportar del menú Archivo.

Presentando el modelo

El uso de AR Quick Look para la web no es nada complicado en lo que al desarrollo se refiere, sólo añadir un par de elementos en la página web, pero sí que tendrás que tocar la configuración de servidor web para poder servir los archivos USDZ.

Como veis el hiperenlace <a> apunta al archivo del modelo exportado y su atributo rel le indica al navegador que el contenido del archivo al que apunta tiene relación con realidad aumentada.

Configurando el servidor web

Ahora toca decirle al servidor web que los archivos USDZ son tipos MIME válidos así que tendrás que acceder a la configuración de tu servidor.

Apache

Abre el archivo .htaccess y añade estás dos líneas

IIS

Para el servidor web de Microsoft sigue los siguientes pasos

  1. Abre el Administrador de IIS
  2. En Características haz doble click sobre Tipos MIME
  3. En el panel de Acciones pulsa sobre Agregar
  4. En el campo extensión escribe .usdz y en tipo mime añade model/vnd.usdz+zip
  5. Pulsa en Aceptar

Hosting

En mi caso la administración se hace mediante Plesk, accediendo a la configuración del subdominio, y en la opción Tipos MIME se añaden las dos líneas.

AR Quick Look en acción

Ahora que tenemos todos listo sólo tenemos que abrir Safari en nuestro iPhone o iPad y visitar la web donde he publicado el ejemplo y verás algo como esto…

Para poder visualizar el modelo pulsa sobre el icono de AR que se encuentra en la esquina superior derecha de cada imagen, eso iniciará la sesión de ARKit en Safari y podrás situar el modelo sobre una superficie e interactuar con él

El visor de realidad aumentada que presenta Safari nos permite realizar las siguientes acciones.

  • Foto. Pulsa sobre el botón de tomar foto en la parte inferior.
  • Vídeo. Puedes grabar un pequeño vídeo manteniendo pulsado el botón de tomar foto. Para terminar de grabar suelta el botón.
  • Zoom. Aumenta o disminuye el tamaño del modelo poniendo dos dedos sobre la pantalla, júntalos para hacerlo más pequeño y aléjalos para agrandarlo.
  • Posicionar. Pulsa sobre el modelo y arrástralo hasta su nueva ubicación.
  • Compartir. Abre la vista para compartir con otras apps y acciones a realizar sobre el modelo 3D.

Código fuente

En ese repositorio de GitHub tienes el código del sitio web que sirve de ejemplo al artículo.