Tutorial de como hacer una app de Realidad Aumentada en minutos

Hola aumentados! Bienvenidos a este nuevo super minitutorial de cómo hacer una aplicación de realidad aumentada en minutos, y la podremos usar y visualizar en nuestros móviles Android e iOS – Aplicación de realidad aumentada en móviles Android – Aplicación de realidad aumentada en móviles iOS.

Puntos a saber antes de visualizar los ejemplos:

• Móviles Android.
  • (Algunos dispositivos NO permiten la visualización en Realidad Aumentada). Se necesita compatibilidad con servicios de Google Play para RA – ARCORE.
• Móviles iOS.
  • (Normalmente permite la visualización en iPhone y iPad, sin embargo, necesitas tener tu móvil actualizado par que sea compatible con los modelos 3D USDZ – Quieres saber más sobre que son modelos USDZ, aquí te dejo el link. AQUI)
• Laptop and desktop.
  • (Permite la visualización del modelo 3D más NO permite realizar la experiencia en realidad aumentada)
  • Funciona para Google Chrome, Mozilla Firefox, Safari y otros navegadores comunes.

Vamos con los ejemplos y luego las explicación de cómo hacer este tipo de aplicaciones de Realidad aumentada – Augmented reality tutorial de forma fácil.

Si quieres ver los ejemplos en realidad aumentada da clic en el botón ACTIVAR AR

Ejemplo 1: (Modelo 3D en Realidad Aumentada)

Ejemplo 2: (Modelo 3D en Realidad Aumentada)

Estos dos ejemplos están realizados con Google model-viewer, el cual nos permite mostrar de manera fácil y rápida modelos 3D en la web y en Realidad aumentada.

• Google model-viewer funciona con ARCORE (Google) y además con los productos de Apple para realidad aumentada – ARKit – Reality composer y RealityKit.

Este visualizador es super poderoso y todavía se encuentra en etapa de desarrollo, pero aun así nos ayuda a tener excelentes resultados y lo mejor de todo es que no necesita un marcador para ver nuestro modelo 3D en realidad aumentada.

Mira su página de desarrollo en GitHub: https://github.com/google/model-viewer

sorprendente verdad! Mira una fotografía capturada desde un iPhone utilizando la opción de realidad aumentada.

Ahora bien, cómo hacemos este tipo de aplicaciones?

Resulta muy fácil utilizando html5 y JavaScript, lo primero que debemos de hacer es agregar los scripts que necesitamos en nuestro documento HTML:

• <script type=»module» src=»https://unpkg.com/@google/model-viewer/dist/model-viewer.js»></script>
• <script nomodule src=»https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js»></script>
• <model-viewer src=»ubicacion de tu modelo 3D» auto-rotate camera-controls></model-viewer>

y básicamente eso es todo! super fácil, ¿verdad?

Tienes preguntas? deja tu comentario y con gusto las responderé.