Hace algunos años, crear una aplicación de realidad aumentada podía implicar aprender programación especializada, trabajar con motores gráficos complejos, desarrollar aplicaciones diferentes para distintos sistemas operativos y distribuirlas mediante tiendas como Google Play o App Store.
Hoy el escenario es muy diferente.
La llegada de WebAR, el crecimiento de JavaScript para aplicaciones 3D, los frameworks open source, los formatos optimizados para modelos 3D y las nuevas herramientas de inteligencia artificial han reducido considerablemente muchas de las barreras que tradicionalmente acompañaban al desarrollo de realidad aumentada.
Actualmente, un desarrollador que conozca HTML, CSS y JavaScript puede comenzar a experimentar con tecnologías como MindAR, A-Frame y Three.js para crear experiencias que utilizan directamente la cámara del navegador.
También existen herramientas como model-viewer para visualizar productos 3D en realidad aumentada, MediaPipe y TensorFlow.js para incorporar visión artificial, Blender para crear y optimizar modelos 3D y Mixamo para animar personajes.

Aquí en realidad aumentada Empezando Desde Cero creamos un Plugin de realidad aumentada para WordPress con MindAR
También creamos un Script en Phyton para Blender para crear realidad aumentada Plugin de Blender con Python para Realidad Aumentada WebAR
Esto no significa que desarrollar una aplicación AR profesional sea siempre sencillo.
Significa algo mucho más importante:
Ya no es necesario desarrollar todos los componentes tecnológicos desde cero.
Actualmente podemos combinar herramientas especializadas y concentrarnos más en la experiencia que queremos ofrecer al usuario.
¿Realmente es más fácil crear realidad aumentada actualmente?
La respuesta corta es: Sí.
Crear realidad aumentada sigue requiriendo conocimientos técnicos cuando queremos desarrollar aplicaciones profesionales, pero muchas de las barreras iniciales se han reducido.
Antes, un desarrollador podía necesitar resolver aspectos relacionados con:
- Acceso y procesamiento de la cámara.
- Reconocimiento de imágenes.
- Tracking de los marcadores.
- Renderizado 3D.
- Animaciones.
- Compatibilidad de dispositivos.
- Publicación de aplicaciones.
- Distribución.
- Optimización gráfica.
Actualmente existen librerías, APIs y herramientas que resuelven una parte importante de esos problemas.
Por ejemplo, una librería como MindAR puede encargarse del seguimiento de imágenes o rostros mientras A-Frame o Three.js gestionan los elementos 3D de la experiencia.
El desarrollador puede entonces dedicar más tiempo a:
- Diseñar la experiencia.
- Crear interacciones.
- Preparar los modelos.
- Desarrollar la interfaz.
- Conectar bases de datos.
- Medir resultados.
- Integrar servicios externos.
- Crear contenido útil para el usuario.
Esta es probablemente una de las mayores revoluciones que ha vivido el desarrollo de realidad aumentada.
Antes y ahora: cómo ha cambiado el desarrollo de realidad aumentada
Una forma sencilla de comprender esta evolución es comparar cómo se desarrollaban muchos proyectos anteriormente con las posibilidades actuales.
| ANTES | ACTUALMENTE |
| Desarrollo principalmente mediante aplicaciones instalables | Podemos utilizar aplicaciones nativas o WebAR |
| Mayor dependencia de SDK especializados | Existen frameworks y librerías JavaScript |
| Publicación mediante tiendas de aplicaciones | Una experiencia WebAR puede distribuirse mediante una URL o QR |
| Desarrollo de muchos componentes desde cero | Librerías resuelven tracking, renderizado y visión artificial |
| Modelos 3D difíciles de distribuir por Internet | GLB y glTF están diseñados para aplicaciones 3D modernas |
| Rigging y animación manual | Herramientas como Mixamo automatizan parte del proceso |
| Machine Learning especializado | MediaPipe y TensorFlow.js permiten incorporarlo a aplicaciones web |
| Cambios sujetos a nuevas versiones de una app | Una aplicación web puede actualizarse directamente desde el servidor |
Las aplicaciones nativas continúan siendo muy importantes.
Sin embargo, ahora tenemos muchas más opciones.
Y precisamente esa posibilidad de elegir la tecnología según el proyecto es una de las grandes facilidades actuales.
WebAR eliminó una de las mayores barreras: instalar una aplicación
Uno de los avances que más ha cambiado la forma de distribuir experiencias de realidad aumentada es WebAR.
WebAR significa, de forma general, utilizar tecnologías web para ofrecer experiencias de realidad aumentada.
El usuario puede encontrarse frente a un anuncio, restaurante, producto, tarjeta o exposición y realizar un proceso como este:
Escanear QR → abrir página → permitir cámara → iniciar experiencia
No necesariamente necesita buscar una aplicación en una tienda, esperar una descarga, instalarla y crear una cuenta.
Para determinados proyectos comerciales, esa reducción de pasos puede ser muy importante.
WebAR resulta especialmente interesante para:
- campañas de marketing.
- Restaurantes. Curso WebAR para Restaurantes: crea menús 3D con realidad aumentada, QR y WhatsApp
- Empaques de productos. Crea una app para mostrar zapatillas en Realidad Aumentada
- Tarjetas interactivas. Cómo mejorar MindAR para crear experiencias de realidad aumentada web más completas
- Educación. Crea un Tracker Crypto en realidad aumentada en tiempo real
- Museos. WebAR Hiperrealista: Tutorial de Gaussian Splatting
- Catálogos. Crea un probador Virtual de Aretes en realidad aumentada
- Eventos. Tutorial WebAR: Tarjeta de Cumpleaños Explosiva con MindAR
- Exposiciones. Galería en Realidad Aumentada Tutorial de Carrusel con Video
- Demostraciones de productos. Convierte tus fotos en Realidad Aumentada WebAR con Polycam
Pero existe una distinción importante.
WebAR no significa necesariamente WebXR
Los dos conceptos están relacionados, pero no son equivalentes.
Una aplicación puede utilizar tecnologías web y ofrecer realidad aumentada sin depender necesariamente de WebXR.
Por ejemplo, MindAR puede utilizar la cámara del navegador para detectar imágenes o rostros.
WebXR, por otro lado, proporciona APIs destinadas a experiencias inmersivas y puede utilizar capacidades espaciales cuando existe compatibilidad con el navegador y el dispositivo.
También existen herramientas como model-viewer, capaces de utilizar distintas alternativas AR dependiendo de la plataforma.
Por eso, antes de elegir una tecnología debemos definir qué tipo de realidad aumentada necesitamos. Tutorial AR Universal: Realidad Aumentada sin WebXR
MindAR facilita el reconocimiento de imágenes y rostros
Uno de los problemas más complejos de una aplicación de realidad aumentada es saber dónde debe aparecer el contenido digital.
En experiencias basadas en imágenes, por ejemplo, necesitamos que la aplicación reconozca una imagen determinada y pueda seguir su posición mediante la cámara.
Desarrollar un sistema de este tipo desde cero requiere conocimientos importantes de visión por computadora.
Actualmente podemos utilizar librerías como MindAR.
MindAR permite trabajar principalmente con dos tipos de tracking:
- Image Tracking.
- Face Tracking.
Esto hace posible crear experiencias donde una fotografía, tarjeta, póster, menú o empaque funcione como punto de referencia para colocar contenido aumentado.
Podemos tener un flujo como:
Imagen física – Cámara – Reconocimiento – Tracking – Modelo 3D / video / imagen / interfaz
Para un desarrollador web, esto supone una enorme ventaja.
Ya no tiene que construir el algoritmo completo de reconocimiento.
Puede concentrarse principalmente en qué debe ocurrir cuando el marcador es detectado.
¿Qué podemos crear con Image Tracking?
Por ejemplo:
- Tarjetas de presentación aumentadas.
- Libros interactivos.
- Publicidad AR.
- Catálogos.
- Packaging.
- Exposiciones.
- Menús.
- Material educativo.
¿Y con Face Tracking qué podemos hacer?
Podemos desarrollar experiencias como:
- Filtros.
- Gafas virtuales.
- Accesorios.
- Máscaras.
- Efectos faciales.
- Personajes.
- Demostraciones de productos.
Este tipo de librerías demuestra perfectamente cómo las herramientas actuales han reducido la complejidad inicial del desarrollo AR.
A-Frame acercó las escenas 3D al desarrollo web
Otro elemento importante es A-Frame.
A-Frame permite construir escenas 3D utilizando una estructura declarativa que resulta familiar para quienes vienen del desarrollo web.
Por ejemplo:
<a-scene>
<a-box position="0 1 -3"></a-box>
</a-scene>A partir de una estructura relativamente sencilla podemos comenzar a trabajar con:
- Objetos.
- Modelos 3D.
- Cámaras.
- Luces.
- Posiciones.
- Rotaciones.
- Escalas.
- Animaciones.
- Eventos.
Después podemos utilizar JavaScript para desarrollar comportamientos más avanzados.
Esta aproximación reduce considerablemente la curva de aprendizaje inicial para una persona que ya conoce HTML.
Y esto es importante porque una gran cantidad de desarrolladores web pueden comenzar a experimentar con entornos 3D sin cambiar completamente de ecosistema tecnológico.
Three.js ofrece el control cuando necesitamos ir más lejos
A-Frame simplifica muchas tareas, pero algunos proyectos necesitan un nivel mayor de control.
Ahí entra Three.js.
Three.js es una biblioteca JavaScript utilizada para crear y controlar gráficos 3D dentro de aplicaciones web.
Permite trabajar directamente con elementos como:
- escenas;
- cámaras;
- Objetos.
- geometrías;
- materiales;
- luces;
- modelos;
- texturas;
- animaciones;
- shaders;
- raycasting;
- renderizado.
Un detalle importante es que A-Frame está construido sobre Three.js.
Por lo tanto, no necesariamente debemos pensar en:
- A-Frame vs Three.js
Podemos pensar en:
- A-Frame + Three.js
A-Frame puede acelerar la creación de la estructura mientras Three.js nos proporciona acceso a funciones más avanzadas cuando son necesarias.
Ahora también podemos mostrar productos en realidad aumentada con muy poco código
No todas las aplicaciones necesitan un complejo sistema de tracking.
Imagine, por ejemplo, una tienda de muebles.
El objetivo puede ser simplemente permitir que el cliente visualice un modelo 3D y después intente colocarlo en su espacio.
Para este tipo de proyectos existe model-viewer.
Su estructura básica puede ser sorprendentemente sencilla:
<model-viewer
src="producto.glb"
ar
camera-controls>
</model-viewer>A partir de ahí podemos desarrollar una experiencia más completa.
Esto puede utilizarse para mostrar:
- Muebles.
- Decoración.
- Esculturas.
- Productos.
- Maquinaria.
- Objetos educativos.
- Piezas de colección.
El hecho de que actualmente podamos integrar visualización 3D y opciones AR dentro de una página web utilizando un componente especializado demuestra cuánto ha cambiado el desarrollo.
También puedes desarrollar aplicaciones de realidad aumentada sin necesidad de código con este plugin para WordPress.
Mira este ejemplo:
Para visualizar esta aplicacion de realidad aumentada utiliza esta imagen como marcador.

La inteligencia artificial está creando otra facilidad completamente nueva
Hasta ahora hemos hablado principalmente de herramientas que simplifican procesos existentes.
Pero la inteligencia artificial está provocando un cambio diferente. Fusión de IA y Realidad Aumentada: Lo que viene a futuro
Podemos utilizarla tanto para ayudarnos a desarrollar la aplicación como dentro de la propia experiencia.
Inteligencia artificial para ayudar al desarrollador
Los asistentes actuales pueden ayudar a:
- Crear estructuras HTML.
- Escribir JavaScript.
- Generar componentes.
- Explicar errores.
- Analizar código.
- Crear prototipos.
- Documentar funciones.
- Sugerir optimizaciones.
- Desarrollar interfaces.
Esto no elimina la necesidad de conocer programación.
El desarrollador todavía debe entender:
- Qué está haciendo el código.
- Qué arquitectura necesita.
- Cómo funciona el tracking.
- Cómo optimizar el proyecto.
- Cómo solucionar incompatibilidades.
Pero sí puede acelerar muchos procesos repetitivos.
En los siguientes artículos puedes encontrar como implementar inteligencia artificial en aplicaciones de realidad aumentada WebAR.
- Inteligencia Artificial: Guía de herramientas para tu futuro
- Realidad Aumentada en Javascript con inteligencia artificial
- Inteligencia artificial en una app de realidad aumentada
- Hagamos un chatbot en realidad aumentada con Google Gemini
Inteligencia artificial dentro de la realidad aumentada
Todavía más interesante es utilizar Machine Learning directamente en la experiencia.
Aquí aparecen herramientas como:
- MediaPipe.
- TensorFlow.js
Con la IA podemos desarrollar aplicaciones más complejas. Mira, por ejemplo:
- Reconocimiento de objetos usando TensorFlow.js y Keras
- Inteligencia Artificial en la Web: TensorFlow.js y Keras
- App con TensorFlow.js y Keras – IA para reconocer objetos
- Hagamos una web con IA y AR – Mobilenet y TensorFlow.js
Con ellas podemos desarrollar aplicaciones capaces de analizar información proveniente de imágenes o video.
Por ejemplo:
Cámara – Modelo de Machine Learning – Detección – Interpretación – Respuesta de la aplicación.
Podemos trabajar con:
- Rostros.
- Landmarks faciales.
- Manos.
- Poses.
- Objetos determinados.
- Gestos.
- Clasificación visual.
Esto abre un nuevo tipo de aplicaciones AR.
En lugar de mostrar siempre el mismo contenido, una experiencia puede comenzar a reaccionar dependiendo de lo que observa.
Por ejemplo:
Si reconoce determinado objeto, muestra información relacionada O Si detecta una mano, permite utilizar determinados gestos para controlar un objeto 3D.
La combinación entre realidad aumentada + inteligencia artificial + visión por computadora será cada vez más importante dentro del desarrollo interactivo.
Actualizar una aplicación WebAR también puede ser más sencillo
Existe otra ventaja que muchas veces se pasa por alto.
Imagine que una campaña contiene un error.
En una aplicación tradicional distribuida mediante una tienda, determinados cambios pueden implicar generar y distribuir una nueva versión.
En una aplicación WebAR alojada en nuestro servidor podemos modificar el proyecto y publicar nuevamente los archivos.
Cuando el usuario vuelva a acceder, puede recibir la versión actualizada.
Esto permite corregir o modificar:
- Textos.
- Modelos 3D.
- Videos.
- Promociones.
- Interfaces.
- Botones.
- Precios.
- Campañas.
- Enlaces.
Para proyectos comerciales donde el contenido cambia frecuentemente, esta capacidad puede resultar muy útil.
JavaScript permite conectar la realidad aumentada con prácticamente todo el ecosistema web
Aquí aparece otra de las mayores facilidades.
Una experiencia WebAR no tiene por qué ser solamente: cámara + modelo 3D.
Al estar utilizando tecnologías web podemos conectar la experiencia con otros servicios.
Por ejemplo:
- Bases de datos: Podemos guardar información relacionada con usuarios, productos o acciones.
- APIs: La aplicación puede consultar servicios externos.
- Comercio electrónico: Podemos conectar productos con botones de compra.
- WhatsApp, Telegram: Una experiencia puede enviar al usuario directamente hacia una conversación comercial.
- Formularios: Podemos capturar leads.
- Analítica: Podemos registrar determinadas interacciones para comprender cómo utilizan las personas la experiencia.
- Sistemas en tiempo real: Podemos desarrollar aplicaciones donde diferentes usuarios compartan información.
Es aquí donde WebAR comienza a convertirse realmente en una aplicación web aumentada, y no simplemente en un visor 3D.
¿Qué herramienta facilita cada tipo de proyecto de realidad aumentada?
Una de las grandes ventajas actuales es que no necesitamos utilizar la misma tecnología para todo.
Incluso exiten muchas mas herramientas que permiten hacer todo lo que hemos venido hablando.
Esta es una tabla con algunas de las herramientas que utilizo para la creacion de aplicaciones de realidad aumentada WebAR.
| Quiero desarrollar… | Tecnología que puede ayudar |
| AR sobre fotografías | MindAR Image Tracking |
| Tarjetas interactivas | MindAR + A-Frame |
| Filtros faciales | MindAR Face Tracking |
| Detección facial y manos avanzada | MediaPipe |
| Productos 3D | model-viewer o AR Quick Look |
| Escenas 3D declarativas | A-Frame |
| Aplicaciones 3D personalizadas | Three.js |
| Experiencias inmersivas compatibles | WebXR |
| Detección mediante Machine Learning | MediaPipe / TensorFlow.js |
| Modelos 3D | Blender, meshy, sketchfab |
| Animación de personajes humanoides | Mixamo, Blender |
| Aplicaciones Android AR avanzadas | ARCore |
| Aplicaciones AR para ecosistema Apple | ARKit / RealityKit |
| Desarrollo AR con motor multiplataforma | Unity / AR Foundation |
No existe una herramienta perfecta para todos los proyectos.
La facilidad actual está precisamente en poder seleccionar la combinación adecuada.
Entonces, ¿Realidad Aumentada WebAR reemplaza a las aplicaciones nativas?
La respuesta corta es: NO.
Y es importante dejarlo claro.
Las aplicaciones nativas continúan siendo la mejor solución para determinados proyectos.
Pueden ofrecer ventajas cuando necesitamos:
- Acceso profundo al hardware.
- Capacidades AR específicas.
- Máximo rendimiento.
- Funcionalidades offline complejas.
- Características propias del sistema operativo.
- Experiencias persistentes.
- Aplicaciones de gran escala.
Realidad Aumentada WebAR tiene otras ventajas.
Puede ser particularmente interesante cuando buscamos:
- Acceso rápido;
- Distribución mediante QR;
- Campañas temporales;
- Experiencias de marketing;
- Educación;
- Catálogos;
- Productos;
- Restaurantes;
- material impreso interactivo.
La facilidad actual no consiste en que WebAR sea mejor que todo lo demás.
Consiste en que ahora tenemos más caminos para solucionar el mismo problema.
El nuevo reto de la realidad aumentada
Curiosamente, cuando desarrollar se vuelve más accesible aparece un problema diferente.
La pregunta ya no es solamente:
¿Cómo puedo colocar un modelo 3D delante de la cámara?
Ahora debemos preguntarnos:
¿Por qué debería hacerlo?
Una buena aplicación de realidad aumentada necesita tener una razón para existir.
Puede:
- Explicar algo mejor.
- Mostrar algo que físicamente no está disponible.
- Facilitar una decisión.
- Enseñar.
- Entretener.
- Vender.
- Proporcionar información.
- Conectar un objeto físico con contenido digital.
La tecnología debe estar al servicio de esa experiencia.
Conclusión: nunca habíamos tenido tantas opciones para crear realidad aumentada
La realidad aumentada sigue siendo una tecnología compleja.
Detrás del tracking, renderizado, visión artificial y gráficos 3D existen procesos técnicos avanzados.
La diferencia es que actualmente no necesitamos desarrollar todos esos procesos nosotros mismos.
Podemos utilizar MindAR para reconocimiento de imágenes y rostros, A-Frame para estructurar escenas 3D, Three.js cuando necesitamos mayor control, model-viewer para determinados proyectos de visualización de productos, Blender para preparar contenido y MediaPipe o TensorFlow.js cuando queremos incorporar inteligencia artificial.
Además, WebAR permite distribuir determinadas experiencias mediante una URL o código QR sin obligar al usuario a instalar una aplicación tradicional.
Esto ha reducido considerablemente la barrera de entrada.
Pero también ha cambiado nuestra responsabilidad como desarrolladores.
Ahora que tenemos tantas herramientas disponibles, el objetivo no debería ser simplemente demostrar que podemos colocar un modelo 3D sobre una cámara.
El verdadero objetivo debería ser utilizar la realidad aumentada para resolver un problema, explicar algo mejor, facilitar una decisión o crear una experiencia que tenga verdadero valor para el usuario.
Crear realidad aumentada es hoy más accesible que nunca.
Y probablemente la pregunta más interesante ya no sea:
¿Es posible crear esta experiencia?
Sino:
¿Qué podemos crear ahora que todas estas herramientas están a nuestro alcance?
El punto sobre cómo un desarrollador con conocimientos de HTML, CSS y JavaScript puede empezar a crear con MindAR, A-Frame y Three.js es crucial. Esta accesibilidad es lo que realmente está democratizando la realidad aumentada para muchísimos más creativos hoy en día.
Muchas gracias por tu comentario. La creatividad es lo más importante a la hora de desarrollar aplicaciones de realidad aumentada. Hoy tenemos la posibilidad de desarrollar aplicaciones de realidad aumentada WebAR muy fácil y esto nos permite generar ingresos extras.