Tus primeros pasos en Realidad Aumentada: Creando un detector de distancia con HTML y Javascript
La realidad aumentada (AR) ha dejado de ser una tecnología de ciencia ficción para convertirse en una herramienta accesible que cualquiera con curiosidad puede empezar a explorar. Si alguna vez te has preguntado cómo crear aplicaciones de realidad aumentada, te sorprenderá saber que puedes dar tus primeros pasos para crear aplicaciones robustas e interactivas usando tecnologías web que probablemente ya conoces: HTML y JavaScript.
En esta guía, desglosaremos un proyecto completo y funcional que detecta un marcador de imagen y muestra su posición en el espacio 3D en tiempo real. Este es uno de los mejores primeros pasos para crear una aplicación interactiva de realidad aumentada desde cero, ya que nos enseña los fundamentos de la detección de imágenes y la manipulación de objetos en un entorno AR.
Facilmente podrias hacer que un elemento en AR interactue con solo acercar otro marcador, aprender este proyecto es fundamental para un super desarrollo.
Imagina este ejemplo:
Como sabemos la formula quimica del agua es H2O.
- Necesitariamos 3 marcadores (1 Atomo de Oxigeno junto a 2 de Hidrogeno).
- Al abrir nuestra aplicacion veriamos cada atomo por separado pero al acercar los marcadores estos se fusionarian y podriamos ver la formula quimica del agua.
- Si alejamos el marcador estos se separarian nuevamente.
Pues con esta guia tienes los primeros pasos para hacer una aplicacion asi.
Comencemos
Antes de sumergirnos en el codigo es importante entender las dos herramientas principales que hacen posible este proyecto: A-frame y MindAR.
Te recomiendo este post: https://blog.realidad-aumentada.com.co/a-frame-vs-three-js-cual-elegir-para-realidad-aumentada/
Empecemos con el codigo.
- Estructura Inicial.
<head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>MindAR Detector de Distancia</title> <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>
- La logica principal (JavaScript).
</pre>
AFRAME.registerComponent('distance-tracker', {
init: function () {
// Se ejecuta al iniciar. Guardamos una referencia al panel de información.
this.infoPanel = document.getElementById('infoPanel');
this.worldPosition = new THREE.Vector3();
},
tick: function () {
// Se ejecuta en cada fotograma.
const marker = this.el;
if (marker.object3D.visible) {
// Si el marcador es visible, obtenemos su posición 3D.
marker.object3D.getWorldPosition(this.worldPosition);
const x = this.worldPosition.x.toFixed(2);
const y = this.worldPosition.y.toFixed(2);
const z = this.worldPosition.z.toFixed(2);
// Actualizamos el panel con las coordenadas.
this.infoPanel.innerHTML = `<strong>Marcador Detectado</strong><br/>
X: ${x}<br/>Y: ${y}<br/>Z: ${z}`;
} else {
// Si no se detecta, mostramos un mensaje de espera.
this.infoPanel.innerHTML = 'Apunte la cámara a su marcador...';
}
}
});
<pre>- AFRAME.registerComponent(…): Aquí creamos un nuevo «superpoder» para nuestras etiquetas HTML.
- init: Esta función se ejecuta una sola vez cuando el componente se carga. Es perfecta para configurar variables iniciales, como la referencia a nuestro panel de información (#infoPanel).
- tick: Esta función es el motor de la aplicación, ejecutándose continuamente en cada fotograma. Comprueba si el marcador al que está asociado (this.el) es visible para la cámara.
- getWorldPosition(): Si el marcador es visible, esta función clave de Three.js (la librería gráfica que usa A-Frame) obtiene las coordenadas X, Y y Z del marcador en el mundo virtual.
- Actualización de la UI: Finalmente, el código actualiza el contenido del <div> #infoPanel para mostrar las coordenadas en tiempo real o un mensaje de espera.
- La Escena de Realidad Aumentada
</pre> <body> <div id="infoPanel">Iniciando aplicación AR...</div> <a-scene mindar-image="imageTargetSrc: ./targets.mind; autoStart: true;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" 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" distance-tracker> <a-plane color="royalblue" opaciy="0.5" position="0 0 0" height="1" width="1"></a-plane> </a-entity> </a-scene> </body> <pre>
- <a-scene>: Es el contenedor de todo nuestro mundo 3D/AR. El atributo mindar-image es el más importante aquí:
- imageTargetSrc: ./targets.mind;: Le indica a MindAR que debe usar el archivo targets.mind como fuente para los marcadores a reconocer. Este archivo se genera a partir de una o más imágenes que tú elijas.
- <a-camera>: Es la cámara virtual a través de la cual el usuario ve la escena.
- <a-entity>: Esta es la entidad clave.
- mindar-image-target=»targetIndex: 0″: Vincula esta entidad con el primer marcador (índice 0) definido en tu archivo .mind.
- distance-tracker: ¡Aquí adjuntamos el componente de JavaScript que creamos antes! Esto significa que la lógica de tick se ejecutará constantemente para este marcador.
- <a-plane>: Es un plano azul semitransparente que se ha hecho hijo de la entidad. El resultado es que, cuando MindAR detecte el marcador, este plano aparecerá directamente sobre él, dándonos una confirmación visual.
Cuando compiles tu aplicacion deberas abrir tu navegador web, darle acceso a la camara web y el resultado sera este:
En este ejemplo practico utilizamos solo un plano de color azul, pero te recuerdo que puedes agregar cualquier contenido digital, un modelo 3D, un video, una figura geometrica, etc.