Crea realidad aumentada utilizando múltiples fotografías

La mayoría de los tutoriales de Realidad Aumentada (AR) que encontramos se centran en una cosa: escanear un marcador, mostrar un modelo 3D. Es genial, pero ¿qué pasa si queremos crear una experiencia más compleja? ¿Una escena donde múltiples marcadores interactúen, cada uno con su propio objeto?

Imagina escanear cuatro postales en una mesa y que cada una muestre una parte diferente de un motor, o que cada una muestre un animal distinto o cualquier elemento multimedia. Esto es posible en WebAR (Realidad Aumentada en el navegador) y hoy te enseñaré los conceptos clave para lograrlo usando MindAR y A-Frame.

Imagina hacer realidad aumentada gratis y en minutos con esta super herramienta WebAR: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)

WebAR: Múltiples Marcadores en una Sola Escena con MindAR

Esta aplicación WebAR te permite convertir tus propias imágenes en marcadores. Primero, tomas 4 fotos con el móvil. La app las compila en un archivo .mind. Luego, enlazas ese marcador a un modelo 3D y, como último paso, puedes ver el resultado en Realidad Aumentada.

Pasemos a explicar un poco más a fondo:

• Compilar Múltiples Marcadores en un Solo Archivo

El primer «truco» está en la compilación. En lugar de crear un archivo .mind por cada imagen, MindAR nos permite compilar un array de imágenes en un solo archivo.

Mientras que en un proyecto simple harías esto:

// El método simple
const image = document.getElementById('mi-imagen');
await compiler.compileImageTargets([image], ...);

Para nuestra técnica avanzada, simplemente pasamos un array con todas las imágenes que hemos capturado y redimensionado.

// --- El Concepto Clave ---
// (Asumimos que "capturedImages" es un array con 4 objetos Image)
// capturedImages = [Image_Marcador_1, Image_Marcador_2, Image_Marcador_3, Image_Marcador_4]
const compiler = new window.MINDAR.IMAGE.Compiler();
// ¡La magia! Pasamos el array completo
await compiler.compileImageTargets(capturedImages, (progress) => {
console.log(`Compilando... ${progress.toFixed(2)}%`);
});
// El "data" resultante ahora contiene los 4 targets
const data = await compiler.exportData();

Este archivo .mind (que guardamos en sessionStorage o en una variable) ahora «conoce» cuatro imágenes diferentes y las puede rastrear.

• Mapeo Dinámico: Asignar un Modelo 3D a Cada Marcador de realidad aumentada

Ahora que tenemos un archivo .mind con 4 targets (índices 0, 1, 2 y 3), no queremos que todos muestren lo mismo. El siguiente paso es crear una lógica para «mapear» un modelo 3D a cada índice.

En nuestro proyecto, creamos una interfaz en el «Paso 2» que permite al usuario elegir qué modelo va con qué marcador. El resultado de esa selección es un simple array que guarda las asignaciones.

Este es el concepto de la estructura de datos que usamos:

// Array que guarda las asignaciones del usuario
let selectedModels = [
{ nombre: "Rhino Baby", glb: "./modelos/Rhino Baby.glb" }, // Asignado al targetIndex: 0
{ nombre: "Bird", glb: "./modelos/Bird.glb" }, // Asignado al targetIndex: 1
{ nombre: "Turtle", glb: "./modelos/Turtle.glb" }, // Asignado al targetIndex: 2
{ nombre: "Tiger", glb: "./modelos/Tiger.glb" } // Asignado al targetIndex: 3
];

Con esta estructura, tenemos todo listo para el paso final: construir la escena de A-Frame.

• El Renderizado: Generar la Escena de AR Dinámicamente

Aquí es donde unimos todo. No vamos a escribir 4 entidades <a-entity> estáticas en nuestro HTML. ¿Por qué? Porque queremos que sea dinámico, basado en las asignaciones del usuario.

Cuando iniciamos la escena de Realidad Aumentada, hacemos dos cosas clave:

1. Le decimos a mindar-image que queremos rastrear múltiples marcadores con el atributo maxTrack.
2. Usamos un bucle for de JavaScript para crear las entidades de A-Frame sobre la marcha, asignando el targetIndex correcto y el modelo .glb correcto.

Este es el fragmento de código más importante de todo el proyecto:

// (Dentro de nuestra función "startAR")

// Asumimos NUM_TARGETS = 4
// Asumimos "currentMindUrl" es la URL del Blob de nuestro .mind compilado

const sceneEl = document.createElement("a-scene");

// 1. Configuramos la escena para tracking múltiple
sceneEl.setAttribute("mindar-image", `
imageTargetSrc: ${currentMindUrl};
maxTrack: ${NUM_TARGETS};
filterMinCF:1;
filterBeta:10000;
`);

// ... (Aquí va el código de la cámara y la luz) ...

// 2. ¡El bucle mágico!
for (let i = 0; i < NUM_TARGETS; i++) {
const modelData = selectedModels[i]; // Obtenemos la asignación

// Creamos la entidad "target"
const targetEntity = document.createElement("a-entity");

// Le asignamos su índice de marcador (0, 1, 2, o 3)
targetEntity.setAttribute("mindar-image-target", `targetIndex: ${i}`);

// Creamos la entidad "modelo"
const modelEl = document.createElement("a-gltf-model");

// Le asignamos el .glb correspondiente del array de mapeo
modelEl.setAttribute("src", modelData.glb);
modelEl.setAttribute("animation-mixer", "");

// Añadimos el modelo al target, y el target a la escena
targetEntity.appendChild(modelEl);
sceneEl.appendChild(targetEntity);
}

// Finalmente, añadimos la escena completa al DOM
document.getElementById("step3-ar-container").appendChild(sceneEl);

¿Estas aprendiendo como crear y programar aplicaciones de realidad aumentada? Te invito a que leas estos post:

• Archivo del Blog: Todos los Articulos de WebAR en un Lugar
• De Foto a Realidad Aumentada 3D: Magia con A-Frame y MindAR

El Poder del Tracking Múltiple

¡Y eso es todo! Con estos tres conceptos, hemos pasado de una demo simple a una potente aplicación de WebAR capaz de manejar múltiples marcadores y asignar contenido dinámicamente. Esta es la base para crear experiencias de tracking mucho más ricas, como manuales de instrucciones interactivos, exhibiciones de museos o juegos de mesa con Realidad Aumentada.

Esto es solo la punta del iceberg. El código completo incluye toda la lógica para la captura de imágenes desde el móvil, el redimensionamiento para optimizar el rendimiento y la interfaz de usuario completa para la asignación de modelos.

¡Post Exclusivo! Código Fuente Completo: App WebAR Crea realidad aumentada utilizando múltiples fotografías (HTML, CSS y JS)

Muchísimas gracias por tu increíble apoyo. Es gracias a ti que puedo dedicar tiempo a investigar, crear estos prototipos y compartir el conocimiento más avanzado en WebAR.

Como lo prometí en el artículo del blog, aquí no hay secretos. Tienes acceso al proyecto completo, funcional y con cada línea de código comentada para que entiendas exactamente qué hace y por qué.

Con este código, podrás crear tu propia aplicación de Realidad Aumentada que detecta múltiples marcadores (4 en este caso) y permite al usuario asignar un modelo 3D diferente a cada uno, todo en una sola sesión y desde el navegador.

Da clic en la imagen para ser redireccionado a mi Patreon.

¿Qué incluye esta recompensa?

En el post de patreon encontrarás adjunto el archivo zip para descargar. Este único archivo contiene:

1. Todo el HTML de la estructura de la aplicación (los 3 pasos).
2. Todo el CSS para que sea responsivo y se vea bien en móviles (incluyendo los arreglos de la cuadrícula).
3. Todo el JavaScript (ES6 Module).
4. Capturar y redimensionar 4 imágenes (¡clave para el rendimiento!).
5. Compilar las 4 imágenes fotos en un único archivo .mind.
6. La UI de asignación para «mapear» modelos a marcadores.
7. La generación dinámica de la escena A-Frame con los 4 targets y sus modelos correspondientes.
8. Todos los codigos HTML, CSS y Javascript comentados linea por linea para que sigas paso a paso sin perderte de nada.

Link directo al post con los archivos de descarga