¿Alguna vez has querido crear una experiencia de Realidad Aumentada (AR) pero te has sentido limitado por tener que definir los marcadores (las imágenes que activan la AR) de antemano? Hoy vamos a analizar un código fascinante que rompe esa barrera.
Crea Realidad Aumentada (Augmented Reality) Gratis y en minutos con esta herramienta: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)
Desarrolle una pequeña aplicación web que permite a cualquier usuario convertir una foto de su entorno en un marcador de AR funcional, todo directamente desde el navegador.
La aplicación funciona en un flujo de tres pasos muy intuitivo:
- Paso 1: El Marcador. El usuario toma una foto desde su telefono Android o Iphone (o sube una foto) para usarla como marcador.
- También puede cargar un archivo .mind. ¿No sabes cómo crear un marcador para realidad aumentada .mind? Aqui te dejo la herramienta perfecta para ello: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
- Paso 2: El Modelo. El usuario selecciona qué modelo 3D quiere ver.
- Paso 3: La Magia. El usuario apunta su cámara a la foto que acaba de tomar y ¡listo! El modelo 3D aparece sobre ella.
Apóyame en Patreon es muy importante para mí. Gracias por tu apoyo. Da clic en la imagen para ingresar
Las Tecnologías Clave para este tutorial de realidad aumentada
Este proyecto se sostiene sobre dos pilares fundamentales del WebAR:
A-Frame (aframe.io): Es un framework web para construir experiencias de Realidad Virtual (VR) y Aumentada (AR) usando HTML. Nos permite definir una escena 3D con etiquetas tan simples como <a-scene> y <a-gltf-model>.
MindAR (mindar.org): Es una biblioteca de seguimiento de imágenes de código abierto para WebAR. La integramos con A-Frame para que se encargue de «entender» la imagen del mundo real y colocar nuestro contenido 3D sobre ella.
¿Como sucede?»: Compilación de Marcadores en el Navegador
Lo más interesante de este código no es solo mostrar un modelo 3D, sino cómo crea el marcador AR sobre la marcha.
Tradicionalmente, necesitas compilar tus imágenes en un archivo especial (.mind en este caso) en un servidor o en tu computadora. Este código lo hace todo en el dispositivo del usuario.
Cuando el usuario sube una foto en el «Paso 1», usamos la biblioteca de MindAR para analizarla en tiempo real.
Te puede interesar este articulo: Toca la Realidad Aumentada: Usa tus manos en apps WebAR
- Análisis de Calidad de la fotografía.
No cualquier foto sirve como un buen marcador. Necesita suficientes puntos de contraste y características únicas. El código utiliza MINDAR.IMAGE.Compiler() para analizar la imagen y darle una «puntuación de calidad».
// Concepto de análisis de calidad (No es el código completo)
// 1. Cargamos la imagen que el usuario tomó
const img = new Image();
img.src = '...'; // La foto del usuario
// 2. Creamos un compilador de MindAR
const compiler = new window.MINDAR.IMAGE.Compiler();
// 3. Analizamos la imagen
const dataList = await compiler.compileImageTargets([img]);
// 4. Obtenemos la puntuación
const qualityScore = dataList[0].matchingData.length;
// 5. Mostramos al usuario si la imagen es buena, aceptable o pobre
if (qualityScore > 50) {
console.log("¡Marcador excelente!");
} else {
console.log("Prueba una foto con más detalles.");
}Esto es crucial para asegurar que la experiencia de AR sea estable. Si la puntuación es baja, le pedimos al usuario que tome otra foto.
- Generación Dinámica de la Escena
Una vez que tenemos un marcador de buena calidad y el usuario ha seleccionado un modelo 3D, no cargamos una página AR estática. Creamos la escena de A-Frame dinámicamente usando JavaScript.
Aquí está el truco:
Compilamos la imagen del usuario en un archivo .mind virtual (en memoria).
Creamos una URL temporal (un Blob URL) para este archivo en memoria.
Inyectamos una nueva escena <a-scene> en la página, diciéndole a mindar-image que use esa URL temporal como su marcador (imageTargetSrc).
// Concepto de creación de escena (No es el código completo)
// 1. 'compiledMindData' es el marcador que creamos en el paso anterior
// 2. 'selectedModelUrl' es el modelo 3D que el usuario eligió
// Creamos un Blob y una URL temporal para el marcador
const blob = new Blob([compiledMindData]);
const mindUrl = URL.createObjectURL(blob);
// Creamos la escena de A-Frame
const sceneEl = document.createElement("a-scene");
// Configuramos MindAR para usar nuestro marcador recién creado
sceneEl.setAttribute("mindar-image", {
imageTargetSrc: mindUrl
});
// Añadimos la cámara y el modelo 3D
const targetEntity = document.createElement("a-entity");
const modelEl = document.createElement("a-gltf-model");
modelEl.setAttribute("src", selectedModelUrl);
// ... (Añadimos todo al DOM)Y así, ¡hemos creado una experiencia de AR completamente personalizada sin necesidad de un servidor!
¿Quieres el Código Completo?
Este artículo cubre la arquitectura y los conceptos clave, ¡pero hay mucho más! El código completo incluye optimizaciones importantes para que funcione fluidamente en móviles, como:
- El código HTML y CSS completo para la interfaz de 3 pasos.
- Funciones para redimensionar imágenes y mejorar el rendimiento.
- El uso de sessionStorage para persistir el marcador y que no se pierda si la app de la cámara se reinicia (un problema común en móviles).
- Manejo de fugas de memoria (Memory Leaks) al cambiar de modelo.
- Una galería de modelos 3D lista para usar.
He puesto el código fuente completo, optimizado y comentado línea por línea a disposición de mis suscriptores en Patreon. Si quieres construir esta aplicación tú mismo y tener acceso a este y otros proyectos exclusivos, ¡considera apoyarme!
LINK AL ARTICULO DE PATREON PARA DESCARGAR
¡Gracias por leer!