La Magia de USDZ y la Realidad Aumentada sin Complicaciones
La Realidad Aumentada (RA) ha dejado de ser una tecnología futurista para convertirse en una herramienta accesible para creadores de contenido y desarrolladores. En este contexto, el formato de archivo USDZ ha emergido como el estándar para crear experiencias de RA sencillas y potentes, especialmente en dispositivos iOS.
Crea aplicaciones de realidad aumentada y muestra tus modelos 3D en segundos, sin descargas, apps de terceros ni costos adicionales. Solo exporta tu modelo a formato USDZ y úsalo en tus experiencias de AR.
Te puede interesar este articulo por si estas interesado en AR.js: Modelos 3D en Realidad Aumentada AR.js Aframe javascript
¿Qué es el formato USDZ?
El USDZ es un formato de archivo desarrollado conjuntamente por Apple y Pixar. A diferencia de otros formatos 3D, está optimizado para la web y diseñado específicamente para la realidad aumentada. Esto significa que un solo archivo USDZ puede contener no solo el modelo 3D y sus texturas, sino también animaciones y la información necesaria para que se visualice correctamente en un entorno real. Su principal ventaja es que los navegadores modernos, como Safari, lo reconocen de forma nativa.
La Simplicidad de la Realidad Aumentada con una sola línea de código
Si bien existen APIs complejas como WebXR para crear experiencias de RA más avanzadas, el poder de USDZ radica en que no necesitas nada de eso para empezar.
El siguiente código HTML es la forma más directa de crear una aplicación de RA.
¡Se basa en una simple etiqueta de enlace, así de fácil es!
<a href="modelo.usdz" rel="ar"> <img src="vista_previa.jpg" alt="Ver en AR"> </a>
¿Cómo funciona este código?
<a href=»modelo.usdz»>: Esta parte del código es un enlace común y corriente que apunta a tu archivo de modelo 3D.
rel=»ar»: Este es el atributo mágico. Es una convención específica que le dice al navegador (en este caso, Safari) que la intención del enlace no es abrir una página nueva, sino iniciar una experiencia de realidad aumentada.
<img>: La imagen que se muestra sirve como una vista previa para que el usuario sepa qué modelo va a ver. Al tocarla, se activa el enlace y, por ende, el visor AR.
Cuando un usuario de iOS abre esta página en Safari y toca el enlace, el sistema operativo interpreta la solicitud y lanza la aplicación nativa de realidad aumentada. El modelo se carga de forma instantánea y el usuario puede colocarlo en cualquier superficie plana detectada por la cámara de su dispositivo.
Te dejo el ejemplo completo del HTML que hice para que veas lo fácil que es crear realidad aumentada en segundos.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>USDZ en AR</title> </head> <body style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh; font-family: sans-serif;"> <h1>Toca para ver el modelo en AR</h1> <a href="./Just_a_girl.usdz" rel="ar"> <img src="./camera.png" alt="Ver modelo en AR" style="border: 2px solid #007bff; border-radius: 10px;"> </a> </body> </html>
El modelo 3D en formato USDZ lo descargue desde la comunidad de Sketchfab: Just a girl – Download Free 3D model by 腱鞘炎の人 (@Kensyouen) [b235916]