Si alguna vez te has preguntado qué es la realidad aumentada (AR), la respuesta corta es que se trata de una tecnología que superpone elementos digitales, como modelos 3D, animaciones o información, sobre el mundo real en tiempo real.
Durante años, experimentar esta tecnología requería descargar aplicaciones pesadas desde tiendas como Google Play o App Store. Esto generaba fricción: el usuario debía instalar, aceptar permisos y esperar. Muchas veces, simplemente abandonaba el proceso.
Hoy esto ha cambiado radicalmente gracias a la realidad aumentada web, también conocida como WebAR.
En este artículo no solo vas a entender qué es el WebAR, sino que vas a aprender cómo funciona a nivel técnico y cómo puedes crear un videojuego completo en realidad aumentada directamente desde el navegador.
¿Qué es la realidad aumentada web (WebAR)?
La realidad aumentada web es una evolución de la AR tradicional que permite ejecutar experiencias de realidad aumentada sin necesidad de instalar aplicaciones, utilizando únicamente el navegador del dispositivo.
Esto es posible gracias a tecnologías web modernas como HTML, CSS y JavaScript, combinadas con librerías especializadas en AR.
Te invito a visitar Guía Definitiva de WebAR en 2026: Cómo Crear Realidad Aumentada en la Web | Aprende a crear Apps de Realidad Aumentada desde cero
📈 ¿Por qué aprender a desarrollar juegos en WebAR hoy?
El desarrollo en realidad aumentada web representa una oportunidad enorme tanto a nivel técnico como profesional.
Cada vez más empresas buscan integrar experiencias inmersivas en sus productos, campañas y plataformas digitales.
Veamos este articulo muy interesante: Realidad Aumentada: Requisitos, estudio y camino profesional
🎮 Qué vas a construir en este proyecto de realidad aumentada web con javascript
En este artículo vamos a analizar un proyecto real: un juego de combate 1 vs 1 en realidad aumentada.
El juego funciona de la siguiente manera:
- Apuntas la cámara a un marcador físico.
- Aparecen dos personajes 3D en el mundo real.
- Puedes atacar mediante un botón.
- El enemigo responde automáticamente.
- Existe un sistema de vida, daño y animaciones.
Para este proyecto puedes crear tu marcador para realidad aumentada (.mind) utilizando la herramienta: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
⚙️ Tecnologías utilizadas para la creación de este videojuego en realidad aumentada
Este proyecto utiliza herramientas modernas que hacen posible el WebAR.
- A-Frame → Framework para crear escenas 3D usando HTML.
- MindAR → Librería para detección de imágenes en tiempo real.
- Three.js → Motor de animaciones 3D.
Estas tecnologías trabajan juntas para crear una experiencia fluida directamente en el navegador.
Cómo funciona un juego en WebAR
El proyecto se basa en tres pilares fundamentales.
Motor 3D y detección del mundo real
Gracias a MindAR, el sistema puede detectar un marcador físico utilizando la cámara del dispositivo.
Cuando el marcador es reconocido, el contenido 3D se posiciona sobre él.
A-Frame se encarga de renderizar los modelos 3D en pantalla.
Interfaz de usuario ligera (UI)
Uno de los grandes retos del WebAR es no interferir con la cámara.
Por eso, este proyecto utiliza una interfaz flotante que incluye:
- Barras de vida.
- Mensajes dinámicos.
- Botones de acción.
Todo esto sin bloquear la vista del entorno real.
Lógica del juego en JavaScript
El corazón del juego reside en la clase Fighter, una estructura en JavaScript que gestiona todo el comportamiento de los personajes 3D:
- Gestión de Animaciones (THREE.AnimationMixer): El código mapea diccionarios de animaciones (Idle, Attack, Hit, Death) y se asegura de que las transiciones sean fluidas (fadeIn, fadeOut).
- Sistema de Combate por Turnos: Se implementa un sistema de daño aleatorio (Math.floor(Math.random() * 20) + 1) y tiempos de enfriamiento (cooldown) para evitar el «spam» de ataques.
- Sincronización: Una de las partes más brillantes del código es cómo utiliza Promesas (await wait(…)) para sincronizar el impacto del golpe exactamente cuando la animación de ataque llega al 60%, logrando que la realidad aumentada web se sienta reactiva y natural.
La creación de videojuegos en realidad aumentada es un gran campo de estudio y aprendizaje:
- Como crear un video juego en realidad aumentada – Parte Uno
- Como crear un juego en realidad aumentada WebAR – Parte Dos
La Escena A-Frame
todo se ensambla en el cuerpo del HTML. A-Frame permite declarar elementos 3D como si fueran etiquetas web tradicionales:
<a-scene mindar-image="imageTargetSrc: targets.mind;" color-space="sRGB" ...>
<a-assets>
<a-asset-item id="playerGlb" src="./Kai.glb"></a-asset-item>
<a-asset-item id="enemyGlb" src="./Wolf.glb"></a-asset-item>
</a-assets>
<a-entity id="target" mindar-image-target="targetIndex: 0">
<a-entity id="playerContainer" position="-0.8 0 0">...</a-entity>
<a-entity id="enemyContainer" position="0.8 0 0">...</a-entity>
</a-entity>
</a-scene>Configuración del juego en realidad aumentada y su sistema
const CONFIG = {
maxHp: 100,
attackRange: 1.6,
playerAttackCooldown: 1200
};Este bloque dentro del código define las reglas básicas del juego. La vida máxima de cada jugador, el rango de ataque y la velocidad con la que puede atacar.
Cómo se calcula el daño
El daño entre los personajes se maneja principalmente en dos funciones dentro del componente battle-system:
- playerAttackSequence (cuando tú atacas).
- enemyAutoAttack (cuando el enemigo responde).
Esto evita que el juego sea predecible.
const damage = Math.floor(Math.random() * 20) + 1;Sincronización con animaciones
Uno de los aspectos más avanzados es la sincronización del daño con la animación:
await wait(attackDuration * 0.6);¿Por qué esto de las animaciones es importante?
Porque el golpe no ocurre al presionar el botón, sino cuando visualmente el personaje impacta.
Esto mejora significativamente la experiencia del usuario.
Sistema dinamico y multiples animaciones
El sistema permite detectar múltiples animaciones dentro de los modelos 3D.
playerAnimations: {
idle: ["Idle", "idle", "Armature|Idle", "Idle_01"],
attack: ["Punch", "Kicking", "Punching", "Attack_01"],
hit: ["Dizzy", "Hit", "hit", "Armature|Hit", "Hit_01", "Damage"],
death: ["GettingUp", "Death", "death", "Armature|Death", "Die", "Death_01"],
win: ["Guitar1", "Win", "Cheer", "Dance"]
}Interfaz del juego (UI)
Toda la interfaz del juego en realidad aumentada esta desarrollada con CSS y HTML.
La interfaz incluye:
- Barra de vida del jugador.
- Barra de vida del enemigo.
- Mensajes dinámicos.
- Botones táctiles.
🧩 Código completo del proyecto – Cómo crear un videojuego con Realidad Aumentada Web (WebAR) y Javascript.
👉 Aquí puedes acceder al código completo: Link a PATREON TOTALMENTE GRATIS
Este código incluye toda la lógica, animaciones e integración con WebAR.
Conclusión
La realidad aumentada web está transformando la forma en que interactuamos con el contenido digital.
Ya no es necesario desarrollar aplicaciones complejas para crear experiencias inmersivas.
Con tecnologías como A-Frame y MindAR, puedes construir juegos completos que funcionan directamente en el navegador.
👉 Aprender WebAR hoy no solo te permite crear proyectos innovadores, sino que te posiciona en una de las áreas con mayor crecimiento en el desarrollo web.