¿Por qué es Importante el porcentaje de reconocimiento de tu marcador en Realidad Aumentada?
Al desarrollar apps de realidad aumentada, uno de los mayores desafios para los desarrolladores es crear un marcador perfecto, que el usuario nunca tenga problemas de reconocimiento con el marcador y que siempre se visualice de manera correcta nuestro contenido AR (Augmented Reality).
Una buena práctica que facilita el trabajo es permitirle al usuario y al desarrollador poder visualizar en la pantalla de la WebAR si nuestro marcador ha sido detectado y la calidad del mismo.
Sin esta retroalimentación, es común que la gente mueva el dispositivo sin saber si está haciendo lo correcto, lo que lleva a frustración.
Hagamos un ejemplo, que contenga lo siguiente:
- Un panel de información que muestre un porcentaje de reconocimiento. Esto es vital porque:
- Guía al usuario: Le indica si está acercando o alejando demasiado el marcador, o si necesita ajustar el ángulo.
- Mejora la experiencia: Hace que la interacción sea más fluida y menos «a ciegas».
- Facilita la depuración: Como desarrollador, te ayuda a entender la robustez de tu marcador y la efectividad del seguimiento.
¿Qué Necesitamos para Empezar?
Para seguir este tutorial y aprender a crear realidad aumentada en la web, necesitarás lo siguiente:
- Un navegador web compatible: Chrome, Firefox, Safari (en iOS), etc.
- Un editor de texto: Para escribir tu código HTML, CSS y JavaScript. (Yo utilizo Visual Studio Code).
- Un servidor web local: Para probar tu proyecto (Yo utilizo XAMPP).
- Una imagen de marcador: Esta será la imagen que la cámara de tu dispositivo reconocerá. Deberás convertirla en un archivo .mind usando las herramientas de MindAR. Crea tus marcadores para realidad aumentada
- Un modelo 3D: Preferiblemente en formato glTF (.gltf o .glb). Este modelo aparecerá sobre tu marcador. Para este ejemplo descargue este modelo 3D desde la comunidad de Sketchfab
Te dejo el Short de Youtube.
Descarga el código fuente de este tutorial en la comunidad de realidad aumentada empezando desde cero: Ingresar
Desglose del Código: Tu Guía para la RA Web y el Reconocimiento
- Configuración Inicial (<head> y Librerías)
A-Frame (versión 1.5.0): Un framework web para construir experiencias de realidad virtual (VR) y realidad aumentada (AR) en el navegador. Utiliza un sencillo marcado HTML, lo que lo hace muy accesible.
MindAR (versión 1.2.5): Una librería JavaScript ligera para el seguimiento de imágenes en RA. Se integra perfectamente con A-Frame para detectar marcadores y superponer contenido 3D.
También incluimos estilos CSS para asegurar que la experiencia sea de pantalla completa y, crucialmente, para el panel de información que muestra el estado de reconocimiento.
- Panel de Información y Barra de Confianza (.info-panel)
Este div con la clase info-panel crea una pequeña barra en la esquina superior izquierda de la pantalla. Su propósito es ofrecer retroalimentación visual instantánea al usuario:
recognition-status: Muestra un mensaje de texto como «Buscando Imagen…» o «Imagen Detectada (85%)».
confidence-bar / confidence-fill: Una barra de progreso que se llena y cambia de color (rojo, naranja, verde) para representar visualmente el porcentaje de confianza en la detección del marcador. Esto facilita enormemente el reconocimiento del marcador para el usuario.
- La Escena de A-Frame (<a-scene>)
mindar-image=»imageTargetSrc: ./targets.mind; autoStart: true; filterMinCF:0.001; filterBeta: 10000; warmupTolerance:0.5; missTolerance:0.5;»:
Este atributo le dice a MindAR dónde encontrar tu archivo de marcador (targets.mind).
Los parámetros filterMinCF, filterBeta, warmupTolerance, y missTolerance son clave para ajustar la sensibilidad y estabilidad del reconocimiento. Mira este post para saber más sobre estos parametros de MindAR.
embedded: Hace que la escena de A-Frame se integre dentro de la página HTML.
color-space=»sRGB» y renderer=»colorManagement: true, physicallyCorrectLights: true»: Estas propiedades mejoran la calidad visual de tus modelos 3D, asegurando una gestión de color precisa y una iluminación más realista.
vr-mode-ui=»enabled: false» y device-orientation-permission-ui=»enabled: false»: Desactivan la interfaz de usuario por defecto para VR y los permisos de orientación del dispositivo, ya que estamos enfocados en la RA basada en imagen.
- Carga de Recursos (<a-assets>)
Aquí declaramos los recursos que usaremos en nuestra escena para que A-Frame pueda precargarlos.
<a-asset-item id=»my-gltf-model» src=»./scene.gltf»></a-asset-item>: Carga tu modelo 3D. El id (my-gltf-model) nos permite referenciarlo más tarde. La src debe apuntar a la ruta de tu archivo glTF (o GLB).
- El Marcador y el Contenido 3D (<a-entity mindar-image-target>)
Esta es la parte mágica donde se conecta la imagen física con tu modelo virtual.
mindar-image-target=»targetIndex: 0″: Asocia este a-entity con el primer marcador definido en tu archivo targets.mind. Si tienes varios marcadores, cambiarías el targetIndex (0 para el primero, 1 para el segundo, etc.).
gltf-model=»#my-gltf-model»: Este atributo le dice a A-Frame que cargue el modelo 3D que definimos en a-assets (usando su id).
position=»0 0 0″, scale=»0.075 0.075 0.075″, rotation=»45 0 0″: Estos atributos controlan cómo se posiciona, escala y rota tu modelo 3D sobre el marcador. La escala es crucial: 0.075 es un buen punto de partida, pero puedes ajustarlo según el tamaño real de tu modelo y el efecto que quieras lograr.
- La Cámara (<a-camera>)
MindAR se encarga de la cámara en escenas de RA, por eso la desactivamos (active=»false») y deshabilitamos los controles manuales (look-controls=»enabled: false»).
- Lógica de Reconocimiento y Retroalimentación (JavaScript)
El script JavaScript se encarga de:
Obtener referencias a los elementos del panel de información (recognition-status y confidence-fill).
Escuchar los eventos targetFound (cuando la imagen es detectada) y targetLost (cuando la imagen se pierde de vista) emitidos por MindAR.
Actualizar dinámicamente el panel de información: La función startRecognitionUpdateLoop() se ejecuta repetidamente. Cuando el marcador es detectado (detectionState === 1), el currentConfidence aumenta gradualmente, y cuando se pierde, disminuye. Esto simula el «porcentaje de reconocimiento» y actualiza la barra y el texto, ofreciendo una guía clara al usuario para el reconocimiento del marcador.
¡Lleva tus Ideas a la Realidad Aumentada con Confianza!
Con A-Frame y MindAR, las posibilidades son infinitas. Desde experiencias de marketing interactivas hasta herramientas educativas inmersivas, aprender a crear realidad aumentada en la web te abre un mundo de oportunidades.
La adición de un indicador de reconocimiento no solo mejora la usabilidad de tus apps de realidad aumentada, sino que también empodera al usuario para interactuar de forma más efectiva.
¡Esperamos que este tutorial te inspire a explorar el fascinante campo de la RA y a crear experiencias web increíbles!