¿Te gustaría crear una experiencia de realidad aumentada con html gratis, donde un personaje 3D aparezca sobre una fotografía, un cartel o la portada de un libro, sin tener que instalar una aplicación en tu teléfono?
Ahora puedes hacerlo utilizando WebAR Fácil, una nueva librería de realidad aumentada web de código abierto que desarrollé para facilitar la creación de experiencias interactivas desde el navegador.
Con WebAR Fácil (WebAR-facil) puedes utilizar imágenes como marcadores, utilizar SLAM, WebXR, mostrar modelos 3D, reproducir vídeos e incorporar animaciones, interacciones y mucho mas. Todo mediante HTML y JavaScript, sin depender de una plataforma cerrada o una suscripción obligatoria.
En este tutorial aprenderás qué es WebAR Fácil, cómo funciona y cómo crear tu primera experiencia de realidad aumentada paso a paso.
¿Qué es WebAR Fácil (WebAR-facil.js) y para qué sirve?
WebAR Fácil (WebAR-facil) es una librería de código abierto para crear experiencias de realidad aumentada directamente en el navegador utilizando HTML y JavaScript.
Su objetivo es simplificar el desarrollo de aplicaciones de realidad aumentada web, permitiendo mostrar contenido digital sobre imágenes reconocidas por la cámara.
Por ejemplo, imagina que tienes una fotografía de un animal. Al apuntar la cámara de tu teléfono hacia esa fotografía, aparece un modelo 3D animado que puedes observar e incluso manipular.
Esta tecnología se conoce como realidad aumentada basada en imágenes o image tracking.
WebAR Fácil facilita este proceso porque permite utilizar directamente una imagen JPG o PNG como marcador. La librería se encarga de preparar internamente los datos necesarios para reconocerla.
Esto significa que no tienes que generar manualmente archivos de seguimiento antes de crear tu experiencia.
¿Quién puede utilizar WebAR Fácil para crear realidad aumentada con Html?
La librería está pensada para estudiantes, profesores, creadores de contenido, diseñadores y desarrolladores interesados en experimentar con realidad aumentada.
Si tienes conocimientos básicos de HTML, puedes comenzar utilizando sus componentes preparados. Si eres desarrollador, también puedes trabajar con JavaScript e integraciones más avanzadas.
No necesitas dominar motores gráficos para realizar una primera demostración.
¿Cómo funciona la realidad aumentada con Html y WebAR Fácil (webar-facil.js)?
El funcionamiento básico se puede explicar en cuatro pasos:
- Seleccionas una imagen JPG o PNG que funcionará como marcador.
- Agregas un modelo 3D en formato GLB o el contenido que deseas mostrar.
- Creas una página HTML utilizando WebAR Fácil (Webar-facil).
- Abres la página, permites el acceso a la cámara y apuntas hacia la imagen.
Cuando la librería reconoce el marcador, muestra el contenido digital asociado y actualiza su posición según el movimiento de la cámara.
Una de sus ventajas es que el seguimiento de imágenes no requiere que el navegador sea compatible con WebXR.
El reconocimiento depende de factores como la iluminación, la calidad del marcador, la cámara y el rendimiento del dispositivo.
Prueba WebAR Fácil desde tu teléfono
Antes de comenzar a programar, puedes experimentar con una demostración interactiva.
En la página oficial encontrarás a Kai, un personaje 3D que aparece cuando la cámara reconoce su marcador.
La experiencia permite interactuar con el personaje y activar un efecto visual con vídeo y partículas.
15 herramientas para crear realidad aumentada
Cómo probar la demostración de realidad aumentada con WebAR-facil
- Abre la página oficial de WebAR Fácil. Cómo crear realidad aumentada web con JavaScript | WebAR Fácil
- Abre el marcador de demostración e imprímelo o muéstralo en otra pantalla.
- Pulsa el botón Iniciar AR.
- Autoriza el acceso a la cámara.
- Apunta hacia el marcador y espera a que aparezca Kai.
- Toca al personaje para descubrir la interacción.
No necesitas instalar una aplicación adicional. La experiencia se ejecuta desde el navegador, siempre que el dispositivo cumpla los requisitos técnicos.
Cómo crear tu primera aplicación de realidad aumentada con HTML y WebAR-facil
Vamos a crear una experiencia sencilla en la que un modelo 3D aparezca sobre una imagen.
Paso 1. Prepara los archivos
Crea una carpeta para tu proyecto y agrega estos cuatro archivos:
- index.html: la página de realidad aumentada.
- webar-facil.min.js: el archivo compilado de la librería.
- marcador.jpg: la imagen que reconocerá la cámara.
- modelo.glb: el modelo 3D que aparecerá. Crear modelos 3D con inteligencia artificial
Puedes obtener la librería desde su repositorio oficial en GitHub y consultar las instrucciones de instalación.
Paso 2. Agrega el código HTML
Abre un editor de texto, crea el archivo index.html y copia el siguiente ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Mi primera realidad aumentada con WebAR-facil</title>
<script defer src="./webar-facil.min.js"></script>
<style>
body { margin: 0; }
webar-scene {
display: block;
height: 100vh;
height: 100dvh;
}
</style>
</head>
<body>
<webar-scene>
<p role="status">Cargando realidad aumentada...</p>
<webar-target
src="./Marcador.jpg" target-id="poster">
<webar-model
src="./Kai-WebAR-Facil.glb" size="0.3">
</webar-model>
</webar-target>
</webar-scene>
</body>
</html>
Paso 3. Comprende el código
WebAR Fácil utiliza componentes HTML que simplifican la creación de experiencias.
webar-scene crea la escena y administra la cámara.
webar-target indica qué imagen debe reconocer la librería.
webar-model permite cargar el modelo 3D en formato GLB.
El atributo size ajusta el tamaño visual del modelo.
Puedes modificar la imagen o el modelo simplemente cambiando las rutas indicadas en src.
Paso 4. Ejecuta la experiencia de realidad aumentada con javascript (WebAR-facil)
Para probar el proyecto desde tu computador, utiliza un servidor local en lugar de abrir directamente el archivo HTML.
Si quieres acceder desde tu teléfono, publica los archivos en un servidor HTTPS.
Abre la página, permite el acceso a la cámara y apunta hacia la imagen utilizada como marcador.
¡Tu primera experiencia de realidad aumentada estará lista para probar!
Consultar la guía de instalación y primeros pasos
▶ Reproduce el vídeo y utiliza el botón de pantalla completa para verlo más grande.
Una de sus principales ventajas: utilizar imágenes sin precompilarlas
Cuando desarrollamos realidad aumentada basada en imágenes, normalmente necesitamos preparar información que permita al sistema reconocer un marcador.
En determinados flujos de trabajo, esto implica utilizar una herramienta adicional para generar archivos especiales de seguimiento.
Con WebAR Fácil, el proceso se simplifica.
Puedes indicar directamente una imagen JPG o PNG y la librería genera internamente los datos que necesita para analizarla.
Esto reduce los pasos de preparación y facilita las primeras pruebas.
Por ejemplo, puedes utilizar:
- La portada de un libro.
- Una fotografía.
- Una tarjeta educativa.
- Un cartel publicitario.
- La etiqueta de un producto.
- Una ilustración impresa.
Es recomendable utilizar imágenes con suficientes detalles y contrastes para mejorar las posibilidades de reconocimiento.
¿Qué puedes crear con WebAR Fácil?
WebAR Fácil no está limitada a mostrar un único modelo 3D sobre una imagen.
La librería ofrece diferentes posibilidades para desarrollar experiencias interactivas.
1. Modelos 3D sobre imágenes
Puedes colocar personajes, animales, objetos o productos en formato GLB sobre un marcador.
Esta función puede utilizarse en educación, publicidad, museos y materiales impresos.
2. Personajes animados en realidad aumentada
Puedes mostrar modelos 3D con animaciones y controlar su reproducción.
Por ejemplo, crear una mascota virtual que salude cuando aparece sobre una tarjeta.
3. Vídeos en realidad aumentada
También puedes reproducir vídeos MP4 sobre imágenes.
La librería incorpora opciones de chroma key para trabajar con vídeos grabados sobre fondos de color uniforme.
4. Experiencias con varios marcadores
Puedes crear escenas que reconozcan diferentes imágenes y mostrar contenido específico para cada una.
Esto permite desarrollar tarjetas educativas, recorridos interactivos y colecciones de objetos.
5. Modelos 3D que puedes tocar y manipular
Puedes incorporar gestos para girar, seleccionar o cambiar el tamaño de determinados objetos 3D.
6. Realidad aumentada sobre superficies
WebAR Fácil incluye funciones de colocación de modelos sobre superficies mediante WebXR en dispositivos compatibles y alternativas de seguimiento óptico.
Estas capacidades requieren pruebas según el navegador y dispositivo. Algunas son experimentales y la colocación óptica no garantiza precisión métrica.
7. Experiencias avanzadas con JavaScript
Si tienes conocimientos de programación, puedes utilizar eventos de detección, modificar el contenido de una escena e integrar la librería con Three.js o A-Frame.
Explora los 31 ejemplos de WebAR Fácil
Una de las mejores formas de aprender es experimentar con proyectos que ya funcionan.
Por eso preparé una galería con 31 ejemplos de realidad aumentada, donde puedes explorar diferentes capacidades de la librería.
Encontrarás demostraciones de modelos 3D, animaciones, gestos, vídeos, marcadores múltiples, iluminación y colocación espacial.
Puedes utilizarlas como referencia para desarrollar tus propios proyectos.
¿WebAR Fácil es gratis y de código abierto?
Sí. WebAR Fácil es una librería de código abierto cuyo código propio se distribuye bajo licencia MIT.
Puedes estudiar su implementación, utilizarla en tus proyectos y modificarla respetando los términos de la licencia y los avisos correspondientes a sus dependencias.
El código está disponible públicamente en GitHub.
La intención de este proyecto es facilitar el acceso al desarrollo de realidad aumentada web y ofrecer una herramienta que pueda evolucionar con la participación de la comunidad.
¿WebAR Fácil funciona en Android, iPhone y computador?
La librería está diseñada para funcionar desde navegadores compatibles con cámara y WebGL, tanto en teléfonos como en computadores.
Sin embargo, el rendimiento y la disponibilidad de determinadas funciones dependen del navegador, el dispositivo y las capacidades de hardware.
El seguimiento de imágenes y la colocación espacial no tienen exactamente los mismos requisitos.
Por eso es importante probar cada experiencia en los dispositivos donde se utilizará.
Para acceder a la cámara desde un teléfono, normalmente necesitas publicar la página mediante HTTPS.
Preguntas frecuentes sobre WebAR Fácil
Sí. WebAR Fácil permite crear experiencias de realidad aumentada utilizando HTML y modelos 3D, sin pagar una licencia por el código propio de la librería.
Para una experiencia básica con marcadores y modelos GLB, puedes utilizar componentes HTML preparados. Las interacciones avanzadas pueden requerir JavaScript.
No. Las experiencias se abren desde un navegador compatible y utilizan la cámara del dispositivo.
Sí. Puedes incorporar modelos en formato GLB, incluidos modelos animados compatibles.
Sí. Puedes utilizar imágenes JPG o PNG. La librería prepara automáticamente los datos necesarios para su reconocimiento.
La licencia MIT del código propio permite usos comerciales, sujetos a sus condiciones. Debes respetar también las licencias de las dependencias y los recursos que incorpores.
Es otra opción de código abierto para crear experiencias de realidad aumentada web. Su enfoque destaca por el uso directo de imágenes JPG/PNG, los componentes HTML y las integraciones disponibles. La elección depende de las necesidades y requisitos técnicos de cada proyecto.
WebAR Fácil: una librería de realidad aumentada creada en Colombia
Soy IngCarlosReina, creador del proyecto Realidad Aumentada Empezando Desde Cero desde sus inicios en 2008-2009.
Durante años he compartido tutoriales, herramientas y experimentos relacionados con realidad aumentada, programación y tecnologías 3D.
Con WebAR Fácil quiero contribuir a que más personas puedan aprender y experimentar con realidad aumentada desde el navegador, utilizando herramientas abiertas y documentación accesible.
La librería continúa en desarrollo y puede seguir mejorando con pruebas, sugerencias y contribuciones de la comunidad.
Si eres desarrollador, estudiante, profesor o simplemente tienes curiosidad por esta tecnología, te invito a probarla.
Comienza a crear realidad aumentada con WebAR Fácil
La realidad aumentada no tiene por qué comenzar con proyectos complejos.
Una imagen, un modelo 3D y una página HTML pueden ser suficientes para construir tu primera experiencia.
Te invito a conocer WebAR Fácil, explorar sus ejemplos y compartir tus resultados.
Recursos para comenzar:
- Probar WebAR Fácil gratis
- Explorar los 31 ejemplos
- Documentación en español
- Documentación en inglés
- Código fuente en GitHub
- Canal de YouTube
¿Dónde encontrar los archivos fuentes de este tutorial?
Descarga totalmente gratis los archivos de este tutorial en mi patreon.
¿Qué te gustaría crear con WebAR Fácil?
Déjame tu idea en los comentarios. Si pruebas la librería y encuentras algún problema o tienes una sugerencia, puedes compartirla en GitHub para ayudar a mejorar el proyecto.