Tutorial de realidad aumentada WebAR con MindAR y JavaScript: Guía Paso a Paso Desde Cero (2026)

La realidad aumentada WebAR ha evolucionado rápidamente en los últimos años. Lo que antes requería aplicaciones nativas desarrolladas en motores como Unity, hoy puede implementarse directamente desde el navegador gracias al WebAR.

Si estás buscando cómo crear una experiencia de realidad aumentada usando JavaScript sin depender de aplicaciones móviles, esta guía es para ti.

En este tutorial aprenderás:

Qué es WebAR y cómo funciona.
Qué es MindAR.
Cómo crear una experiencia de image tracking paso a paso.
Cómo agregar modelos 3D optimizados.
Mejores prácticas profesionales.

Al finalizar, tendrás tu primera experiencia WebAR funcionando en el navegador.

¿Qué es Realidad Aumentada WebAR?

WebAR (Web Augmented Reality) es una tecnología que permite ejecutar experiencias de realidad aumentada directamente desde el navegador web.

En lugar de instalar una aplicación, el usuario simplemente:

Abre un enlace.
Permite acceso a la cámara.
Interactúa con la experiencia AR.

WebAR utiliza tecnologías como:

WebGL.
WebXR.
JavaScript.
HTML5.

Esto permite distribuir experiencias mediante:

Enlaces.
Códigos QR.
Landing pages.
Campañas de marketing.

¿Por qué usar MindAR para realidad aumentada?

MindAR es una librería open source diseñada para crear experiencias WebAR con reconocimiento de imagen (image tracking).

Ventajas principales:

Funciona en iOS y Android.
No requiere app.
Integración sencilla con A-Frame.
Código relativamente simple.
Buen rendimiento en móviles.

A diferencia de soluciones comerciales como 8thWall, MindAR es gratuita y perfecta para desarrolladores que quieren control total del proyecto.

Requisitos Previos para hacer una aplicación de Realidad Aumentada WebAR

Antes de comenzar necesitas:

Conocimientos básicos de HTML.
Conocimientos básicos de JavaScript.
Un servidor HTTPS (obligatorio para acceder a la cámara).
Un marcador de imagen convertido a archivo .mind

Si no usas HTTPS, la cámara no funcionará.

Arquitectura Básica de un Proyecto WebAR (Augmented Reality WebAR)

Un proyecto WebAR con MindAR se compone de:

Archivo HTML principal.
Librerías externas (MindAR + A-Frame).
Archivo .mind (marcador).
Modelo 3D (.glb).
Hosting con HTTPS.

Paso 1: Crear la estructura inicial del WebAR

Crea un archivo index.html con el siguiente código base:

<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: marcadorweb.mind;" 
      color-space="sRGB" 
      renderer="colorManagement: true, physicallyCorrectLights" 
      vr-mode-ui="enabled: false" 
      device-orientation-permission-ui="enabled: false">
      
      <a-assets>
        <a-asset-item id="modeloGLB" src="./tomb_raider_laracroft.glb"></a-asset-item>
      </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

      <a-entity mindar-image-target="targetIndex: 0">
        <a-gltf-model rotation="0 0 0" position="0 0 0" scale="1.5 1.5 1.5" src="#modeloGLB"></a-gltf-model>
      </a-entity>
      
    </a-scene>
  </body>
</html>

Este código crea una escena básica que detecta una imagen y muestra un modelo en formato .GLB encima.

En los siguientes pasos explicaremos es

Paso 2: Generar el archivo .mind (Marcador).

Para usar image tracking (Reconocimiento de imágenes a color) necesitas convertir tu imagen en un archivo compatible y que MindAR reconozca para que aparezca tu modelo 3D.

Vamos a utilizar esta imagen como marcador para este tutorial. Descarga desde aquí: Marcador.webp (1696×2180)

Con esta herramienta web genera el archivo .mind desde una imagen JPG o PNG. Compilador de Marcadores AR | Crea Realidad Aumentada Gratis

Recomendaciones para el marcador:

Alto contraste.
Muchos detalles.
No usar imágenes demasiado simples.
Evitar patrones repetitivos.

Paso 3: Agregar un Modelo 3D

<a-assets>
  <a-asset-item id="modeloGLB" src="./tomb_raider_laracroft.glb"></a-asset-item>
</a-assets>

Y luego lo instanciamos con:

<a-gltf-model 
  rotation="0 0 0" 
  position="0 0 0" 
  scale="1.5 1.5 1.5" 
  src="#modeloGLB">
</a-gltf-model>

El modelo 3D utilizado lo descargue desde la comunidad de sketchfab y del usuario: 3D models by ItsKrish7 (@f1ec06ea1594482bb780a65d0f9afb) – Sketchfab

🔥 Buenas prácticas para el modelo GLB

Para que funcione bien en WebAR móvil:

Menos de 20k–30k triángulos.
Formato .glb en lugar de .gltf u otros tipos de formatos.
Un solo atlas UV si es posible.
Compresión con Draco si el modelo es pesado.
Utiliza este compresor de modelos 3D en formato GLB: AR Optimizer Pro – Compresor GLB | Realidad Aumentada

Que es una WebAR ejemplo de realidad aumentada

En este momento tu aplicación ya debería estar funcionando! ¡Felicitaciones!

Paso 4: Agregar Animaciones al Modelo 3D

Si tu archivo glb tiene animaciones embebidas, puedes activarlas fácilmente agregando el componente animation-mixer.

Modifica el modelo así:

<a-gltf-model 
  rotation="0 0 0" 
  position="0 0 0" 
  scale="1.5 1.5 1.5" 
  src="#modeloGLB"
  animation-mixer>
</a-gltf-model>

Si quieres saber mas sobre animaciones en realidad aumentada te recomiendo este articulo tutorial: Controla Animaciones 3D en apps de realidad aumentada WebAR

Paso 5: Editar, subir y publicar tu aplicación WebAR en internet

Opciones recomendadas:

Utiliza Visual Studio Code o cualquier otro editor de código para crear tu archivo HTML.
Vercel: Build and deploy the best web experiences with the AI Cloud
Push your ideas to the web | Netlify
Editor de codigo online: OneCompiler – Write, run and share code online | Free online compiler with 100+ languages and databases
CodePen: Online Code Editor and Front End Web Developer Community
Hosting tradicional con SSL.

Errores Comunes al Crear WebAR

No usar HTTPS
Modelos 3D demasiado pesados.
Escala incorrecta.
Marcadores de baja calidad.
No probar en múltiples dispositivos (Tabletas, telefonos, PC, etc.).

Estos dos articulos te pueden ayudar mucho cuando encuentrar errores en tus aplicaciones de realidad aumentada WebAR.

¿Cuándo usar WebAR en lugar de App Nativa?

Usa WebAR cuando:

Necesites acceso rápido mediante QR.
- Crea tus Códigos QR: La Puerta de Entrada a la WebAR y PWA
- Realidad Aumentada WebAR lee codigos QR y Codigos de barras
No quieras que el usuario instale app.
- Instala una PWA: WebAR y PWA: El Dúo para la Realidad Aumentada del Futuro
Hagas campañas de marketing.
- Crea una app para mostrar zapatillas en Realidad Aumentada
- Crea un Menú de Restaurante AR: Tutorial WebAR Paso a Paso
Necesites prototipado rápido.

Usa app nativa cuando:

Requieras tracking espacial avanzado.
Implementes experiencias complejas 3D (Este tema puede ser debatible y lo dejaremos para otro artículo).

¿Cuál es el siguiente paso para seguir aprendiendo WebAR Realidad Aumentada en la Web?

WebAR con MindAR y JavaScript permite crear experiencias de realidad aumentada accesibles, escalables y sin fricción para el usuario.

Si tu objetivo es dominar la realidad aumentada WebAR en el navegador, aprender esta tecnología es fundamental para tu desarrollo como profesional. En este blog encontraras todo el contenido necesario para crear experiencias de realidad aumentada en la web. Para finalizar te dejo esta web donde estan todos los articulos que te pueden interesar: Blog de Realidad Aumentada | Tutoriales WebAR, MindAR y más