Web XR: Explorando la Realidad Extendida en la Web

En la era digital actual la forma en la que interactuamos con la tecnología y la información está evolucionando rápidamente. Una de las últimas fronteras en esta evolución es la Realidad Extendida en la Web o WebXR. ¿Te imaginas poder sumergirte en mundos virtuales, explorar entornos aumentados y experimentar de forma inmersiva, todo ello sin la necesidad de aplicaciones o dispositivos especializados? WebXR hace posible esto y mucho más. En este post abordaremos los conceptos básicos de WebXR, su potencial y algunos ejemplos de cómo se está utilizando para cambiar la forma en la que vivimos, aprendemos, compramos y colaboramos en el mundo digital.

Qué es Web XR

WebXR es una tecnología que combina la Realidad Aumentada (AR) y Realidad Virtual (VR) con la potencia y accesibilidad de la web. Es una especificación abierta y estándar desarrollada por el consorcio World Wide Web (W3C) que permite crear experiencias inmersivas directamente en los navegadores web, sin necesidad de descargar aplicaciones adicionales. 

En pocas palabras, WebXR permite a los usuarios experimentar e interactuar con entornos tridimensionales a través de sus dispositivos compatibles, como auriculares o gafas de realidad aumentada o virtual, dispositivos móviles y ordenadores. Proporciona acceso a sensores y capacidades del dispositivo, como seguimiento de movimiento, detección de gestos y reconocimiento de objetos, permitiendo una experiencia más envolvente y realista.

La tecnología WebXR ofrece una amplia gama de aplicaciones prácticas y creativas en diversos campos. Desde experiencias de comercio electrónico en AR que permiten a los usuarios probar productos antes de comprarlos, hasta visitas virtuales a destinos turísticos o colaboración remota en entornos tridimensionales, WebXR está revolucionando la forma en que interactuamos con el mundo digital.

Al aprovechar la potencia de la web, WebXR tiene como objetivo democratizar el acceso a las experiencias inmersivas, permitiendo que cualquiera pueda disfrutar de ellas sin la necesidad de hardware o software especializado. Es una tecnología emocionante que promete un futuro cada vez más interactivo y envolvente en línea.

Tipos de Web XR

A medida que esta tecnología evoluciona, se han desarrollado diferentes tipos de experiencias de WebXR para adaptarse a distintos contextos y necesidades. Estos se diferencian principalmente por la forma en la que se integran la realidad virtual y la realidad aumentada en la web. A continuación planteamos los principales tipos de WebXR y explicamos cómo cada uno de ellos proporciona experiencias únicas y envolventes. 

• WebXR AR: Cabe señalar primero que los inicios de la realidad aumentada en la web fueron mediante librerías y soluciones custom. Se trata de una API reciente en los navegadores que viene a proporcionar un estándar y que permite acceder a los servicios de AR del SO (ARcore en Android y ARKit en iOS) de forma directa. Mediante este acceso directo y al ejecutarse los algoritmos de tracking de forma nativa, el rendimiento es muy superior a la utilización de librerías de tracking que se ejecuten en el navegador. La Web XR AR combina el mundo virtual con el mundo real, superponiendo elementos digitales en el entorno físico a través de la cámara de un dispositivo. WebXR permite a los usuarios ver y manipular objetos virtuales que se integran con su entorno real. Desde pruebas de productos en realidad aumentada para compras online hasta instrucciones interactivas y guías turísticas, la realidad aumentada en la web (Web AR) ofrece una forma innovadora de interactuar con el mundo que nos rodea.
• WebXR VR: La realidad virtual en la web permite a los usuarios sumergirse completamente en entornos virtuales utilizando auriculares de VR. Con WebXR, los usuarios pueden explorar e interactuar con mundos virtuales tridimensionales desde la comodidad de su navegador web. Esta tecnología brinda una experiencia inmersiva que puede incluir la interacción con objetos virtuales, personajes y entornos simulados. Desde juegos y entretenimiento hasta simulaciones de entrenamiento y visualización arquitectónica, la realidad virtual en la web ofrece un potencial ilimitado para crear experiencias inmersivas.
• MR (Mixed Reality) en la Web: La realidad mixta combina elementos del mundo real y del mundo virtual, permitiendo a los usuarios interactuar con objetos físicos y virtuales al mismo tiempo. WebXR facilita la creación de experiencias de realidad mixta en la web, donde los objetos virtuales pueden interactuar con el entorno físico y viceversa. Esta combinación de lo real y lo virtual proporciona un nuevo nivel de interacción y posibilidades, desde juegos y aplicaciones de productividad hasta aplicaciones educativas y colaborativas.
• Transición entre VR y AR: WebXR también permite una transición fluida entre la realidad virtual y la realidad aumentada. Esto significa que los usuarios pueden comenzar una experiencia en realidad virtual y luego pasar a la realidad aumentada sin interrupciones. Esta capacidad de transición suave entre los dos mundos brinda una experiencia más inmersiva y flexible, permitiendo a los usuarios disfrutar de lo mejor de ambos entornos en una sola experiencia.

En resumen, WebXR ofrece diferentes tipos de experiencias que abarcan desde la realidad virtual inmersiva hasta la realidad aumentada que se integra con el entorno físico. Con esta tecnología en constante evolución, estamos presenciando una revolución en la forma en que interactuamos con la web y el contenido digital. Estos diferentes tipos de WebXR están transformando la educación, el entretenimiento, el comercio y muchas otras industrias y acercan al usuario cada vez más a una experiencia online envolvente y altamente interactiva.

Navegadores compatibles

WebXR es una tecnología en constante evolución y su compatibilidad puede variar según el navegador y la versión utilizada. A continuación, enumeramos los navegadores más populares que actualmente admiten WebXR:

• Google Chrome: Chrome ha sido un defensor líder de WebXR y ha implementado el soporte para esta tecnología en sus versiones más recientes, por lo que tendrás que tener instalada la última versión de Chrome para disfrutar de experiencias de WebXR.
• Mozilla Firefox: Firefox también ha implementado el soporte para WebXR en sus versiones más actuales. Al igual que con Chrome, es importante mantener Firefox actualizado para garantizar una compatibilidad óptima con WebXR.
• Microsoft Edge: El navegador de Microsoft, Edge, basado en Chromium, también admite WebXR. Igual que ocurre con los otros navegadores, para aprovechar al máximo esta tecnología asegúrate de tener instalada la última versión.
• Meta Quest 3 (antes Oculus Browser): El navegador diseñado específicamente para los headsets de Meta (las llamadas Oculus Quest antes de ser adquiridas por la compañía de Zuckerberg), también admiten WebXR. Si cuentas con unas Meta Quest 3, puedes acceder a experiencias de WebXR directamente a través de su navegador web. Más información en nuestra página de documentación.
• Safari: hasta la fecha Apple no ha desbloqueado el acceso a Web XR desde su navegador, pero en el Apple Worldwide Developers Conference de 2023 (WWDC23) adelantaron que WebXR muy probablemente estará disponible como «developer preview» en Safari 17. Por el momento solo nos queda esperar.

Como hemos señalado, es importante tener en cuenta que la compatibilidad con WebXR puede variar según la versión del navegador y la plataforma utilizada. Es recomendable verificar las últimas actualizaciones y características de compatibilidad de los navegadores para garantizar una experiencia óptima de WebXR. Además, ten en cuenta que algunos navegadores menos conocidos o más antiguos pueden tener un soporte limitado o nulo para WebXR.

En este sentido, como esta tecnología aún no está soportada en todos los navegadores y dispositivos, ni tampoco cuenta con todas las funcionalidades (como por ejemplo, Image-Tracking), Onirix además de soportar WebXR, también ofrece sus propias librerías de tracking para adaptarse a los requerimientos de cada experiencia y dispositivo de forma automática.

Ejemplos de Web XR

A continuación enumeramos algunos ejemplos de sectores y ámbitos donde la WebXR ofrece una potente solución.

• E-commerce en Realidad Aumentada: WebXR está transformando la forma en que compramos en línea al permitir a los usuarios probar virtualmente productos antes de comprarlos. Por ejemplo, se pueden crear experiencias de Web AR que permitan a los usuarios ver los productos en 3D y mostrarlos así de una forma mucho más real. 

• Marketing, Publicidad y AR: Cada día son más las marcas que están utilizando WebXR para crear campañas publicitarias inmersivas e interactivas. Ofrecen a sus clientes y usuarios experiencias de AR atractivas permitiéndoles interactuar con productos y servicios de una manera memorable. Esto genera resultados muy destacables para las marcas y las diferencia de sus competidores. Te mostramos un ejemplo de un juego de AR como campaña de marketing planteada para generar interacción con el usuario aplicable a cualquier marca, producto o dinámica de gamificación.

• Sector industrial: la WebXR se utiliza en la formación de habilidades laborales, como la capacitación en seguridad, operaciones industriales y procedimientos complejos. Los empleados pueden participar en simulaciones interactivas que los preparan para situaciones reales en el trabajo, lo que mejora la eficiencia y la seguridad laboral, además de la prevención de accidentes y el ahorro de tiempos y recursos. Aquí te mostramos un ejemplo de una experiencia que puedes replicar de un gemelo digital de una línea de producción real de una embotelladora y también esta planta industrial que aparece en el siguiente video.

• Educación Interactiva: WebXR se utiliza en la educación para ofrecer experiencias de aprendizaje interactivas y envolventes. Los estudiantes pueden explorar conceptos abstractos en ciencias, historia y arte mediante experiencias interactivas en 3D, lo que fomenta un aprendizaje más inmersivo y memorable.
• Arquitectura, diseño y construcción: WebXR se utiliza en estos ámbitos para visualizar y explorar modelos en 3D de edificios y espacios. Los clientes pueden ver los modelos en 3D de edificios y espacios, interactuar con diseños e incluso recorrer virtualmente propiedades inmobiliarias. Esto favorece a la toma de decisiones ya que estas serán más informadas antes de la construcción real. 
• Web XR en Turismo – Tours Virtuales: Las visitas virtuales en 360° permiten a los usuarios explorar ubicaciones reales de manera inmersiva. Desde recorridos por museos y exposiciones hasta visitas a destinos turísticos populares, WebXR permite a los usuarios explorar virtualmente lugares de interés desde la comodidad de su hogar.

Estos son solo algunos ejemplos de cómo WebXR se está utilizando en la actualidad y de las soluciones que ofrece a los diferentes sectores. La tecnología sigue evolucionando y su aplicación se extiende a diversas industrias y campos, abriendo nuevas posibilidades para experiencias interactivas e inmersivas en la web. 

SLAM: qué es y cómo se encuadra dentro de Web XR

SLAM (Simultaneous Localization and Mapping) es una tecnología que combina la localización y el mapeo simultáneos en tiempo real. Se utiliza en aplicaciones de realidad aumentada y realidad virtual para rastrear y mapear el entorno físico mientras se realiza un seguimiento preciso de la posición y orientación del dispositivo utilizado.

Dentro del contexto de WebXR, SLAM desempeña un papel fundamental en la implementación de experiencias de realidad aumentada en la web. Permite la superposición de objetos virtuales de manera precisa y coherente en el entorno físico del usuario.

Cuando se habla de SLAM en WebXR, se refiere a la capacidad de los navegadores y dispositivos compatibles de rastrear el entorno en tiempo real y posicionar y alinear objetos virtuales de manera adecuada en relación con el mundo real. Esto permite que los usuarios vean y manipulen objetos virtuales en su entorno físico a través de la cámara de sus dispositivos.

La tecnología SLAM en WebXR utiliza sensores como cámaras, acelerómetros y giroscopios para rastrear la posición y orientación del dispositivo. También utiliza algoritmos avanzados para mapear y reconocer características del entorno físico, como paredes, superficies planas o marcadores visuales.

Con la integración de SLAM en WebXR, los desarrolladores pueden crear experiencias de realidad aumentada en la web que se adapten al entorno del usuario, superponiendo objetos virtuales de manera precisa y manteniéndolos anclados a ubicaciones específicas en el mundo real.

En resumen, SLAM es una tecnología esencial en WebXR que permite la superposición precisa de objetos virtuales en el mundo físico a través de la detección y seguimiento en tiempo real del entorno y la posición del dispositivo. Esto mejora la experiencia de realidad aumentada en la web al proporcionar una interacción más realista y coherente con el mundo real.

Carlos González González

Chief Product Officer at Onirix Linkedin