La Realidad Aumentada usada para rehabilitación

Archivo para mayo, 2011

Crear marcadores

Uno de los procesos a hacer es crear nuestros propios marcadores o markers en inglés. Un marker no deja de ser un código de barras bidimensional, similar a los Códigos QR habituales de los móviles.

Este marker es el que viene con el FlarToolKit Starter Kit de Saqoosha (que comentamos en la entrada anterior) pero he decidido crear mis propios marcadores.

Para generar nuestro marker, hemos creado una base con el programa de edición gráfica GIMP, para aquellos que no le conozcáis tan sólo deciros que es la versión de código libre y gratuita similar al  AdobePhotoshop. El Gimp lo podeís descargar desde aquí.

Esta es la base sobre la que vamos a trabajar.

marker_blanco_proyecto_rehabilitary una vez que tenemos la base es muy fácil modificarla con el Gimp y crear otros marcadores.

Como por ejemplo los siguientes.

– con una letra C de conocer por ejemplo


– con las letras AR, siglas de Augmented Reality (Realidad Aumentada)

– con la webcam que tenemos en el logotipo

– con la H de Hospital que tenemos en el logotipo,

pero este último caso no es recomendable, ya que le veo dos problemas:

  1. La figura era simétrica, y de esa forma el programa no sabe cual es la parte superior o inferior del marker, para solucionar esto he añadido los cuadrados negros en la parte inferior derecha
  2. Al ser un color azul, el programa de captura lo reconoce como si fuese un gris tenue.

Una vez que tenemos los marcadores, lo único que tenemos que hacer es hacer clic aquí, y entraremos en la aplicación Marker Generator Online 2.

Su uso es muy sencillo, abrimos el programa y seleccionamos el modo “Load marker image”, para coger con este método las imágenes desde nuestro ordenador sin necesidad de imprimirlas.

Seleccionamos nuestro archivo y pulsamos Open.

Se carga el archivo y el programa lo reconoce (línea roja alrededor del cuadrado).


Pinchamos en Get Pattern, captura nuestra imagen (línea color verde) y nos muestra como quedará el fichero binario que va a usar la aplicación.


Ahora tan sólo nos queda hacer clic sobre Save Current y así obtenemos el fichero binario con nuestro marcador gracias a ARToolKit Marker Generator.


Primer desarrollo Realidad Aumentada

Para desarrollar mi Proyecto Fin de Carrera basado en Realidad Aumentada (Augmented Reality en inglés) no sabía bien por donde comenzar, y tras estar investigando decidí que lo mejor era desarrollarlo en ActionScript 3.0, un lenguaje orientado a objetos desarrollado por Adobe, aquí podemos encontrar la documentación de ActionScript. Para comenzar a desarrollar la idea lo mejor es empezar a cacharrear con algo existente, y por ello seguiremos varios puntos y de esa forma nuestros primeros pasos llegarán a buen puerto. Para este desarrollo se recomienda experiencia en lenguajes de programación. A continuación os pongo un mini manual para saber por donde comenzar en Realidad Aumentada. 1- Recomiendo descargar las siguientes librerías, ya que las vamos a necesitar.

  • FLARToolkit: La base de la realidad aumentada, desarrollada por Saqoosha, se encarga de reconocer los markers (marcadores) mediante el uso de la webcam.Podéis descargarlo desde aquí.
  • Papervision3D: Esta otra librería es el motor gráfico para que se vean nuestros desarrollos en 3D.Podéis descargarlo desde aquí.
  • FLARToolKit Starter Kit: Ejemplos básicos de Realidad Aumentada, con los que empezar a conocer el funcionamiento. Podéis descargarlo desde aquí.

2- Una vez descargadas las librerías, deberemos imprimirnos el siguiente archivo flarlogo-marker.pdf, que es una imagen como la anterior, este archivo está incluido en la carpeta Data dentro de la librería FLARToolKit Starter Kit. 3- Posteriormente, comprobar lista de programas instalados, en una entrada anterior comenté los diversos programas que vamos a necesitar. Así que le echaremos un ojo a los programas necesarios. 4- Una vez instalados todos los programas, nos pondremos con las manos en la masaa crear nuestra primera aplicación. Para orientarme estuve consultando multitud de webs, pero sin ver nada que me pudiese enseñar por donde comenzar, hasta que encontré un varios videotutoriales donde nos van explicando poco a poco los primeros pasos.

  • Estupendo videotutorial en español, por tanto no vamos a tener ningún problema. Agradecer a Zoix, desde aquí su ayuda y colaboración para saber “por donde me daba el aire”.
Para mas detalles del vídeo, pulsa aquí.
  • Otro videotutorial para desarrollar nuestra primera aplicación en Realidad Aumentada, pero esta vez en inglés (se entiende muy bien), enlace aquí.
Espero que os sirva de ayuda este mini manual.

Pruebas de navegador

Al estar desarrollando una aplicación que funciona mediante el uso de un navegador, he decidido hacer unas pruebas funcionales de que efectivamente nuestro desarrollo es aplicable y funcional con otros navegadores.

Para estas pruebas he probado tres navegadores completamente distintos:

– Internet Explorer 9, lo podéis descargar desde aquí.

– Mozilla Firefox 4.01, lo podéis descargar desde aquí.

– Opera 11.10, lo podéis descargar desde aquí.

Usage share of web browsers

  Mozilla Firefox (28.6%)
  Google Chrome (14.6%)
  Safari (6.3%)
  Opera (2.6%)
  Mobile browsers (4.7%)

Con estos tres navegadores, obtenemos una compatibilidad con un 74.4%  sobre la suma total de navegadores. Los datos mostrados son de Marzo 2011 y están extraídos de Wikipedia.

A continuación he puesto, las pruebas con los tres navegadores comentados y dos capturas de pantallas sobre ellos, una antes de permitir el uso de la cámara al plugin Flash y otra después cuando hemos permitido el uso de la cámara.

  • Internet Explorer 9.0

  • Mozilla Firefox 4.01

  • Opera 11.01


Programas necesarios para crear aplicación AR

Tras llevar un tiempo sin colgar nada aquí, es hora de ir contando mis progresos, pero hoy simplemente vamos a ir contando los programas que he visto necesarios para hacer un ejemplo básico de Realidad Aumentada programado en ActionScript.

Estos programas en mi caso están descargados para Windows 7 64 bits, en algún programa para otros sistemas operativos, Linux o Mac existirán alternativas.

Programas necesarios en orden de uso:

3DStudio Max: Para diseñar las figuras que queramos, se puede descargar desde el portal Education en la web de Autodesk si eres estudiante. Se pueden usar otros como Maya o Blender para diseñar, esto ya es opción de cada uno. Enlace portal Autodesk Education Community

OpenCollada: Plugin para 3D Studio Max, Maya o Blender que nos permite exportar nuestras creaciones. Podéis descargarlo desde aquí.

Notepad ++: Un editor de texto que soporta diferentes lenguajes de programación. Podéis descargarlo desde aquí. También disponible en versión portable.

Adobe Flash Player: Es aconsejable tener la última versión del plugin para evitar problemas cuando hagamos pruebas. Se puede descargar desde aquí.

Marker Generator Online2: Aplicación Flash para la creación de los marcadores. Podéis descargarlo desde aquí.

Adobe Flash Builder 4: Lo vamos a usar para compilar y editar el código. En mi caso me lo he descargado acreditando que soy estudiante. Podéis descargarlo desde aquí.

Es de agradecer que para crear una aplicación como la nuestra no hemos tenido que desembolsar ni un Euro en estos programas, ya que siendo estudiantes nos permiten descargarlo de forma gratuita.