Primeros pasos en la realidad aumentada.
¿Eso no era cosa de películas?
Definimos la realidad aumentada al conjunto de tecnologías que nos permiten visualizar, a través de un dispositivo, el mundo real con información gráfica adicional, juntando así elementos reales y virtuales en una misma imagen en tiempo real.
Cuando hablamos de dispositivos de realidad aumentada (Augmented Reality en inglés o AR) muchas veces pensamos en grandes sistemas de simulación estilo Google Glass o Microsoft HoloLens. Pero es un pensamiento bastante muy alejado del mundo en el que nos encontramos. El dispositivo de RA más accesible que tenemos es nuestro smartphone. Convivimos con aplicaciones que utilizan la realidad aumentada todos los días, desde el mundialmente conocido Pokémon GO hasta los simpáticos animojis de Apple. Y es que la AR es tan común en nuestro tiempo que hay una gran cantidad de webs que usan estos recursos para proporcionar una experiencia diferenciadora al usuario.
Teniendo estos factores en cuenta, podemos observar que hay muchos recursos de los que nos podemos valer para crear aplicaciones o entornos web con capacidades de realidad aumentada. Y la entrada de hoy irá dedicada a cómo utilizar esos recursos. En este caso, usaremos el entorno de trabajo de A-Frame y sus aplicaciones para RA.
Trabajando con realidad aumentada en A-Frame
AR.js es la herramienta para trabajar con realidad aumentada en HTML. Es muy efectiva y versátil, se ejecuta en todos los navegadores y no necesita de instalación alguna al tratarse de lenguaje de marcado. A-Frame es muy fácil de usar, así que combinándolo con AR.js se puede crear fácilmente contenido en realidad aumentada en solo 10 líneas de HTML. Simplemente colocando el marcador frente a la cámara y a funcionar.
¿Pero y esto de los marcadores qué es?
Los marcadores son elementos gráficos del mundo real sobre los que se genera nuestro modelo de RA cuando apuntamos la cámara de nuestro dispositivo hacia ellos. Disponemos de varios marcadores preestablecidos o patrones, así como la posibilidad de crearlos nosotros mismos. Trabajaremos con el marcador "Hiro", uno de los que ya existen y facilitan la configuración de los marcadores.
Cuando manjeamos marcadores, tenemos que elegir si queremos que el origen del mundo 3D sea la cámara o el marcador. La mayoría de las personas usarán el marcador como origen porque es más intuitivo, pero vamos a nombrar la otra manera también:
- En el modo
<a-marker-camera> la cámara se está moviendo y el marcador está estático, fijado en 0,0,0. - En el modo
<a-marker> la cámara está estática en todo momento mientras los objetos o marcadores se mueven.
Una vez tenemos nuestro marcador elegido, podemos personalizar lo que queremos que se vea en la pantalla, ya sea un texto, una imagen o un modelo tridimensional. Pero como lo más llamativo sin necesidad de mucho esfuerzo suelen ser los modelos tridimensionales, es con lo que trabajaremos. Podemos usar las herramientas de realidad aumentada con tan solo escribir las siguientes líneas en nuestro código:
Y para mostrar un objeto solo hace falta definirlo, quedando el programa de AR más básico de esta forma:
Si queremos cargar un modelo tridimensional propio podemos hacerlo como se hace en A-Frame, pues AR.js se encarga solamente del movimiento de la cámara y de la detección de marcadores. La forma de cargar un modelo entonces sería:
Ejemplos básicos de Realidad Aumentada
En mi caso he descargado e impreso el marcador Hiro porque me daba problemas de reflejos con la pantalla del teléfono, pero se puede usar también con el marcador en la pantalla. Así ahorramos papel y cuidamos el planeta.
Cubo
Cono
Esfera
Plano
Mi entorno de realidad virtual
Utilizando unos cuantos cuerpos predefinidos en A-Frame y algunos modelos descargados desde Poly he creado un pequeño escenario en realidad aumentada que incluye una animación básica. Esta animación no es más que la misma que usarías cuando trabajas con A-Frame, pues el código es el mismo. Es una pequeña rotación de un objeto.
Podéis acceder a mi web y comprobar si todo funciona correctamente pulsando aquí. También dejo a continuación un vídeo de cómo me funciona a mí.
Habitualmente uso Google Chrome, pero cuando intento abrir una web con elementos de RA no me funciona correctamente. He probado en otros dispositivos y con otros navegadres y va bien, pero si tienes algún problema déjamelo en los comentarios.
Y en la chorrada del día...
Hay gente que se toma como algo personal eso de la realidad aumentada y lo hace de forma casera, consiguiendo cosas increíbles.
Comentarios
Publicar un comentario