¿Qué es WebXR y por qué es el futuro de la navegación?

21min

Durante muchos años la web ha estado restringida a las pantallas planas de los ordenadores o los móviles, pero el futuro va más allá. Aunque hoy todavía no sean tan populares los dispositivos para realidad virtual ya se están dando pasos agigantados para incorporar estas experiencias inmersivas en el mundo de la web. De hecho, incluso en las pantallas de los móviles podemos sacarle partido a funcionalidades como la Realidad Aumentada. Para facilitar estos avances existe un estándar que está apoyado por las grandes corporaciones y la propia W3C llamado WebXR.

Índice

¿Qué es WebXR?

WebXR es un estándar que permite crear experiencias inmersivas en el entorno de la web. Consiste en una especificación de API que permite desarrollar experiencias de realidad virtual y realidad aumentada dentro de los propios navegadores, sin tener que depender de complementos de terceros.

Es un estándar muy prometedor que ya se puede utilizar hoy en día y que permite detectar dispositivos compatibles y renderizar contenido inmersivo en ellos, en el entorno del propio navegador.

Cuando vamos a desarrollar experiencias inmersivas, ya sea Realidad Virtual o Aumentada (VR o AR) tenemos dos alternativas. La primera consiste en utilizar las aplicaciones nativas de cada sistema operativo, con SDK oficiales de cada plataforma. Esto permite realizar de una manera más cercana al sistema operativo aplicaciones que utilizan todo el potencial del dispositivo. Sin embargo ahora también tenemos la posibilidad de utilizar WebXR que tiene la ventaja de que funciona en múltiples plataformas, ya que se apoya en estándares abiertos. Es algo parecido a lo que pasa con las apps para móviles, que podemos desarrollar en los lenguajes propios de cada plataforma o hacer aplicaciones en tecnologías abiertas que permitan ejecutarse en distintos dispositivos bajo una misma base de código.

Esta especificación la mantiene el propio World Wide Web Consortium (W3C ) y cuenta con el soporte de los principales actores dentro de la web, incluidos Google, Meta, Microsoft o Apple.

¿Cómo funciona la API WebXR?

WebXR consiste básicamente en un API que nos permite desarrollar experiencias inmersivas mediante JavaScript e interactuar con el hardware de realidad extendida de una manera estandarizada y por tanto compatible con todos los dispositivos donde este estándar esté implementado. Para funcionar requiere resolver retos totalmente distintos a los que los navegadores estaban acostumbrados hasta ahora, ya que el renderizado del contenido es totalmente distinto y necesitan funcionar en tiempo real y con una latencia muy baja.

Inicialización de la sesión y ciclo de vida de una conexión XRSession

Lo primero que tenemos que hacer para negociar una experiencia con WebXR es buscar el objeto navigator.xr que es el que nos permite acceder al API de XR (siglas que engloban tanto VR como AR). En este objeto luego llamamos al método navigator.xr.isSessionSupported() que nos confirma si es posible dar soporte a este tipo de experiencias.

Una vez confirmada la compatibilidad con la tecnología tenemos que solicitar una sesión XR, para lo que se debe especificar el modo deseado.

  • immersive-vr para Realidad Virtual completa
  • immersive-ar para Realidad Aumentada
  • inline para otro tipo de experiencias embebidas en la página.

Una vez tenemos la sesión XR activa podemos acceder a otros puntos del ciclo de vida de la experiencia inmersiva y al bucle de renderizado continuo mediante el cual se va componiendo la animación en el dispositivo.

El bucle de animación optimizado para tasas de refresco ultra altas

El bucle de animación es el que nos permite el renderizado inmersivo y tiene una característica importante: sus elevadas tasas de refresco, que son de 90 Hz, 120 Hz o superiores. Esto es importante para evitar mareos y garantizar una experiencia fluida de realidad virtual.

Para ello en WebXR tenemos el método requestAnimationFrame() pero adaptado para XR. Este método es el que nos permite sincronizar el renderizado con la tasa de refresco nativa del dispositivo.

El bucle de WebXR proporciona un XRFrame donde conseguimos acceder a toda la información temporal y espacial necesaria para renderizar el frame actual.

Obtención de coordenadas espaciales y seguimiento de posición en tiempo real

El API de WebXR es extremadamente sofisticado, porque necesita exponer la posición y orientación del usuario, lo que requiere una cantidad enorme de parámetros. Para ello hay definido todo un sistema de espacios en el objeto  XRReferenceSpace y además varios tipos de espacios:

  • viewer para la posición de la cámara
  • local para un origen fijo cercano al usuario
  • local-floor que alinea el suelo con la posición inicial
  • bounded-floor para espacios delimitados físicamente

En cada frame se pueden consultar todos esos parámetros para obtener la pose actual del usuario, que incluye variables como su posición en las tres coordenadas y la orientación de cada ojo. Todos esos datos se actualizan en tiempo real para que la escena 3D responda instantáneamente a cada una de las acciones del usuario.

Procesamiento de eventos de entrada procedentes de mandos, manos o mirada

Por si todo lo anterior fuese poco, aún tenemos que controlar los eventos de entrada procedentes de los mandos de realidad virtual del usuario, pero también las manos, la mirada o incluso los comandos de voz. Para ello tenemos el objeto XRInputSource que proporciona información sobre el tipo de dispositivo que estamos usando y todos los datos necesarios para poder entender su estado.

Adicionalmente, se trabajan con eventos totalmente distintos que nos permiten escuchar numerosas situaciones de interés para el desarrollo, desde el inicio de las escenas, las acciones del usuario con sus manos o sus mandos, los distintos tipos de gestos, etc.

Renderizado estereoscópico adaptativo para pantallas duales mediante WebGPU o WebGL

Cuando trabajamos con Realidad Cirtual o Realidad Aumentada necesitamos implementar el renderizado estereoscópico. Básicamente se trata de generar dos imágenes distintas, una para cada ojo. Esto es importante porque nuestro cerebro usa dos imágenes ligeramente diferentes, captadas por cada ojo con las cuales puede percibir aspectos como la profundidad. Sin estas imágenes por separado sería imposible crear la ilusión de un espacio tridimensional de manera convincente.

Trabajar con el renderizado estereoscópico implica que tendrás que renderizar la escena completa dos veces por cada frame con proyecciones ligeramente desplazadas entre sí. Es por ello que se necesitan tecnologías poderosas para conseguir que los dispositivos trabajen de manera rápida. En principio la tecnología más utilizada para gráficos en la web era WebGL pero actualmente existe WebGPU, que permite un mejor rendimiento gracias al acceso directo a las unidades de procesamiento gráfico.

Además, WebGPU ya viene preparado para renderizar ambas vistas en un solo pase mediante una tecnología denominada multiview, lo que reduce significativamente la sobrecarga de CPU.

Compatibilidad de hardware y software con WebXR

Lo bueno de WebXR es que es un estándar apoyado por muchos fabricantes, lo que permite trabajar de una manera unificada para distintos tipos de dispositivos y navegadores. No obstante es importante que se disponga del conveniente soporte a todas las APIs y protocolos.

Soporte nativo de WebXR en navegadores móviles, de escritorio y espaciales

Actualmente, existen muchos navegadores que implementan soporte nativo a WebXR, desde Chrome para Android, que fue el primero en aportarlo, seguido de Chrome para escritorio. También tenemos otros fabricantes como Firefox Reality (que ahora se encuentra abandonado por Mozilla aunque ha seguido en desarrollo en otros proyectos como Wolvic) y Safari en iOS y macOS, aunque con un soporte menor a todas las funcionalidades.

Además, tenemos los navegadores espaciales de cada una de las plataformas de VR como los integrados en Meta Quest, PICO, y Apple Vision Pro, que ofrecen soporte nativo completo para WebXR y que son capaces de aprovechar muy bien todas las capacidades de hardware de cada dispositivo.

Compatibilidad e integración con visores de realidad virtual dedicados del mercado

En un mercado emergente como el de la realidad virtual existen numerosos visores que son compatibles actualmente con WebXR. Entre otros fabricantes tenemos Meta Quest 2/3/Pro, PICO, HTC Vive Focus, o Valve Index. Todos ofrecen navegadores integrados que soportan el API estándar de WebXR.

Acceso a funciones de realidad aumentada en teléfonos inteligentes Android e iOS

Los dispositivos Android e iOS también tienen integrado el soporte a funcionalidades de realidad aumentada a través del estándar WebXR.

En ellos podemos usar el API de WebXR con el AR Module, que extiende la especificación base para proporcionar acceso a la cámara, detección de planos, iluminación ambiental y otros factores necesarios para poder hacer experiencias tanto en Chrome como en Safari. Ambas plataformas incluyen acceso a funcionalidades nativas de los dispositivos en el entorno web.

El estándar de bajo nivel OpenXR como puente de comunicación universal

WebXR se construye en muchos dispositivos sobre otro estándar de bajo nivel que se llama OpenXR. OpenXR es otro estándar abierto y desarrollado por el Khronos Group que define una API de bajo nivel para comunicar aplicaciones de VR o AR con el hardware del sistema operativo.

Gracias al soporte mediante OpenXR se consigue que WebXR funcione en múltiples plataformas sin necesidad de implementaciones específicas y costosas para cada dispositivo.

Requisitos y optimización de controladores gráficos para evitar la latencia de renderizado

En los sistemas RV es extremadamente importante la velocidad de renderizado porque cualquier retraso, aunque sea mínimo, puede suponer experiencias muy poco satisfactorias. De hecho no se trata solo de que se produzcan efectos poco realistas, lo peor son posibles mareos que se pueden llegar a producir.

Para minimizar aspectos negativos WebXR está optimizado con diversas técnicas que van desde el renderizado asíncrono o la predicción de movimiento o reproyección de frames.

Casos de uso de WebXR

Las experiencias inmersivas que se pueden conseguir mediante WebXR pueden aplicarse en multitud de casos de uso, desde el entretenimiento, la comercialización de productos hasta la educación. Algunos ejemplos relevantes incluyen:

Probadores virtuales de productos en eCommerce y visualización espacial en 3D

Estos probadores pueden incluir modelos en 3D de los productos, hasta aplicaciones de AR para poder mostrarlos en el entorno donde nos encontramos. Esto es útil para el comercio electrónico y ya está siendo utilizado por algunas empresas relevantes como Ikea.

Formación profesional simulada y entrenamientos interactivos en entornos de riesgo

En la educación podemos sacar mucho partido a la Realidad Virtual o la Realidad Aumentada ya que es posible crear experiencias más realistas para el aprendizaje, algo sobre todo ideal en entornos de alto riesgo como la sanidad o la aviación.

En la actualidad algunas empresas como Verizon, y UPS  están utilizando la formación con VR para sus empleados.

Videojuegos interactivos de acción y puzles de acceso inmediato mediante navegador

Gracias a la Realidad Virtual podemos hacer juegos totalmente innovadores. A veces sin demasiados alardes técnicos estos juegos nos enganchan gracias a sus experiencias inmersivas.

En este área podemos encontrar numerosos ejemplos, desde simples experimentos hasta juegos comerciales. Te recomendamos echar un vistazo a esta lista curada de juegos WebXR o directamente acceder a uno de nuestros preferidos: MoonRider que es un clon del popular juego Beat Saber de las Oculus Quest.

Recorridos virtuales inmersivos para el sector inmobiliario y de turismo digital

En el sector inmobiliario se puede usar WebXR para ofrecer tours virtuales a las propiedades en venta o alquiler. Desde estos paseos virtuales los clientes pueden explorar las casas desde cualquier lugar del mundo. Incluso para el turismo se puede usar este tipo de experiencias por ejemplo para tours virtuales a lugares del mundo o museos.

Algunos museos importantes como el MET, National Galerie de Berlín o British Museum tienen experiencias VR para conocer algunas de sus piezas más importantes, que se pueden ver desde aplicaciones nativas o acceder vía web con WebXR.

Herramientas de visualización de datos científicos y diseño arquitectónico colaborativo

Cuando se trata de visualización de datos complejos, como modelos moleculares, simulaciones climáticas o datos astronómicos por poner algunos ejemplos, se puede sacar un enorme juego a las experiencias inmersivas con WebXR. Gracias a ella investigadores y científicos pueden explorar datos y manipularlos de una manera completamente revolucionaria.

¿Cómo empezar a construir para WebXR?

Comenzar a desarrollar con WebXR es bastante complejo pero afortunadamente existen algunas herramientas y frameworks que consiguen abstraernos de mucha de esa complejidad, consiguiendo una experiencia más al alcance de cualquier persona. Vamos a ver cómo podríamos dar esos primeros pasos usando los frameworks más populares.

Creando escenas en minutos con A-Frame y React Three Fiber

La opción más conocida en el ecosistema de frameworks WebXR es A-Frame. Se trata de una herramienta sencilla que nos puede dar resultados en minutos, usando componentes que se incluyen en las escenas mediante HTML declarativo.

Una escena podría parecerse a este código declarativo:

<a-scene>
  <a-box position='-1 0.5 -3' rotation='0 45 0' color='#4CC3D9'></a-box>
  <a-sphere position='0 1.25 -5' radius='1.25' color='#EF2D5E'></a-sphere>
  <a-cylinder position='1 0.75 -3' radius='0.5' height='1.5' color='#FFC65D'></a-cylinder>
  <a-plane position='0 0 -4' rotation='-90 0 0' width='4' height='4' color='#7BC8A4'></a-plane>
  <a-sky color='#ECECEC'></a-sky>
</a-scene>

A-Frame se encarga de realizar la inicialización de la escena y manejar el bucle de renderizado por nosotros, así como la entrada de controladores. Con todo, nosotros como desarrolladores podemos olvidarnos de las complejidades de crear los mundos 3D.

Obviamente, cuando tenemos que hacer cosas más complejas y hacer comportamientos interactivos personalizados, necesitaremos añadir más código, usando el lenguaje JavaScript.

Te recomendamos aprender más y ver ejemplos de escenas en la página web de A-Frame.

Otra alternativa de framework es React Three Fiber (a menudo conocido con sus siglas R3F). Esta herramienta en realidad es un wrapper de Three.js que trae el mundo del 3D al ecosistema de React, proporcionando un renderizador de Three.js como componente de React. Lo bueno de esta librería es que puedes usar patrones habituales en React como hooks y componentes ya conocidos para los desarrolladores frontend.

R3F en realidad no es una librería para hacer WebXR. En realidad necesitas combinarlo con un complemento extra @react-three/xr que es quien te ofrece componentes como que gestionan sesiones WebXR de manera declarativa.

El código de una escena sencilla con React Three Fiber sería como este:

import { Canvas } from '@react-three/fiber'
import { XR, createPortal } from '@react-three/xr'

function App() {
  return (
    <Canvas>
      <XR>
        <MyScene />
        <createPortal to='overlay'>
          <UIOverlay />
        </createPortal>
      </XR>
    </Canvas>
  )
}

Esta aproximación es perfecta para equipos ya familiarizados con React, permitiendo reutilizar componentes, gestión de estado y otros patrones ya conocidos en el desarrollo frontend.

Las librerías de JavaScript indispensables para la renderización en tiempo real

Dentro del ecosistema JavaScript la biblioteca más popular para gráficos en 3D es Three.js. Como has visto, es capaz de manejar gráficos 3D y trabaja con WebGL. Sirve como base para muchas herramientas que luego permiten aplicar ese trabajo con 3D en el mundo de la realidad virtual o aumentada.

De todos modos no es la única. Otra alternativa popular conocida es Babylon.js, que está desarrollada por Microsoft. En realidad consiste en un motor de juegos completo con soporte para físicas, colisiones o animaciones pero tiene soporte para WebXR, con lo que puedes crear mundos virtuales o aplicaciones de realidad aumentada.

Gráficos con calidad de consola directamente en tu navegador web

Dentro del ecosistema web habíamos usado de manera tradicional WebGL, sin embargo la llegada de WebGPU ha aportado un mejor rendimiento y la posibilidad de usar API gráficas modernas como Vulkan, Metal, o DirectX. De este modo, se está mejorando mucho el rendimiento de las aplicaciones web que usan gráficos, algo necesario al nivel de la VR.

Actualmente Three.js está implementando WebGPU, aunque todavía a modo experimental, pero ya se va viendo que la tecnología es capaz de manejar grandes millones de triángulos y modelos de iluminación diversos con hardware moderno.

¿Cómo emular visores de realidad mixta desde las DevTools de Chrome?

Para probar las funcionalidades de realidad virtual necesitaríamos en principio de un dispositivo de visión de realidad virtual. No todos disponemos de uno en casa, incluso desarrollar con ellos no resulta del todo ágil porque dificulta el flujo de trabajo.

Para los casos en los que quieras acceder a estos mundos virtuales puedes trabajar con un emulador en el navegador. La herramienta que te recomendamos actualmente se ofrece como extensión para Chrome: Immersive Web Emulator.

Screenshot

¿Por qué la WebXR es el futuro de la navegación frente a las apps nativas?

Si se trata de navegación siempre es ideal contar con estándares abiertos, ya que nos permiten ampliar el espectro de nuestros desarrollos a todo tipo de plataformas. Esto es especialmente importante, ya que todavía el mundo de VR/AR está todavía en un constante avance y los estándares siempre van despacio pero seguros, haciendo que nuestros desarrollos sean capaces de ejecutarse bien a lo largo del tiempo.

En otras palabras, si aplicamos al estándar estaremos más seguros que el ciclo de vida de nuestro software será el motor posible. Pero hay más ventajas que queremos destacar.

Acceso instantáneo a través de un simple enlace (URL)

Algo ideal es la capacidad de compartir experiencias inmersivas mediante un enlace. Esto es genial cuando quieres simplemente mandar el enlace a través de una red social o Whatsapp. El usuario recibirá un enlace y podrá acceder fácilmente, aplicando la experiencia que su navegador sea capaz de aportar. Esta posibilidad, frente a enviar un enlace a una store para un determinado hardware es mucho mejor, ya que servirá para cualquier persona y dispensa al usuario de la necesidad de descargar e instalar nada.

Escribe el código una vez y ejecútalo en cualquier dispositivo XR

Pero lo más importante para nosotros es que, usando una misma base de código podrás ejecutar tu escena en cualquier dispositivo de VR del mercado. No necesitas desarrollar aplicaciones nativas para cada tipo de gafas de realidad virtual o sistema operativo móvil. Tampoco necesitas mantener versiones separadas, lidiar con SDKs propietarios, o esperar aprobación de reviews en cada una de las tiendas de aplicaciones.

¿Cómo exprimir la potencia del hardware local desde un entorno web?

Otra cosa importante es que usando las tecnologías abiertas podrás beneficiarte del acceso a hardware usando estándares cada vez más avanzados. Por ejemplo ya hemos mencionado WebGPU pero existen otras tecnologías que todavía aportarán más posibilidades como WebHID, que permite comunicación con dispositivos USB como volantes o mandos especializados. También tienes WebUSB y WebSerial que habilitan comunicación con hardware industrial, impresoras 3D, y microcontroladores.

Descentralización frente a monopolio

La web abierta permite que cualquier desarrollador publique experiencias WebXR y las ponga a disposición del público. Esto supone una importante democratización y evitar además comisiones de los stores de apps cuando tratamos de cobrar por ciertos servicios.

Seguridad, privacidad y el control de los datos en la web espacial

La aparición de nuevas tecnologías como WebXR también plantea nuevos retos que tendremos que abordar, en campos como la seguridad o la privacidad.

El desafío de la privacidad biométrica

Algo que no se suele pensar cuando se usa dispositivos VR es que los visores XR son capaces de rastrear movimientos oculares, expresiones faciales y otros tipos de gestos de las manos. Esto no es malo de por sí, pero podría ser que el acceso a todos estos datos puedan dar datos a las aplicaciones, más allá de los que deseamos compartir.

Por ejemplo, podrían deducirse condiciones médicas de los usuarios, estados emocionales o incluso preferencias sexuales. Todo esto se mitiga por medio de la aplicación de permisos explícitos en los navegadores, de modo que el usuario pueda dar su autorización antes de exponer datos de seguimiento de manos, ojos o cara.

Mapeo del entorno físico

Las experiencias AR escanean y mapean el espacio físico del usuario. Nuevamente, esto no debe ser un problema y muy probablemente es justo lo que queremos para conseguir la funcionalidad completa de la aplicación. Sin embargo, puede que ese acceso a información esté exponiendo datos sensibles, como ubicación de elementos sensibles como cámaras de vigilancia, documentos, etc.

WebXR aborda esta problemática haciendo un mapeo local, dentro del dispositivo. Para la nube solo se expone información abstracta sin detalles que puedan comprometernos.

El sandbox del navegador

En el navegador tenemos la posibilidad de guardar datos solamente con las tecnologías que éste nos proporciona. Además existe aislamiento de sitios. Por todo ello es más complicado que un sistema WebXR acceda a datos de otras pestañas o al sistema de archivos local, lo que mejora la seguridad con respecto a las aplicaciones nativas.

Diseño de interfaz (UI) y experiencia de usuario (UX) en entornos tridimensionales

Si alguna vez te pones a desarrollar para dispositivos de realidad virtual o quieres hacer aplicaciones de realidad aumentada verás que las prácticas para definir la experiencia de usuario son totalmente distintas. Es por ello que tenemos que aprender nuevos principios de UI y UX para los entornos tridimensionales.

Interacciones naturales

Las interacciones en los mundos de realidad virtual se dan a través de gestos naturales, ya sea con la mano, comandos por voz o incluso mediante la mirada. Esto es diametralmente opuesto a la web tradicional, donde utilizamos interfaces como botones, que si los usas en mundos virtuales quedará un poco raro, a no ser que justamente quieras imitar un contexto de consola de botones de alguna herramienta real.

Pero aún es más, los objetos en los mundos de realidad virtual deben responder a proximidad, cambiar de tamaño al ser agarrados o desplazados, y proporcionar feedback háptico o auditivo.

El reto del diseño responsivo espacial

Todo el mundo tenemos en la cabeza la web responsive que se encarga de adaptar los layouts a diferentes tamaños de pantalla. Si quieres hacer experiencias responsivas en mundos de realidad virtual el tipo de adaptaciones es totalmente distinto. Por ejemplo, piensa como tendrías que realizar una experiencia de estancia grande cuando realmente estás utilizando el dispositivo en una habitación pequeña.

Para resolver estas necesidades lo que se viene utilizando son técnicas como el escalado dinámico, partir las estancias en diferentes escenas o crear experiencias sentado versus de pie.

Estrategias de diseño para mitigar la fatiga visual y la cinetosis (Motion Sickness)

Otro de los retos de la VR es la cinetosis, que ocurre cuando hay discrepancia entre el movimiento visual percibido y la sensación del cuerpo. Por ejemplo, la imagen muestra que nos movemos pero el cuerpo está estático.

En estos casos puede entrar una sensación de mareo. Poco a poco la tecnología va mejorando para evitar esas sensaciones que se mitigan con mayores tasas de refresco o dejando que el usuario controle los movimientos de otras maneras, como el teletransporte en lugar del movimiento.

También se produce una mayor fatiga visual al usar dispositivos VR que se puede compensar aumentando elementos como los textos o realizando descansos en intervalos de tiempo.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: