Qué es WebXR: la guía completa para entender AR, VR y MR en la web

La forma en la que navegamos por Internet está pegando un salto de gigante: ahora la web también es un lugar para experiencias inmersivas. WebXR es el puente que lleva la Realidad Virtual (VR) y la Realidad Aumentada (AR) directamente al navegador, sin instalaciones pesadas ni pasos interminables. Si alguna vez has pensado “esto debería abrirse con un enlace”, estás en el sitio adecuado.

Hablamos de una tecnología abierta impulsada desde el W3C que conecta el JS del día a día con sensores, cámaras y visores XR. Desde probar un sofá en tu salón hasta recorrer un museo a 360°, todo puede arrancar a golpe de URL. Y sí, hay truco: estándares, APIs, motores 3D y un ecosistema que evoluciona a toda velocidad.

Qué es WebXR y por qué importa

WebXR es la especificación que habilita experiencias XR (AR, VR y MR) en la web. Permite iniciar sesiones inmersivas directamente desde el navegador, con acceso a capacidades del dispositivo como seguimiento de movimiento, controladores, manos, sensores y cámaras. En una frase: el navegador se convierte en “aplicación XR”.

El estándar lo desarrolla el W3C y lo implementan los navegadores (“clientes”) en cada plataforma. Para el render 3D se apoya en APIs como WebGL y, progresivamente, WebGPU; el audio espacial llega vía WebAudio. Esto significa que puedes programar en JavaScript/TypeScript y desplegar en cualquier sitio web.

Más allá del titular, hay algo clave: WebXR democratiza el acceso a experiencias inmersivas. No necesitas publicar en una tienda ni obligar a instalar apps nativas: basta con compartir un enlace por redes, un QR en un cartel o un botón en tu e‑commerce.

Tipos de experiencias en WebXR

• AR (Realidad Aumentada en la Web): superpone objetos digitales sobre el mundo físico usando la cámara del dispositivo. Hoy, los navegadores modernos exponen capacidades nativas de AR vía WebXR en algunos entornos, lo que mejora el rendimiento respecto a librerías de tracking puramente web. Casos típicos: probar productos a escala real, instrucciones interactivas o guías turísticas.
• VR (Realidad Virtual en la Web): sumerge por completo al usuario en un entorno 3D. Con un visor compatible, puedes explorar mundos, simular entrenamientos o visualizar arquitectura desde el navegador. La interacción abarca controladores, manos y físicas del entorno.
• MR (Realidad Mixta en la Web): combina física y digital con interacción bidireccional. Los objetos virtuales conviven con el espacio real, abriendo la puerta a apps de productividad, educación colaborativa y juegos que reaccionan al entorno.
• Transiciones fluidas entre AR y VR: el estándar permite pasar de una sesión a otra sin “cortes”. Arrancas en VR para un briefing y saltas a AR para colocar un objeto en tu salón, dentro de la misma experiencia.

Ventajas clave de WebXR

Multiplataforma real

Las experiencias se ejecutan en cualquier dispositivo con navegador: visores como Meta Quest o HoloLens, ordenadores, tablets y móviles. Ideal para llegar a grandes audiencias sin perder la puerta abierta a AR y VR.

Preparado para lo que viene

Los estándares web evolucionan con nuevos dispositivos. Tu app web espacial puede funcionar en hardware futuro desde el día uno, incluso en plataformas recién lanzadas.

Acceso sin fricción

Con abrir una URL, listo. No hace falta instalar nada, aunque puedes “instalar” como PWA usando Añadir a la pantalla de inicio y service workers para funcionar sin conexión.

Publicación ágil

La web no depende de la curación de tiendas. Subes al servidor, apuntas al dominio y actualizas para todos con un deploy. Así de simple.

Compartir es trivial

Un enlace se comparte por redes, anuncios o QR. Escaneas un cartel y arranca una AR en el acto, sin mareos de instalación.

Cómo funciona WebXR por dentro

El navegador expone la WebXR Device API para abrir sesiones (“inline”, “immersive-ar”, “immersive-vr”), consultar poses de cabeza/manos/controladores y dibujar en la pantalla del dispositivo XR. La escena 3D se renderiza normalmente con WebGL o WebGPU, y el audio espacial con WebAudio. Sueles tener un index.html, tu JavaScript y recursos 3D.

En estandarización, primero se define la API y luego los navegadores la implementan (a veces detrás de flags) para recibir feedback. El soporte por versión se consulta en caniuse.com u hojas de ruta de cada navegador.

Antes de picar código, compensa elegir un framework. Si quieres ir “al metal”, puedes trabajar con JavaScript nativo y WebGL/WebGPU; si prefieres productividad, opta por motores o frameworks que ya integren WebXR.

Estado de WebAR y librerías de seguimiento

Aunque WebXR define AR, las implementaciones de tracking AR han avanzado históricamente más despacio que en VR. Por eso, en móviles se usan a menudo librerías de terceros (8thwall, zappar, holoLink) para image/marker tracking y otras técnicas.

Si te decantas por open source, existen alternativas como MindAR, ARToolkit.js o AlvaAR para distintos tipos de seguimiento. Y ojo: hay plataformas que, además de soportar WebXR, aportan sus propias librerías de tracking para cubrir carencias como el image tracking en ciertos navegadores.

SLAM en contexto WebXR

SLAM (Simultaneous Localization and Mapping) combina localización y mapeo en tiempo real. Es la base para anclar objetos virtuales de forma coherente en el mundo físico, detectando planos, paredes y rasgos del entorno a partir de cámara, acelerómetro y giroscopio.

En una experiencia WebXR de AR, el SLAM permite que un modelo 3D “se quede” donde lo colocaste. Sin un buen tracking, los objetos flotan o bailan, y la magia se rompe. Con SLAM bien integrado, la interacción es creíble y estable.

Navegadores y soporte actual

El soporte cambia por versión y plataforma, así que conviene revisar documentación actualizada. Chrome ha liderado la carga e integra WebXR en sus versiones recientes. Firefox y Edge (Chromium) también ofrecen soporte, con matices según sistema y dispositivo. También conviene revisar compatibilidad en plataformas como Windows Mixed Reality.

En visores, el navegador de Meta Quest ofrece WebXR nativo, facilitando experiencias VR y AR desde la web. En el ecosistema de Apple, Safari anunció avances en WWDC23 y en Apple Vision Pro el soporte de WebXR está disponible detrás de un flag; en iPhone/iPad el estado puede diferir y evolucionar con cada release.

Recuerda que la compatibilidad puede variar por versión y por plataforma, y que navegadores antiguos o minoritarios pueden carecer de soporte o tenerlo limitado.

Dispositivos compatibles y panorama de hardware

Siempre que haya un navegador con WebXR, hay opciones. En escritorio, muchos visores funcionan con Chrome usando SteamVR como runtime OpenXR. También existen excepciones: PSVR/PSVR2 o HTC Vive Flow no ofrecen WebXR porque no exponen un navegador compatible. Si necesitas guía de puesta a punto para Windows, consulta la configuración de gafas de realidad virtual en Windows.

A julio de 2023, entre los dispositivos con navegador encontramos: Meta Quest (1/2/3/Pro), Rift/Rift S; Apple Vision Pro; Microsoft HoloLens 1/2; HTC Vive/FIocus/Elite XR; Pico Neo; Huawei VR; Samsung Gear VR/Odyssey; Google Cardboard/Daydream; Varjo VR-1/2/3; Valve Index; Magic Leap 1/2; Lynx R-1; Lenovo ThinkReality; HP Reverb G2. Consulta siempre la versión y el navegador concretos.

Fabricante	Dispositivo
Meta	Quest, Quest 2, Quest Pro, Quest 3, Rift, Rift S
Apple	Vision Pro
Microsoft	HoloLens 1, HoloLens 2
HTC	Vive Focus 3, Vive Elite XR, Vive, Vive Pro, Vive Pro 2
Pico	Neo 3, 4, 4 Enterprise
Huawei	VR 3DoF, VR 6DoF
Samsung	Gear VR, Odyssey
Google	Cardboard, Daydream View
Varjo	VR‑1, VR‑2, VR‑3
Valve	Index
Magic Leap	1 y 2
Lynx	R‑1
Lenovo	ThinkReality VRX, A3
HP	Reverb G2

Donde no haya navegador compatible, no habrá WebXR. Si tu visor permite instalar un navegador moderno con la WebXR Device API, las opciones se multiplican.

Android XR con Chrome: profundidad, manos y dos pantallas

Al adaptar experiencias para Android XR, recuerda que el render es estéreo (una vista por ojo). Debes configurar dos viewports y manejar input con prioridad para manos si el dispositivo lo prefiere. También cambia el modelo de interacción en UI y escala.

// Bucle de frame en una XRSession con WebGL, render estéreo y profundidad
function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const layer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);
  if (!pose) return;

  gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  for (const view of pose.views) {
    const vp = layer.getViewport(view);
    gl.viewport(vp.x, vp.y, vp.width, vp.height);

    // Profundidad estéreo: un mapa por ojo si está disponible
    const depthInfo = frame.getDepthInformation(view);
    if (depthInfo) {
      renderDepthGPU(depthInfo, view, vp);
    }

    renderSceneForView(view);
  }
}

Aspectos a cuidar: necesitas una pose válida para acceder a la profundidad, pose.views entrega una vista por ojo y el bucle corre dos veces, y el pipeline de shaders debe contemplar la oclusión/colisión según el mapa de profundidad.

Interacción con manos e input

La entrada manual es protagonista en Android XR y Chrome la soporta como entrada por defecto. La API de hand‑tracking permite gestos como pellizcar, agarrar o empujar objetos, con eventos y articulaciones por dedo.

En móviles o visores centrados en controladores, puede que la entrada manual no esté disponible o lo esté parcialmente. Tu app debe detectar capacidades y degradar con elegancia a controladores o táctil, sin romper la interacción.

Permisos y privacidad

Para abrir sesiones AR/VR se requieren permisos como seguimiento de cámara y mapeo 3D, y otros (rostro, ojos, manos) están protegidos adicionalmente. El navegador solicita permiso por dominio y recuerda la preferencia; si falta alguno, la sesión no se inicia.

Como en cualquier API web, gestiona bien las denegaciones y comunica al usuario por qué necesitas cada permiso y qué obtiene a cambio.

Casos de uso que ya funcionan muy bien

E‑commerce con AR: muestra productos a escala real en el espacio del cliente. La confianza sube y las devoluciones bajan. Ver un sillón en tu salón antes de comprarlo es un game changer.

Marketing y publicidad: campañas con minijuegos AR y experiencias interactivas que disparan el recuerdo de marca. Desde un QR en un escaparate hasta un filtro que “cobra vida” en la calle.

Industria y formación: simulaciones seguras para capacitación, prevención de riesgos y procedimientos complejos. Gemelos digitales, líneas de producción y checklists interactivos ahorran tiempo y accidentes.

Educación: conceptos abstractos en 3D, laboratorios virtuales y visitas a museos. El aprendizaje inmersivo engancha y se recuerda mejor.

Arquitectura e inmobiliario: revisión de modelos 3D con clientes y recorridos virtuales de propiedades. Decisiones más informadas antes de construir.

Turismo y cultura: tours 360°, exposiciones y patrimonio que se exploran desde casa o in situ con capas AR. La accesibilidad cultural se dispara con un simple enlace.

PWA: el toque “app” sin salir de la web

Una PWA da a tu experiencia XR look & feel de app nativa. Añadir a la pantalla de inicio abre en ventana propia sin barra de URL, y puedes cachear recursos para funcionar offline.

Con service workers y Cache Storage, interceptas peticiones y respondes sin red si procede. Esto mejora la latencia y evita cortes en demos o eventos, donde la conectividad no siempre acompaña.

WebGL, WebGL 2 y el paso a WebGPU

WebGL permite dibujar 2D/3D acelerado por GPU en el navegador, mezclando elementos con el DOM. Los programas combinan JavaScript para control y shaders GLSL ES para la GPU, y está impulsado por Khronos.

El grupo WebGL nació en 2009 con Apple, Google, Mozilla y Opera, y la versión 1.0 llegó en 2011. ANGLE obtuvo certificación OpenGL ES 2.0 en 2011, mejorando la portabilidad; en 2012 Autodesk llevó apps como AutoCAD 360 a WebGL. WebGL 2, basado en OpenGL ES 3.0, se cerró en 2017 (Firefox 51, Chrome 56, Opera 43).

Paralelamente, el W3C empuja WebGPU como sucesor moderno con mejor acceso a la GPU. Para WebXR esto significa escenas más complejas, materiales avanzados y técnicas de render más eficientes.