¿Qué es la Realidad Aumentada y como se crea una app WebAR?

¿Qué es Realidad Aumentada (RA) o Augmented Reality (AR)?

 

Hablemos un poco de la historia de la RA.

La historia de la realidad aumentada comienza en el año 1901, cuando Frank L Baum creo la idea de unas gafas electronicas que superponian datos sobre personas que visualizaban. La idea y el invento termino llamandose (Character maker).

Básicamente han pasado 124 años desde que empezaron las bases de la realidad aumentada.

La idea de las gafas de Frank. Fue y es fenomenal, desafortunadamente ni siquiera el gigante de Google ha podido desarrollar la idea a totalidad sin fracasar en el intento ya sea por una razón o por otra.

continuemos por el año 1962 cuando Morton Heiling más conocido por ser el padre de la Realidad Virtual inventa su Sensorama, un dispositivo que permitía visualizar imágenes, sonido, vibración y olores para adicionar información a la experiencia del mismo.

Pasaron 62 años entre estos dos desarrollos para continuar y madurar la idea de los que hoy conocemos como la Realidad aumentada, aunque en sus inicios como lo veo podría referirse más a la realidad virtual.

Pero básicamente no fue sino hasta los años 90 cuando realmente se le dio vida al termino realidad aumentada y se acuño el termino debido a que el señor Tom Caudell observo como unos electricistas de fábricas aeronáuticas AUMENTABAN la información de un esquema de montaje cableado complicado proyectando información sobre él.

Te dejo el estudio del señor Tom Caudell en pdf:(PDF) Augmented reality: An application of heads-up display technology to manual manufacturing processes

EL primer sistema inmersivo de Realidad Aumentada fue creado en el año de 1992 y fue puesto en marcha por Louis Rosenberg. El dispositivo fue llamado Virtual Fixtures y fue desarrollado en la base aérea de Brooks en Texas.

El invento proyectaba la visión de unos brazos robóticos sobre los brazos del usuario, creando una visión aumentada de la realidad.

Año 1994 – Steven Feiner, Blair MacIntyre y Doree Seligmann crean un banco de pruebas que explora y permite el diseño automatizado de realidades aumentadas para explicar labores de reparacion y mantenimiento, este invento fue llamado KARMA (Knowledge based Augmented Reality for Maintenance Assistance).

Año 1997 – Ronald T. Azuma. Exploro los diferentes usos que la realidad aumentada podría tener en campos como la medicina, investigación, mecánica, entretenimiento.

Año 1998 – Sportvision realizo la primera aplicación de realidad aumentada en el mundo del entretenimiento y la televisión durante retransmisiones en vivo de la NFL para señalar una línea virtual sobre el campo marcando el primer down.

Año 1999 y es aquí donde realmente nace la realidad aumentada para nosotros los mortales y desarrolladores de escritorio pues Hirokazu Kato desarrolla ARToolKit. Un software que captura acciones en el mundo real y las combina con objetos virtuales, permitiendo crear aplicaciones de realidad aumentada y básicamente abriendo el camino para lo hoy podemos hacer con la RA.

Año 2009 – 2010: Creo el blog de realidad aumentada empezando desde cero y empiezo a enseñar con FLARToolKit  y Flarmanager, su desarrollo era en una tecnología ya no existente llamada Flash.


¿Qué es realidad Aumentada?

La Realidad Aumentada (RA) es una tecnología que superpone elementos virtuales —como imágenes, videos, modelos 3D y sonidos— sobre el mundo real a través de un dispositivo, como la cámara de un smartphone, una Tablet o unas gafas inteligentes. A diferencia de la Realidad Virtual (RV) que te sumerge completamente en un entorno digital, la RA combina lo digital con lo real, permitiéndote interactuar con ambos simultáneamente


¿Cómo se crea la Realidad Aumentada?

Crear experiencias de realidad aumentada implica varios pasos clave:

  • Detección y Seguimiento: Primero, la aplicación debe «entender» el entorno real. Esto se logra a través de la cámara del dispositivo, que utiliza algoritmos para detectar marcadores (como códigos QR o imágenes específicas) o características del entorno (como planos de superficies y puntos de referencia). El seguimiento constante de estos puntos de referencia permite que el contenido virtual se mantenga anclado de forma precisa en su lugar.
  • Renderizado 3D: Una vez que el software sabe dónde colocar el objeto virtual, debe renderizarlo. Esto implica crear o importar modelos 3D, texturas y animaciones que se proyectarán sobre la imagen del mundo real. Se utilizan motores de juegos y bibliotecas como Unity, Unreal Engine o frameworks web como A-Frame y Three.js para manejar este proceso.
  • Interacción: Finalmente, se añade la lógica de interacción. Esto permite que el usuario manipule el objeto virtual (por ejemplo, moviéndolo, girándolo o escalándolo) y que el contenido digital reaccione a las acciones del mundo real, creando una experiencia dinámica e inmersiva.

Tipos de Realidad Aumentada

Existen varios tipos de RA, clasificados según la forma en que se activan o interactúan con el entorno:

  • RA Basada en Marcadores (Marker-based AR)
    Este es el tipo más antiguo y común. Requiere un marcador predefinido, como un código QR o una imagen específica, para activar el contenido. Cuando la cámara detecta el marcador, el objeto virtual aparece anclado a él. Un ejemplo clásico son las aplicaciones que, al escanear la portada de un libro, muestran un video o una animación relacionada.
  • RA Sin Marcadores (Markerless AR)
    Este tipo de RA no necesita un marcador específico. Utiliza el reconocimiento de superficies y puntos de referencia del entorno (como el suelo, una mesa o una pared) para colocar el contenido virtual. Es el tipo de RA más utilizado hoy en día en dispositivos móviles, ya que permite experiencias más fluidas e intuitivas, como colocar un modelo de un auto en la calle o un dinosaurio en el salón de tu casa.
  • RA Basada en Proyección
    Esta técnica utiliza un proyector para mostrar imágenes virtuales sobre superficies físicas. A menudo se combina con sensores para que la interacción con la proyección se perciba como si fuera real. Un ejemplo es un teclado proyectado en una mesa que puedes «tocar» con tus dedos para escribir.
  • RA Basada en Superposición (Overlay AR)
    La RA por superposición reemplaza la vista completa o parcial de un objeto real con una versión virtual. Por ejemplo, en el campo de la medicina, una aplicación podría superponer una vista de los órganos internos de un paciente sobre la imagen de su cuerpo, ayudando a los estudiantes a comprender la anatomía.

Hagamos una app de realidad aumentada con MindAR

La documentación de MindAR nos ofrece un ejemplo minimalista.

Minitutorial super rapido:

  • Crea una carpeta en tu escritorio con el nombre que desees.
  • Dentro de ella vas a crear un archivo de texto con el blog de notas o Notepad.
  • Copia y pega este codigo:
  • <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
    </head>
    <body>
    <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/assets/card-example/card.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
    <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
    <a-entity mindar-image-target="targetIndex: 0">
    <a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
    </a-entity>
    </a-scene>
    </body>
    </html>
  • Guarda el archivo con el nombre de (index.html)
  • Utiliza la imagen que MindAR nos ofrece como marcador.
MindAR-Marcador
MindAR-Marcador
  • Abre el archivo index.html
  • Dale permitir el acceso a la cámara.
  • Disfruta el ejemplo más simple que MindAR nos ofrece desde su web oficial.

Te dejo estos posts con tutoriales de realidad aumentada que te pueden ayudar mucho.

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Scroll al inicio
0
Would love your thoughts, please comment.x
()
x